Introduction
In various power system application software, the important component of power graphic expression. In view of the current power systems are mostly B/s structure, and browser-based vector image editing and display technology has become a hot topic today. The development of electric power system urgently needs to introduce a kind of graphic standard to avoid duplication of labor and incompatible between different manufacturers ' graphic formats.
The paper expounds the application of multi-ratio graphic control in power system software and its key problems, and points out that the multi-ratio graphic control can improve the characteristics of software graphics of power system based on the Web. However, how to construct the graphics system based on multi-ratio graphic control and how to effectively apply the multi-ratio graphic control to power system software is not discussed in detail. This article will focus on how to use java/graphics control technology to realize the power graphics system, in the system design, the drawing of multi-ratio graphic control, the design of the associated configuration database and the graphics synchronization refresh and graphics event processing and so on in-depth discussion.
Introduction to multi-ratio graphic controls
As a new rich-client Internet technology, Flex is already being used in more and more graphical applications of power. Using Flex's rich client application, it solves many challenges such as asynchronous invocation, no refresh of interface, and browser compatibility. Use any Web programming language that you are familiar with, such as. Net,php,jsp,webservice, and so on, as a background data access layer that can be used.
However, for enterprise-level application development, the lack of experienced flex programmers is an indisputable fact. Most software development companies do not have a dedicated flex programmer, which makes the development of native flex programs difficult. Compared to flex native program programming, Flex+javascript controls are used in a way that is more than the same. On the one hand, it takes advantage of Flex's powerful graphic expressiveness, and on the other hand, uses a 100% pure JavaScript API interface to reduce the difficulty curve of learning. A lot of JavaScript programmers, even if not, java/.net programmers are easy to learn. JavaScript exceptions and errors are very easy to debug, and can be debugged online using the browser's internal debugging tools.
A multi-ratio graphical control is a vector graphic control based on Web (VML and SVG technology), similar to a Visio control on a Web page. The multi-ratio graphical control has a design interface like Visio that allows users to easily make their own graphical symbols and draw beautiful vector graphics. At the same time, the multi-ratio control also supports bitmaps very well, with full support for JPG, GIF, and PNG. Multi-ratio controls make it easy to access pictures on the Web, which makes it easier to integrate and update applications. Much more than the basic properties of control graphics, the basic can cover the current power graphical application of various requirements. The entities in the control have very strict inheritance relationships, and by using inheritance, polymorphism, and overlay techniques, the user can easily modify the behavior of the elements and customize their own vector graphics application without modifying the core code of the one-to-one ratio. This mechanism ensures that each update of the multi-ratio control can be updated transparently by the programmer.
Implementation of graphics synchronization refresh and event processing
Graphics synchronization Refresh and graphics event processing are the core of the operation of the graphics system. Graphical synchronous refresh refers to the real-time entities must be associated with real-time data objects, in different styles to display different real-time status, to meet the synchronization speed is fast enough to make the graphics display and real-time data refresh synchronization. Graphics event processing refers to the ability to respond to mouse events or other events with certain elements in the graphics control screen so that the system can perform actions when certain events (such as mouse clicks) are triggered on the entity.
The multi-ratio graphical controls directly use the Javasript language to manipulate multiple graphics control documents and entities, and you can add, delete, and modify entity attributes directly to a multi-ratio graphic control document in the Javasript language. The multi-ratio graphical control adopts object-oriented and loose coupling, which makes the program Access data and update the graphical interface into two non-interfering processes. Programmers can access data through ajax,http long connections, or even websocket in HTML5, and after successful data acquisition, the Flex interface of the Web is refreshed using a multi-ratio API. While the real-time data refresh, the screen will also be refreshed synchronously.
Custom Power Vector Primitives
In the power graphics system, there are many kinds of elements in the package, and the Power CIM Standard has a detailed description. In order to ensure the flexibility of the expression of the elements in the power graphics system, the graphics control must have the ability to customize the elements. Vector elements are plotted according to geometric characteristics, and the vectors can be geometric shapes of a point, a line, a circle, and so on. It is characterized by the image will not be distorted after amplification, and resolution-independent, the file occupies a small space.
So how do you define a transformer element similar to the one below? Note that the graphs in the graph are made from the same entity and have different length and width settings.
Each element has a draw function, and we just need to overwrite the draw function. The specific code is shown below.
A vector entity that defines a resistor
Dianlushapes.dianzhu = StandardShapes.Rectangle.extend ({
Reload the draw function to let
Draw:function () {
This.logdebug ("Draw (), r=%s", THIS.R);
This.setupgraphics ();
var Changdu = 20;
Draw to the left of the wiring point
This.canvas.drawLine (this.id,-THIS.WIDTH/2, 0,-CHANGDU/2, 0);
Draw the middle of the resistor
This.canvas.drawRect (This.id,-CHANGDU/2,-THIS.HEIGHT/2, Changdu, this.height);
Draw the wiring point on the right side
This.canvas.drawLine (this.id, CHANGDU/2, 0, THIS.WIDTH/2, 0);
}
});
Custom Power Element Properties
The multi-ratio graph data itself contains only the information that is used to implement the vector graphics display, such as coordinate points, display styles, and so on, without data related to the business. In order to meet the needs of the power system, the multi-ratio graphics control adopts the data storage method based on the Xml/json format, which can be arbitrarily expanded in addition to its built-in properties to implement the custom function. Custom data objects are background data that is represented by vertices or lines. It can be graphical and shape-related data, or it can be a background business data corresponding to an element. For example, a node that represents a generator, while the asset designator of a generator, and the device's technical parameters, can be stored in a custom data object. A custom data object can be a string, or it can be a more complex JavaScript object.
Custom data is very simple, such as
Sa.onready = function () {
var CLD = Sa.getshapebypath ("Cloud-0");
Cld.yourdata = "asset number";
}
After defining the data, we can use Cld.yourdata to get it. A more interesting requirement is how we see our custom data in the property editor and make it persistent. (Save to database, XML, and so on)
This requires us to overwrite the Getuserproperties function and change to look like this:
Getuserproperties:function () {
return [{
Title: "My Data",
Name: "Yourdata",
Type: "String"
}];
},
If you need a user-defined width, height, color, etc., we can first get the properties of the base class and then add our data.
Getuserproperties:function () {
Combine the data of the base class with our data
Return Jquery.merge (
Call the base class method to get the user data for the base class
This.base (),
[{
Title: "My Data",
Name: "Yourdata",
Type: "String"
}]
);
},
Calculation of graphic electrical network loss based on Java web