Gospel of new infrastructure: smart building visual monitoring system leads a new era of intelligence

Posted May 27, 202012 min read


Smart buildings are closely related to people's lives. Increasing the degree of intelligence in buildings will greatly improve people's quality of life. It has received much attention in the current industrial Internet context. At present, the main advantages of smart building visual monitoring include:

  • Intelligence-A smart building is an ecosystem that has the perception ability, self-judgment ability and control ability like human beings.
  • Greening-Green buildings are green in terms of energy consumption, production capacity and energy management, and building security is monitored in green.
  • Operating costs can be controlled-Based on the requirements of sustainable development, modern buildings and commercial buildings need to be operated for more than 50 years, and the energy consumption of buildings during operation is huge. How to reduce operating costs and make buildings low-carbon, Healthy operation in an environmentally friendly state.

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 management methods, the implementation of each module needs to be carefully divided, but each module is relatively independent, which consumes a lot of energy in management costs and manpower investment. Nowadays, on the road of increasing technology development, we have gone through the wave of Industrial Internet, and have also adapted to the development of the new era of 5G and new infrastructure . Industry 4.0 ** is not only imperative It has been implemented step by step. Through the summary of experience in technology development, we can implement a monitoring and management solution for the visualization system of diverse industries on the Internet, as well as the smart building visualization system. Through a series of complete subsystems in series, the collection of visual online management systems is organized to greatly improve Management capacity and labor-saving investment.

Traditional smart buildings/building automation/building security/smart parks often use BIM(Building Information Modeling) software, such as Autodesk s Revit or Bentley building and engineering software, but the data of these BIM modeling models is often too large Bloated, most of the detailed information is of little significance to building self-control, but it affects the industry s trend of Web SCADA or Web configuration monitoring, so we use HT with Hightopo for Web ** product lightweight HTML5/WebGL modeling solution, to achieve rapid modeling, lightweight operation, even mobile terminal browser can be 3D visual operation and maintenance of good results.

This article explains the modeling of intelligent buildings, the realization of page animation effects, and the main function points of the page to help us understand how to use HT to achieve a simple smart building visualization Monitoring, and help us understand the advantages of smart buildings and building automation.

Preview address: HTML5-based WebGL building automation 3D visual monitoring http://www.hightopo.com/demo/ht-smart -building /

Introduction to interface and preview of effect

The interface realizes the fusion of the 2d interface and the 3d scene by superimposing the 2d drawings on the 3d scene. The 2d interface realizes the responsive presentation on the mobile terminal and the computer terminal through the automatic layout mechanism.

Interface initialization effect

The animation during the interface initialization process includes real-time rendering of the ground path, unfolding of the floor, glow scanning of the floor, dynamic water waves at the floor alarm point, and real-time changes of the floor monitoring data panel.

Monitoring interface effect

Monitoring interface includes:

  1. Real-time monitoring of personnel entering the building, 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 the building's elevator operation, the system displays the elevator's current operating position and whether it is running.
  3. 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 histogram.
  4. Real-time monitoring of building pipelines shows the current operation of all pipelines in intelligent buildings.

Intelligent Building Modeling

All the models in this 3d scene are line segments and hexahedrons. Compared with modeling with 3d Max and importing through obj, the triangles in the scene will be much less and more lightweight, such as the floors of buildings in the scene. ht.Shape class drawing, which records the information of floors, points, and segments, which is a line array information of type ht.List, and segments represents points The connection method is used to tell ht.Shape ** to use the information of points to draw quadratic Bezier curve or cubic Bezier curve or straight line and other information. For specific instructions, please refer to \ [shape for HT for Web Manual ] , the following is a screenshot of drawing a single layer:

It can be seen from the above figure that after building a layer of models, the other layers of the model are the same, but the y-axis values are different, and by stacking a few layers, the outline of a building can be formed. If users need to build smart parks, smart buildings and other scenes, they can use this HTML5/WebGL modeling-based solution, reducing the use of BIM modeling models. The pipeline in the scene and the route of the background map are formed by connecting points, but the style of the line or surface is modified by modifying the color thickness of the line or mapping. The elevator in the scene is a simple hexahedron with a yellow color, and the elevator line is also It is just a line segment, so the models in the scene are all lightweight modeling, which makes the rendering of the 3d scene run more smoothly and improves the user experience.

Scene key animation code analysis

1 . Code analysis of map route animation

Through the analysis of the above Intelligent Building Modeling, we 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 points, if a straight line AB is a certain line segment in the map, then we can know the coordinates of the point A and the point B, and then we can calculate any point on the line segment AB C * * The coordinates of the points, and then connect the points of A and C to form a line that is in the same direction as the position of the line segment but shorter than the line segment of AB until * * AC ** The length of the line segment is equal to the length of the line segment and then 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 currentPoints is the information of points in the drawing process
//segments are the connection method information of all points in the current path currentSegments is the connection method information of points in the drawing process

//That is the information at point A above
let fromPoint = points [currentIndex];
//That is the information at point B above
let toPoint = points [currentIndex + 1];
//Use AB information to form a vector in the AB direction
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
    currentSegments.push(segments [i]);

Through the above code, we can know that we have obtained the information of currentPoints and currentSegments, and then we need to calculate the coordinates of the point on the line connecting fromPoint(point A) and toPoint(point B), that is, point C. The following is the key pseudo Code:

//addLength is the value of the length of the line segment that is added each time, 500 is used in the program, that is, the length is increased by 500 each time
let nextVectorLength = currentVectorLength + addLength;
let tempPoint;

roadData.currentVectorLength = nextVectorLength;

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


//That is the coordinate of point C
tempPoint = {x:pointVector.x + fromPoint.x, y:pointVector.y + fromPoint.y};
//Add C point coordinates to currentPoints
//Add point C connection to currentSegments. In this program, the connection is straight line, so the value is 2
//roadNode is the ht.Shape class Reset the information of the ht.Shape class point
//Reset the connection information of ht.Shape class point

The following is the flowchart of animation code execution

The following is a screenshot of drawing a route animation:

Through the calculation method of vector in the program, the coordinates of point C are continuously obtained, of course, the coordinates of point C can also be calculated by other methods.

2 . Analysis of water wave and scanning animation code

Water wave and scanning animation are controlled by modifying the icon rectangle frame information api provided by HT, and the size of the icon rectangle frame is continuously modified by scheduling to generate water wave and scanning animation effects. For usage, please refer to \ [Scheduling Manual ] of HT for Web, the following is the key pseudo of water wave animation Code:

//waterWaveNodes all water wave nodes
let waterWaveTask = {
    interval:100, //refers to calling the action function every 100 ms
    action:function(data) {
        //Determine if waterWaveNodes contains data
        if(waterWaveNodes.indexOf(data)> -1) {
            //Get information about the icon rectangle at this time circleRect is an array of length 4, representing x, y, width, height
            let circleRect = data.a('circleRect');
            if(circleRect) {
                //Increase the water wave size by modifying the height
                let nextHeight = circleRect [3]+ 10;
                //Maximum height is 250
                if(nextHeight <250) {
                     //Corresponding to modify the size of y, the increase of y is half 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 the scheduled task

The following figure is a screenshot of the water wave in 2d:

3 . Code analysis of digital change animation

From the screenshots of the program, you can see that the numbers in the 2d panel and the 3d scene are dynamically changing. This part mainly uses data binding to dynamically modify the size of the value. For data binding, please refer to \ [for HT for Web Data binding manual ] , also through the scheduling to constantly modify the size of the value, I encapsulated the program The code for generating random numbers is used to bind to the corresponding node after each random number is generated. The following is the pseudo code for changing the numbers on the 2d panel:

//numNode(1-7) is the node corresponding to the number in the 2d panel
//data.a('ht.value', number) is to dynamically modify the ht.value information on attr, after which the drawing will automatically update the newly assigned value
//getRandomValue is a method for generating random numbers encapsulated by itself
this.change2dNumTask = {
        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 the scheduled task

Through the above code, we can know that modifying the value is to dynamically change the value by modifying the attr of the node and some attribute value of the style object. Of course, the 2d panel may be hidden in the program. At this time, the scheduled task does not need to be executed, and you can call removeScheduleTask. Method to remove this scheduled task.

4 . Histogram height animation code analysis

In the 3d scene, the columnar body is also a hexahedron, but it is constructed with a gradient texture around it, and a solid color texture is used on the top surface. Each hexahedron has height information. .getTall() to get the height value of the current hexahedron. According to the data binding in the previous section, we can loop to get the height value of all the column nodes when displaying the histogram. If it is named tall , And then store the value on the object of the current histogram node through node.a('tall', tall), and then you can continuously modify the height value to dynamically change when the column is initialized Height, when the height value is greater than node.a('tall'), it means that the initial height of the column has been completed. The following is the relevant 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 = {
    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 the initial height
                    let tall = data.a('tall');
                    //Determine whether the next height is greater than the initial height
                    if(nextTall <tall) {
                    else {
                        finishNum ++;
//Add the scheduled task

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

5 . 3d lens advancing code analysis

The advancement of the field of view in the 3d scene is achieved through the numerical methods provided by the HT api to modify the eye and the center, by continuously calling the setEye and setCenter methods to achieve the purpose of modifying the perspective, eye is analogous to human eyes Where it is, center is analogous to the position where the human eye is focused. The following is the key pseudo-code for achieving lens advancement:

let e = ht.Default.clone(g3d.getEye()), //Get the current eye position
    c = ht.Default.clone(g3d.getCenter()); //Get the current focus position
//eye is the corresponding eye value that needs to be modified
//center is the corresponding center value that needs to be modified
//The following are the differences between the three coordinate axes of xyz and eye and center respectively
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];
//Start the animation that continuously modifies the 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 converted 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 changing the distance between the xyz axis values corresponding to eye and center and the current xyz axis values corresponding to e and c, respectively, the change of viewing angle can be achieved.

The following is an application screenshot of the code:

to sum up

Internet of Things Through a variety of information sensing devices, real-time collection of any required information such as objects, processes, etc. that need to be monitored, connected, and interacted with, a huge network formed by combining with the Internet. It realizes the connection between objects and objects, objects and people, all objects and the network, which is convenient for identification, management and control. Therefore, the visual monitoring of smart buildings brought to us by the Internet of Things There may be many aspects to be monitored. The system implements a simple smart building monitoring system for the monitoring of personnel access, equipment information, pipeline information, etc. The Internet of Things also extends and extends the user terminal between any items and items, let us understand more about the intuitiveness of equipment visualization and asset visualization after building a smart park, smart campus and other scene monitoring. The effects of reflection and depth of field in the scene are all provided by the HT core package. All model building and animation are also modeled and animated by the API provided by the HT core package, so the display on the web page will be very smooth and greatly The user experience is improved, and the performance on the mobile terminal is also very friendly.

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

Through continuous exploration and technical improvement in the industry, HT has summarized many solutions for various industries on the industrial Internet. It can not only display the visual monitoring system on the PC, but also display it on the mobile. . The following is the effect of another visual monitoring system for smart buildings :

Similarly, in 2019, we also updated hundreds of industrial Internet 2D/3D visualization case sets, where you can find many novel examples, and you can also discover different industrial Internet: https://mp.weixin.qq .com/s/ZbhB6LO2kBRPrRIfHlKGQA

At the same time, you can also view more cases and effects: https://www.hightopo.com/demos/index.html