Shulou(Shulou.com)05/31 Report--

The knowledge points of this article "how to develop the application of the basic HTML5 network topology diagram" are not quite understood by most people, so the editor summarizes the following contents to you. The content is detailed, the steps are clear, and it has certain reference value. I hope you can gain something after reading this article. Let's take a look at this article "how to develop the application of the basic HTML5 network topology diagram".

It is very easy to develop a network topology diagram with HT, and it takes only a few lines of code to complete a simple server-client topology diagram:

This example is very basic and almost completes all the functions of the server and the client in the topology. Needless to say, guess how many lines of code were spent in this example, including all the parts of the HTML tag? Minus the blank line is only 50 lines, I have also done a lot of style part of the design, after all, the example shown to you can not be too ugly ~

You can download the code on tuputu_jb51.rar. Note that because there are json files, there will be cross-domain problems with pictures, and you need to run with Firefox or a local server.

Let's make it clear at the beginning that HT is an one-stop graphical interface solution for enterprise applications based on the HTML5 standard, which contains rich graphical interface development libraries such as general components, topology components and 3D rendering engines. Users only need to introduce ht.js, and there is no conflict with anything else, because HT just declares a global variable ht, that's all.

Next, parse the code. First, set up the topology diagram scenario:

Dm = new ht.DataModel (); / / data container gv = new ht.graph.GraphView (dm); / / the topology component parameter is the data model bound by dm gv.addToDOM (); / / add the topology diagram to the body body

The root of all components of HT is a div, which is obtained by the getView () method, which we used in the addToDOM method:

AddToDOM = function () {var self = this, view = self.getView (), / / get the underlying component div style = view.style; document.body.appendChild (view); / / add the underlying div to the body body style.left = '0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, Window.addEventListener ('resize', function () {self.iv ();}, false); / / event listening window size change, iv is delay refresh component}

Then add "server" and "client" nodes to the topology scenario:

Var server = new ht.Node (); server.setName ('server'); / / set the node name, which is displayed under the node server.setImage (' serverImage'); / / set the node picture server.setSize (20,60); / / set the node size dm.add (server); / / add the node to the data container dm server.setPosition (100,100); / / set the node coordinates (x, y) var group = new ht.Group () / / Group, there can be multiple nodes in the group group.setImage ('groupImage'); / / set the picture dm.add (group); var client = new ht.Node (); / / this node is the client.setName added to the group (' client'); client.setImage ('clientImage'); dm.add (client); group.addChild (client); / / add child group.setExpanded (true) to the group; / / set the group to the flat pattern client.setPosition (200,100) / / set node location if there is only one node in the group, then the location of this node can be the location of the group

The connection between the server and the client? 2 lines of code done! In fact, the method of adding nodes in HT is very simple, it usually ends with two lines of code: first declare the instance variable, and then add the instance variable to the data container.

Var edge = new ht.Edge (server, client); dm.add (edge)

We wonder how the dotted line is made. The formation of the dotted line is built on the connection, and there are three steps:

Import ht-dashflow.js file

Set the style property edge.dash.flow of the connection to true

Turn on the switch of dotted line flow in the scene component, and here is gv.enableDashFlow (true)

Isn't it very simple! Let's take a look at how to set up:

Edge.s ({/ / Node set style attribute 'edge.dash': true,// shows dashed line' edge.dash.flow': true,// turns on dashed line flow 'edge.dash.color':' yellow',// dashed line color 'edge.dash.pattern': [8,8], / / dotted line style' label': 'flow',// node comment' label.background': 'pink' / / Node comment background color})

In this way, all the display parts have been introduced, and so on, what seems to be missing? By the way, I forgot to introduce the ht.Group class in HT. As the name implies, it means "group". A group can contain many nodes. Double-click to show or hide all nodes in the group. The above code says, but I also made a small move, that is, the display part in the upper right corner of the group, which is actually a mark that is used to indicate:

Group.s ({'group.background':' rgba (255,255,0,0.1)', / / sets the background color of the group 'note': "Double click me!", / / the content of the label display is' note.position': 13 Double click me / label position 'note.offset.y': 10 pound / label position y offset})

We can change the location of the annotation through note.position (please refer to the HT for Web location manual for specific location information), or we can use note.offset.x and note.offset.y to change the location of the annotation.

The above is the content of this article on "how to develop the application of basic HTML5 network topology diagram". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.