Rapid development of network topology application based on HTML5

Time:2020-9-25

From today on, we will analyze how to build the HTML5 canvas topology application from the most basic, and HT encapsulates a topology graphics component ht.graph.GraphView (hereinafter referred to as GraphView) is the most powerful 2D component in HT framework, and its related class libraries are located in ht.graph Bag. GraphView has the functions of presenting and editing basic graphics, topology node connection and automatic layout, predefined objects in power and telecommunication industries, and special effects such as animation rendering. Therefore, GraphView has a wide range of applications. It can be used as a drawing tool and human-computer interface in monitoring field, as a general graphical editing tool, and can be extended to enterprise applications such as workflow and organization chart. To put it simply: the topology diagram is a generalization. The network topology diagram of telecommunication network management, power grid topology, industrial control monitoring chart, work flow chart, mind map, etc. are simply composed of node connections, which are referred to here.

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

Rapid development of network topology application based on HTML5

This example is very basic, almost complete all functions of the server and client in the topology. Just to say a few words, guess how many lines of code did this example include all parts of the HTML tag? If you subtract the blank lines, you will get 50 lines. I have also done a lot of design for the style part. After all, the example for you can’t be too ugly~

We explained at the beginning that HT is a one-stop solution for enterprise application graphical interface based on HTML5 standard. It contains rich GUI development class libraries such as general components, topology components and 3D rendering engine. Users only need to introduce them ht.js Yes, and it doesn’t conflict with anything else, because HT just declares a global variable HT, that’s all.

Next, analyze the code part. First, build a topology map scenario

dm = new  ht.DataModel (); // data container
gv = new  ht.graph.GraphView (DM); // the topology component parameter is the DM bound data model
gv.addToDOM (); // add the topology to the body

The root of all HT components is a div, which is obtained through the getview() method. We use this method in the addtodom method

addToDOM = function(){   
    var self = this,
        view =  self.getView (), // get component underlying div
        style = view.style; 
    document.body.appendChild (view); // add the underlying div to the body           
    style.left  ='0'; // HT generally sets components to absolute positioning
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener ('resize', function () {  self.iv ();}, false); // the size of the event listening window changes, and IV is the delayed refresh component         
}

Then add the server and client nodes to the topology scene:

var server = new ht.Node();
server.setName ('server '); // set the node name, which is displayed below the node
server.setImage ('serverimage '); // set node image
server.setSize (20, 60); // set node size
dm.add (server); // add the node to the data container DM
server.setPosition (100, 100); // set node coordinates (x, y)

var group = new  ht.Group (); // group, which can have multiple nodes
group.setImage ('groupimage '); // set picture
dm.add(group);
var client = new  ht.Node (); // this node is added to the group
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild (client); // group add child
group.setExpanded (true); // set the group to expand mode
client.setPosition (200, 100); // sets the node location. If there is only one node in the group, the location of this node can be the location of the group

Connection between server and client? Two lines of code! In fact, the method of adding nodes in HT is very simple. Generally, only two lines of code can finish the operation: first, declare the instance variable, and then add the instance variable to the data container.

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

We’re curious how the dotted line is made? The formation of the dotted line is built on the connecting line. There are three steps:

  1. Introduction of HT- dashflow.js Documents;
  2. The style properties of the connection edge.dash.flow Set to true;
  3. Turn on the dotted line flow switch in the scene component gv.enableDashFlow (true);

Is it very simple! Next, let’s look at how to set it:

Edge. S ({// node sets style property
    ' edge.dash ': true, // display dashed 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', // background color of node comment        
});

In this way, all the display parts are introduced. Wait, what else is missing? By the way, I forgot to introduce HT ht.Group Class, as the name implies, means “group”. A group can contain many nodes. Double click to show or hide all nodes in the group. The code above says that, but I also made a little action, that is, the display part in the upper right corner of the group is actually a label to prompt and explain:

group.s({
    ' group.background ':'rgba (255, 255, 0, 0.1)', // sets the background color of the group
    'note': "double click me!", // mark the content displayed
    ' note.position ': 13, // mark position
    ' note.offset . y ': 10, // the y-axis offset of the marked position
});

We can go through note.position You can also use the note.offset . X and note.offset . y to change the position of the label.

All code parsing finished! I will update it as soon as possible. If you feel that the progress is slow, you can go to our official website (HT for Web) to learn by yourself. I hope you can have more harvest. Learning is your own business. Practice quickly and turn the content of this article into your own knowledge!