Detailed explanation of rapid development of applications based on HTML5 network topology diagram (pictures and text)

This example shows how to build the combined effect of two nodes, a connection, and a Group. It can be easily understood that building a topological interface is basically to operate DataModel dataModel. The following is the model code part that builds the effect of the above interface:

// init data modelhello = new ht.Node();
hello.setPosition(60, 140);             
hello.setName('Hello');
hello.setStyle('note', 'I love HT');
hello.setStyle('note.background', '#FFA000');
dataModel.add(hello);

world = new ht.Node();
world.setPosition(260, 80);
world.setName('World');
world.setStyle('note', 'HT for your imagination');
world.setStyle('note.expanded', false);  
world.setStyle('border.color', 'red');                
dataModel.add(world);

edge = new ht.Edge(hello, world);
edge.setName('Hello World\nwww.hightopo.com');
edge.setStyle('label.color', 'white');
edge.setStyle('label.background', '#3498DB');                
dataModel.add(edge);  

group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());
group.addChild(hello);
group.addChild(world);
group.addChild(edge);
dataModel.add(group);

Of course, the real system will not look like the above code. The content is hard-coded. Generally, users query the background data, and then dynamically create topological nodes, connections, groups, subnets and other graphic elements based on the background data, and fill in the graphic element names, connection colors, alarm contents, etc. Attribute information, and because HT technology is based on HTML5, most industrial control Web SCADA customers have adopted the real-time communication method of WebSocket. For information on the use of WebSocket, please refer to this article: 3D topology automatic layout of Node. js Article

Building a model is as simple as above. The remaining work is to set the corresponding graphic element attributes to achieve information display and beautiful effects. Regarding the customization of graphic elements and even the overall HT graphic component style, you can Referring to the "HT for Web Style Manual", here I give a simple little detail, but some people noticed that the code for setting the label above is a bit special:

edge.setName('Hello World\nwww.hightopo.com');

Here\n As the name suggests, it means line break, of course except for line break In addition, you can also have vertical layout and other fancy display forms. You can refer to the introduction of the article "Smart Application of Text on Network Topology Map":

var list = [], node;for (var i = 0; i < 4; i++) {
    node = new ht.Node();
    node.setImage(&#39;station&#39;);
    node.p(100 + i * 100, 100);
    dm.add(node);

    list.push(node);
}
node = list[0];
node.s({    
&#39;label&#39;: &#39;厦门&#39;,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Xiamen&#39;,    
&#39;label2.position&#39;: 31,    
&#39;label2.offset.y&#39;: 23});

node = list[1];
node.s({    
&#39;label&#39;: &#39;图\n扑&#39;,    
&#39;label.position&#39;: 14,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Hightopo&#39;,    
&#39;label2.position&#39;: 14,    
&#39;label2.offset.x&#39;: -7,    
&#39;label2.rotation&#39;: -Math.PI / 2});

node = list[2];
node.s({    
&#39;label&#39;: &#39;上\n海&#39;,   
&#39;label.position&#39;: 20,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Shanghai&#39;,    
&#39;label2.position&#39;: 20,    
&#39;label2.offset.x&#39;: 6,    
&#39;label2.rotation&#39;: -Math.PI / 2});

node = list[3];
node.s({    
&#39;label&#39;: &#39;北京&#39;,    
&#39;label.position&#39;: 3,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Beijing&#39;,    
&#39;label2.position&#39;: 3,    
&#39;label2.offset.y&#39;: -23});

Of course, it can also be achieved. To achieve the effect of dynamically rotating text, drag the red ball below to achieve the effect of dynamically rotating text:

From the above example, you can refer to just a text and set the color and background. , font, maximum length and other parameters. If you add the Position layout and 3D layout, you can almost write an independent article based on text. This is not enough here. If you are interested, you can play with various examples of the position manual:

After constructing the connection relationship of the primitives and setting the style attributes of the primitives, the next main issue is the placement of primitives. For the placement of primitives in the field of industrial control, it is generally It is done manually, so the Web SCADA industrial control field generally builds a set of HMI human-machine interface drawing tools for its own products:

For telecommunications network management topology applications, due to the network topology The amount of graph element data is often very huge. Although the HT topology graph component is very powerful and can carry several or even hundreds of thousands of network topologyvector graph elements without any pressure, how to realize such a large amount of data elements? The layout is a problem. If it is regular, it will be easier. You can write two for loops to realize the grid layout. This example is generally used in the energy industry control system. By using the vector format of HT, the fan can be dynamically controlled. Parameters such as rotation speed and color can visually express the operating status of the fan. This example is not specially optimized for mobile phones, but I specifically used iOS Safari to run it. I have to say that Safari 10 is still worthy of this example of HT. Apple is still working hard to improve HTML5 in its product line. The

#ECMAScript 2015

standard, also known as ES6, is completely supported, bringing this major

JavaScript

evolution to Safari on macOS and iOS.

However, more telecom network management topology map applications will use the automatic layout function of HT. Making good use of the automatic layout function can greatly reduce the implementation workload of project launch, and telecom equipment often needs to automatically detect dynamic changes, which is almost impossible to complete manually. These things. If combined with the recent remarks of Huawei boss Ren Zhengfei, it can be imagined that Huawei's telecom network management topology in the future should make use of its unique industry network data and rely on artificial intelligence to provide automatic layout algorithm layout. Okay, let me digress and get back to the topic.

In fact, automatic layout cannot provide algorithms to place graphics elements in order to meet the needs of business display. These two articles analyze in detail how to customize the bus and any arbitrary Curve layout case:

The above is to create a network primitive, set the connection relationship between the primitives, configure the style attributes of the primitives, and layout the primitives to construct the topology diagram. With a few basic steps, you can actually develop a decent HTML5 network topology map application in minutes if you are familiar with HT. Users can serialize the entire topology map into a string of JSON format content, so that you can save it to the backend database or backend. Any server file is acceptable. HT is just a front-end graphical component and does not involve backend communication and storage. Anyway, the control is yours without any constraints. You can design the overall system architecture of your network topology as you like.

The above is the detailed content of Detailed explanation of rapid development of applications based on HTML5 network topology diagram (pictures and text). For more information, please follow other related articles on the PHP Chinese website!