The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era



Intelligent building is closely related to people’s life. The improvement of intelligent building will greatly improve people’s quality of lifeIndustrial InternetUnder the background, it has received great attention. at presentIntelligent building visual monitoringThe main advantages include:

  • Intellectualization–Intelligent building is an ecosystem, which has the ability of perception, self judgment and control like human beings.
  • Green–Green building in energy consumption, production capacity and energy management to achieve green, building security to achieve green monitoring.
  • Operation cost can be controlled–Based on the requirements of sustainable development, modern buildings and commercial buildings need to operate for more than 50 years. The energy consumption of buildings in the process of operation is huge. How to reduce the operating costs and make the buildings run healthily in the state of low carbon and environmental protection.

Clothing, food, housing and transportation are often indispensable, and building construction has always been a basic point of social development and progress. In the past, the implementation of each module needs to be carefully divided, but each module is relatively independent, which consumes a lot of energy in the management cost and human input. Now, on the way to the development of science and technology, we have experiencedIndustrial InternetThe tide of the tide, again conform to5g new era, new infrastructureThe development of,Industry 4.0Not only is it imperative, but it has been implemented step by step. Through the experience of technology development, we can implement the monitoring and management scheme of diversified industry visualization system on the Internet, so is the intelligent building visualization system. Through a complete set of subsystems in series, we can sort out the collection of visual online management system, which greatly improves the management ability and saves labor input.

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

Traditional intelligent buildings / building automation / building security / smart parks often use BIM (building information modeling) software, such as Autodesk’s Revit or Bentley, but these BIMS The data of modeling model is often too large and bloated, and most of the detailed information has little significance for building automation, but it affects the industryWeb SCADAOrWeb configurationSo we use theHightopoOfHT for WebThe product lightweight HTML5 / webgl modeling scheme can achieve the good effect of rapid modeling, lightweight running time, and even 3D visual operation and maintenance of mobile terminal browser.

Through the modeling of intelligent building, the realization of page animation effect, and the main function points of the page, this paper helps us understand how to use HT to realize a simple intelligent building visual monitoring, and help us understand the advantages of intelligent building and building automation.

Preview address: webgl 3D visual monitoring of building automation based on HTML5

Interface introduction and effect preview

The interface integrates 2D interface and 3D scene by overlaying 2D drawings on 3D scene. 2D interface realizes the responsive presentation of mobile phone and computer through automatic layout mechanism.

Interface initialization effect

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

The animation in the process of interface initialization includes real-time rendering of ground path, floor expansion, floor glow scanning, dynamic water wave of floor alarm point, real-time change of floor monitoring data panel, etc.

Monitoring interface effect

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

The monitoring interface includes:

  1. The real-time monitoring of personnel entering the building, and the real-time information such as the avatar of the personnel entering the building and the current number of people in the building are dynamically refreshed in the panel.
  2. Real time monitoring of elevator operation in the building, the system displays the current running position of the elevator and whether it is running or not.
  3. The real-time monitoring of the monitoring data of a specific floor of the building shows the size of the specific information of the current floor in the form of a bar chart.
  4. The real-time monitoring of the pipeline in the building shows the operation of all pipelines in the current intelligent building.

Intelligent building modeling

All the models in the 3D scene are constructed by line segments and hexahedrons. Compared with 3D Max modeling and obj importing, the triangular faces in the scene will be much less and more lightweight. For example, the floors of buildings in the scene can be accessed through theht.ShapeClass, where floors are recordedpointsPoint information andsegmentsForht.ListType of line segment array information,segmentsRepresents the connection of points, used to tellht.ShapeUse the information of points to draw quadratic Bezier curve or cubic Bezier curve or straight line. For specific instructions, please refer to the shape Manual of HT for web. The following is a screenshot of drawing a single layer:

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

From the above figure, it can be seen that after the construction of one floor model, the other several models are the same, but the value of Y axis is different. By stacking several layers, the outline of a building can be formed. If users need to build smart parks, smart buildings and other scenarios, they can use this HTML5 / webgl modeling scheme, and reduce the use of BIM modeling model. The pipeline in the scene and the route of background map are formed by connecting points. Only by modifying the color thickness of the line or mapping, can the style of the line or surface be modified. The elevator in the scene is a simple hexahedron with yellow color, and the elevator line is just a line segment. Therefore, the models in the scene are lightweight modeling, making 3D The scene runs more smoothly and improves the user experience.

Key animation code analysis of scene

1. Map route animation code analysis

Through the aboveIntelligent building modelingWe can know that the lines are generated for the connection between points, so when we draw the path of the map, we can get the information of all the points, if it is a straight lineABFor a line segment in the map, then we can know the pointAAnd pointBAnd then we can calculateABAny point on the line segmentCThe coordinates of the points are then connectedAPoint andCPoint to form a line withABThe position and direction of line segments are the same, but the size ratio is largerABA short line untilACThe length of the line segment is equal toABAfter the length of the line segment, the next path animation is drawn. The following is the key pseudo code display:

//Currentindex is the index of the point to which the current path is drawn 
//Points is the information of all points in the current path, and currentpoints is the information of points in the drawing process 
//Segments is the connection mode information of all points in the current path, and current segments is the connection mode information of points in the drawing process

//That is, the information of point a above
let fromPoint = points[currentIndex]; 
//That is, the information of point B above
let toPoint = points[currentIndex + 1]; 
//A vector in AB direction is formed by two points information of ab
let pointVector = new ht.Math.Vector2(toPoint.x - fromPoint.x, toPoint.y - fromPoint.y); 
//Record the length of the vector to determine whether AC is greater than or equal to ab
let pointVectorLength = pointVector.length(); 

let currentPoints = [], currentSegments = [];

for(let i = 0; i < currentIndex + 1; i++) {
      x: points[i].x,
      y: points[i].y

Through the above code, we can know that we have obtained the information of current points and current segments, and then we need to calculate the coordinates of the point on the line from point (point a) to point (point B), that is, point C. The following is the key pseudo code for calculating point C:

//ADDLENGTH is the length value of each increased line segment. In this program, 500 is used, that is, each time the length is increased by 500
let nextVectorLength = currentVectorLength + addLength;
let tempPoint;
roadData.currentVectorLength = nextVectorLength;

//Judge whether the length of AC line segment is greater than ab 
if(nextVectorLength > pointVectorLength) {
    nextVectorLength = pointVectorLength;
    roadData.currentVectorLength = 0;
    roadData.currentIndex = currentIndex + 1;


//That is, the coordinates of point C
tempPoint = {x: pointVector.x + fromPoint.x, y: pointVector.y + fromPoint.y}; 
//Add the coordinates of point C to current points
//Add the C-point connection mode to the current segments. In this program, the connection is straight line, so the value is 2
//Roadnode is ht.Shape  Class reset ht.Shape  Information of class points
//Reset ht.Shape  Connection information of class points

The following is the animation code execution flow chart

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

Here is a screenshot of drawing an animation of a route:

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

Through the programvectorTo continuously obtainCThe coordinates of the points, of course, can also be calculated in other waysCThe coordinates of the point.

2. Water wave and scan animation code analysis

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

Water waves and scan animations are done throughHTThe API of modifying icon rectangle box information is provided for control. The size of icon rectangle box is constantly modified by scheduling to generate water wave and scanning animation effect,dispatchPlease refer to the “dispatch manual” of HT for web for the specific usage of the. The following is the key pseudo code of water wave Animation:

//All water wave nodes
let waterWaveTask = {
    Interval: 100, // refers to calling the action function every 100 ms
    action: function(data){
        //Judge whether waterwavenodes contain data
        if(waterWaveNodes.indexOf(data) > -1) { 
            //Get the rectangular box information of the icon, circlerect is an array with length of 4, representing x, y, width and height, respectively
            let circleRect = data.a('circleRect');   
            if(circleRect) {
                //Increase the water wave size by modifying the height
                let nextHeight = circleRect[3] + 10;                 
                //The maximum height is 250 
                if(nextHeight < 250) { 
                     //Corresponding to the modified size of Y, the increase of Y is half of the height
                    circleRect[1] = circleRect[1] - 5;
                    circleRect[3] = nextHeight;
                    data.a('circleRect', circleRect);
                    data.a('borderColor', 'rgba(255, 133, 133, ' + (1 - circleRect[3] / 250) + ')');
                else {
                    data.a('circleRect', [-0.5,128,257,0]);
                    data.a('borderColor', 'rgba(255, 133, 133)');
            else {
                data.a('circleRect', [-0.5,128,257,0]);
//Add this scheduling task

The following is a screenshot of water wave in 2D:

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

3. Digital change animation code analysis

From the screenshot of the program, we can see that there are dynamic changes of numbers in 2D panel and 3D scene. In this part, we mainly modify the value size through data binding. For data binding, please refer to HT for web In the program, I encapsulate the code for generating random numbers, which are used to bind to the corresponding node after each random number is generated. The following is the pseudo code for modifying the number on the 2D panel:

//Numnode (1-7) is the node corresponding to the number in 2D panel
// data.a(' ht.value ', number) is to dynamically modify the ht.value  After that, the drawing will automatically update the new assigned value
//Getrandomvalue encapsulates the method of generating random numbers
this.change2dNumTask = {
        interval: 1000,
        action: (data) => {
            if(data === numNode1 || data === numNode2) {
                data.a('ht.value', util.getRandomValue([500, 999], 5));
            if(data === numNode3 || data === numNode4) {
                data.s('text', util.getRandomValue([0, 30], 2) + '%');
            if(data === numNode5) {
                data.a('ht.value', util.getRandomValue([0, 99999], 5, 3));
            if(data === numNode6) {
                data.a('ht.value', util.getRandomValue([0, 100], 2));
            if(data === numNode7) {
                data.a('ht.value', util.getRandomValue([0, 100], 2));
//Add this scheduling task

From the above code, we can know that the value is changed dynamically by modifying the attr of the node and a certain attribute value of the style object. Of course, the 2D panel may be hidden in the program. At this time, the scheduling task does not need to be executed. You can call the removescheduletask method to remove the scheduling task.

4. Histogram height animation code analysis

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

In the 3D scene, the cylinder is also a hexahedron, but the gradient map is used around and a solid color map is used to construct the top surface. Each hexahedron has height information,HTThrough thenode.getTall()To obtain the height value of the current hexahedron. According to the data binding mentioned in the previous section, we can cycle to obtain the height values of all the columnar nodes when displaying the histogram, if it is named astall, and then passednode.a(‘tall’, tall)Stores the value in the current histogram node’sattrAfter that, the height value can be continuously modified to dynamically change the height when the column is initializednode.a(‘tall’)The height of the current column initialization has been completed. The following is the related pseudo code:

charts.forEach((chart) => {
    //Store height on attr
    !chart.a('tall') && chart.a('tall', chart.getTall()); 
    //Set the initial height to 0
this.chartAnimteTask = {
    interval: 25,
    action: function(data){
        if(charts.indexOf(data) > -1) {
            if(finishNum !== chartLength) {
                if(data.getTall() !== data.a('tall')) {
                    //Deep is the height of each increase
                    let nextTall = data.getTall() + deep; 
                    //Get initialization height 
                    let tall = data.a('tall'); 
                    //Determine whether the next height is greater than the initialization height
                    if(nextTall < tall) {
                    else {
//Add this scheduling task

Through the above code, we can know that the program execution of each step of animation is completed by scheduling, which is similar to the implementation of several animations mentioned above.

5. Code analysis of 3D lens advance

The forward and backward of field of view in 3D scene are all modified by HT APIeyeAndcenterBy calling seteye and setcenter methods to modify the view angle, eye analogizes the position of human eyes and center simulates the focus position of human eyes. The following pseudo codes are used to realize the key of lens advancement:

let e =  ht.Default.clone (g3d. Geteye()), // get the current eye position
    c =  ht.Default.clone (g3d. Getcenter()); // get the current eye focus position
//Eye is the corresponding eye value to be modified
//Center is the corresponding center value to be modified
//The following is the difference between eye and center in XYZ
let edx = eye[0] - e[0],
    edz = eye[1] - e[1],
    edy = eye[2] - e[2],
    cdx = center[0] - c[0],
    cdz = center[1] - c[1],
    cdy = center[2] - c[2];
//Open the animation of constantly modifying eye and center
    duration: time ? time : 3000,
    easing: function(t){ return t; },
    finishFunc: function() {
        if(typeof cb === 'function') {
    action: function (v) {
        //V is the value transformed from 0-1 
            e[0] + edx * v,
            e[1] + edz * v,
            e[2] + edy * v
            c[0] + cdx * v,
            c[1] + cdz * v,
            c[2] + cdy * v

Through the above code, we can know that by modifying the distance between the value of XYZ axis corresponding to eye and center and the value of XYZ axis corresponding to current E and C to achieve the change of perspective.

The following is an application screenshot of the code:

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era


Internet of thingsThrough a variety of information sensing equipment, real-time collection of any need to monitor, connect, interactive objects or processes and other needs of information, combined with the Internet to form a huge network. It realizes the connection of objects and objects, objects and people, and all the objects are connected with the network, which is convenient for identification, management and control. So the Internet of things brings usVisual monitoring of intelligent buildingsThere may be many aspects that need to be monitored. The system realizes a simple intelligent building monitoring system for the monitoring of personnel access, equipment information, pipeline information, etc., and the Internet of things also extends and extends the user end to any objects and objects, so that we can better understand the scene of building a smart Park and a smart campus. After monitoring, equipment visualization and asset visualization can be realized It brings us intuition. The effects of reflection and depth of field in the scene are all provided by HT core package. All model building and animation are modeled and driven by the API provided by HT core package. Therefore, the display in the web page will be very smooth, greatly improving the user experience, and the performance on the mobile terminal is also very friendly.

The following is a screenshot of the program running on the mobile terminal:

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

Through continuous exploration in the industry and technical research and improvement, HT has summed up a lot of solutions for various industries on the industrial Internet. It can not only display the visual monitoring system on the PC side, but also display it in a lightweight way on the mobile terminal. The following is the implementation effect of another intelligent building visual monitoring system:

The gospel of new infrastructure: intelligent building visual monitoring system leads the intelligent new era

Similarly, in 2019, we have updated hundreds of 2D / 3D visualization case sets of industrial Internet. Here, you can find many novel examples and discover different industrial Internet:

At the same time, you can also view more cases and effects:

Recommended Today

Summary of import and export usage in JavaScript

import import 和 require 的区别 import 和js的发展历史息息相关,历史上 js没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。这对开发大型工程非常不方便。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。也就是我们常见的 require 方法。 比如 `let { stat, exists, readFile } = require(‘fs’);` 。ES6 在语言标准的层面上,实现了模块功能。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。 import 的几种用法: 1. import defaultName from ‘modules.js’; 2. import { export } from ‘modules’; 3. import { export as ex1 } from […]