Hundreds of HTML5 examples learn HT graphics components – topology diagram

What HT is:everything need to create cutting-edge 2D and 3D visualization.

This slogan is the product direction in the eyes of the year, and then slowly grinding in this direction, now HT is to achieve this effect, not to exhaust the force of the primitive, but we are satisfied with the product results, especially the HT user manual, the example and document seamless integration, the small 10来 trillion development package actually contains 45 manuals, Hundreds of live HTML5 examples, students who have not yet experienced can click the http://www.hightopo.com/guide/readme.html HT Manual entry to play.

This comprehensive and searchable manual entry is often asked where is the HT Demo? Can only blame these years the ultimate user experience concept, people accustomed to include many programmers are so "lazy", of course, we did not put the user experience of the last kilometer to do in place, so the recent Wangyinlong classmate manual example to capture the figure, the hundreds of manual examples are classified and sorted, The result is a page that allows you to visually find all HT examples: http://www.hightopo.com/demos/index.html

Obviously http://www.hightopo.com/demos/index.html compared to the http://www.hightopo.com/guide/readme.html page, for HT old users including our own to do technical support, All feel more intuitive to find examples, but for the HT beginner, facing this heap of hundreds of generic components, network topology diagram components, three-dimensional components, vector graphics, various editors and so on five-way eight-door HTML5 example feast, often do not know, for this I intend to write a "hundreds of HTML5 examples of learning HT graphics components "Series of articles, guide a variety of power, telecommunications, industrial SCADA and other different industry domain users, learning to use HT this full set of one-stop HTML5 graphics components.

The topology diagram component is the first to be used as the most typical HT customer demand application.

The topology diagram component of HT is based on HTML5 's Canvas technology, which is the name of power and telecommunications, but the component is not only used to render nodes and wires, but in HT we do not refer to this component in a narrow sense called topology, Network, or Diagram. We put the component class name to a more general graphview, as long as you have the imagination, you can use the Topology diagram component to make any other components, for some requirements you do not think of what components to implement, often is the topology diagram components need to stand out the force:

Perhaps most of the classmates who are not in the game field are curious about what the two pictures are? These two are open source HTML5 game engine Tools Qici engine (https://github.com/qiciengine/qiciengine) game Engineering capture, interested students can download the demo 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 for the entire Qici engine was developed based on the HT component, the explorer of the turret scene is the icon is scalable, the atlas can be expanded and merged to reduce the Graphview topology to the tree level, while the second action editor, The Curve editor and so on are all graphview.

Now you should be able to understand why I said that the topology diagram component can make almost any other component, and of course it takes time and effort cost to customize other components, otherwise there is no need for other components to exist, and the development of Qici Engine products is another story that is not started today. HTML5 game is not a new thing, but the game development tool is entirely based on HTML5 can run in the browser or a bit of meaning, attached to the proud of his classmate "City of consumer music" capture, interested in the playable: Http://engine.zuoyouxi.com/game /subara/index.php

Back to today's topic, learn to use topology diagram, the first step is: Get Your hands Dirty, even if you are not familiar with HTML, directly divert press http://www.hightopo.com/guide/guide/core/beginners/ The examples/example_edge.html code constructs two nodes with three lines:

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

// Create the topology diagram component
var graphView = new ht.graph.GraphView (dataModel);

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

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

// Create a wire, set the start and end nodes, and add it to the data model container
var edge = new ht.Edge ();
edge.setSource (source);
edge.setTarget (target);
dataModel.add (edge); 

Believe that the above code is very intuitive to understand the topology diagram of the principle of construction, many people will ask HT how to communicate data acquisition, the backend is limited? HT is just a client component that does not intervene in the background, so customers can use any backend system, Java, C + +, PHP, node. js, etc., can use any communication method Http/ajax, WebSocket, etc., using any data format XML, JSON or TXT, etc. Only the last user according to their own format of data content, using the standard API provided by the HT graphics library to create the corresponding nodes, lines and other elements, set the relevant property information, to achieve graphics rendering, so HT components have no requirements for the background and communication methods.

The above example for the name and location settings are randomly set in the demo value, the real system users will generally query through the background database, and then build the entity based on business data content and set the corresponding attributes. You will find that although you are building a topology diagram, but your 80% of the code is dealing with Data and datamodel, what are these two ghosts? In fact, the vast majority of HT customers to develop the entire system does not need to seriously study the "HT for WEB Data Model manual", also do not care what HT uses the MVC/MVP/MVVM framework, need to understand the readable http://www.hightopo.com/guide/ Guide/core/datamodel/ht-datamodel-guide.html Handbook

Simply said data is the smallest unit of HT, for the Graphview component can be said to be an entity, a node or a line; for a tree component it can be said to be a node of trees; for a Table component it can be said to be a row of records that need to be added to the Datamodel Data container, and all of the view components of HT Graphview, List, Tree, Table, or even the graph3dview of the components are bound to a data container that listens for changes in the data container's events and refreshes the display of its own components. These events include attribute changes of the elements, additions and deletions of elements, and a very important relationship, that is, the change of the parent-child relationship of the entity.

Referring to the parent-child relationship Let's take a look at a relatively comprehensive small example: http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html

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

// Create topology diagram, property page, list, tree, table, tree table component
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 entities, add child nodes, and add data containers
group = new ht.Group ();
group.setName (‘HT for Web‘ + ht.Default.getVersion ());
group.addChild (hello);
group.addChild (world);
group.addChild (edge);
dataModel.add (group); 

This example adds code to set up a parent-child relationship, with more components (topology, property page, list, tree, table, tree table component) bound to the same data model Datamodel, but the user's code is still primarily on data and Datamodel, which is the advantage of HT architecture design, Users who use more components do not add new learning costs, as long as they master the basic operations of Datamodel and more components.

Although the setting of primitive attributes, the addition of changes, or even the selection can be done by Datamodel, it does not mean that Datamodel is omnipotent, and some needs need to be done through the view. For example, a lot of basic needs are double-click the entity to do some business processing, how to listen? How can I not find any interfaces like the OnClick from Node? This can be found in the interactive section of the HT for Web Starter Guide: http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html#ref_ Graphviewinteraction

graphView.addInteractorListener (function (e) {
     if (e.kind === ‘clickData’) {
         console.log (e.data + ‘clicked’);
     }
     else if (e.kind === ‘doubleClickData’) {
         console.log (e.data + ‘double-clicked’);
     }
}); 

If you still want to break the casserole ask why not directly on the data or Datamodel to provide interactive processing, the data can be shared with many view views, datamodel even do not know the existence of view, they will only distribute model change events, and View through the monitor Listen to the changes of the model to the corresponding update processing, HT model architecture is very similar to the Facebook React https://facebook.github.io/react/flux unidirectional flow design concept:/http Facebook.github.io/flux/docs/overview.html

HT Datamodel equivalent to the Store module in Flux, topology diagram, tree and table of these natural corresponding View module, the General Launch action action is the background data changes, or the user manually input table property values, but ultimately not directly modify the view, are from the Data /datamodel/store initiates the modification, then the data model dispatches events to all view, and the last view is processed according to different events.

Interested students can open the http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html console, The effect of modifying the data model in real time under the input code experience:

In the example we mentioned a group type, this type of element node is displayed as a combination effect on the Graphview, can double-click to expand the merge, can follow the child node position size change and adaptive change, in addition to node, Edge, Group, HT also provides a Shape, Polyline, Grid, subgraph and other types of elements, these primitive types are targeted to display the effect to meet the basic elements of various industries needs: http://www.hightopo.com/guide/guide/core/ Beginners/ht-beginners-guide.html#ref_datatype

For the Wired Edge,ht also provides a custom trend extension mechanism, and provides the corresponding prefabricated extension connection type plug-in, see "HT for Web Connection type manual" http://www.hightopo.com/guide/guide/plugin/ Edgetype/ht-edgetype-guide.html

Of course, there are many predefined types that are not likely to meet the needs of exotic industry entities, which is what you should read under the HT for Web vector guide http://www.hightopo.com/guide/guide/core/vector/ Ht-vector-guide.html time, about the introduction of the vector has written two old articles for your reference: "HT full vectorization Graphics component design" and "HT graphic components Design" Way (ii)

Above This example you can play here: http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html.

In addition to the HT vector built-in chart type, the vector built-in chart is different from the traditional independent chart components, the traditional chart is a separate view DOM component, but the HT topology is Cavans way to draw, it is not possible to implement the Chart component and ordinary elements of different layers Secondary fusion display, but the vector chart type is perfect to achieve such a fusion, many industrial applications customers will be the vector chart and topology elements into one integrated, see the "HT for Web-based web SCADA Mobile application" HTTP// www.hightopo.com/blog/402.html Web SCADA application Case for HT

Of course you can also integrate HT with Baidu Echarts, as long as the HTML graphics components can be integrated into the HT layout container, can refer to the "Echarts Integrated HT for Web network topology Application", this example will echarts integrated HT topology map to do alarm statistics diagram Table Rendering Effect:

In addition to mixing third-party graphics component libraries, HT topology can also embed SVG images for vector rendering, see "drawing SVG content to Canvas's HTML5 application"

In some special cases, the user can also embed HTML elements as normal node nodes, and support the scaling, resizing, and other operational effects of the topology map, refer to the HT for Web htmlnode manual http://www.hightopo.com/guide/ Guide/plugin/htmlnode/ht-htmlnode-guide.html, this combination has certain limitations, it is not necessary to recommend users to use the plug-in.

HT offers a wide variety of common components, as well as complex topology diagram editing interaction plugins http://www.hightopo.com/guide/guide/plugin/xeditinteractor/ ht-xeditinteractor-guide.html, users can quickly develop a variety of editor tools in minutes. The starter manual also has a http://www.hightopo.com/guide/guide/core/beginners/examples/example_editor.html simple editor example that teaches users how to customize the creation of nodes, For examples of wiring and polygons, learning to customize the topology diagram interaction can be started with this example.

You can even turn off all of the default interactions of the topology diagram, as in the case of http://www.hightopo.com/guide/guide/core/beginners/examples/example_animation.html, Custom interactive logic processing is done directly by adding the native HTML DOM's event listener.

After building the topology diagram, many people's relationship is how to achieve animation, animation is in essence, at a certain point in time to drive the parameters of the element changes, such as size, color, thickness, including invisible and so on to achieve a variety of animation effects, and HT originally all elements are data-driven, users can modify data at any time Any of the properties on it, so just a timer windwo.setinterval constantly change the value of the element attribute can be animated, but in order to facilitate customer HT also provides many convenient functions and plug-ins.

For example, HT in Http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html#ref_animation. The Default.startanim function, which supports frame-based and time-based two ways of animation, in order to understand the easing parameters can be seen in "through WebGL 3D animation easing function essence" article and http://www . hightopo.com/guide/guide/plugin/form/examples/example_easing.html This example

If this is a continuous cycle change, the scheduling plugin for the HT for WEB Dispatch manual http://www.hightopo.com/guide/guide/core/schedule/ht-schedule-guide.html can be used:

If you like Https://github.com/tweenjs/tween.js's chaining function in tandem with multiple animations, you can use the HT for Web animation manual http://www.hightopo.com/guide/ Guide/plugin/animation/ht-animation-guide.html plug-in. For common connection animation requirements such as line flow, dashed flow, HT has encapsulated the appropriate plug-in for the HT for Web Mobile manual and the HT for Web Dash Flow Guide

HT topology map node location are logical coordinates, not GIS geographic information latitude and longitude coordinates, but this does not prevent HT topology map can and Baidu Map, GoogleMap, Openlayers and other third-party GIS map engine integration, see "Baidu Map, Echarts integrated HT for Web network topology diagram application, this article will be a HT topology map, Baidu Map, Echarts, HT line flow and panels and other plug-ins to do a comprehensive presentation of the results: Http://www.hightopo.com/demo/blog_ Baidu_20150928/ht-baidu.html

Topology diagram after rendering the demand effect, often have topological drawing data need to save requirements, this is very simple, datamodel built to convert all the data into JSON function, it is very convenient for users to import the topology map content to export work, the general user will be the JSON data string and compression, Then to the background database or file system, the runtime and then load the import, see the HT for WEB serialization manual, in fact, HT's serializable function is not designed for the topology diagram component, essentially the entire Datamodel data layer can be serialized, so that means you can store the table content , tree-level relationships include 3D scenes.

You can also refer to this article about the client-side storage data summary of five offline storage methods of the HTML5 Web client

Http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

In addition, HT's data binding feature is very good, often let you unexpectedly a few lines of code to achieve very interesting features, such as the following example, the implementation of a chart element in the topology diagram, the user to see the drag-and-drop elements to achieve the pie chart rotation, double-click the switch is hollow, only a few dozen lines of code to achieve I don't think I can make it easier to implement such a function: http://www.hightopo.com/guide/guide/core/databinding/examples/example_piebinding.html

For telecom network management customers often have alarm of the special industry present demand, this aspect also provides for the telecom OSS/BSS network topologies topology application of "HT for WEB Telecom extension Manual" http://www.hightopo.com/guide/guide/plugin/ Telecom/ht-telecom-guide.html plug-in, for the entity alarm rendering, alarm propagation, etc. provides a special customized display effect: Http://www.hightopo.com/guide/guide/core/beginners /examples/example_bodycolor.html

Although the topology diagram component of HT can host more than one topological element, it is an incredible amount of work if these topological elements are manually laid out, so HT provides a variety of automatic layout engine algorithms for the topology diagram component, such as elastic layouts, circular layouts, star layouts, and hierarchical layouts, among other styling effects

"HT for Web Automatic layout manual" http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html

"HT for Web Resilient layout manual" http://www.hightopo.com/guide/guide/plugin/forcelayout/ht-forcelayout-guide.html

HT also provides a thoughtful Eagle Eye Overview plugin (http://www.hightopo.com/guide/guide/plugin/overview/ht-overview-guide.html) for the topology diagram component, incorporating the HT panel pane plug-in (http://www.hightopo.com/guide/guide/plugin/panel/ ht-panel-guide.html) is a common user fusion topology and Eagle Eye Display method, Eagle eye with real-time synchronization topology content, can be wheel zoom, click to locate, drag and drop translation operation, very convenient for users to browse the navigation of Large data volume topology diagram of the application scenario.

Topology diagram to write these, HT topology diagram component also has a lot of functions, cannot say in a blog, I can only dragonfly water refer to most of the topology map application needs to pay attention to the function point, HT more HTML5 topology diagram function left to everyone to explore it.

Http://www.hightopo.com/guide/guide/plugin/flow/examples/example_demo3.html

Everything need to create cutting-edge 2D and 3D visualization

Hundreds of HTML5 examples learn HT graphics components – topology diagram