Network topology diagram based on HTML5

In the telecommunication network management system, the real-time display of the equipment status information is very important, usually mount a bunch of icons to display the status or alarm information, the limited information of the icons, sometimes need more detailed panels, even in the form of a chart, this article will combine the needs of recent customers, using the Qunee1.6 beta version, Realize real-time display of device information in topology diagram.

The customization of the UI in Qunee is very flexible, each element node can mount several UI controls, support the relative position of 9x9=81, can mount multiple UI elements on a single node, arrange and layout, and each UI element can bind primitive attributes, attribute changes, UI elements will update the interface in a timely manner.

Network device data Flow information display

Demand analysis
Network equipment topology diagram, the default device is a normal node, double-click to expand, display CPU, memory, traffic and other information, using histogram and different colors of text to display, and then double-click to return to normal node here needs to customize the node, normal mode, the node contains icons and text, expand the mode, The node body becomes a panel of a rounded matrix, which distributes multiple components: icons, text, histogram, etc., in which the histogram can refer to the Barui in the previous monitoring diagram example, the other has ready-made components available, the Panel uses the built-in shape shape, the icon is still used Imageui, the text uses Labelui, the location distribution is set with the position and Anchorposition properties
Implementation of CPU Histogram
In addition, it is necessary to bind the CPU's numeric value to the histogram, where the Q.element#addui (UI, bindingproperties) function is used, the data binding is set in the second parameter, and if there are multiple properties that require binding to use an array, the following example will Cpubar The Data property is bound to the CPU properties of node, which can be set by Node.set ("CPU", 0.45) in a way that enables the properties of the UI to be

Take the CPU histogram as an example, the left is text, the right side is a histogram, the text is aligned to the right, the histogram is left aligned

UI Location Layout

Original from http://www.twaver.com.cn/xinwen/581
In addition, it is necessary to bind the CPU's numeric value to the histogram, where the Q.element#addui (UI, bindingproperties) function is used, the data binding is set in the second parameter, and if there are multiple properties that require binding to use an array, the following example will Cpubar The Data property is bound to the CPU properties of node, which can be set by Node.set ("CPU", 0.45) in a way that enables the properties of the UI to be

Network topology diagram based on HTML5