Network topology diagram based on HTML5-device status panel

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.