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 position distribution is implemented using the position and Anchorposition properties to set the 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

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

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

varW = N, h = +, r = 10;
varShape = Q.shapes.getrect (-W/2,-H/2, W, H, R, R);
 This. image = Shape;
varGradient =NewQ.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);
functionAdduiat (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;
varBinding
if(Bindingproperty) {
binding = {
Property:bindingproperty,
Propertytype:q.consts.property_type_client,
Bindingproperty: "Data"
}
}
Node.addui (UI, binding);
returnUi
}
varicon =NewQ.imageui (image);
Icon.size = This. iconsize;
Adduiat ( This, Icon, page, "icon"). Anchorposition = Q.position.center_middle;
Adduiat ( This,NewQ.labelui (name), 30, 5);
Adduiat ( This,NewQ.labelui (ID), in. Color = "#D00";
Adduiat ( This,NewQ.labelui ("CPU"),. anchorposition = Q.position.right_middle;
Adduiat ( This,NewQ.labelui ("MEM"), anchorposition = Q.position.right_middle;
Adduiat ( This,NewBarui (), (+), "CPU"). Anchorposition = Q.position.left_middle;
Adduiat ( This,NewBarui (), (+), "Memory"). Anchorposition = Q.position.left_middle;
Adduiat ( This,NewQ.labelui ("Incoming:"), anchorposition = Q.position.right_middle;
Adduiat ( This,NewQ.labelui ("outgoing:"), 106). Anchorposition = Q.position.right_middle;
varUI = Adduiat ( This,NewQ.labelui (), "incoming");
Ui.anchorposition = Q.position.left_middle;
Ui.color = "#C20";
UI = Adduiat ( This,NewQ.labelui (), 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, retains image and default text label ShowDetail Property definition

Object.defineproperties (Customservernode.prototype, {
ShowDetail: {
Getfunction(){
return This. _showdetail;
},
Setfunction(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"));
varUIs = 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;
}
}

Running Effect Online Demo http://demo.qunee.com/#VOIP Demo

Network topology diagram based on HTML5-device status panel