HTML5 network topology diagram application example explanation

This article mainly introduces relevant information on the rapid development of HTML5-based network topology map applications. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Starting today, we will analyze how to build an HTML5 Canvas topology graph application from the most basic level. HT internally encapsulates a topology graph component ht.graph.GraphView (hereinafter referred to as GraphView), which is the component with the richest 2D functions in the HT framework. , and its related class libraries are under the ht.graph package. GraphView has basic graphics presentation and editing functions, topological node connection and automatic layout functions, predefined objects in industries such as electric power and telecommunications, and special effects such as animation rendering. Therefore, it has a wide range of applications and can be used as a drawing tool and human resource in the monitoring field. It has a machine interface and can be used as a general graphical editing tool and can be expanded into enterprise applications such as workflow and organization charts. To put it simply: topology diagram is a generalized term. Network topology diagram of telecommunications network management, power grid topology diagram, industrial control monitoring diagram, work flow diagram, thinking brain map, etc. Simply put, it is composed of node connections. These are the topological diagrams referred to here.

It is very easy to develop a network topology diagram using HT. It only takes a few lines of code to complete a simple server and client topology diagram:

This example is very basic and almost completes all the topological functions of the server and client. Without further ado, guess how many lines of code it took to include all parts of the HTML tags in this example? There are only 50 lines minus the blank lines. I also did a lot of style design. After all, the example for everyone can’t be too ugly~

You can download the code by yourself at tuputu_jb51.rar, please note that there is json File, there will be cross-domain problems with images, and you need to use Firefox or a local server to run it.

Let us explain at the beginning that HT is a one-stop solution for enterprise application graphical interface based on the HTML5 standard. It includes a rich graphical interface development class library such as general components, topology components and 3D rendering engines. Users only need to introduce ht.js, and it does not conflict with anything else at all, because HT only declares a global variable ht, nothing more.

Next, analyze the code part. First, build the topology map scene:

dm = new ht.DataModel();//数据容器
gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型
gv.addToDOM();//将拓扑图添加进body体中

The root of all components of HT is a p, through getView() Method acquisition, we used this method in the addToDOM method:

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //获取组件底层 p
        style = view.style; 
    document.body.appendChild(view);//将底层 p 添加进 body 体中           
    style.left = '0';//HT 一般将组件都设置为 absolute 的绝对定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //事件监听窗口大小变化，iv 为延时刷新组件         
}

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

var server = new ht.Node();
server.setName('server');//设置节点名称，显示在节点下方
server.setImage('serverImage');//设置节点图片
server.setSize(20, 60);//设置节点大小
dm.add(server);//将节点添加进数据容器dm中
server.setPosition(100, 100);//设置节点坐标(x, y)

var group = new ht.Group();//组，组中可以有多个节点
group.setImage('groupImage');//设置图片
dm.add(group);
var client = new ht.Node();//这个节点是添加进组中的
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild(client);//组添加孩子
group.setExpanded(true);//设置组为展开模式
client.setPosition(200, 100);//设置节点位置 如果组中只有一个节点，那么这个节点的位置可以为组的位置

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 only requires 2 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 are curious about how the dotted line is made? The formation of the dotted line is built on the connection line. There are three steps:

1. Introduce the ht-dashflow.js file;

2. The style attribute edge.dash.flow of the connection is set to true;

3. Turn on the switch of dashed line flow in the scene component, here is gv.enableDashFlow(true);

Isn’t it very simple! Next, let’s take a look at how to set it up:

edge.s({//节点设置样式属性
    'edge.dash': true,//显示虚线
    'edge.dash.flow': true,//开启虚线流动
    'edge.dash.color': 'yellow',//虚线颜色
    'edge.dash.pattern': [8, 8],//虚线样式
    'label': 'flow',//节点注释
    'label.background': 'pink',//节点注释背景颜色        
});

In this way, all the display parts have been introduced~Wait, it seems like there is something missing? By the way, I forgot to introduce the ht.Group class in HT. As the name suggests, it means "group". A group can contain many nodes. Double-click to display or hide all nodes in the group. It is written in the above code, but I also did a little trick, that is, the display part in the upper right corner of the group is actually a mark, used to prompt instructions:

##

group.s({
    'group.background': 'rgba(255, 255, 0, 0.1)',//设置组的背景颜色
    'note': "Double click me!",//标注 显示的内容
    'note.position': 13,//标注位置
    'note.offset.y': 10,//标注位置y轴偏移
});

We can change it through note.position The position of the annotation (for specific location information, please refer to the HT for Web Position Manual), you can also use note.offset.x and note.offset.y to change the position of the annotation.

All codes have been parsed! I will update as soon as possible. If you feel that the progress is slow, you can go to our official website (HT for Web) to learn by yourself. I hope you can gain more. Learning is your own business. Quickly practice and transform the content of this article into Make it your own knowledge!

Related recommendations:

Introduction to task scheduling topology diagram of directed graph

Detailed explanation of HTML5 network topology diagram integrating OpenLayers to implement GIS map application (picture)

Detailed graphic explanation of HTML5 network topology diagram performance optimization

The above is the detailed content of HTML5 network topology diagram application example explanation. For more information, please follow other related articles on the PHP Chinese website!