![Cover image for [Learning Notes] Hightopo’s HT for Web (1) - Basic Conceptions](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foc6t567vn1qqkam7yeaj.png)
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.
Top comments (0)