Forem: Lalo Salamanca

[Learning Notes] Hightopo’s HT for Web (3) - Host and Anchor

Lalo Salamanca — Tue, 25 Mar 2025 08:48:29 +0000

Before reading this article, we recommend reading: [Learning Notes] Hightopo’s HT for Web (2) - 2D Display, Node, Edge, and Animation

_Host _and _Anchor _are two important concepts within "HT for Web" (HT for short), serving essential roles in interaction and animation implementation.

Host, as the name suggests, is when one node attaches to another node. Like barnacles on a ship's hull, they move along when the ship moves; while the anchor point determines which position serves as the node's coordinate position. Continuing with the ship analogy, the anchor point is where the ship's anchor is located. Except that the anchor point of the ship is usually outside the ship, and the anchor point of the HT node is usually in its center (of course, it can also be outside).

Host

HT supports both 2D and 3D hosting. Let's explain its usage with 2D as an example. Before we begin, here are several methods related to Host:

getHost() and setHost(host) get and set the host object. When a node is attached to a host node, it will follow when the host moves or rotates
getAttaches() returns an array of ht.List type containing all nodes attached to itself
onHostChanged(oldHost, newHost) is a callback function triggered when the host object changes, can be overridden for further handling
handleHostPropertyChange(event) is a callback function triggered when the host object's properties change, can be overridden for further handling
isHostOn(node) determines whether the element is attached to the specified node
isLoopedHostOn(node) determines if there is a circular hosting relationship with the specified node, such as when A hosts B, B hosts C, and C hosts back to A, then elements A, B and C form a mutual circular hosting relationship

In the above example, we created four servers and established connections among them. Additionally, we defined their adsorption relationships as follows:
Server 4 is adsorbed to Server 3, Server 3 is adsorbed to Server 2, and Server 2 is adsorbed to Server 1.
Consequently, when Server 1 moves, Server 2 will follow suit. Since Server 3 is attached to Server 2, it will also move. Likewise, Server 4 will move in tandem with Server 3.
The previous two articles have already covered the creation of 2D drawings, nodes, and connections. Here, we primarily focus on configuring the adsorption relationship. The key code is as follows:

/** Create HT nodes separately and add them to the 2d graph view***/

// Create 4 server nodes
const server1 = createServerNode(100, 100, 'Server 1 (Host)', {'label.color': 'red'});
const server2 = createServerNode(300, 100, 'Server 2');
const server3 = createServerNode(100, 300, 'Server 3');
const server4 = createServerNode(300, 300, 'Server 4');

/************* Create Edges ****************/
......
/*********** Edge Animation ***************/
......
/******** Set the adsorption relationship between servers ********/
server2.setHost(server1);
server3.setHost(server2);
server4.setHost(server3);

The key code here is those three setHost(). After setting up the Host node, we can use the host.getAttaches() method to get all nodes that are attached to the Host.

const attaches = server1.getAttaches(); // The length of attaches is 1, which is server2

It's worth noting that although the number of attached nodes retrieved here is 1, due to the recursive nature of node attachments, Server 3 and Server 4 are also indirectly attached to Server 1.

Host Rotation

As mentioned earlier, nodes that are set to be hosted not only follow the Host node's movement, but also rotate according to the Host node's rotation, which is a very useful feature. The logic is implemented internally by "HT for Web", and we can simply call it when needed.

Anchor Point

As shown in the figure above, all 4 servers rotate around a center point, which is Server 1's anchor point. This is also Server 1's coordinate position. In other words: the anchor point affects the node's coordinate position, and simultaneously serves as the center point for node rotation and scaling.

In HT, the anchor point is an important concept for Nodes. While nodes are drawn as rectangular areas, the anchor point determines which position within that rectangle serves as the node's coordinate position.

The anchor point value is expressed as a percentage, where {x:0,y:0} is at the top-left corner of the area, and {x:1,y:1} is at the bottom-right corner. HT defaults to {x:0.5,y:0.5} as the anchor point, which is the center of the element. If a node is configured with values greater than 1 or less than 0, the anchor point will be outside the node's rectangular area. The anchor point can be retrieved and set using node.getAnchor() and node.setAnchor(), or individually accessed and modified using node.getAnchorX(), node.setAnchorX(), node.getAnchorY(), and node.setAnchorY() methods.

getAnchor() and setAnchor(x, y | {x:0.5,y:0.5}) get and set the element's anchor point, which affects the node's coordinate position and serves as the center point for rotation and scaling

The Hightopo website examples demonstrate the anchor point's functionality from multiple dimensions:

In 3D scenes, the anchor point principle is similar to 2D, except there's an additional dimension. Here are the methods to get and set anchor points:

getAnchor3d() and setAnchor3d(x, y, z | [x, y, z]) get and set the element's 3D anchor point. Note that to get the anchor point specifically on the Z-axis, you need to use node.getAnchorElevation() **instead of **node.getAnchorZ()

The figure below shows the anchor point position of a hexahedron in a 3D scene. The default anchor point for HT nodes is {x: 0.5, y: 0.5, z: 0.5}. Here we changed it to {x: 0, y: 0, z: 0}, so the coordinate axis is displayed at one corner of the hexahedron instead of the center position.

Summary

In this section, we mainly introduced HT's hosting and anchor point functionality. Node hosting allows nodes to move or rotate together with their host object. Using HT's setHost() method, you can set a node's host object, and the getAttaches() method can retrieve all nodes attached to that host object. Additionally, we covered the center point for node rotation and scaling—the anchor point. The anchor point value is expressed as a percentage, with HT defaulting to {x:0.5,y:0.5} as the anchor point, which is the element's center point. The anchor point can be retrieved and set using methods such as node.getAnchor() and node.setAnchor(x, y | {x:0.5,y:0.5}).

[Learning Notes] Hightopo’s HT for Web (1) - Basic Conceptions
[Learning Notes] Hightopo’s HT for Web (2) - 2D Display, Node, Edge, and Animation

[Learning Notes] Hightopo’s HT for Web (2) - 2D Display, Node, Edge, and Animation

Lalo Salamanca — Wed, 12 Mar 2025 04:09:28 +0000

Before reading this article, we recommend reading: [Learning Notes] Hightopo’s HT for Web (1) - Basic Conceptions

Using "HT for Web" (or simply "HT") for visualization is mainly divided into two parts: 2D and 3D. These two parts need to be created separately. After they are created, we then integrate them together.

The 2D part of "HT for Web" primarily refers to ht.graph.GraphView (abbreviated as GraphView, which is the 2D drawing or 2D display). The essence of a 2D display is a canvas. We can draw and edit basic shapes on it, create connection layouts, or render animations. GraphView can be used independently from 3D, such as for creating regular web pages, SCADA, charts, flowcharts, etc.

In this section, we will use an example to explain the basic concepts, functions, and usage of 2D displays. It mainly includes the following parts:

1. Creating a 2D display - (GraphView)
2. Adding nodes - (ht.Node)
3. Coordinate system and coordinate conversion
4. Adding connections - (ht.Edge)
5. Animation - (ht.Default.startAnim())

Creating a 2D display - (GraphView)

You can create a 2D display by using command “new ht.graph.GraphView()”. After creating the graph, for HT components, you can add it to the DOM using the “GraphView.addToDOM()” method. The addToDOM() method itself accepts one parameter. If it's empty, it will be added to the body by default. You can also pass a div to fix the 2D graph view to a specific position on the page.

For newly created graph view, they have default properties such as zooming, panning, editing, and rectangular selection. We can enable or disable them as needed.

Like other view components, if no DataModel is specified, GraphView itself will also create an empty DataModel container to manage all kinds of graphic elements added to it. You can get this container through GraphView.getDataModel() or GraphView.dm(). For GraphView, you can use the method “DataModel.setBackground()” to change its background.

/*************** Create one 2D display and append it to body element ******************/
const gv = new ht.graph.GraphView();
gv.addToDOM();
gv.setZoomable(true); // Default: true
gv.setPannable(true); // Default: true
gv.setEditable(true); // Default: true
gv.setRectSelectable(true); // Whether to allow box selection for Nod, default: true

const dm = gv.getDataModel(); // Get the DataModel of the drawing, abbreviated form: [gv.dm](http://gv.dm/)()
dm.setBackground('#DADADA'); // Also support dm.setBackground('rgba(218, 218, 218, 1)');

Why do we set the background of the graph view through DataModel instead of directly operating on the GraphView itself?

In the first section[[Learning Notes] Hightopo’s HT for Web (1) - Basic Conceptions], we mentioned that in order to save and restore our created 2D/3D data, we can achieve this through serialization and deserialization of the DataModel. Note that this serialization operation targets the DataModel, not the view component. Therefore, for view components like GraphView, display properties such as background color need to be configured in the DataModel in order to be saved.

Adding nodes - (ht.Node)

With the DataModel of the 2D graph view, we can now add nodes or graphic elements to it. Here we add two server cabinet icons.

/**************** Create two HT nodes and add them to the 2d display ************************/
const server1 = new ht.Node();
server1.setSize(40, 100); // Node width and height. Should be set according to the scale of the picture, otherwise there will be a stretching effect
server1.setPosition(100, 100); // Node location. The top left corner is the (0,0) coordinate
server1.setImage('assets/server.png'); // Image
server1.setName('Server 1'); // Node Name
dm.add(server1); // Add to the DataModel, that is, add to the 2d display

const server2 = new ht.Node();
server2.setSize(40, 100);
server2.setPosition(250, 100);
server2.setImage('assets/server.png');
server2.setName('Server 2');
dm.add(server2); // Add to the DataModel, that is, add to the 2d display

In traditional frontend (Vue, React, HTML) page development, to add a node, people often need to manually create the node (such as adding an icon) and add it to the HTML. Then we operate on that node through data binding. However, in HT, we only need to add the new node to the DataModel. The GraphView will listen for changes in the DataModel and automatically trigger re-rendering operations. This way, all style configurations and operations on the node can be performed directly on the node, and GraphView will update automatically.

Config the ht.Node

ht.Node (abbreviated as Node) is the basic class for rendering node elements in 2D drawings and 3D scenes, inheriting from ht.Data. Building on the foundation of ht.Data, it adds attributes such as position, size, rotation, scaling, and adsorbing. These attributes can all be set and retrieved through set*/get* methods.

In GraphView, when adding a new ht.Node, it will display a computer image by default. We can change this using the setImage(image url) method. As in the code example above, we got a cabinet photo and assigned it to the newly added node.

Since the cabinet image might be very large, we can control the node size using setSize(width, height). By configuring different width and height values, we can also achieve stretching effects. If you don't want stretching effects, you can set the node size according to the original image's aspect ratio.

Coordinate System and Coordinate Transformation

If a position is not specified for an added node, it will be placed at the point (x: 0, y: 0) by default. The node's position can be controlled through Node.setPosition(x, y) or Node.p(x, y). Its position can be obtained through Node.getPosition() or Node.p().

Since GraphView itself has properties like zooming and panning, the position of its nodes displayed in the browser is not fixed. Therefore, we can understand that GraphView's coordinate system is different from the browser's coordinate system.

In fact, GraphView uses a relative coordinate system, with direction consistent with canvas, meaning the top-left corner is the (0, 0) point. The positive direction of the x-axis is to the right, and the positive direction of the y-axis is downward. The following two methods can be used to convert between GraphView coordinates and browser coordinates.

GraphView.getLogicalPoint(event): Passes in an HTML event object to convert browser coordinates to logical coordinates in GraphView
GraphView.getScreenPoint(point, y): Passes in coordinates from GraphView to convert them to browser coordinates

Adding edges- (ht.Edge)

After adding two server cabinet icons, we will now connect them with lines. In HT, connections are implemented using ht.Edge.

The ht.Edge type (abbreviated as Edge) is used to connect a source and target Node. Multiple Edges can exist between two nodes, and it's also allowed for the source and target to be the same node. You can pass the source and target node objects directly in the constructor using new ht.Edge(source, target), or you can build the Edge object first and then set them separately.

getSource() and setSource(node) get and set the source node
getTarget() and setTarget(node) get and set the target node
isLooped() determines whether the line's source and target are the same node

/****************************** Create Edges *************************************/
const edges = [];

// Create 3 edges connecting server1 and server2
edges.push(createEdge(4, 'green', 6, 'yellow', [20, 10]));
edges.push(createEdge(3, '#fff', 3, '#000', [10, 10])); // black white edge
edges.push(createEdge(10, 'rgb(51,153,255)', 5, 'rgb(242,83,75)', [5, 10])); // red blue edge

function createEdge(width, color, dashWidth, dashColor, pattern) {
const edge = new ht.Edge(server1, server2);
edge.s({
'edge.width': width,
'edge.gap': 30, // gap between edges
'edge.color': color,
'edge.dash': true,
'edge.dash.width': dashWidth
'edge.dash.color': dashColor,
'edge.dash.pattern': pattern,
'edge.offset': 0,

});
dm.add(edge); // remember to add it to the dataModel
return edge;
}

// Create the 4th one to connect server 1 itself

const edge = new ht.Edge();
edge.setSource(server1);
edge.setTarget(server1);
edge.s({
'edge.width': 5,
'edge.gap': 30,
'edge.color': 'pink',
'edge.dash': true,
'edge.dash.width': 5,
'edge.dash.color': 'purple',
'edge.dash.pattern': [10, 10],
'edge.offset': 0,

});
dm.add(edge);
edges.push(edge);

The code above creates 4 Edges, with the first three connecting server1 and server2, and the fourth one connecting server1 to itself. The properties of ht.Edge are mainly configured through the edge.s() method, which is a shorthand form of edge.setStyle(). The edge.s() method is primarily used to configure the node's built-in properties. The HT for Web engine renders different effects based on the property key-value pairs. If you want to set custom properties, you need to use edge.a() to implement this.

Similar to ht.Node, ht.Edge is also extended from ht.Data. However, in most cases, it has its own characteristics:

It needs to set a source node and a target node. These two can be the same node (as in the last Edge in the example above).
An Edge missing either a source or target node will not be displayed on the drawing.
Edge follows the movement of nodes. That is, when we drag the source and target nodes, their associated Edges will move along with them.
Since the position of an Edge is determined by its two endpoints, Edge does not support the getPosition()/setPosition() methods. Similarly, as its width is configured in edge.s(), Edge also does not support the getSize()/setSize() methods.

In addition to the configurations in the example above, ht.Edge also supports custom line types. If you find it cumbersome, you can also use one of the dozen or so built-in line types in HT, such as edge.s('edge.type', 'boundary') which means the line only connects to the rectangular edge of the graphic element. If you want to use built-in line types, you need to import the edge type plugin:

<script src="../../lib/plugin/ht-edgetype.js"></script>

Animation - ht.Default.startAnim()

To implement animation functionality, it essentially involves these key properties: the animation duration, property changes during playback, and callback events after completion.

HT supports multiple ways to implement animations. Here we'll choose one of the more commonly used methods. Let's look at the code:

/****************************** Edge Animation *************************************/
const animParams = {
// frames: 12, // frame counts
// interval: 10, // interval between frames
duration: 2000, // total duration
easing: function(t){ return t * t; }, // Easing function, which defaults toht.Default.animEasing
finishFunc: function(){
ht.Default.startAnim(animParams);
}, // The function that is called after the animation finished.
action: function(v, t){ // The action function must be provided to implement property changes during animation. v represents the value calculated by the easing(t) function, and t represents the current progress of the animation, ranging from [0 to 1]
edges.forEach((edge, index) => {
const direction = index%2 == 0 ? 1 : -1;
edge.s('edge.dash.offset', t * 20 * direction);
});
}
};
ht.Default.startAnim(animParams);

Here, the method used by HT for playing animations is ht.Default.startAnim(animParams), which returns an anim object that can be used to call anim.stop(true) to terminate the animation. The anim object also has anim.pause() and anim.resume() methods that can be used to interrupt and continue animation functionality, as well as the anim.isRunning() function to determine whether an animation is in progress.

The parameters (animParams) used by this method are quite simple:

duration: Animation playback duration. If we want to precisely control the animation frame count and frame interval, we can also use frames + interval to control animation playback.
easing: Easing function. Uses mathematical formulas to control the speed and pace of animation playback. Refer to http://easings.net/.
finishFunc: Callback after playback. This method will be executed when the animation ends.
action: Action control. Which properties of the node need to change are defined here, such as controlling the node's position, rotation, size, etc. This method is called once for each frame during animation execution. The two parameters are:
t: Represents the current progress of the animation. Its range is from 0 at the start to 1 at the end. This value changes relatively uniformly as time progresses. If we want the animation to execute at a constant speed, we can use t to achieve this.
v: Represents the value calculated by the easing(t) function. Its range in most cases is also from 0 to 1. But the change in v value is determined by the easing(t) function and is not necessarily uniform. For some easing effects, such as easeOutBack() , its v value may exceed 1 during the middle stage. If you want to use easing effects in animations, you need to use the v parameter to control property changes.

Summary

In this section, we have primarily introduced the creation and basic configuration of HT for Web displays. In GraphView, we can add ht.Node to its DataModel to draw cabinets. The position of nodes can be controlled through Node.setPosition(x, y) or Node.p(x, y) methods, and their coordinates can be obtained through Node.getPosition() or Node.p() methods. Additionally, the coordinate system in GraphView differs from the browser's coordinate system; we can use GraphView.getLogicalPoint(event) and GraphView.getScreenPoint(point, y) methods to convert between these two coordinate systems.

For connections, we use the ht.Edge type. When creating an ht.Edge object, we need to pass in the source and target nodes, and can configure its properties through the edge.s() method, such as width, color, dashed lines, etc. After creating multiple connections, we can use the ht.Default.startAnim(animParams) method to implement connection animations, where animParams is an object containing parameters such as animation duration, easing function, animation end callback function, and action control function.

Create 2.5D Topology Diagrams with Hightopo JavaScript Library

Lalo Salamanca — Wed, 26 Feb 2025 10:05:26 +0000

Topology is very important in computer network design and communications as it describes how devices (the "nodes") in a network are interconnected (via "lines"). This structure encompasses both the physical arrangement of components, referred to as physical topology, as well as the logical or virtual connectivity patterns, known as logical topology.

In this article, we will demonstrate how to create a dynamic topology network with Hightopo's graphics engine "HT for Web" (HT for short).

Creating 2D Views and Connections

In Hightopo, ht.Node is a logical node that can serve as a "point" in the topology diagram. ht.Node supports displaying image icons, which allows for intuitive representation of each "point's" characteristics when creating topology diagrams. As for the "lines" in the topology diagram, this role can be fulfilled by the ht.Edge type. ht.Edge is used to connect source and target nodes, with multiple ht.Edge instances possible between two nodes, and it also allows the source and target to be the same node.

First, before building the topology diagram, we need to create an Hightopo 2D view:

const dm = new ht.DataModel(); // Create a data model
const g2d = new ht.graph.GraphView(dm); // create a 2d view
g2d.addToDOM(); // Add the 2d view to DOM
dm.setBackground('rgb(240,237,237)'); // Set the background color

The 2D view can also enable hierarchical rendering as needed:

dm.setHierarchicalRendering(true);

After creating the 2D view, we can proceed to create "nodes" and "edges":

const node1 = createNode('symbols/电信/icon_交换机.json', { x: 0, y: 0 }, "switcher");
const node2 = createNode('symbols/电信/icon_路由.json', { x: 300, y: 0 }, "router");
createEdge(node1, node2);
function createNode(icon, position, name) {
     const node = new ht.Node(); // create one ht.Node
     node.s({
         'label': name,
         'label.color': "#fff"
     });
     node.setImage(icon);
     node.p(position);
     node.setSize({ width: 100, height: 100 });
     dm.add(node); // add the node to data model
     return node;
}
function createEdge(source, target, color, reverse) {
     const edge = new ht.Edge(source, target); // craete a ht.Edge
     dm.add(edge); // add to data model
     return edge;
}

Here is the result after running the code:

Complex Connections

The previous section demonstrated a simple example that showed how to use Hightopo to create nodes and connect them with lines. In the real-world, scenarios are often more complex, requiring topology structures to be built based on actual data. Throughout this process, the core steps remain the same: first creating ht.Node instances to represent each endpoint, then using ht.Edge instances to implement connections between nodes. Let's proceed with more complex examples to demonstrate this.

Create Nodes

To create nodes in bulk and manage node data efficiently, the example defines a structured data format stored in a JSON file, which is then retrieved using ht.Default.xhrLoad(). Once the data is obtained, nodes can be created in bulk.

In real-world application scenarios, this data can also be retrieved through any web-based communication methods such as AJAX, fetch or WebSocket.

The data format defined in the equipment.json file:

[
    {
        "name": "coreSwitch1", // Device Name
        "code": "EQ_ASBB1425", // Device ID (Unique ID)
        "icon": "symbols/user/900-word/电信拓扑图标/icon_核心交换机.json", // Device Image Path
        "size": 60, // Node Size
        "position": {
            "x": 0,
            "y": 100
        }
    },
    {
        "name": "coreSwitch2",
        "code": "EQ_ASBB1478",
        "icon": "symbols/user/900-word/电信拓扑图标/icon_核心交换机.json",
        "position": {
            "x": 200,
            "y": 0
        }
    },
    {
        "name": "Server1",
        "code": "EQ_BCGJ2121",
        "icon": "symbols/user/900-word/电信拓扑图标/空白服务器.json",
        "position": {
            "x": 200,
            "y": 250
        }
    },
   ...
]

Get the data and creating nodes in bulk:

ht.Default.xhrLoad('./equipment.json', function (json) {
       const data = ht.Default.parse(json);
       data.forEach((item) => {
             createNode(item);
        })
})
function createNode(data) {
        const node = new ht.Node();
        node.setTag(data.code); // Set a unique identifier for a node
        node.setImage(data.icon);
        node.p(data.position);
        node.s('2d.movable', false); // Turn off movable
        node.setSize({ width: data.size || 150, height: data.size || 150 });
        dm.add(node);
         return node;
}

Create Connections

Similar to the node data, the example below defines a format for connections, which is also stored in a JSON file and retrieved using ht.Default.xhrLoad(). The JSON file defines the most important elements of a connection: source node, target node, and connection color.

[
    {
        "source": "EQ_ASBB1425", // Unique ID of the start node
        "target": "EQ_BCGJ2121", // Unique ID of the end node
        "color": "rgb(0,199,7)" // Edge color
    },
    {
        "source": "EQ_ASBB1425",
        "target": "EQ_BCGJ2131",
        "color": "rgb(0,199,7)"
},
...
]

Get the edge data and create connections in bulk, this step needs to be executed after creating the nodes:

ht.Default.xhrLoad('./connectData.json', function (json) {
      const connectData = ht.Default.parse(json);
      connectData.forEach((item) => {
            createEdge(item);
      })
})
function createEdge(data) {
    const source = dm.getDataByTag(data.source);
    const target = dm.getDataByTag(data.target);
    const edge = new ht.Edge(source, target);
    edge.s({
        "edge.color": data.color || "rgb(0,199,7)",
        "edge.width": 4,
        "shadow2.offset.x": -4,
        "shadow2.offset.y": 7,
        "shadow2": true,
        "shadow2.color": "rgba(0,0,0,0.18)",
})
dm.add(edge);
    dm.moveToTop(edge); // Move the node to top
    return edge;
}

At this point, the overall topology effect has been demonstrated, but there may still be some issues. For example, when connections between terminal routers are blocked by servers, it might appear as if there's a connection from Router 1—Server 1—Server 2—Router 2. However, in reality, this connection runs directly from Router 1 to Router 2.

In such cases, we can use other connection types. ht.Edge provides multiple connection types that can be set using edge.s('edge.type', type). Below are several different connection methods:

Flex：edge.s(‘edge.type’, ‘flex2’)

Ortho：edge.s(‘edge.type’, ‘ortho2’)

First horizontal and then vertical：edge.s(‘edge.type’, ‘h.v2’)

First vertical and then horizontal：edge.s(‘edge.type’, ‘v.h2’)

......
ht.Edge offers many other types of connection types.

Use Points

In this example, since the connections between two routers need to cross multiple other connections, we use another more flexible approach to make the connections more visually appealing and easier to understand: custom points. This method allows us to freely add control points along the connection path, enabling highly diverse effects.

The points-type connection has two very important properties:

- edge.points: control point information;
- edge.segments: used to specify how the vertex information in the points array should be used during rendering.

Let's change the connection type in this example to points and set the corresponding properties:

edge.s({
    'edge.type': 'points',
    'edge.center': true,
    'edge.points': [
        { "x": 680, "y": 105 },
        { "x": 490, "y": 200 },
        { "x": 470, "y": 200 },
        { "x": 410, "y": 230 },
        { "x": 400, "y": 250 },
        { "x": 360, "y": 270 },
        { "x": 340, "y": 270 },
        { "x": 260, "y": 310 },
        { "x": 250, "y": 330 },
        { "x": 80, "y": 415 }
    ],
    'edge.segments': [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
});

The effect implemented using the points type above:

Adding Background and Texts

Let’s create ht.Shape nodes as background decorations to highlight specific device areas. ht.Shape can be used to draw different shapes on a 2D View;

createShape([
    { x: -100, y: 130 },
    { x: 230, y: -50 },
    { x: 340, y: 15 },
    { x: 10, y: 195 },
    { x: -100, y: 130 }
], [1, 2, 2, 2, 5])
createShape([
    { x: -155, y: 354 },
    { x: 575, y: -30 },
    { x: 805, y: 110 },
    { x: 60, y: 510 },
    { x: -155, y: 355 },
], [1, 2, 2, 2, 5]);
createShape([
    { x: 300, y: 470 },
    { x: 660, y: 275 },
    { x: 805, y: 350 },
    { x: 435, y: 550 },
    { x: 300, y: 470 },
], [1, 2, 2, 2, 5])
function createShape(points, segments) {
    const shape = new ht.Shape();
    shape.setPoints(points);
    shape.setSegments(segments);
    shape.s({
        'shape.background': "#fff",
        "shape.border.color": "rgba(13,46,79,0.67)",
        "shape.border.width": 0.5,
    })
    dm.add(shape);
    dm.moveToTop(shape);
    return shape;
}

After adding the background:

Add some text labels - these are essentially also ht.Node, just displaying different icons/images, as shown below:

Adding Arrows

In complex network topologies, connections often need to indicate the direction of data flow. When using Hightopo to draw connections, ht.Edge provides the icons property, through which you can define a series of icons on ht.Edge and set their positions along the connection.

Before setting the icons property, you need to prepare the icons:

ht.Default.setImage('toArrow', {
    width: 40,
    height: 20,
    comps: [
        {
            type: 'shape',
points: [5, 2, 10, 10, 5, 18, 20, 10],
            closePath: true,
            background: 'rgb(0,199,7)',
            borderWidth: 1,
            borderColor: 'rgb(0,199,7)',
            gradient: 'spread.vertical'
        }
    ]
});
ht.Default.setImage('fromArrow', {
    width: 12,
    height: 12,
    comps: [
        {
            type: 'circle',
            rect: [1, 1, 10, 10],
            background: 'rgb(0,199,7)'
        }
    ]
});

Set icons on ht.Edge:

edge.addStyleIcon("fromArrow", {
     position: 15, // icon position
     keepOrien: true, // Whether to automatically adjust the icon orientation to maintain the best display
     names: ['fromArrow']
});
edge.addStyleIcon("toArrow", {
     position: 19,
     keepOrien: true,
     names: ['toArrow']
});

After adding the arrow:

Flow Animation

In HT for Web, the ht-flow.js plugin can be used to add flow animation effects to ht.Edge connections. This effect can be used to represent data transmission, energy flow, or any type of dynamic connection. The flow effects implemented using the ht-flow.js plugin are also very simple to configure - after correctly importing the ht-flow.js plugin, use g2d.enableFlow(60); to enable the flow, then set the corresponding flow properties on ht.Edge.

Here are some properties for configuring flow effects using ht.Edge:
_- flow: Boolean value, set to true to enable flow effect.

flow.count: Controls the number of flow groups, default is 1.
flow.step: Controls the flow step increment, default is 3.
flow.element.count: Number of elements in each flow group, default is 10.
flow.element.space: Spacing between elements in flow groups, default is 3.5.
flow.element.image: String type, specifies the image for elements in flow groups, images must be pre-registered via ht.Default.setImage. Currently supports configuration.
flow.element.background: Background color of elements in flow groups, default is rgba(255, 255, 114, 0.4).
flow.element.shadow.begincolor: String type, specifies the center color of the gradient shadow for elements in flow groups, default is rgba(255, 255, 0, 0.3).
flow.element.shadow.endcolor: String type, specifies the edge color of the gradient shadow for elements in flow groups, default is rgba(255, 255, 0, 0).
flow.element.shadow.visible: Whether the flow shadow is visible.
flow.begin.percent: Starting position, value from 0 - 1, default is 0.
flow.element.autorotate: Whether to auto-rotate, automatically orients based on the angle of the connection._

Set flow properties on the example ht.Edge:

edge.s({
        "flow": true,
        "flow.element.background": "rgba(240, 225, 19, 0.5)",
        "flow.element.shadow.begincolor": "rgba(240, 225, 19, 0.5)",
        "flow.element.shadow.endcolor": "rgba(240, 225, 19, 0)",
        "flow.element.count": 1
 });

The effect after configuration:

In more complex scenarios, relying solely on simple style configurations cannot meet design requirements. For this reason, ht-flow.js provides the flow.element.image property, which supports setting flowing elements as images or icons, and also supports effects with multiple images/icons flowing.

To set icons on the flow, you need to first register the icons:


ht.Default.setImage('dataIcon1', {
    "width": 50,
    "height": 50,
    "comps": [
        {
            "type": "shape",
            "background": "rgb(125,195,125)",
            "borderColor": "#979797",
            "points": [
                2.94441,
                16.1039,
                26.41008,
                16.1039,
                26.41008,
                4.28571,
                47.05559,
                25.58442,
                27.23783,
                45.71429,
                27.23783,
                33.84863,
                2.94441,
                33.84863,
                2.94441,
                16.1039
            ]
        }
    ]
})
ht.Default.setImage('dataIcon2', {
    "width": 50,
    "height": 50,
    "comps": [
        {
            "type": "shape",
            "background": "#32D3EB",
            "borderColor": "#979797",
            "points": [
                2.94441,
                16.1039,
                26.41008,
                16.1039,
                26.41008,
                4.28571,
                47.05559,
                25.58442,
                27.23783,
                45.71429,
                27.23783,
                33.84863,
                2.94441,
                33.84863,
                2.94441,
                16.1039
            ]
        }
    ]
});
Set styles on ht.Edge：
edge.s({
    "flow": true,
    "flow.element.count": 2,
    "flow.element.image": ["dataIcon1", "dataIcon2"],
    "flow.element.max": 20,
    "flow.element.min": 20,
    "flow.element.shadow.visible": false,
    "flow.element.space": 50,
    "flow.element.autorotate": true
});

The effect after configuration:

Summary

With this, our 2.5D topology diagram is now complete. If you would like to try it out, you can send an email to service@hightopo.com to obtain a free trial SDK to draw your own topology diagrams.

To get more: https://www.youtube.com/hightopo

[Learning Notes] Hightopo’s HT for Web (1) - Basic Conceptions

Lalo Salamanca — Tue, 30 May 2023 08:19:47 +0000

HT for Web, typically abbreviated as HT, is a WebGL engine developed using JavaScript. It can be used for 2D/3D visualization development. The engine consists of only one core file, "ht.js", which can be directly imported in the index.html using the script tag. The file size is approximately 1MB.

<body>
    <script src="lib/core/ht.js"></script>
</body>

Due to its strong scalability, it also provides a series of plugins. For example: edges, animation, obj, right-click menu, etc. These can be imported as needed during development.

This engine is independently developed by Hightopo company. After more than 10 years of continuous iteration and optimization, it has excellent performance in terms of learning curve, development efficiency, rendering effect, and operational performance.

Hightopo official website demo cases

One disadvantage of this engine is that it is not open source and requires a commercial license to use. However, interested developers can apply for a free trial package from its official website. This trial package includes not only the core engine files, but also user manuals and a large number of plugins. The trial period is usually three months, but we can continue to apply for it after it expires. The following are the plugins included in my trial package:

Apply for trial: https://www.hightopo.com/en-request.html

The main content of this chapter is to help everyone clarify the basic concepts in HT for Web, which will facilitate understanding in subsequent chapters.

Basic Data - ht.Data

ht.Data, also called Data for short, is the most basic data type (or data element) in HT for Web. For example, if a table has 3 rows, each row can be represented using one Data.

In Data, we can store and configure custom data. For example, in the first row of the table above, we can use a Data to store its row data:

let row1 = new `ht.Data`(); // Create a new `ht.Data` to storage row data

// Assign a value to `Data` (row data). 
// The "key" is before the colon, and the displayed value is after the colon.
// As for how the key is bound to the table column data, 
// this will be described in the table chapter later.
row1.a({
  "empNo": "ht424",
  "name": "Donnie",
  "sex": "Male",
  "job": "CEO"
});

let table = new ht.ui.TableView(); // create the table
table.dm().add(row1); // add the row data to the table. table.dm() is the DataModel

In the above code, row1.a() is a shorthand for row.setAttr(). It is used to store custom attributes in the Data object.

After storing data in a Table, if we want to know the total number of rows in the current Table or want to listen to operations such as adding, deleting, selecting, and deselecting for each row and perform further processing, we need to use data models and selection models.

Data Model (Container) - ht.DataModel

ht.DataModel, also known as DataModel or dm, is a container used to store and manage ht.Data. DataModel is also a fundamental concept in HT for Web. Tables, lists, 2D displays, 3D scenes, and other components in HT all use DataModel to manage their data. Therefore, once you have a clear understanding of the relationship and roles of ht.Data and ht.DataModel, using various HT components will become much easier.

DataModel is a container that different view components of HT (such as tables, lists, 2D drawings, 3D scenes, etc.) will use to manage the Data underneath. The only difference is that each Data has a different representation in different view components.

Each view component has the getDataModel() and setDataModel() methods, which are used to get and set the DataModel used by the component. For example:

let table = new ht.ui.TableView(); // create the table
const dm = table.getDataModel(); // get the `DataModel` of the table
// const dm = table.dm(); // same as table.getDataModel()

// Set the `DataModel` of the table
const newDM = new ht.DataModel();
table.setDataModel(newDM); // set the `DataModel` of the table
// table.dm(newDM); // same as table.setDataModel(newDM)

For the convenience of writing code, you can use dm() instead of getDataModel() and setDataModel() methods. If there are no parameters, it executes getDataModel(), and if there are parameters, it executes the setDataModel() method.

Selection Model - ht.SelectionModel

Using the List as an example, during interaction, users may need to select one or more rows in the list. How should these operations be handled?

Here we use HT's selection model ht.SelectionModel (referred to as sm).

ht.SelectionModel manages the selection state of Data objects in the DataModel. Each DataModel object has a built-in SelectionModel. Controlling this SelectionModel you’ll controls the selection state of all objects bound to the DataModel.

You can obtain the selection model 'sm' of a list by using either dataModel.getSelectionModel() or listView.getSelectionModel(). Once you have obtained the selection model, you can use sm.getSelection() and sm.setSelection(datas) to respectively retrieve and set the selected state of the Data. For example:

const sm = dataModel.getSelectionModel(); // get the selection model of the DataModel
sm.setSelection(data); // select one Data. The premise is that the `Data` has been created and added to the DataModel

View Component

View components are HTML elements that are displayed to users and can be used for interaction. For example, tables, 2D displays, and 3D scenes that mentioned earlier. As HT encapsulates native HTML elements and binds each view component to DataModel and Data, we only need to modify the properties of Data through JavaScript code to drive the changes of view components. This logic is basically the same in various view components in HT, so it will be very easy in development after familiarizing with this coding logic.

Using 3D scene as an example. The following code will add a 3D scene under the body tag and display the grid lines. After adding the scene, we’ll then add a new HT node.

const g3d = new ht.graph3d.Graph3dView(); // create a 3D scene
g3d.setGridVisible(true); // show grid on the ground
g3d.addToDOM(); // add the 3D scene to DOM

const dm = g3d.dm(); // get the `DataModel` of the 3D scene

const dataModel = dm;
const sm = dataModel.getSelectionModel(); // get the selection model of the DataModel

let node = new ht.Node(); // create a `HT` node, ht.Node is extended from `ht.Data`
dm.add(node); // add the node to 3D scene
sm.setSelection(node); // select a the node

const p3 = node.getPosition3d(); //default position in 3D scene：[0, 0, 0]

The HT node (ht.Node) is actually a class extended from ht.Data. On the HT Node, it has richer attribute definitions, such as setting size, scaling, rotation angle, position, and textures. In a 3D scene, each HT node can be used to represent a 3D model or other objects. For example, here we did not configure its attributes, so it defaults to displaying a hexahedron.

In the above example, we created a 3D scene view component. Each 3D scene corresponds to a DataModel. After obtaining the DataModel of the scene, we then added one ht.Node. Since no position was specified, the system placed it at the default position of [0, 0, 0];

After following the steps above and creating our own 3D scene with multiple models, we may want to save all the data in the scene for future use. This is where serialization and deserialization come into play.

Serialization and deserialization

Serialization and deserialization are very important concepts in HT. Serialization allows us to convert data in DataModel into strings and save them as files. Deserialization can help us restore files to DataModel. Since DataModel corresponds to view components, this enables us to save and restore our view data.

In HT, we can use the serialize() and deserialize() methods of the DataModel to perform serialization and deserialization operations. After serialization, the DataModel data will be converted into a JSON string.

const json = dm.serialize(); // serialization 

dm.deserialize(json); // deserialization

As shown in the example above, the JSON string we obtained after serializing the 3D scene is as follows:

{
  "v": "7.7.1",
  "p": {
    "autoAdjustIndex": true,
    "hierarchicalRendering": false,
    "postProcessingData": {
      "huesaturation": {
        "hue": [0, 0, 0, 0, 0, 0, 0],
        "saturation": [0, 0, 0, 0, 0, 0, 0],
        "lightness": [0, 0, 0, 0, 0, 0, 0]
      },
      "bloom": {},
      "glitch": {}
    }
  },
  "d": [{
    "c": "ht.Node",
    "i": 6
  }]
}

The JSON data format used here is a custom format of Hightopo. To save storage space, each property uses an abbreviated form. We generally do not need to modify it.

Summary

This chapter introduces some basic concepts of HT for Web, including: the basic data type ht.Data, the data model ht.DataModel, the selection model ht.SelectionModel, view components, and serialization and deserialization. These concepts are fundamental to HT for Web and are used throughout the development process. Understanding their functions and the logic between them is crucial for subsequent development and understanding of the operation logic of various components in HT for Web.

How to create 3D models (e.g. irregular floors) with javascript

Lalo Salamanca — Mon, 14 Nov 2022 14:27:55 +0000

The floors we finally created in browser:

There're multiple ways to create 3D models in browser with Javascript. In this article, we'll talk about one simple way (use HT for Web) to create a type of basic model: 3D floor by javascript.

1. Initialize the 2D/3D environment

At first, we created one data model, which will be used by g2d (GraphView) and g3d (Graph3dView). Since g2d and g3d use the same data model, the properties changed in one environment will be mirrored in the other.

dataModel = new ht.DataModel();                
g3d = new ht.graph3d.Graph3dView(dataModel);  // the top canvas 
g2d = new ht.graph.GraphView(dataModel); // the bottom canvas               
mainSplit = new ht.widget.SplitView(g3d, g2d, 'v', 0.4);   

view = mainSplit.getView();  // which is a DIV
view.className = 'main';
document.body.appendChild(view);    
window.addEventListener('resize', function (e) {
    mainSplit.invalidate();
}, false);                         

// 3d configuration
g3d.setGridVisible(true); 
g3d.setEye(0, 400, 400);                          

// 2d configuration
g2d.translate(400, 160);      
g2d.setZoom(0.6, true);
g2d.setEditable(true);                
g2d.setHelperEditableFunc(function(data, helper) {
    return false;                    
});

2. Prepare the image for the floor

We'll create 3 types of floors, so we defined 3 images (BASE64) here for subsequent shapes to use:

ht.Default.setImage('floor1', 'data:image/png;base64,iVB...')
ht.Default.setImage('floor2', 'data:image/png;base64,iVB...')
ht.Default.setImage('grass', 'data:image/jpeg;base64,/9j/4AAQ...')

3. Create floors

Now the environment and images are ready. Let's add different kinds of shapes.

ht.Shape datas when thickness properties are less than 0 often used to render the floor effect of the polygon model, this type of tall property determines the thickness of the floor, generally through floor.setElevation(floor.getTall()/2); to set the floor on the sea level.

The floor type is controlled the top parameters by the shape3d.top., shape3d.bottom. control of the bottom surface parameters, shape3d.* control of the thickness around the parameters. For situations where only needs the plane and does not requires a stereo effect, you can set the bottom and surround visible parameters of shape3d.bottom.visible and shape3d.visible to false implementations.

GraphView on the 2D ht.Shape realizes tile map can be set through shape.repeat.image property, Graph3dView 3D tiles are controlled by shape3d.top.uv.scale and shape3d.top.bottom.scale, but in this way if the floor size changes, it is generally necessary to set the parameters again so it is not convenient, HT provides the repeat.uv.length parameter to resolve this problem, and by setting this parameter, the tile will automatically adjusts the number of tiles based on the size of the graphic, and also with shape3d.top.uv.scale and shape3d.top.bottom.scale parameters are superimposed, and of course, in most cases, if repeat.uv.length is set, you do not need to set shape3d.top.uv.scale and shape3d.top.bottom.scale parameter.

floor1 = new ht.Shape();
dataModel.add(floor1);                   
floor1.setPoints([
    {x: 200, y: 50},
    {x: 400, y: 50},
    {x: 500, y: 200},
    {x: 100, y: 200}
]); 
floor1.translate(-100, -100);
floor1.setClosePath(true); 
floor1.setThickness(-1);
floor1.setTall(10);
floor1.setElevation(floor1.getTall()/2);
floor1.s({
    'shape.border.width': 5,
    'shape.border.color': 'yellow',
    'shape.repeat.image': 'floor1',
    'repeat.uv.length': 256,
    'shape3d.color': 'yellow',
    'shape3d.top.image': 'floor1',
    'shape3d.bottom.image': 'floor1'
});                 

floor2 = new ht.Shape();
dataModel.add(floor2);                   
floor2.setPoints([
    {x: 96, y: 209}, 
    {x: 43, y: 211}, 
    {x: -1, y: 199}, 
    {x: 7, y: 126},
    {x: 54, y: 127}, 
    {x: 41, y: 89}, 
    {x: 98, y: 60}, 
    {x: 114, y: 95},
    {x: 159, y: -3}, 
    {x: 290, y: 66}, 
    {x: 251, y: 137}, 
    {x: 296, y: 155},
    {x: 289, y: 199}, 
    {x: 260, y: 213}, 
    {x: 149, y: 213}, 
    {x: 77, y: 261}
]); 
floor2.setClosePath(true);
floor2.setSegments([1, 2, 4, 4, 4, 4, 2, 2]);
floor2.translate(-400, -100);
floor2.setThickness(-1);
floor2.setTall(30);
floor2.setElevation(floor2.getTall()/2);
floor2.s({
    'shape.border.width': 10,
    'shape.repeat.image': 'floor2',
    'repeat.uv.length': 64,
    'shape3d.top.image': 'floor2',
    'shape3d.bottom.image': 'floor2'
});                                 

grass = new ht.Shape();
dataModel.add(grass);   
grass.setThickness(-1);
grass.setPoints([
    {x: -400, y: -200},
    {x: 400, y: -200},
    {x: 400, y: -100},
    {x: -400, y: -100}
]);
grass.setClosePath(true);                 
grass.setTall(1);
grass.setElevation(1);
grass.s({
    'shape.border.width': 0,
    'shape.repeat.image': 'grass',
    'repeat.uv.length': 128,
    'shape3d.visible': false,                    
    'shape3d.bottom.visible': false,
    'shape3d.top.image': 'grass',
    'shape3d.reverse.flip': true
});

The demo link and source code can be find here:

(https://www.hightopo.com/guide/guide/core/shape/examples/example_floor.html)

Or people can find the video from: 2d/3d floors