Learning Hightopo’s HT for Web 2D Display, Node, Edge, and Animation

Creating a 2D Display – (GraphView)

Before creating a 2D display, we recommend reading [Learning Notes] Hightopo’s HT for Web (1) – Basic Conceptions.

Creating a 2D Display – (GraphView)

You can create a 2D display by using the command new ht.graph.GraphView(). After creating the graph, you can add it to the DOM using the GraphView.addToDOM() method. The addToDOM() method 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.

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 the DataModel is the core component of the HT for Web, and it is responsible for managing all kinds of graphic elements added to it.

Adding Nodes – (ht.Node)

You can add nodes to the graph by using the ht.Node type. 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.

Adding Connections – (ht.Edge)

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.

Animation – (ht.Default.startAnim(animParams))

For animations, we use the ht.Default.startAnim(animParams) method, 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.

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.

FAQs

• What is the purpose of creating a 2D display in HT for Web?
  Answer: To create a 2D display, you can use the new ht.graph.GraphView() command. After creating the graph, you can add it to the DOM using the GraphView.addToDOM() method.
• How do I add nodes to the 2D display?
  Answer: You can add nodes to the graph by using the ht.Node type. 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.
• How do I add connections to the 2D display?
  Answer: 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.
• How do I animate connections in the 2D display?
  Answer: For animations, we use the ht.Default.startAnim(animParams) method, 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.