preface

Building automatic control refers to the power equipment in the building, such as elevator, water pump, fan, air conditioning, etc., its main work nature is strong electric drive. Usually these devices operate in an open state, which means they do not form a closed loop. As long as the power supply is switched on, the equipment is working. As for the working status, process, energy consumption, etc., data cannot be obtained online in time, let alone reasonable use and energy saving. Now building automation is the above electrical equipment for online monitoring, by setting the corresponding sensor, travel switch, photoelectric control, etc., to detect the working state of the equipment, and through the line back to the control room of the central computer, from the computer to obtain the analysis results, and then returned to the equipment terminal for mediation.

(please refer to specific effect link: www.hightopo.com/demo/buildi.)

Code implementation

First of all, we still need to do the basic Settings for the whole interface:

gv.getSelectWidth = () => { return0} // Hide the selected border gv.setMovableFunc(() => {return falseHandleScroll = () => {} handlePinch = () => {} handlePinch = () => {}false) // Disable translation gV.setRectSelectable (false// Disable gv.setScrollBarVisible(false) / / hide the window scroll bar. The document. The oncontextmenu = () = > {return false} // Global Settings right click menu disabledCopy the code

Then we began to encapsulate the panel and realize the animation effects contained in each piece. These animation effects are simple to make and can show the sense of movement of the whole system. The realization is similar, and I will use an example to demonstrate:

function chillerPanelAnim() {letnum = []letn = []for (leti = 0; i < 10; i++) {if(I < 8) {num.push(math.random () * 2)}else if(I === 8) {n.ush (math.random () * 40 + 60)}else{n.ush (math.random () * 31)}}let oldNumValue1 = chillerPanel.a('l1.l.clipPercentage')let oldNumValue2 = chillerPanel.a('l2.l.clipPercentage')let oldNumValue3 = chillerPanel.a('l3.l.clipPercentage') ht.default.startanim ({duration: 2000, easing: (t) => {returnT}, action: (v, t) => {chillerPanel.'l1.l.clipPercentage', oldNumValue1 + (num[0] -oldNumValue1) * v) chillerPanel.'l2.l.clipPercentage', oldNumValue2 + (num[1] -oldNumValue2) * v) chillerPanel.'l3.l.clipPercentage', oldNumValue3 + (num[2] -oldNumValue3) * v)}, finishFunc: () => {setThe Timeout (() = > {chillerPanelAnim ()}, 2000)}})}Copy the code

HT provides HT.default. startAnim, which supports frame-based and time-based animation. I used the time-based mode. The advantage is that you only need to specify the number of milliseconds of duration’s animation cycle, and the HT will complete the animation within the specified period of time, that is, the number of frames or the number of times the action function is called depends on the system environment. Generally speaking, better configured machines and more efficient browsers will call more frames and the animation will be smoother. It avoids the problem that the animation cycle may differ greatly due to the js language’s inability to accurately control the interval. There’s also a property called Easing that you can use to configure the easing effect of an animation mathematically, so you can turn it on and try it out for yourself.

I will introduce the pipeline part of 2.5D equipment to you in the way of scheduling:

// Flow animationletFlowTask = {interval: 10, action: (data) => {if (data.getDisplayName() === 'flow1') {
            data.s('shape.dash.offset', data.s('shape.dash.offset') + 1)}if (data.getDisplayName() === 'flow2') {
            data.s('shape.dash.offset', data.s('shape.dash.offset') - 1)}if (data.getDisplayName() === 'flow3') {
            data.s('shape.dash.offset', data.s('shape.dash.offset') + 5)}}}Copy the code

This is also a way to achieve dynamic effects. It is mainly used for function callbacks at specified intervals. It is often used to achieve animation effects such as flow and flicker of graphics. The process is to first add scheduling tasks through DataModel. When the time interval specified by scheduling tasks arrives, DataModel will traverse all primitives to call back the action function of scheduling tasks. Data primitives passed in this function can make corresponding property modification to achieve animation effects. For more parameters and Settings, see the dispatch manual.

SetCursor (‘pointer’) and View. setCursor(‘default’) are set respectively for mouse cursor in and out of the objects to interact with to enhance the interactive experience. At the same time, making 2.5D primitives actually requires several times more work than normal 2D primitives. In addition to modeling according to the perspective of real perspective, each part needs to be made separately. This leads to the problem of running out of time, and we need to use caching rules to optimize performance and get every detail as good as possible. CacheRule is equivalent to using the same image. The default rule is: Icon name + width + Height + zoom. If the rule is consistent, the same image will be used. If there are other effects, more information will be returned, such as data.a(‘color’), which will determine whether the attribute is consistent. If not, try creating a new cache map, preferably static.

conclusion

In the 21st century today, with the rapid development of computer technology and information technology. The state monitoring and measurement of various equipment in the building is no longer a line type, but a scanning measurement. Intelligent Buildings are the combination of architectural technology and Internet technology, and are the needs of information society and economic internationalization. Today’s building automation control system (BAS) belongs to this category, as well as communication automation system (CAS) and office automation system (OAS). Now it has been widely used in various fields, greatly improving the management efficiency and effective utilization of energy and intelligent equipment monitoring as one of the operating system. There are more lofty intelligent operating systems waiting for us to promote the progress of social information!

HT for the Web: www.hightopo.com/demos/cn-in…