Blog garden: :Home page: :Bo asked: :Flash memory: :New essays: :contact: :To subscribe to : :management: :

173 Essay :: 1 article :: 322 Comments :: 0 citation

The announcement

xhload3d



Five years and one month



351



0
+ add attention

search

Commonly used links

• My essay
• My comments
• I participate in
• The latest comments
• My label

My label

• HTML5(148)
• 3D(73)
• WebGL(65)
• Industrial control (51)
• Hightopo(49)
• Telecommunication Network Management (31)
• The topology (30)
• Telecom (26)
• Canvas(26)
• Topology (25)
• More and more

Archives of essays

• January 2019 (1)
• September 2018 (2)
• August 2018 (3)
• July 2018 (5)
• June 2018 (3)
• May 2018 (4)
• April 2018 (4)
• March 2018 (6)
• February 2018 (3)
• January 2018 (6)
• December 2017 (6)
• November 2017 (10)
• October 2017 (4)
• June 2017 (2)
• May 2017 (2)
• February 2017 (1)
• December 2016 (1)
• October 2016 (4)
• September 2016 (6)
• August 2016 (4)
• July 2016 (4)
• June 2016 (3)
• February 2016 (3)
• December 2015 (4)
• November 2015 (11)
• October 2015 (10)
• September 2015 (4)
• August 2015 (2)
• July 2015 (3)
• June 2015 (1)
• May 2015 (3)
• April 2015 (2)
• March 2015 (5)
• February 2015 (1)
• January 2015 (3)
• December 2014 (9)
• November 2014 (7)
• October 2014 (1)
• September 2014 (2)
• August 2014 (3)
• July 2014 (1)
• June 2014 (3)
• May 2014 (1)
• April 2014 (1)
• March 2014 (3)
• February 2014 (3)
• December 2013 (4)

The latest comments

• 1. Re: Intelligent aircraft control based on HTML5 combined with industrial Internet
• Can you provide a source code?
• – great tiger 1
• 2. Re: WebGL 3D Archive visual management system based on HTML5
• Does this case have the source code? I’ve been working on a project that needs this
• –anionic
• 3. Re: HTML5 Archive visual management system based on WebGL 3D
• Bored with harm to be bored with
• Sugar sugar vi
• 4. Re:ECharts integrates HT for Web network topology applications
• Can you send me this source code, [email protected]. We are integrating these two things recently. There is no need to send ht components.
• –FcLeaf
• Re: Web SCADA industrial control mobile application based on HT for Web
• Is HT for Web free
• – hai-dong gao

Reading leaderboards

• 1. Hundreds of HTML5 examples to learn HT Graphics Components – Topology (20031)
• 2. 3D Computer room Monitoring Application of TELECOM NETWORK Management based on HTML5 (17857)
• 3. Hundreds of HTML5 examples of learning HT graphics components — WebGL 3D (6379)
• 4. Rapid development of HTML5 interactive subway Line map (4991)
• 5. Baidu Map, ECharts Integration HT for Web Network Topology Application (4673)

Review charts

• 1. 3D Computer room monitoring application of Telecom NETWORK Management based on HTML5 (31)
• 2. Rapid development of HTML5 interactive Subway Line map (18)
• 3. Hundreds of HTML5 examples to learn HT graphics components – Topology (14)
• 4. Power 3D Monitoring Application based on HTML5 Technology (IV) (11)
• 5. HTML5 3D Snake game with 100 lines OF JS (9)

Recommended leaderboard

• 1. Rapid development of HTML5 interactive Subway Line map (36)
• 2. 3D Computer room Monitoring Application of Telecom NETWORK Management based on HTML5 (31)
• 3. Hundreds of HTML5 examples to learn HT graphics components — Topology (28)
• 4. Hundreds of HTML5 examples of learning HT graphics components — WebGL 3D (16)
• 5. Application of HTML5 technology in wind power, photovoltaic and other new energy fields (13)

WebGL building automatic control 3D visual monitoring based on HTML5

preface

Intelligent buildings are closely related to people’s lives. The improvement of the intelligent degree of buildings will greatly improve people’s quality of life, which has attracted great attention in the current industrial Internet context. At present, the main advantages of intelligent building visual monitoring include:

• Smart — Smart buildings are an ecosystem that is capable of perception, self-judgment, and control, just like humans.
• Green – Green building in energy consumption, 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 be operated for more than 50 years, and the energy consumption of buildings in the operation process is huge. How to reduce operation cost and make buildings run healthily in a low-carbon and environmentally friendly state?

Traditional smart buildings/Building automation/Building security/smart parks often use BIM (Building information Modeling) software, such as Autodesk’s Revit or Bentley’s architecture and engineering software, However, the data of these BIM modeling models are often too large and bloated, and most of the details are of little significance to building self-control, but affect the trend of industry Web SCADA or Web configuration monitoring. Therefore, we adopt Hightopo’s HT for Web product lightweight HTML5/WebGL modeling scheme to achieve a good effect of rapid modeling, runtime lightweight and even mobile terminal browser 3D visualization operation and maintenance.

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

WebGL Building automation 3D visual monitoring based on HTML5 www.hightopo.com/demo/ht-sma…

Interface introduction and effect preview

The interface realizes the integration of 2D interface and 3D scene by superimposing 2D drawings on 3D scene, and the 2D interface realizes the responsive presentation of mobile and computer terminals through the mechanism of automatic layout.

Interface initialization effect

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

Monitor interface effect

The monitoring page includes:

1. Real-time monitoring of personnel entering the building, and real-time information such as the head picture of personnel entering the building and the current number of people in the building are dynamically updated in the panel.
2. Real-time monitoring of the elevator operation of the building, the system displays the current operating position of the elevator and whether it is running information.
3. Real-time monitoring of the monitoring data of a specific floor of a building, which 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 building’s pipes shows the operation of all the pipes in the current intelligent building.

Intelligent Building Modeling

All models in this 3D scene are built by line segments and hexahedrons. Compared with 3d Max modeling and obJ import, the triangular planes in the scene are much less and more lightweight. For example, the floors of buildings in the scene are drawn by HT. Shape class. This class records information about floor points and segments based on hT. List. Segments represent the connection mode of points and are used to tell HT. Shape to draw a quadratic Bezier curve, a cubic Bezier curve, or a straight line using the information. For details, see the Shape Manual of HT for Web. The following is a screenshot of drawing a single layer:

It can be seen from the figure above that after building a layer model, other layers of models are the same, but the values of y axis are different. After stacking several layers, the outline of a building can be formed. If users need to build smart parks, smart buildings and other scenes, they can completely use this HTML5/WebGL based modeling scheme, and reduce the consideration of BIM modeling model. Scene in the pipeline and background map route for after the point of attachment, just by changing the line color thickness or map to change the line or plane style, scene in the elevator for a simple hexahedron color is yellow, the lift line is a line segment, so in the scene model are lightweight, make run 3 d scene rendering more smoothly, Improve user experience.

Scene key animation code analysis

1. Map route animation code analysis

Through the above analysis of intelligent building modeling, we can know that all lines are generated for connecting points, so we can get information of all points after drawing the path of the map. If line AB is A line segment in the map, we can know the coordinates of point A and point B. Then we can calculate the coordinates of any point C on the AB segment, and form A line with the same position direction but shorter than AB segment by connecting point A and point C, until the length of AC line segment is equal to the length of AB segment, then draw the next path animation. The key pseudocode is shown below:

1 // currentIndex indicates the index of points drawn to the current path. 2 // Points indicates information about all points in the current path. CurrentPoints indicates information about points during the drawing process Point = points[currentSegments]; 1 let toPoint = points[currentIndex + 1]; Vector2(topoin.x - fromPoint. X, topoin.y - fromPoint. Y);  12 let pointVectorLength = pointvector.length (); 13 14 let currentPoints = [], currentSegments = []; 15 16 for(let i = 0; i < currentIndex + 1; i++) { 17 currentPoints.push({ 18 x: points[i].x, 19 y: points[i].y 20 }); 21 currentSegments.push(segments[i]); 22}Copy the code

CurrentPoints and currentSegments = fromPoint(A) and toPoint(B) The following is the key pseudocode for calculating point C:

NextVectorLength = currentVectorLength + addLength, 3 tempPoint; nextVectorLength = currentVectorLength + addLength, 3 tempPoint;  4 5 roadData.currentVectorLength = nextVectorLength; 8 If (nextVectorLength > pointVectorLength) {9 nextVectorLength = pointVectorLength; 10 roadData.currentVectorLength = 0; 11 roadData.currentIndex = currentIndex + 1; 12 } 13 14 pointVector.setLength(nextVectorLength); X + fromPoint. X, y: pointvector.y + fromPoint. Y}; 19 currentPoints. Push (tempPoint); 21 currentSegments. Push (2); 23 RoadNode. setPoints(currentPoints); 25 RoadNode. setSegments(currentSegments);Copy the code

The following is the flow chart of animation code execution:

The following is a screenshot of animating a route:

In the program, the coordinates of C point can be obtained continuously through vector calculation. Of course, other ways can also be used to calculate the coordinates of C point.

2. Water wave and scan animation code analysis

Water waves and scanning animation by HT information modify icon rectangle API to control, through the way of scheduling ICONS rectangular box size to produce water waves and constant revision scanning animation effects, scheduling can refer to the specific use of HT for Web/operation manual, the following key for water wave animation pseudo code:

WaterWaveTask = {3 interval: 100, // call action every 100 ms Function (data){5 if(waterWaveNodes. IndexOf (data) > -1) {7 Let clerect = data.a(' clerect '); 9 10 if(circleRect) {11 let nextHeight = circleRect[3] + 10; 17 clerect [1] = circleRect[1] - 5; 17 clerect [1] = circleRect[1] - 5; 18 circleRect[3] = nextHeight; 19 data.a('circleRect', circleRect); 20 data.a('borderColor', 'rgba(255, 133, 133, ' + (1 - circleRect[3] / 250) + ')'); 21} 22 else {23 data.a(' clerect ', [-0.5,128,257,0]); 24 data.a('borderColor', 'rgba(255, 133, 133)'); 25} 26 27} 28 else {29 data.a('circleRect', [-0.5,128,257,0]); 30} 31 32} 33} 34}; 35 dm3d.addScheduleTask(waterWaveTask); // Add the scheduling taskCopy the code

Below is a screenshot of water waves in 2D:

3. Digital change animation code analysis

It can be seen from the screenshots of the program that numbers are changing dynamically in both 2d panel and 3D scene. This part mainly changes the size of values dynamically through data binding. For data binding, you can refer to HT for Web’s [Data Binding manual], and constantly changes the size of values through scheduling. I have encapsulated the code for generating random numbers in the program, which is used to bind to the corresponding node after generating random numbers each time. The following is the pseudo-code for modifying the numbers on the 2D panel:

A ('ht.value', number) is used to dynamically modify the ht.value information on attR. This. Change2dNumTask = {5 interval: 1000, 6 action: {5 interval: 1000, 6 action: (data) => { 7 if(data === numNode1 || data === numNode2) { 8 data.a('ht.value', util.getRandomValue([500, 999], 5)); 9 } 10 if(data === numNode3 || data === numNode4) { 11 data.s('text', util.getRandomValue([0, 30], 2) + '%'); 12 } 13 if(data === numNode5) { 14 data.a('ht.value', util.getRandomValue([0, 99999], 5, 3)); 15 } 16 if(data === numNode6) { 17 data.a('ht.value', util.getRandomValue([0, 100], 2)); 18 } 19 if(data === numNode7) { 20 data.a('ht.value', util.getRandomValue([0, 100], 2)); 21} 22} 23}; 24 dm2d.addScheduleTask(this.change2dNumTask); // Add the scheduling taskCopy the code

It can be seen from the above code that the value is changed dynamically by changing the attR of the node and a certain attribute value of the style object. Of course, the 2D panel may also be hidden in the program, so the scheduling task does not need to be executed. You can call the removeScheduleTask method to remove this scheduling task.

4. Histogram high animation code analysis

In the 3D scene, the cylinder is also a hexahedron, but it is constructed with gradient maps around it and a solid color map on the top. Each hexahedron has height information. HT uses node.gettall () to get the current height of the hexahedron. A (‘tall’, tall) is used to store this value in the attR object of the current bar node. After that, the height value can be changed dynamically during the initializing of the column. When the height value is greater than Node. a(‘tall’), the initializing height of the current column is completed. Here is the relevant pseudocode:

1 charts.forEach((chart) => { 2 ! chart.a('tall') && chart.a('tall', chart.getTall()); Chart.settall (0); // set initial height to 0 4}); 5 this.chartAnimteTask = { 6 interval: 25, 7 action: function(data){ 8 if(charts.indexOf(data) > -1) { 9 if(finishNum ! == chartLength) { 10 if(data.getTall() ! == data.a('tall')) { 11 let nextTall = data.getTall() + deep; // let tall = data.a('tall'); 14 If (nextTall < tall) {15 data.settall (nextTall); 16 } 17 else { 18 data.setTall(tall); 19 finishNum++; 20} 21} 22} 23} 24} 25}; 26 dm3d.addScheduleTask(this.chartAnimteTask); // Add the scheduling taskCopy the code

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

5. 3D camera promotes code analysis

The advance and retreat of the field of view in 3D scenes are realized by the numerical method of modifying eye and Center provided by HT API. The purpose of modifying the perspective is achieved by constantly calling setEye and setCenter methods. Eye is similar to the position of human eyes. Center is similar to the focusing position of human eyes, and the pseudo-code of the key to achieve lens propulsion is as follows:

Clone (g3d.geteye ()) c = ht.default. clone(g3d.getCenter()); // Obtain the current eye focusing position 3 // Eye is the corresponding eye value that needs to be modified 4 // Center is the corresponding center value that needs to be modified 5 // The following is to obtain the difference between eye and center between the three axes XYZ 6 let edx = eye[0] - e[0], 7 edz = eye[1] - e[1], 8 edy = eye[2] - e[2], 9 cdx = center[0] - c[0], 10 cdz = center[1] - c[1], 11 cdy = center[2] - c[2]; 13 ht.default. startAnim({14 duration: time? time : 3000, 15 easing: function(t){ return t; }, 16 finishFunc: function() { 17 if(typeof cb === 'function') { 18 cb(); 19 } 20 }, 21 action: SetEye ([24 e[0] + edx * v, 25 e[1] + edz * v, 26 e[2] + edy * v 27]); setEye([24 e[0] + edz * v, 26 e[2] + edy * v 27]); 28 g3d.setCenter([ 29 c[0] + cdx * v, 30 c[1] + cdz * v, 31 c[2] + cdy * v 32 ]); 33}});Copy the code

From the above code, it can be known that the Angle of view can be changed by modifying the distance between the value of xyz axis corresponding to eye and Center respectively and the value of XYZ axis corresponding to e and C respectively.

Here is an application screenshot of the code:

conclusion

The Internet of Things through a variety of information sensor equipment, real-time collection of any need to monitor, connect, interactive objects or processes and other required information, combined with the Internet to form a huge network. Realized the object and the object, the object and the person, all the object and the network connection, convenient identification, management and control. So the Internet of things bring us the wisdom of building visual monitoring need to monitor may still have a lot, for access to the system, equipment information, pipeline information such as monitoring the implementation of a simple intelligent building monitoring system, the Internet of things will also client extended and expanded into any goods and goods between, let us know more about build wisdom park, Intelligent campus and other scenes after monitoring equipment visualization, asset visualization brings us intuitive. Reflections and depth of field in scenes are all effects provided by THE HT core pack. All model building and animation are modeled and animated by the API provided by the HT core pack, so the display is very smooth on the web, greatly improving the user experience, and the performance is also very friendly on the mobile terminal.

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

Program operation screenshot:

xhload3d
The editor
collection


Refresh the comments
Refresh the page
Return to the top
The login
registered
access
More than 500,000 VC++ source code: large configuration industrial control, power simulation CAD and GIS source code library!