前几天的《Swing版小小网管》让我想起前阵子做过的一个企业网管项目。客户是一个工厂,搞生产制造的。人并不多,四、五十人,多数是车间工人。办公室的也就二十多人,网络结构并不复杂:ADSL宽带接入,加上几个AP进行信号扩展;台式机、服务器、笔记本电脑,加上零星的手机上网,仅此而已。大伙知道:做企业网管是比较艰难的,工作量大,吃力不讨好,竞争激烈,卖不了几个钱,不容易啊!但是为了能够在项目中多点筹码,界面还是要做的精益求精才行。
先到工厂详细调研了网络结构图,并绘制了一个简单的草图结构(不好意思,写字越来越难看了,还不如我小学时候的水平,都是电脑键盘给害的哈):
![](http://dl.iteye.com/upload/attachment/301086/bde9330b-c6c7-344f-8c2f-5b92fae9106f.png)
其中ADSL和几个无线AP是网络主干,各个办公室的结构都是星形结构,通过网线进行汇聚,通过AP进行互联。我问工厂的车间主任为啥这样搞,他说使用AP的原因是工厂正在进行改造,几个办公室之间距离较远,隔着一个大院子,网线铺设不便;另外几个车间里头也有电脑需要联网,在嘈杂混乱火星直冒的车间里头,弄网线就更麻烦了。
要在网管里面呈现和监控这个网络,对俺来说不算难事。不过我需要一个好看一点的流量监控的图表。首先通过SNMP获取AP中的iftable中的端口,并获取其实时流量,然后放置在拓扑图的link对象中。为了不给网络造成太多负担,网管默认每5秒钟获取一次数值,并存储连续100个数值,多余的抛弃。
绘制chart的图并不复杂,整个chart呈一个长矩形状,分为三段(老、中、轻),用不同的颜色进行渲染。
public void paintIcon(Component c, Graphics g, int x, int y) {
Graphics2D g2d = (Graphics2D) g;
Rectangle bounds = getBounds();
g2d.setColor(background);
g2d.fill(bounds);
Point location = bounds.getLocation();
int startX = location.x;
int startY = location.y + chartHeight;
GeneralPath path = new GeneralPath();
path.moveTo(startX, startY);
int[] values = getChartDataValues();
for (int i = 0; i < values.length; i++) {
path.lineTo(startX + i, startY - values[i]);
}
path.lineTo(startX + chartWidth, startY);
path.closePath();
g2d.setColor(chartColor1);
g2d.fill(path);
//clip center part, paint with color2.
Shape oldClip = g2d.getClip();
Rectangle clip = new Rectangle(bounds.x + chartWidth / 4, bounds.y, chartWidth / 2, chartHeight);
g2d.setClip(clip);
g2d.setColor(chartColor2);
g2d.fill(path);
g2d.setClip(oldClip);
g2d.setColor(Color.lightGray);
g2d.draw(bounds);
g2d.setColor(Color.darkGray);
g2d.setFont(font);
int textX = location.x + 5;
int textY = location.y + chartHeight / 2 + font.getSize() / 2;
g2d.drawString("Sum", textX, textY);
int speed = 100;
if (getElementUI().getElement() instanceof MyLink) {
speed = ((MyLink) getElementUI().getElement()).getSpeed();
}
String text = NumberFormat.getInstance().format(speed) + " kbit/s";
Rectangle2D textBounds = g2d.getFontMetrics().getStringBounds(text, g2d);
textX = (int) (location.x + chartWidth - textBounds.getWidth() - 5);
g2d.drawString(text, textX, textY);
}
显示效果如下:
![](http://dl.iteye.com/upload/attachment/301088/05da2069-7eb3-376f-babd-676793755f03.png)
另外,对连线的效果也进行了一些处理。用直线连接无疑太土气了,来点曲线增加一点趣味。曲线用一个对称的抛物线来处理,根据不同的角度进行自动调整:
public GeneralPath getPath() {
Point from = this.getFromPoint();
Point to = this.getToPoint();
Point middle = new Point((from.x + to.x) / 2, (from.y + to.y) / 2);
boolean wider = (Math.abs(from.x - to.x) > Math.abs(from.y - to.y));
GeneralPath myPath = new GeneralPath();
myPath.moveTo(from.x, from.y);
if (wider) {
myPath.quadTo(middle.x, from.y, middle.x, middle.y);
myPath.quadTo(middle.x, to.y, to.x, to.y);
} else {
myPath.quadTo(from.x, middle.y, middle.x, middle.y);
myPath.quadTo(to.x, middle.y, to.x, to.y);
}
return myPath;
}
其实我发现,虽然咱写程序的号称数学都必须很非常贼NB,可是真正的几何和数学真的都忘的差不多了,不知道你还能不能随手写下二次方程的根,椭圆的几何方程,或者球体的面积公式?反正我是不行了。
不管咋说,俺还是九牛二虎之下整出了几个花里胡哨的path出来。毫无技术含量,你可别被俺忽悠了:
接下来,再把SNMP获得的数据放入link中的chart呈现。为了避免泄密的麻烦,附件的demo俺去掉了这些业务代码,用一个thread模拟代替了:
Thread thread = new Thread() {
private Vector links = null;
private Vector getLinks() {
if (links == null) {
links = new Vector();
Iterator it = network.getDataBox().iterator();
while (it.hasNext()) {
Object o = it.next();
if (o instanceof MyLink) {
MyLink link = (MyLink) o;
links.add(link);
}
}
}
return links;
}
@Override
public void run() {
while (true) {
Iterator it = getLinks().iterator();
while (it.hasNext()) {
Object o = it.next();
if (o instanceof MyLink) {
MyLink link = (MyLink) o;
createRandomValue(link);
if (TWaverUtil.getRandomInt(10) == 1) {
link.setSpeed(TWaverUtil.getRandomInt(10000));
}
}
}
try {
Thread.sleep(100);
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
private void createRandomValue(MyLink link) {
int value = link.getLastChartValue();
int change = TWaverUtil.getRandomInt(3) - 1;
value = value + change;
value = Math.min(value, 100);
value = Math.max(value, 0);
link.addChartValue(value);
}
};
thread.start();
}
再到google上物色几个清爽的图标。
![](http://dl.iteye.com/upload/attachment/301092/8f8fd14b-4dfb-3e25-8433-941111e51700.png)
对了,在结束之际,突然想起一件事:AP上的晃悠悠的电线丝,可不是icon的一部反,而是咱draw上去的!这个小亮点咱得说说:主要思路就是new一个path,模拟其曲线的路径,然后在Swing的paint时候给附加上去。代码如下:
@Override
public void paintBody(Graphics2D g2d) {
super.paintBody(g2d);
if (((MyNode) getElement()).isWireVisible()) {
Object oldValue = g2d.getRenderingHint(RenderingHints.KEY_ANTIALIASING);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(wireColor);
g2d.setStroke(TWaverConst.BASIC_STROKE);
g2d.draw(createWireShape());
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, oldValue);
}
}
private Shape createWireShape() {
Point point = this.getHotspot();
int x = point.x - 25;
int y = point.y + 23;
GeneralPath path = new GeneralPath();
path.moveTo(x, y);
path.curveTo(x + 20, y - 20, x + 50, y - 10, x + 48, y);
path.curveTo(x + 48, y + 15, x + 10, y + 10, x + 12, y - 5);
path.curveTo(x + 12, y - 20, x + 50, y - 20, x + 53, y);
path.quadTo(x + 53, y + 3, x + 51, y + 5);
return path;
}
这下终于完整了。看看“晃悠悠的铁丝”效果:
![](http://dl.iteye.com/upload/attachment/301112/64c143c7-876a-39ad-9044-828230439b1c.png)
接下来,在程序里面整合一下,整个效果就出来了:
![](http://dl.iteye.com/upload/attachment/301094/79b1ea58-847a-3b49-9678-bbbcb6c208ee.png)
为了和大家共同学习和交流,附上的源代码是从项目中抽取了Swing展示部分,去掉了所有业务逻辑,仅仅为了和大家共享Swing的展示能力,以及拓扑图的制作思路。虽然不是惊世骇俗美轮美奂,但是俺比较喜欢这种简洁、清新的风格。
老规矩,有代码共享。在这里可以下载全部源代码、可执行文件、图标资源等内容。
祝大家编程愉快!
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0030/1086/bde9330b-c6c7-344f-8c2f-5b92fae9106f-thumb.png)
- 大小: 200.9 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0030/1088/05da2069-7eb3-376f-babd-676793755f03-thumb.png)
- 大小: 689 Bytes
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0030/1090/451ba04e-d16e-327c-9c00-cb7c923a9768-thumb.png)
- 大小: 7.5 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0030/1092/8f8fd14b-4dfb-3e25-8433-941111e51700-thumb.png)
- 大小: 57.2 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0030/1094/79b1ea58-847a-3b49-9678-bbbcb6c208ee-thumb.png)
- 大小: 121.7 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0030/1112/64c143c7-876a-39ad-9044-828230439b1c-thumb.png)
- 大小: 28.5 KB
分享到:
相关推荐
在IT领域,网络拓扑图是一种重要的工具,用于可视化地表示计算机网络的结构和组件之间的连接。Java网络拓扑图的实现通常是通过编程语言(如Java)与前端框架(如Vue.js)结合来完成的,以创建交互式的、可自定义的...
在网络架构与设计领域中,拓扑图是一种非常重要的工具,它可以帮助我们清晰地了解网络的结构和布局。根据提供的信息,“网络逻辑拓扑图和详细拓扑图”这一主题涉及到了网络拓扑图的不同层次和细节程度。接下来,我们...
阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云...
在IT领域,网络拓扑图是一种直观展示网络设备、连接关系和流量走向的图形化工具。使用Qt框架来实现网络拓扑图,可以利用其强大的图形界面和事件处理能力,为用户创建交互式且可自定义的网络表示。本文将深入探讨如何...
网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络...
在"QT实现网络拓扑图"这个主题中,我们将深入探讨如何利用QT中的QGraphicsView、QGraphicsPixmapItem和QGraphicsLineItem模块来构建一个多层子网的网络拓扑图表。 QGraphicsView是QT中的一个关键组件,它是用来展示...
拓扑图通常包含父节点和子节点的概念,这里的描述"父节点点开有子节点,子节点点开,有子节点的子节点..."揭示了拓扑图的递归和层次性。在这样的图形中,用户可以通过点击父节点来展开其子节点,进一步探索更深层次...
校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图
等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 ...
电厂 MIS 功能图 拓扑图 电厂 MIS 功能图 拓扑图 电厂 MIS 功能图 拓扑图
现代化,信息化,网络化的图书馆网络拓扑图。。。
在IT领域,网络拓扑图是一种直观展示网络设备和连接关系的图形表示,它有助于管理和维护复杂的网络系统。本文将深入探讨如何使用C# WinForm结合Microsoft Visio库来实现网络拓扑图的绘制和交互功能。 首先,C#作为...
**标题解析:** "wpf 网络拓扑图" 指的是使用Windows Presentation Foundation(WPF)技术创建的展示网络设备间连接关系的图形界面。这种拓扑图通常用于显示网络设备如服务器、交换机、路由器等在逻辑或物理上的连接...
大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图
网络安全等级保护拓扑图大全(100张网络安全架构拓扑图).pdf
网络拓扑绘图 网络拓扑绘图 网络拓扑绘图 网络拓扑绘图
在IT行业中,拓扑图是一种重要的可视化工具,用于表示网络、系统或进程之间的关系和连接。在本场景中,我们关注的是"C#拓扑图",这是一个基于C#编程语言实现的拓扑图示例,可能被应用于电信网管系统中,以便监控和...
等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+...
思科实验拓扑图思科实验拓扑图思科实验拓扑图思科实验拓扑图思科实验拓扑图
在IT领域,网络拓扑图是表示网络设备、服务器、线路等元素间连接关系的图形化表示,对于网络管理员来说,它至关重要,因为它能够直观地展示网络结构,帮助理解和管理复杂的网络环境。 Qunee网络拓扑图主要由以下几...