Foreword
21 century, under pressure from the energy crisis and global warming, solar and other renewable energy sources more and more attention, which BIPV is becoming green development and way of life, strengthen energy-saving, low-carbon industries and support new energy, renewable energy development, has become a national strategy, it is based on data management and monitoring of the wisdom of building energy system has become a trend. We can quantify the data management and visual impact assessment of the implementation of building energy consumption, to control reduces energy consumption during building operations, and ultimately reduce building operating costs, improve energy efficiency. Give us today to bring a Hightopo of using HT for Web products to achieve energy consumption monitoring system intelligence buildings.
System Preview
Shown in this figure is the wisdom of building energy monitoring system in conjunction with a 2D 3D made mainly of changes in energy consumption building real-time monitoring equipment, such as: air-conditioning, lighting and so on.
Code
First, the scene into the movie preview
For 3D modeling of buildings under construction, plus a good opening animation effects, can bring good results to the user experience, so we can change the value of its eye and the center of the 3D scene to achieve the effect of roaming. Of course, we can make use of the pipeline to achieve more complex roaming effect, its essence is to change the value of the 3D scene by eye and center.
Animate code is as follows:
//场景进入动画
flyToView(g3d, eye, center, cb, time) {
g3d.moveCamera(eye, center, {
duration: time ? time : 3000,
finishFunc: function() { cb && cb(); } }); }
Second, building animation preview
In the 3D scene, we can model the entire building by resolution of the node, the building of the model needs to be done to make the animation separate node, and then to the nodes by setting different Tag (Note: Similarly ID, in our the scene is unique). Tag can then be acquired by our 3D view to this node, then the node to modify the X-axis by animation, Y-axis and the Z axis value, changes may be made to effect such a building. In our 3D three-dimensional coordinate system, X-axis positive direction to the right, Y-axis positive direction upward, toward the positive direction of the Z-axis outer screen, using the right hand rule , we want to learn more about the details of the 3D scene , see HT for Web 3D manual chapters.
Animate code is as follows:
//大楼动画1
buildAnim1(node, position, num, direction, cb, time) {
var x = node.getX(),
z = node.getY(), y = node.getElevation(); this.anim2 = ht.Default.startAnim({ duration: time ? time : 3000, finishFunc: function finishFunc() { cb && cb(); }, action: function action(v) { if (position === "Y") { var positionY = y + num * v; node.setElevation(positionY); } else if (position === "X") { if (direction === "lf" || direction === "ra") { var positionX = x + num * v; var positionY = z + num * v; node.setX(positionX); node.setY(positionY); } else if (direction === "la") { var positionX = x - num * v; var positionY = z + num * v; node.setX(positionX); node.setY(positionY); } else if (direction === "rf") { var positionX = x + num * v; var positionY = z - num * v; node.setX(positionX); node.setY(positionY); } } else if (position === "Z") { var positionZ = z + num * v; node.setY(positionZ); } } }); }
Code can be seen from the above, we can pass the dynamic parameters we need, then determines which require further action animation function according to the parameters of our animation we pass, of course, we have a function finishFunc. We can call this the end of the animation to the next animation. This can be achieved step by step animation effect, so that you can split the complex animation into a plurality of small simple animations.
Third, elevator animated preview
In the wisdom of building energy monitoring system, we can visualize in real-time monitoring of the work of running the elevator between floors, and can accurately browse the residence time of each elevator between floors.
Animate code is as follows:
//电梯动画
elevatorAnim() {
var self = this; var g3dDm = self.dm; var elevatorNodes = g3dDm.getDataByTag("elevatorNodes"); // 电梯动画 var animateElevatorNodes = null; var elevatorNodesArr = []; elevatorNodes && elevatorNodes.eachChild(function (d) { d.a('direction', 1); elevatorNodesArr.push(d); }); var randomElevator = function () { animateElevatorNodes = []; for (var i = 0; i < 3; i++) { animateElevatorNodes.push(elevatorNodesArr[self.getRandomNumberByRange(0, 6)]); } }; randomElevator(); self.elevatorTask = { interval: 100, action: function (data) { if (animateElevatorNodes.indexOf(data) > -1) { var elevation = data.getElevation(); var nextElevation = elevation + data.a('direction') * 10; if (nextElevation < 0 && data.a('direction') === -1) { data.a('direction', 1); } if (nextElevation > 760 && data.a('direction') === 1) { data.a('direction', -1); } data.setElevation(nextElevation); } } }; g3dDm.addScheduleTask(self.elevatorTask);//开启动画 setInterval(randomElevator, 2000); }
For the animation of the elevator, I use Hightopo scheduling to achieve an elevator animation. So what is it scheduled? In HT, the scheduling is added first scheduling tasks DataModel, DataModel will traverse all elements callback schedule tasks in DataModel view 3D view of the action function when the arrival interval (interval The) scheduling task specified time may be in the function Data incoming incoming primitive properties accordingly modified to achieve animation effects. For more information about scheduling, see <HT for Web Scheduling Guide> section.
Four, 2D panel display and data binding
In our system, I also built a 2D scene, there are graphs and histograms and various data can be visually display panel buildings energy consumption information, so we are very convenient for the implementation of building energy management and impact assessment to quantify it. For a graph of their way to introduce third-party support ECharts embedded.
Interface shown in Figure:
For 2D data binding interface is very simple. We can give the icon on the 2D panel set Tag, then modify the binding properties of the panel. code show as below:
g2dDm.getDataByTag PowerModule = var ( "PowerModule" );
powerModule.a ({ // here named for their "num1": self.getRandomNumberByRange (1000, 9999 ), "num2": self.getRandomNumberByRange (. 1, 100 ) , "num3": self.getRandomNumberByRange (100, 999 ), "Num4": self.getRandomNumberByRange (100, 999 ),}); powerModule.iv ();
For 2D data binding interface is very simple, we can dynamically bind real data by obtaining data interface the way to the 2D / 3D panel. Of course, if only the text on a 2D scene, we can, then, the data can be modified by node.s ( "text", "modify the contents") acquired directly through this text node node.
to sum up
Under the pressure of the energy crisis and global warming, renewable resources, reduce energy consumption, and take the road of sustainable development has become more important, but also the inevitable trend of the 21st century. Through energy monitoring system, in chart and with lively 3D animation these rich graph, bar graphs and the like, can be directly and effectively transfer the energy changes within the building, thereby reducing construction operating costs, effectively reducing construction energy, for energy conservation, environmental protection has important practical significance.