Network topology diagram based on HTML5-device status panel

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.
Requirements 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 show, and then double-click to return to normal node here need to customize the node, normal mode, the node contains icons and text, expanded 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 propertiesCPU histogram implementation of the CPU histogram, for example, the left is the text, the right is a histogram, the text to the right, the histogram left-aligned in addition, the CPU value and the histogram binding, here to use the Q.element#addui (UI, bindingproperties) function, To set the data binding in the second parameter, if there are multiple properties that require binding to use an array, the following example binds the Cpubar data property to node's CPU property and binds it to the UI by Node.set ("CPU", 0.45). property is set.CPU Histogram related code

var cpu = new Q.labelui ("CPU"); cpu.position = {x:27, y:47};cpu.anchorposition = Q.position.right_middle;var CpuBar = new Barui (); cpubar.position = {x:30, y:47};cpubar.anchorposition = Q.position.left_middle;node.addui (CPU); Node.addUI ( Cpubar, {property    : "CPU",    propertytype:q.consts.property_type_client,    bindingproperty: "Data"}); Node.set ("CPU", 0.56);

In practice we encapsulate the function, it will look different, the following is the node expansion of the UI distribution settings, the main body is a square X 120 rounded rectangle, the above distribution of multiple text, icons and bar chart

var w = $, H = +, r = 10;var shape = Q.shapes.getrect (-W/2,-H/2, W, H, R, r); this.image = Shape;var gradient = new Q. Gradient (Q.consts.gradient_type_linear, ["#F4F4F4", "#FFFFFF", "#DFDFDF", "#E9E9E9"]); gradient.angle = MATH.PI/2; This.setstyle (Q.styles.shape_fill_gradient, GRADIENT); This.setstyle (Q.styles.shape_stroke, 0); This.setStyle (Q. Styles.shape_outline, 1); This.setstyle (Q.styles.shape_outline_style, "#C9C9C9"); This.setstyle (q.styles.layout_by    _path, false); function Adduiat (node, UI, X, Y, Bindingproperty, value) {ui.syncselection = false;    Ui.zindex = 1;    Ui.position = {x:x, y:y};    Ui.anchorposition = Q.position.left_top;    Ui.fontsize = 10;    var binding; if (bindingproperty) {binding = {Property:bindingproperty, propertytype:q.consts.property    _type_client, Bindingproperty: "Data"}} Node.addui (UI, binding); return UI;} var icon = new Q.imageui (image); icon.size = This.iconsize;adduiat (this, icon, 15, "icon"). Anchorposition = Q.position.center_middle;adduiat (This, new Q.labelui (name), 5) and Adduiat (this, new Q. Labelui (ID), (+). Color = "#D00"; Adduiat (this, new Q.labelui ("CPU"). Anchorposition = Q.position.right_middle ; Adduiat (this, new Q.labelui ("MEM"), +--). Anchorposition = Q.position.right_middle;adduiat (This, new Barui (), 30, 47, "CPU"). Anchorposition = Q.position.left_middle;adduiat (This, new Barui (), +, (), "Memory"). Anchorposition = Q. Position.left_middle;adduiat (This, new Q.labelui ("Incoming:"),. anchorposition = Q.position.right_middle; Adduiat (This, new Q.labelui ("outgoing:"), and 106). anchorposition = Q.position.right_middle;var UI = Adduiat (this, new Q. Labelui (), Incoming, (), ui.anchorposition = Q.position.left_middle;ui.color = "#C20"; ui = Adduiat (this, new Q.labe LUI (), 106, "outgoing"), ui.anchorposition = Q.position.left_middle;ui.color = "#C20";

Overall effect   Further encapsulation next further encapsulation, achieve normal mode and expand mode switch, and increase the mouse interaction, double-click to switch here we inherit Node, define a Customservernode class, and add the ShowDetail property, by default, true to indicate the expanded state, set to False hides all mounted UI and sets image as picture, preserving image and default text labelShowDetail Property Definition

Object.defineproperties (Customservernode.prototype, {    showdetail: {        get:function () {            return this._ ShowDetail;        },        set:function (show) {            if (This._showdetail = = Show) {                return;            }            This._showdetail = Show;            This.image = show? This.shape:this.get ("image");            THIS.name = show? "Double-click Merge": (This.get ("name") + "\ n" + this.get ("id"));            var UIs = This.bindinguis;            if (UIs) {                Uis.foreach (function (UI) {                    ui.ui.visible = Show;                })                This.invalidate ();}}}    )

Increase double-click interaction

Graph.ondblclick = function (evt) {    var element = Evt.getdata ();    if (element) {        element.showdetail =!element.showdetail;    }}

Run effectOnline Demo http://demo.qunee.com/#VOIP Demo

Network topology diagram based on HTML5-device status panel