`

TWaver在电力系统中的应用

阅读更多

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

  • 大小: 25.7 KB
  • 大小: 42.8 KB
  • 大小: 1.9 KB
  • 大小: 8.6 KB
  • 大小: 13.1 KB
  • 大小: 95.7 KB
  • 大小: 224.6 KB
0
0
分享到:
评论

相关推荐

    twaver.js使用示例

    5. **报警系统模拟**:“alarm”可能是一个具体的应用场景,展示如何使用twaver.js来设计和实现报警系统的图形界面,包括节点的状态变化、事件响应等。 6. **交互操作**:学习如何利用twaver.js库实现图形元素的交互...

    twaver-flex中文用户手册

    2. **基本元素**:讲解Twaver中的基础图形元素,如节点(Node)、边(Edge)、图层(Layer)和图表(Chart),以及如何创建、编辑和管理这些元素。 3. **图形样式**:详细阐述如何自定义元素的外观,包括形状、颜色、大小、...

    flex Twaver组件使用

    使用TWaver Flex时,需要在应用程序的XML命名空间中引用TWaver库,即添加`xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"`。这样便可以访问TWaver提供的各种功能和组件。 TWaver Flex的数据模型核心是`...

    TWaver文档

    - **DataBox**是TWaver中的一个重要组件,用于管理数据。 - 通过简单的代码示例可以看出,DataBox组件非常易于使用,可以方便地创建节点、设置位置、添加报警状态等。 - 此外,DataBox还支持复杂的层次结构,例如...

    TWaver的3d图形组件库,小demo

    TWaver是一个专业级的图表和数据可视化工具,它提供了HTML5版本的3D图形组件,允许开发者在Web应用中创建交互式的三维图形。 【描述解读】 描述中提到的“TWaver HTML5 3D 制作的demo提供一个3d图形展示的基本代码...

    Twaver 3.7性能测试报告

    2. **随机连接测试**:在多个节点之间建立随机连接,模拟实际应用中可能出现的复杂网络拓扑结构,进而考察Twaver Java处理复杂连接的能力。 3. **特定比例连接测试**:设置不同节点间的连接比例(如5:1),以研究...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    这意味着它可能包含开发者需要的所有信息,以便在Web应用程序中有效地利用Twaver的功能。 标签"html5 -5.9.0-api twaver"进一步确认了这是关于HTML5的Twaver API,特别强调了版本5.9.0。 压缩包内的文件列表揭示了...

    TWaver HTML5 开发指南代码

    TWaver不仅支持静态图表的展示,还支持动态数据更新和用户交互,使得在网页上展现动态变化的系统状态成为可能。 二、拓扑工具开发 在IT运维和管理中,拓扑图是一种直观的表示网络或系统结构的方式。TWaver提供了一...

    twaver flex 中文用户使用手册

    用户将了解到如何通过Twaver Flex创建出动态、交互的图形界面,以直观地展示复杂数据和系统结构。 在核心功能部分,手册会详细讲解如何利用Twaver Flex构建图形模型。这包括添加、编辑和删除节点与边,以及调整它们...

    基于TWaver实现的3D机房Demo

    为了更好地理解TWaver在3D机房管理中的应用,可以查看"demo"文件夹中的内容。这个示例可能包含HTML、CSS和JavaScript文件,展示了如何将TWaver集成到网页中并创建3D机房场景。通过阅读和分析这些代码,开发者可以...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    TWaver是一个强大的图形绘制和分析工具,适用于构建复杂的图表、网络图、流程图等多种图形界面,广泛应用于数据分析、业务建模、系统监控等领域。 【压缩包子文件的文件名称列表】: 1. demo.bat:这是一个Windows...

    twaver例子

    TWaver是美国Serva Software公司的产品,是应用最为广泛的电信专业图形界面开发工具包,在电信行业应用非常广泛。TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 TWaver的图形组件库中提供了...

    twaver web实例源码

    【描述】"twaver web结合extjs源码学习资料"意味着这个压缩包包含了一组实际项目的源代码,用于展示如何在Web环境中整合Twaver和ExtJS。通过学习这些源码,开发者可以深入了解这两个库如何协同工作,创建交互式和...

    twaver-flex-3.6.5 官方demo

    Twaver是一款强大的数据可视化和建模工具,广泛应用于网络、系统和业务流程的图形化表示。在3.6.5这个版本中,官方提供了Demo来展示其功能和特性。 【描述】"twaver-flex-3.6.5 官方demo" 意味着用户可以通过这个...

    TWaver_Flex中文帮助文档

    TWaver Flex中的告警功能是该组件的一个重要组成部分,文档中讲解了告警的使用,包括告警级别、状态与统计、以及告警的呈现方式。 ### 版权声明和使用许可 文档中也明确了版权信息和版权声明,强调了文档是...

    TWaver_Web_4.0中文开发手册

    - **全局参数配置**:介绍了如何设置全局变量和参数,以便在整个应用中保持一致性。 - **TDataBox**:这是一个用于存储和管理业务数据的核心组件,支持多种数据源的连接和查询。 - **TSVGNetwork**:负责生成 ...

    twaver-java-4.1

    3. `License.txt`:这是授权协议文件,详细列出了使用TWaver开发包的条款和限制,包括商业使用、开源项目使用等方面的规定,开发者在使用前必须仔细阅读。 4. `README.txt`:此文件通常包含了关于如何安装、配置和...

    twaver-java-3.7

    总的来说,Twaver Java 3.7版本为Java开发者提供了一套强大而灵活的数据可视化工具,无论是在企业应用还是科研项目中,都能发挥其独特价值。通过深入学习和实践,开发者可以构建出极具吸引力的数据可视化应用,以...

    TWaver HTML5 Developer Guide

    告警的使用章节说明了如何在TWaver HTML5组件中集成告警系统,包括告警级别、状态、统计信息以及告警的展现方式。 最后,附录部分提供了网元样式表的示例,帮助开发者理解如何自定义和美化组件的外观。 文档的版权...

Global site tag (gtag.js) - Google Analytics