- 浏览: 161633 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
qq_21380041:
954414957@qq.com
HTML5数据可视化第二弹:打造最美3D机房 -
qq_21380041:
楼主,求代码
HTML5数据可视化第二弹:打造最美3D机房 -
luoaz:
楼主能不能传个源码的附件上来, 分享学习下呢?
HTML5+WebGL 3D机房开发实例 -
xiaosi1278:
你好能不能把你讲的源代码发一下!!做参考403541110@q ...
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定 -
TWaverGeek:
BigBird2012 写道您好,您能把您使用TWaver导入 ...
TWaver导入导出AutoCAD DXF图纸
TWaver作为一款专业的图形界面控件,可以应用在各行各业中。本文我们就来详细介绍一下TWaver如何绘制出电力系统的界面。我们现在看看几张电力系统的图:
某变电站设备接线图一
某变电所的接线图二
当然这些是我在网上搜索的一些资源,那么TWaver是否能实现这样的界面呢?回答是肯定的,我们先来分析一下,电力电气系统中这些界面都是由很多电气元素组成的,比如变压器,刀闸,开关,接地开关,电容器,发电机等。
接下来我们看看如何去扩展这些电气元素,先整个简单的刀闸,刀闸一般有两种状态,打开关闭,因此我们可以定义一个刀闸的类,继承于ResizableNode,添加turnOn的属性来控制开关状态
public class Switch extends ResizableNode{ private boolean turnOn = true; public Switch() { super(); init(); } public Switch(Object id){ super(id); init(); } private void init(){ this.setSize(5,30); this.putBorderColor(Color.black); this.putBorderInsets(12); } public String getUIClassID() { return SwitchUI.class.getName(); } public boolean isTurnOn() { return turnOn; } public void setTurnOn(boolean turnOn) { if(this.turnOn != turnOn){ boolean oldValue = this.turnOn; this.turnOn = turnOn; this.firePropertyChange("turnOn", oldValue, this.turnOn); } } }
接着需要在UI上需要根据turnOn的属性来绘制开关的形状,下面贴一下主要的paint方法
public void paintBody(Graphics2D g) { g.setStroke(TWaverConst.DOUBLE_WIDTH_STROKE); Switch switzh = (Switch)this.getElement(); //get position final Point location = switzh.getLocation(); final Dimension size = switzh.getSize(); boolean trunOn = switzh.isTurnOn(); final int x = location.x; final int y = location.y; final int width = size.width; final int height = size.height; //draw color frame g.setColor(new Color(170,0,225)); g.drawOval(x, y, width, width); g.drawOval(x, y+height-width, width, width); if(trunOn){ g.drawLine(x+width/2, y+height-width, x+height/2,y+width); }else{ g.drawLine(x+width/2, y+height-width, x+width/2, y+width); } }
通过一个main来运行看看扩展出来的效果:
这是简单的刀闸元素,扩展起来还是比较容易的。接下来来个稍微复杂一点的--接地开关,同样它和刀闸一样,也有两种状态
这个例子中我们给接地开关设置了几个不同的方向,同样上面的也可以这么做一下处理,我们来看看如何绘制这个接地开关的
public void paintBody(Graphics2D g) { g.setStroke(TWaverConst.BASIC_STROKE); g.setColor(Color.black) EarthingSwitch earthingSwitch = (EarthingSwitch)this.getElement(); final Point location = earthingSwitch.getLocation(); boolean turnOn = earthingSwitch.isTurnOn(); int position = earthingSwitch.getSwitchPosition(); final int x = location.x; final int y = location.y; int width = earthingSwitch.getWidth(); int height = earthingSwitch.getHeight(); //draw body if(turnOn){ if(position == Utils.SWITCH_POSITION_TOP){ g.drawLine(x+width/4, y, x+width/4*3, y); g.drawLine(x+width/6, y+2, x+width/6*5, y+2); g.drawLine(x, y+4, x+width, y+4); g.drawLine(x+width/2, y+4, x+width/2, y+7); g.drawLine(x+width/2, y+7, x+width, y+height-10); g.drawLine(x+width/2, y+height-3, x+width/2, y+height); }else if(position == Utils.SWITCH_POSITION_LEFT){ //transfer width and height int middle = width; width = height; height = middle; g.drawLine(x,y+height/4, x, y+height/4*3); g.drawLine(x+2, y+height/6, x+2, y+height/6*5); g.drawLine(x+4, y, x+4, y+height); g.drawLine(x+4, y+height/2, x+7, y+height/2); g.drawLine(x+7, y+height/2, x+width-10, y); g.drawLine(x+width-3, y+height/2, x+width, y+height/2); }else if(position == Utils.SWITCH_POSITION_BOTTOM){ g.drawLine(x+width/4, y+height, x+width/4*3, y+height); g.drawLine(x+width/6, y+height-2, x+width/6*5, y+height-2); g.drawLine(x, y+height-4, x+width, y+height-4); g.drawLine(x+width/2, y+height-4, x+width/2, y+height-7); g.drawLine(x+width/2, y+height-7, x, y+10); g.drawLine(x+width/2, y+3, x+width/2, y); }else if(position == Utils.SWITCH_POSITION_RIGHT){ //transfer width and height int middle = width; width = height; height = middle; g.drawLine(x+width,y+height/4, x+width, y+height/4*3); g.drawLine(x+width-2, y+height/6, x+width-2, y+height/6*5); g.drawLine(x+width-4, y, x+width-4, y+height); g.drawLine(x+width-4, y+height/2, x+width-7, y+height/2); g.drawLine(x+width-7, y+height/2, x+10, y); g.drawLine(x+3, y+height/2, x, y+height/2); } }else{ if(position == Utils.SWITCH_POSITION_TOP){ g.drawLine(x+width/4, y, x+width/4*3, y); g.drawLine(x+width/6, y+2, x+width/6*5, y+2); g.drawLine(x, y+4, x+width, y+4); g.drawLine(x+width/2, y+4, x+width/2, y+7); g.drawLine(x+width/2, y+7, x+width/2, y+height-3); g.drawLine(x+width/2, y+height-3, x+width/2, y+height); }else if(position == Utils.SWITCH_POSITION_LEFT){ //transfer width and height int middle = width; width = height; height = middle; g.drawLine(x,y+height/4, x, y+height/4*3); g.drawLine(x+2, y+height/6, x+2, y+height/6*5); g.drawLine(x+4, y, x+4, y+height); g.drawLine(x+4, y+height/2, x+7, y+height/2); g.drawLine(x+7, y+height/2, x+width-3, y+height/2); g.drawLine(x+width-3, y+height/2, x+width, y+height/2); }else if(position == Utils.SWITCH_POSITION_BOTTOM){ g.drawLine(x+width/4, y+height, x+width/4*3, y+height); g.drawLine(x+width/6, y+height-2, x+width/6*5, y+height-2); g.drawLine(x, y+height-4, x+width, y+height-4); g.drawLine(x+width/2, y+height-4, x+width/2, y+height-7); g.drawLine(x+width/2, y+height-7, x+width/2, y+3); g.drawLine(x+width/2, y+3, x+width/2, y); }else if(position == Utils.SWITCH_POSITION_RIGHT){ //transfer width and height int middle = width; width = height; height = middle; g.drawLine(x+width,y+height/4, x+width, y+height/4*3); g.drawLine(x+width-2, y+height/6, x+width-2, y+height/6*5); g.drawLine(x+width-4, y, x+width-4, y+height); g.drawLine(x+width-4, y+height/2, x+width-7, y+height/2); g.drawLine(x+width-7, y+height/2, x+3, y+height/2); g.drawLine(x+3, y+height/2, x, y+height/2); } } }
还有一些其他的元素,比如开关,发电机,变压器这些可以直接通过TWaver提供的customDraw很容易的配置出来,这些就比较简单了,此处代码省略100字,直接上图了
有了这些基础的元素,那么来绘制电力系统界面就显得不是那么复杂了,我们通过上面扩展的这些电力元素用twaver的工具画出了一个电力系统图,如下:
最后我们可以在界面上加上交互,比如双击打开关闭刀闸开关,然后添加自己的业务,这样一个简单的电力系统界面就完成了
network.addElementDoubleClickedActionListener(new ActionListener(){ public void actionPerformed(ActionEvent e) { Element ele = network.getSelectionModel().lastElement(); if(ele instanceof Switch){ boolean turnOn = ((Switch)ele).isTurnOn(); ((Switch)ele).setTurnOn(!turnOn); } } });
同样最先贴出来的两张变电所的图是不是也就很容易的做出来呢!最后再附上TWaver做的另一张电力界面图
原文链接:http://twaver.servasoft.com/?p=3945
发表评论
-
数字图像处理技术在TWaver可视化中的应用
2015-04-16 14:30 684数字图像处理(Digital Image Processin ... -
TWaver HTML5之树形布局
2015-03-11 10:53 1379转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没 ... -
TWaver推智能手表挑战华为苹果
2015-03-04 10:35 5842015年的春节刚过,苹果、华为、三星就紧锣密鼓的发布了各自 ... -
TWaver矢量小试——Android演进路线图
2015-02-02 11:56 1196还有半个多月就到春节了,年底相信很多公司都会进行年度总结以及 ... -
用TWaver加载大型游戏场景一例
2015-01-06 13:52 702游戏中经常会出现一些大型的户外场景,例如一个小镇、一座古城等 ... -
22万个木箱!TWaver 3D极限压榨
2014-12-29 11:31 858打开个门户网站都千呼万唤,我们还能期待网页上的3D技术会有 ... -
巧用TWaver 3D 矢量图形功能
2014-10-29 11:14 569的确,提起TWaver,大家想到的首先是“电信拓扑图组件”。 ... -
TWaver GIS在电信中的使用
2014-10-09 14:56 522GIS作为信息系统的重要组成部分,在电信行业中的应用由来已久。 ... -
如何创建环型、树型双层布局
2014-09-19 10:58 795TWaver的Demo中有常用的环型布局和树型布局,但是当网 ... -
如何创建发光的环路
2014-09-16 13:44 743先看看发光链路的运行效果:在这个Demo中主要包含三个技术 ... -
Autolayout性能优化
2014-09-03 11:05 950客户的需求就是我们进步的动力。最近有客户提出大数据量Top ... -
DNA分子结构3D模型
2014-08-21 15:16 849生物信息资源更新越来 ... -
TWaver版3D化学元素周期表
2014-07-14 10:17 1679很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧 ... -
在MONO Design中使用Flex3D
2014-07-08 10:04 643在项目开发组的努力下,HTML5 3D 的开发包变得越来越优 ... -
TWaver 3D技术在油田行业的应用
2014-05-26 15:29 636油田信息化是是数字油 ... -
用TWaver实现组合的Chart
2013-01-21 12:14 1387TWaver组件中提供了一些通用的Chart,比如Line ... -
TWaver Java内存占用测试
2012-12-25 13:50 811TWaver Java的性能大家有 ... -
JTree实现文件树
2012-11-05 10:57 616这篇文章介绍的内容其实跟TWaver的组件没有任何关系,但是个 ... -
TWaver With JavaFX
2012-10-10 18:08 776JavaFX Script被抛弃以后,很久不关心JavaFX了 ... -
如何让HTML5的表格支持后台排序与分页
2012-08-21 17:41 1340TWaver HTML5发布已有一段时间,使用的客户也是逐渐增 ...
相关推荐
TWaver是美国Serva Software公司的产品,是应用最为广泛的电信专业图形界面开发工具包,在电信行业应用非常广泛。TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 TWaver的图形组件库中提供了...
twaver-flex中文用户手册和相关资料 非常强大
twaver示例可直接放到jetty下运行,含twaver.js alarm.html资源。
twaver jar在TWaver传统的2D应用中,近一年非常突出地出现了一种需求,那就是希望能够在同一个页面内显示多种层次的网络结构
TWaver_Flex中文帮助文档,对网络拓扑图开发很实用!
twaver 3D机房接口文档
TWaver-flex的库TWaver.swc
twaver for flex 开发手册
twaver-java-3.7 文档
自己整理的关于Twaver组件在Flex中的使用,不对的地方忘多提意见
Twaver学习案例的例子
最新的TWaver可视化学习开发包,用TWaver做出更炫更美的界面。
是twaver学习的最佳资料,大家快来下巴
Twaver java在不同节点和连接情况下的性能测试代码和测试报告
twaver web结合extjs源码学习资料
Twaver java开发帮助文档,英文版的。
TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...
TWaver-java的库TWaver.jar