远程监察和控制见到异地图象已经形成或然

依靠 HTML5 Canvas 完毕大巴站监察和控制

2017/11/21 · HTML5 ·
Canvas

初稿出处: hightopo   

陪伴本国经济的飞跃发展,大家对武威的要求更为高。为了卫戍下列意况的发生,您要求思考设置安全防护系统:
提供证据与线索:相当多厂子银行爆发偷盗只怕事故相关机关能够依附摄像消息侦查破案案件,那一个是相当重大的一个端倪。还会有一对争端或事故,也能够通过油画很轻巧寻觅有关人口的权力和权利。
人民防空花费高:未来无数地方想到安全就悟出要雇佣保卫安全,每一个保卫安全每一种月
800,天天 3 班倒,一班人士一年就供给临近 4
万元,相比于电子安全防御设施花费并不便利,並且动用电子安全防卫设施几年内就不太供给改造。所以人民防空开支相对也异常高。人防协助:多数情状下,完全靠人来保险安全部都是一件很拮据的事务,非常多事务需重要电报子保卫安全器具(如监视器、报告警察方器)支持才更宏观。特殊地方必需接纳:在部分劣质条件下(高热、阴寒、密闭等),人很难用肉眼观望清楚,大概条件根本不切合人的栖息,必得利用电子安全防止设施。隐讳性:使用电子安全防护装置,平凡的人不会以为无时不刻被监察和控制,拥有掩瞒性。24
小时安全保管:要高达 24
时辰不间断的平安必要,电子装置是必需考虑的。远程监察和控制:随着Computer本事与互联网技艺的上进,远程监察和控制看见异地图象已经化为大概,以往早就有众多厂家的首长已经足以
INTE奥迪Q5NET
及时见到世界各市的其余总局意况,有助于及时领悟意况。图象保存:数字水墨画技艺的升华,使得印象能够由此计算机数字存款和储蓄设备得以保存,能够保存时间越来越长,图象更清晰。生产管理:管理人员能够马上、直观的了然生产第一线的景色,便于指挥与治本。

出于监察和控制种类在境内的需要量非常的大,对于大面积的监察,如大巴站,更是必要监察和控制系统来严防意外的发出,前几日我们给我们介绍一下哪些创设叁个大巴站监察和控制体系的前端部分。

http://www.hightopo.com/demo/…
步入页面右键“核查成分”可查看例子源代码。

本例的动态效果如下:图片 1

大家先来搭建基础场景,在 HT
中,非平时用的一种格局来将表面风貌导入到内部正是靠深入分析 JSON 文件,用
JSON 文件来搭建场景的裨益之一就是足以循环利用,大家明天的场合便是选拔JSON 画出来的。接下来 HT 将使用 ht.Default.xhrLoad 函数载入 JSON
场景,并用 HT 封装的 DataModel.deserialize(json)
来反体系化,并将反类别化的指标插足DataModel:

ht.Default.xhrLoad(‘demo2.json’, function(text) { var json =
ht.Default.parse(text); if(json.title) document.title = json.title;//将
JSON 文件中的 titile 赋给全局变量 titile
dataModel.deserialize(json);//反体系化
graphView.fitContent(true);//缩放平移拓扑以展现全体图元,即让具备的因素都呈现出来
});

1
2
3
4
5
6
ht.Default.xhrLoad(‘demo2.json’, function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元,即让所有的元素都显示出来
});

在 HT 中,Data 类型对象协会时内部会自动被予以二个 id 属性,可由此data.getId() 和 data.setId(id) 获取和安装,Data 对象加多到 DataModel
之后不容许修改 id 值,可因此 dataModel.getDataById(id) 神速找出 Data
对象。日常提议 id 属性由 HT 自动分配,客户业务意义的独一标示可存在 tag
属性上,通过 Data#setTag(tag) 函数允许私行动态改换 tag
值,通过DataModel#getDataByTag(tag) 可查找到相应的 Data
对象,并扶助通过 DataModel#removeDataByTag(tag) 删除 Data
对象。大家那边经过在 JSON 中设置 Data 对象的 tag 属性,在代码中经过
dataModel.getDataByTag(tag) 函数来博取该 Data 对象:

var fan1 = dataModel.getDataByTag(‘fan1’); var fan2 =
dataModel.getDataByTag(‘fan2’); var camera1 =
dataModel.getDataByTag(‘camera1’); var camera2 =
dataModel.getDataByTag(‘camera2’); var camera3 =
dataModel.getDataByTag(‘camera3’); var redAlarm =
dataModel.getDataByTag(‘redAlarm’); var yellowAlarm =
dataModel.getDataByTag(‘yellowAlarm’);

1
2
3
4
5
6
7
var fan1 = dataModel.getDataByTag(‘fan1’);
var fan2 = dataModel.getDataByTag(‘fan2’);
var camera1 = dataModel.getDataByTag(‘camera1’);
var camera2 = dataModel.getDataByTag(‘camera2’);
var camera3 = dataModel.getDataByTag(‘camera3’);
var redAlarm = dataModel.getDataByTag(‘redAlarm’);
var yellowAlarm = dataModel.getDataByTag(‘yellowAlarm’);

本身在下图中做了各标签对应的成分:图片 2

进而大家对急需旋转、闪烁的指标开展设置,HT 中对“旋转”封装了
setRotation(rotation)
函数,通过得到对象当前的转动角度,在那么些角度的功底上再扩展某些弧度,通过
setInterval 按期调用,那样就能够在早晚的时光间隔内转悠同样的弧度:

远程监察和控制见到异地图象已经形成或然。JavaScript

setInterval(function(){ var time = new Date().getTime(); var deltaTime =
time – lastTime; var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
lastTime = time; fan1.setRotation(fan1.getRotation() +
deltaRotation*远程监察和控制见到异地图象已经形成或然。3); fan2.setRotation(fan2.getRotation() +
deltaRotation*3); camera1.setRotation(camera1.getRotation() +
deltaRotation/3); camera2.setRotation(camera2.getRotation() +
deltaRotation/3); camera3.setRotation(camera3.getRotation() +
deltaRotation/3); if (time – stairTime > 500) { stairIndex–; if
(stairIndex < 0) { stairIndex = 8; } stairTime = time; } for (var i =
0; i < 8; i++) {//因为有一对相似的因素我们设置的 tag
名类似,只是在末端换来了1、2、3,所以大家透过 for 循环来收获 var color =
stairIndex === i ? ‘#F6A623’ : ‘#CFCFCF’;
dataModel.getDataByTag(‘stair_1_远程监察和控制见到异地图象已经形成或然。’ + i).s(‘shape.border.color’, color);
dataModel.getDataByTag(‘stair_2_’ + i).s(‘shape.border.color’, color);
} if (new Date().getSeconds() % 2 === 1) {
yellowAlarm.s(‘shape.background’, null); redAlarm.s(‘shape.background’,
null); } else { yellowAlarm.s(‘shape.background’, ‘yellow’);
redAlarm.s(‘shape.background’, ‘red’); } }, 5);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time – lastTime;
    var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
    lastTime = time;
 
    fan1.setRotation(fan1.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);
 
    if (time – stairTime > 500) {
        stairIndex–;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }
 
    for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似,只是在后面换成了1、2、3,所以我们通过 for 循环来获取
        var color = stairIndex === i ? ‘#F6A623’ : ‘#CFCFCF’;
        dataModel.getDataByTag(‘stair_1_’ + i).s(‘shape.border.color’, color);
        dataModel.getDataByTag(‘stair_2_’ + i).s(‘shape.border.color’, color);
    }
 
    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s(‘shape.background’, null);
        redAlarm.s(‘shape.background’, null);
    }
    else {
        yellowAlarm.s(‘shape.background’, ‘yellow’);
        redAlarm.s(‘shape.background’, ‘red’);
    }
}, 5);

HT 还包裹了 setStyle 函数用来安装样式,可简写为 s,具体样式请参见 HT for
Web 样式手册:

JavaScript

for (var i = 0; i < 8; i++) {//因为有一对日常的因素大家设置的 tag
名类似,只是在末端换到了1、2、3,所以大家经过 for 循环来获得 var color =
stairIndex === i ? ‘#F6A623’ : ‘#CFCFCF’;
dataModel.getDataByTag(‘stair_1_’ + i).s(‘shape.border.color’, color);
dataModel.getDataByTag(‘stair_2_’ + i).s(‘shape.border.color’, color);
}

1
2
3
4
5
for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似,只是在后面换成了1、2、3,所以我们通过 for 循环来获取
    var color = stairIndex === i ? ‘#F6A623’ : ‘#CFCFCF’;
    dataModel.getDataByTag(‘stair_1_’ + i).s(‘shape.border.color’, color);
    dataModel.getDataByTag(‘stair_2_’ + i).s(‘shape.border.color’, color);
}

咱俩还对“警告灯”的闪光实行了按时间调整制,固然是偶数秒的时候,就将灯的背景颜色设置为“无色”,不然,假如是
yellowAlarm 则设置为“紫色”,尽管是 redAlarm 则设置为“蔚蓝”:

if (new Date().getSeconds() % 2 === 1) {
yellowAlarm.s(‘shape.background’, null); redAlarm.s(‘shape.background’,
null); } else { yellowAlarm.s(‘shape.background’, ‘yellow’);
redAlarm.s(‘shape.background’, ‘red’); }

1
2
3
4
5
6
7
8
if (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s(‘shape.background’, null);
    redAlarm.s(‘shape.background’, null);
}
else {
    yellowAlarm.s(‘shape.background’, ‘yellow’);
    redAlarm.s(‘shape.background’, ‘red’);
}

全套例子就像此轻便地消除了,简直太轻巧了。。。

有意思味继续刺探的伴儿能够进来 HT for Web
官网翻开各样手册实行学习。

2 赞 3 收藏
评论

图片 3

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图