Hundreds of HTML5 examples to learn HT graphics components – topology


HTEverything you need to create cutting edge 2D and 3D visualization

This slogan was the product direction in my mind at that time, and then slowly polished in this direction. NowHTIt can be said that we have achieved such an effect, not to mention exhausting the strength of the pioneers, but we are very satisfied with the product results, especially HT’s user manual, which seamlessly integrates examples and documents. The small 10 trillion development package actually contains 45 manuals and hundreds of live HTML5 examples, which can be clicked by students who have not experienced it…HT manual entrance to play.

So comprehensive and searchableManual entryI’m often asked where the demo of HT is? We can only blame the concept of extreme user experience, which has been deeply rooted in the hearts of the people in recent years, for making people so lazy, including many programmers. Of course, we also blame us for not doing the last mile of user experience in place. Therefore, recently, wangyinlong took pictures of manual examples and sorted out hundreds of manual examples, Finally, a page is formed to facilitate you to intuitively find all HT examples:…

Hundreds of HTML5 examples to learn HT graphics components - topology

Obviously…comparison…For HT’s old users, including our own technical support, it is more intuitive and convenient to find examples, but for HT beginners, they often have no way to start in the face of this feast of hundreds of HTML5 examples including general components, network topology components, 3D components, vector graphics, various editors and so on, To this end, I intend to write a series of articles on learning HT graphics components with hundreds of HTML5 examples to guide users in different industries such as power, telecommunications, industrial control SCADA and so on to learn to use HT, a full set of one-stop HTML5 graphics components.

As the most typical HT customer demand application, topology component is naturally the first one.

HT’s topology component is mainly based on the canvas technology of HTML5. Topology is the name of power and telecommunications, but this component is far from just used to present nodes and connections. In HT, we do not narrowly call this component topology, network or diagram. We call this component class more general GraphView as long as you have imagination, You can use topology components to make any other components. When you can’t think of what components to implement some requirements, it is often the topology components that need to stand up and make efforts:

Hundreds of HTML5 examples to learn HT graphics components - topology

Hundreds of HTML5 examples to learn HT graphics components - topology

Maybe most students who don’t mix in the game field will wonder what the above two pictures are? These two are the open source HTML5 game engine tool Qici engine(…)Game Engineering screenshot, interested students can download and try it on GitHub.

QICI Engine:A free JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.

The HTML5 game engine editing tool of the entire Qici engine is based onHTDeveloped by component customization, the explorer of the turret scene in the figure above is that the icon can be scaled, the atlas can be expanded and merged, and can be reduced to a GraphView topology at the tree level. The action editor, curve editor and other parts in the second picture are also GraphView.

Now you should be able to understand why I said that topology components can make almost any other components. Of course, customizing other components requires time, energy and cost. Otherwise, there is no need to have the significance of other components. Developing Qici engine products is another story, which will not be launched today. HTML5 games are not new, but it’s interesting that the game development tools are completely based on HTML5 and can run in the browser. A Ming’s favorite work is attached in the figure below《City Xiaole》Screenshot, interesting to play:…

Hundreds of HTML5 examples to learn HT graphics components - topology

To return to today’s topic and learn how to use topology maps, the first step is to get your hands dirty. Even if you are not familiar with HTML, you can directly draw gourd and click…The code of builds two nodes and three connections:

//Create data model container
var dataModel = new ht.DataModel();

//Create topology map components
var graphView = new ht.graph.GraphView(dataModel);

//Create a starting node, set the name and location attributes, and add it to the data model container
var source = new ht.Node();
source.setPosition(100, 70);                

//Create an end node, set the name and location properties, and add it to the data model container
var target = new ht.Node();
target.setPosition(260, 70);

//Create a connection, set the start and end nodes, and add them to the data model container           
var edge = new ht.Edge();

I believe that the above code is very intuitive and can understand the principle of topology map construction. Many people will ask HT how to communicate and obtain data. Is there any restriction on the back end? HT is only a client component and does not involve in background communication. Therefore, customers can use any background system, such as Java, C + +, PHP, node.js, http / Ajax, websocket, etc., and any data format such as XML, JSON or txt. Only the data content of the last user according to its own format, The standard API interface provided by HT graphics library is used to create corresponding nodes, wires and other elements, and set relevant attribute information to realize graphics presentation. Therefore, HT components have no requirements for background and communication mode.

In the above example, the name and location settings are arbitrarily set in the demo. Real system users generally query through the background database, and then build primitives and set corresponding properties according to the business data content. You will find that although you are building a topology, 80% of your code is dealing with data and datamodel. What are these two ghosts? In fact, the vast majority of HT’s customers do not need to study carefully to develop a complete system《HT for Web Data Model Manual》, regardless of the MVC / MVP / MVVM framework adopted by HT, you can read it if you need to know more about it…manual

Hundreds of HTML5 examples to learn HT graphics components - topology

Simply put, data is the smallest data unit of HT. For GraphView components, it can be said to be an entity, a node or a connection; The tree component can be said to be a tree node; The table component can be said to be a row of records. These data primitives need to be added to the data container of the datamodel. All view components GraphView, list, tree, table and even 3D component graph3dview of HT will be bound to a data container. These views will listen to the event changes of the data container and refresh and display their own components, These events include attribute changes of elements, addition and deletion of elements, and a very important relationship is the change of parent-child relationship of elements.

When it comes to parent-child relationship, let’s take a comprehensive example:…

Hundreds of HTML5 examples to learn HT graphics components - topology

//Create data container
dataModel = new ht.DataModel();

//Create topology map, property page, list, tree, table and tree table components
graphView = new ht.graph.GraphView(dataModel);
propertyView = new ht.widget.PropertyView(dataModel);
listView = new ht.widget.ListView(dataModel);
treeView = new ht.widget.TreeView(dataModel);
tablePane = new ht.widget.TablePane(dataModel);
treeTablePane = new ht.widget.TreeTablePane(dataModel);

//Create group diagram elements, add child nodes, and add data containers
group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());

This example adds the code for setting parent-child relationship. At the same time, more components (topology, property page, list, tree, table and tree table components) bind the same data model datamodel, but the user’s code still mainly operates on data and datamodel, which is also the advantage of HT architecture design. Using more components does not increase the new learning cost, As long as you master the basic operation of the datamodel, so do more components.

Although the entity property setting, addition, change and even selection can be done through the datamodel, it does not mean that the datamodel is omnipotent. Some requirements still need to be done through the view view. For example, many basic requirements are to do some business processing by double clicking an element. How to listen? Why didn’t you find any onclick interfaces from the node? This can be from《HT for web getting started》Find the answer in the interactive section of:…

graphView.addInteractorListener(function (e) {
    if(e.kind === 'clickData'){
        Console.log ( + 'clicked');
    else if(e.kind === 'doubleClickData'){
        Console.log ( + 'double clicked');

If you want to break the sand pot and ask why you don’t directly provide interactive processing on data or datamodel, data data can be shared by many view views. Datamodel doesn’t even know the existence of view view. They only send model change events, and view updates accordingly by monitoring model changes, HT’s model architecture is very similar to Facebook react…Flux unidirectional flow design concept:…

Hundreds of HTML5 examples to learn HT graphics components - topology

HT’s datamodel is equivalent to the store module in flux. The topology, tree and table naturally correspond to the view module. Generally, the action initiated is the background data change, or the user manually enters the table attribute value, but in the end, the view is not modified directly. The modification is initiated from the data / datamodel / store, and then the data model sends events to all views, Finally, view handles different events accordingly.

Interested students can open it…On the console, enter the code as shown in the figure to experience the effect of real-time modification of the data model:

Hundreds of HTML5 examples to learn HT graphics components - topology

In the previous example, we mentioned a group type. This type of primitive node is displayed as a combined effect on GraphView. You can double-click to expand and merge, and can follow the position and size changes and adaptive changes of child nodes. In addition to node, edge and group, HT also provides shape, polyline, grid, subgraph and other primitive types, These element types have targeted display effects to meet the basic element needs of various industries:…

Hundreds of HTML5 examples to learn HT graphics components - topology

For connection edge, HT also provides an extension mechanism for user-defined direction, and provides corresponding prefabricated extension connection type plug-ins. See《HT for web connection type manual…

Hundreds of HTML5 examples to learn HT graphics components - topology

Of course, no matter how many predefined types are, it is impossible to meet the needs of various industry primitives. This is what you should read《HT for web vector manual…It’s time to introduce vectors. I’ve written two old articles for your reference:《Graphic component design of HT full Vectorization》And《HT graphic component design (II)

Hundreds of HTML5 examples to learn HT graphics components - topology

For the above example, you can play here:…。 Related videos:…

In addition, HT’s vector has built-in chart type. The built-in chart of vector is different from the traditional independent chart component. The traditional chart is an independent view DOM component, but HT’s topology is drawn in cavans mode. Therefore, it is impossible to realize the fusion display of different levels of chart components and ordinary primitives, but the chart type of vector perfectly realizes such fusion, Many customers of industrial control applications will integrate vector chart and topology elements. See《Industrial control mobile application of SCADA based on HT for Web…A web SCADA application case of HT in this paper

Hundreds of HTML5 examples to learn HT graphics components - topology

Of course, you can also integrate HT with Baidu echarts. As long as it is an HTML graphic component, it can be integrated into HT’s layout container, for reference《Network topology map application of echarts integrating HT for Web》In this example, echarts is integrated into the HT topology diagram to make the chart presentation effect of alarm statistics:

Hundreds of HTML5 examples to learn HT graphics components - topology

In addition to the hybrid third-party graphics component library, HT graphics can also embed SVG images for vector rendering, see《HTML5 application of drawing SVG content to canvas

Hundreds of HTML5 examples to learn HT graphics components - topology

In some special cases, users can also embed HTML elements as ordinary node nodes, and support the scaling, size change and other operation effects of topology map, which can be referred to《HT for web htmlnode manual…, this combination has certain limitations. Users are not recommended to use the plug-in as a last resort.

HT provides a variety of common components and complex topology editing interactive plug-ins…, users can quickly develop a variety of editor tools in minutes. There is also one in the getting started manual…A simple editor example teaches users how to customize the example textbook of creating nodes, lines and polygons. You can start with this example to learn how to customize topology graph interaction.

Hundreds of HTML5 examples to learn HT graphics components - topology

Even like…As in this example, all default interactions of the topology map are closed, and the user-defined interaction logic is processed directly by adding the event listener of the native HTML DOM.

Hundreds of HTML5 examples to learn HT graphics components - topology

For example, the user can realize the effect of how to change the size of the graphic elements and detail parameters at any time. For example, the user can realize the effect of how to change the size of the graphic elements at any time, which is driven by the data of the topology, Therefore, just start a timer windwo.setinterval and constantly change the attribute value of the element to achieve the animation effect. However, HT also provides many convenient functions and plug-ins for the convenience of customers.

for example…Ht.default.startanim function in. This function supports frame based and time based animation. For understanding the easing parameter, see《Viewing the essence of animation easing function through webgl 3D》Articles and…This example

Hundreds of HTML5 examples to learn HT graphics components - topology

In case of continuous cycle change, HT for web dispatching manual can be adopted…Scheduling plug-in for:

Hundreds of HTML5 examples to learn HT graphics components - topology

If you like…The chaining function of concatenates a variety of animations, which can be used《HT for web animation manual…Plug in for. HT has encapsulated corresponding plug-ins for common connection animation requirements such as connection flow and dotted line flow《HT for web mobility manual》And《HT for web flow manual

Hundreds of HTML5 examples to learn HT graphics components - topology

The node positions of HT’s topology map are logical coordinates, not the geographic information longitude and latitude coordinates of GIS, but this does not prevent HT’s topology map from being integrated and presented with third-party GIS map engines such as Baidu map, Google map and openlayers. See《Baidu maps and echarts integrate HT for web network topology application》, this paper makes a comprehensive presentation of plug-ins such as HT topology map, baidu map, ecarts, HT connection flow and panel:…

Hundreds of HTML5 examples to learn HT graphics components - topology

After the topology map presents the demand effect, there is often a need to save the topology drawing data. This is very simple. The datamodel has the built-in function of converting all data into JSON, which is very convenient for users to import and export the topology map content. Generally, users will string and compress the JSON data, and then save it to the background database or file system, Load and import at runtime. See《HT for web serialization manual》In fact, HT’s serializable function is not specially designed for topology diagram components. In essence, the entire datamodel data layer can be serialized, which means that you can store table content, tree hierarchical relationships, including 3D scenes.

You can also refer to this article on storing data on the client side《Summary of five offline storage methods of HTML5 web client…

In addition, HT’s data binding function is a very good feature, which often makes you realize very interesting functions with a few lines of code unexpectedly. For example, the following example implements a chart primitive. In the topology diagram, the user can see whether dragging the primitive to rotate the pie chart and double-click to change whether it is hollow. Only a few dozen lines of code can be realized, I can’t imagine how to implement such a function more simply:…

For special industries where telecom network management customers often have alarm requirements, HT also provides information for Telecom OSS / BSS network management topology application《HT for web Telecom extension manual…The plug-in provides special customized display effects for primitive alarm rendering and alarm propagation:…

Although HT’s topology components can carry more than 10000 topology elements, it is an incredible workload if these topology elements are laid out manually. Therefore, HT provides a variety of automatic layout engine algorithms for topology components, such as elastic layout, circular layout, star layout, hierarchical layout and other style effects

HT for web auto layout manual…

HT for web layout manual…

HT also provides an intimate eagle eye overview plug-in for the topology map component(…), integrate the panel plug-in of HT(…)It is a common display method for users to integrate topology and eagle eye. Eagle eye has real-time synchronization of topology content, and can scroll wheel zoom, click positioning, drag and shift and other operation modes, which is very convenient for users to browse and navigate the application scenario of large amount of data topology map.

Let’s write this in the topology section. HT’s topology component has many functions, which can’t be explained in a blog. I can only mention the function points that most topology applications need to pay attention to. Let’s leave more HTML5 topology functions of HT to everyone to explore.…