Foreword
It refers to a building automation buildings electrical equipment, such as elevators, pumps, fans, air conditioning, etc., whose main job is a strong electric driving properties. Often these devices are open-ended working condition, that did not form a closed loop. As long as the power is turned on, the device at work, as working conditions, processes, energy consumption, etc., could not get the data online in a timely manner, let alone the rational use and conservation of energy. The above is now building automation line monitoring of electrical equipment, by setting the corresponding sensor, limit switch, photoelectric control, the operating state of the device is detected, and returns the control room computer via the center line, the results obtained from the computer analysis , then the terminal returns to the mediation device.
(Please refer to the specific effect link: http://www.hightopo.com/demo/building-automation-system/ )
Code
The first step we still have to do it on the basis of the entire interface settings:
gv.getSelectWidth = () => {return 0} // hide selected frame
gv.setMovableFunc (() => {return false}) // move prohibited elements
gv.handleScroll = () => {} // mouse scaling prohibition
gv.handlePinch = () => {} // touch the pinch zoom prohibition
gv.setPannable (false) // prohibit translation
gv.setRectSelectable (false) // marquee ban
gv.setScrollBarVisible (false) // Hide the scroll bar
window.document.oncontextmenu = () => {return false} // Disable context menu Global Settings
Then began to package panel, animates each contained, these dynamic effect making it simple and can exhibit a sense of movement of the entire system, similar to the manner of its implementation, I use some examples to demonstrate:
function chillerPanelAnim() {
let num = []
let n = []
for (let i = 0; i < 10; i++) {
if (i < 8) {
num.push(Math.random() * 2)
}
else if (i === 8) {
n.push(Math.random() * 40 + 60)
}
else {
n.push(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) => { return t },
action: (v, t) => {
chillerPanel.a('l1.l.clipPercentage', oldNumValue1 + (num[0] - oldNumValue1) * v)
chillerPanel.a('l2.l.clipPercentage', oldNumValue2 + (num[1] - oldNumValue2) * v)
chillerPanel.a('l3.l.clipPercentage', oldNumValue3 + (num[2] - oldNumValue3) * v)
},
finishFunc: () => {
setTimeout(() => {
chillerPanelAnim()
}, 2000)
}
})
}
About animated way we can be understood as the start value of some properties by the process gradually to the target value, HT provides ht.Default.startAnim, which supports Frame-Based and Time-Based Animation of two ways, I use time-Based mode, is advantageous in that only a few milliseconds to specify the duration of the animation cycles, the HT animation will be completed within a specified period of time, i.e. the number of frames or the number of times the function is called action depends on the system environment in general better machine system configuration, more efficient browser is invoked more frames, the animation process smoother. It avoids js language can not accurately control the interval time interval, the animation may appear quite different question period. To configure the animation of which there is easing properties can be calculated by a mathematical formula easing effect , interested friends can open yourself to try and play.
Pipe section 2.5D equipment, I scheduled a way to tell you about:
// flow animation
let flowTask = {
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)
}
}
}
这也是一种实现动效的方式，它主要用于在指定的时间间隔进行函数回调处理，常用于实现图形的流动和闪烁等动画效果。流程是先通过 DataModel 添加调度任务，DataModel 会在调度任务指定的时间间隔到达时，遍历所有图元回调调度任务的 action 函数，可在该函数中传入的 Data 图元做相应的属性修改以达到动画效果。更多参数和设置可以参考 调度手册。
We also pay attention to the need to interact with the best of primitive mouse moved out of the event are set view.setCursor ( 'pointer') and view.setCursor ( 'default') to enhance the interactive experience feeling. Meanwhile, the production 2.5D primitives actually takes several times outside the normal 2D primitives workload, in addition to the perspective view of a model to the real angle, the need to treat each part separately produced. It appeared likely Caton, we do pay attention when caching rules to optimize performance, as much as possible to do a good job every detail. cacheRule is equivalent to all use the same image, the default rule: icon name + width + height + Scale, if the rule decision unanimously, with one map will be used, if there are other needs influence, the more return some information, such as data .a ( 'color'), so they have extra determination that this property should be the same, the same will only have a cache with the same inconsistent, then try the New cache maps, more suitable for static.
to sum up
In the 21st century, the development of computer technology and information technology by leaps and bounds with. Status monitoring and measurement of various equipment in the building is no longer with the wire, instead of using scan measurements. Intelligent Building (Intelligent Buildings) are building technology and Internet technology product of the combination is the need of the information society and the international economy. Today we build the building automation control systems (BAS) which belongs to a class, and communications automation system (CAS) and office automation systems (OAS) and other components. Now widely used in various fields, greatly increasing the effective utilization and management efficiency and energy monitoring equipment and other intelligence as one of the operating system. There are more intelligent on the operating system tall waiting for us to promote social progress of information technology!
HT for Web ：(http://www.hightopo.com/demos/cn-index.html)
