HTML5 Canvas Map for Telecom networks

This paper mainly introduces the network topology diagram based on HTML5 Canvas, hoping to help everyone.

Telecommunication Network structure (telecommunication network structure) refers to the combination logic and configuration form of various network units of telecommunication network according to the technical requirements and economic principles. The composition logic describes the architecture of the network function, and the configuration form describes the adjacency relation of the network unit, which is the topological structure composed of the Exchange center (or node) and the transmission link. The common network topology has star structure, bus structure, ring structure, tree structure, network structure, hybrid topology, and cellular topology, the example of this paper mainly depicts the general linear topology, which is more clear and easy to draw on the display relative to other structure types.

Although the title is the telecommunications network topology diagram, almost all of the topology map can be covered, such as basic Network Diagram, network topology diagram, rack diagram, network communication diagram, 3D Network Diagram and so on.

As follows:

This diagram looks quite simple, with little code, but a lot of content.

First of all, the cabinet 01, Cabinet 02, Cabinet 03 are HT. Group "groups" type, Ht. The Group type is used as the parent container to contain the child entities, which can be expanded by double-clicking on the Graphview topology map (http://www.hightopo.com), and the merge will be customized to hide descendant element nodes, and if a child node has lines connected to the outside, the merged The Group connects the agent. Group movement will lead to child nodes follow, the child's position and size changes will also affect the Group's expanded graphics and position position.

Here refers to a proxy connection problem, "agent" two words can be very good to indicate the meaning of the proxy connection. In fact, if the nodes inside the group are connected to the nodes outside the group, then in the group merging, the group will "proxy" the connection between the external nodes, and this is the proxy connection. We take the cabinet 02来 say, Cabinet 02 there is a "computer" and "Internal network switch" between two lines, then when we double-click the cabinet 02 merger, it is actually equivalent to the cabinet 02 and the "Internal network switch" between two lines.

So, let's take a look at how to draw this group and the nodes inside the group, first create the "rack 02" group node, because the whole example I created three group nodes, and the way they were created is similar, so the code that creates the group is packaged for reuse:

function CreateGroup (name, x, y) {    var group = new HT. Group ();//The set type is actually a node    group.setexpanded (TRUE);//Set Expansion group    group.setname (name);//Set the name of the group    GROUP.S ({// Sets the style of the group "        group.title.background ': ' Rgba (14,36,117,0.80) ',//the title background color after the group is expanded, only works with the type Group.type is empty        " Group.background ': ' Rgba (14,36,117,0.40) ',//group expanded after the background color        ' group.title.align ': ' Center '//group expanded after the title text horizontal alignment, The default value is ' left ', which can be set to center and right    });    Group.setposition (x, y);//Set the position of the group    group.setimage (' images/server. JSON ');//Set the picture information shown on the topology, In the Graphview topology map, the picture is generally drawn    Datamodel.add (group) centered on position;//Add the created group node into the data container    return group;

Groups can be expanded by double-clicking to expand the display of a box with a title bar (of course these are customizable), when the merge is displayed in the above code set in the Group.setimage of the picture.

All the nodes inside the enclosure are HT. Node type, so I also encapsulated it:

function CreateNode (image, parent, x, y) {    var node = new ht. Node ();//Create a node node    if (image) Node.setimage (image);//Set the display picture of the nodes    if (parent) node.setparent (parent); Set the node's father    if (x && y) node.setposition (x, y);//Set the node's location    datamodel.add (node);//Add nodes into the data container    return node;}

Build Cabinet 02:

cabinet = CreateGroup (' Cabinet 02 ', 146, 445);//Create cabinet 02createNode (' images/normal. JSON ', Cabinet, (). S (' label ', ' data monitoring and Analysis system ') ;//create a node with a "normal" picture and set the text of this node as "Data monitoring analysis System"

Because the connection requires "source node" and "End Node", here the source node is the intermediate "Internal network switch", we create this node:

var line = CreateNode ();//Create a node line.setsize (725, 20);//Set Node size line.setposition (310, 325);//Set node position line.s ({// Sets the style property of the node    ' shape ': ' RoundRect ',//determines the shape, the default value is empty, and the representation is drawn with an image. RoundRect around rounded rectangle    ' shape.background ': ' Rgba (14,36,117,0.80) ',//background fill color, null for non-populated background    ' Shape.border.color ': ' #979797 ',//Border color    ' Shape.corner.radius ': 10,//This parameter specifies the fillet radius of the RoundRect type, the default is the empty system auto-adjust, can set the positive value    ' label ': ' Internal network switch ',/ /text content, default is empty    ' label.position ': 45,//text content, default is empty    ' label.offset.x ': 50,//text horizontal offset, for edge means horizontal offset along line direction    ' Label2 ': ' Internal network switch ',//ht default in addition to Label.* properties, label2.* properties are provided to satisfy the case where an element needs to display double text    ' label2.position ':    Label2.offset.x ':,    ' Label2.offset.y ': 2,});

I wonder if you have noticed that there is a Label2 style attribute, which is a feature added by HT in order to add two label text on a node, the Label property and the Label2 property are exactly the same, as long as the property is set with the label and Label2 section Come on, you can.

Both the source node and the final node are available, and you can make the connection:

Createedge (line, CreateNode (' images/computer. JSON ', cabinet, 185,), ' RGB (30,232,178) ', -100, true);//Parameter 1 source node, parameter 2 end node, parameter 3 Line color, parameter 4 the horizontal offset of the starting point of the connection, parameter 5 whether to create two lines

It is also interesting that the "switch" section, the leftmost blue square node and the middle bar node is not one, but separate, but I through the sethost node and the adsorption between nodes, and then back adsorption, so that the operation is equivalent to the two nodes are one:

var exchange = CreateNode (' images/switch. JSON ', NULL, -53, 313); Exchange.sethost (line);//Set Adsorption line.sethost (Exchange);// Anti-adsorption also sets the line's adsorption to exchange

Because HT is arranged hierarchically according to the order in which the nodes are added to the data container, my switch is added after line, so the node of the default switch is displayed below line, we turn off the default level display, and set the switch Exchange to display at the top of the data container:

Datamodel.setautoadjustindex (false);//The switch that automatically adjusts the index order of data in the container closes datamodel.sendtotop (Exchange);//data is pinned on the topology