Quick development of HTML5-based network topology applications and html5 Topologies

Quick development of HTML5-based network topology applications and html5 Topologies

Today, we started to explain how to build an HTML5 Canvas topology application based on the basic analysis. HT encapsulates a topology graph component ht. graph. graphView (GraphView) is the most abundant component in the HT framework with 2D functions. graph package. GraphView has basic graphics rendering and editing functions, topology node connection and automatic layout functions, pre-defined objects for power grids, telecommunications and other industries, and special effects such as animation rendering. Therefore, GraphView has a wide range of applications, it can be used as a plotting tool and man-machine interface in the field of monitoring, as a general graphical editing tool, and can be expanded into enterprise applications such as workflows and organization charts. To put it simply, the topology graph is a general concept. It refers to the network topology of China Telecom Network Management, the power grid topology, the monitoring diagram of industrial control, the work flow chart, and the mind brain diagram, in short, node connections constitute topology diagrams.

It is very easy to develop a network topology with HT. You only need a few lines of code to complete the topology of a simple server and client:

This example is very basic and almost completes all the functions of the server and client on the topology. Let's not talk about it. Guess how many lines of code is spent in this example, including all the parts of the HTML Tag? Even if there are 50 blank lines, I have also made a lot of designs for the style part. After all, the examples shown for you cannot be too ugly ~

You can download the code on tuputu_jb51.rar. Note that because of the json file, the image cross-origin issue may occur and you need to run it on Firefox or a local server.

At the very beginning, we will explain that HT is an all-in-one solution based on the HTML5 standard enterprise application graphic interface. It contains a wide range of graphic interface development class libraries such as common components, topology components, and 3D rendering engines, you only need to introduce ht. js, and it does not conflict with anything else, because HT only declares a global variable ht.

Next, parse the code section. First, set up the topology graph scenario:

Dm = new ht. dataModel (); // data container gv = new ht. graph. graphView (dm); // the topology component parameter is the data model gv bound to dm. addToDOM (); // Add the topology to the body.

The root of all HT components is a div, which is obtained through the getView () method. This method is used in the addToDOM method:

AddToDOM = function () {var self = this, view = self. getView (), // get the bottom-layer div style = view of the component. style; document. body. appendChild (view); // Add the bottom-layer div to the style in the body. left = '0'; // HT generally sets all components as the absolute positioning style of absolute. right = '0'; style. top = '0'; style. bottom = '0'; window. addEventListener ('resize', function () {self. iv () ;}, false); // Changes the event listening window size. iv indicates a delayed refresh component}

Add the "server" and "client" nodes to the topology:

Var server = new ht. node (); server. setName ('server'); // set the node name, which is displayed below the node server. setImage ('serverimage'); // sets the node image server. setSize (20, 60); // set the node size dm. add (server); // add the node to the server in the dm of the Data container. setPosition (100,100); // set the node coordinate (x, y) var group = new ht. group (); // group. The Group can contain multiple nodes. setImage ('groupimage'); // sets the image dm. add (group); var client = new ht. node (); // This Node is the client added to the group. setName ('client'); client. setImage ('clientimage'); dm. add (client); group. addChild (client); // Add a child group to the group. setExpanded (true); // set the Group to expand mode client. setPosition (200,100); // set the node location. If there is only one node in the group, the node location can be the group location.

What is the connection between the server and the client? 2 lines of code! In fact, the method for adding nodes in HT is very simple. Generally, there are two lines of code that can end: declare the instance variable first, and then add the instance variable to the data container.

var edge = new ht.Edge(server, client);dm.add(edge);

We are curious about how the dotted line is made? The dotted line is built on the line. There are three steps:

1. Introduce ht-dashflow.js files;
2. Set edge. dash. flow to true;
3. Enable the dotted line flow switch in the scenario component. This is gv. enableDashFlow (true );

Is it very simple! Next let's take a look at how to set it:

Edge. s ({// set the style attribute 'edge. dash ': true, // displays the dotted line 'edge. dash. flow ': true, // enable dotted line flow' edge. dash. color ': 'yellow', // dotted line color 'edge. dash. pattern ': [8, 8], // dotted line style 'label': 'flow', // node comment 'label. background ': 'pink', // the background color of the node comment });

In this way, all the display sections are described ~ Wait. What else does it look like? By the way, I forgot to introduce HT in ht. the Group class, as its name implies, refers to "Group". A Group can contain many nodes. Double-click the Group to display or hide all nodes in the Group. The code above writes, however, I also made a small step, that is, the display part in the upper-right corner of the group, which is actually a annotation used to prompt the description:

Group. s ({'group. background ': 'rgba (255,255, 0, 0.1)', // set the group background color 'note': "Double click me! ", // The content displayed in the annotation 'note. position': 13, // The annotation position 'note. offset. Y': 10, // The annotation position y axis offset });

We can use note. position to change the location of the tag (for detailed location information, refer to the HT for Web location Manual), you can also use note. offset. x and note. offset. y to change the location of the annotation.

All code parsed! I will update it as soon as possible. If you feel that the progress is slow, you can go to our website (HT for Web) to learn more. I hope you can learn more, turn the content of this article into your own knowledge!
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.