实现地铁站监控,Canvas实现监控系统页面展示

作者: 前端知识  发布:2019-07-26

依附 HTML5 Canvas 达成地铁站监察和控制

2017/11/21 · HTML5 · Canvas

原稿出处: hightopo   

随同国内经济的飞跃发展,大家对本溪的渴求更高。为了幸免下列情状的发生,您须求思量设置安全防护系统: 提供证据与线索:相当多工厂银行爆发盗窃大概事故相关活动能够依照录像音信侦查破案案件,这些是非常主要的贰个线索。还会有一对争执或事故,也能够透过拍照很轻松寻觅有关人口的职务。 人民防空花费高:以往广大地方想到安全就想到要雇佣保卫安全,各类保卫安全种种月 800,每一日 3 班倒,一班人士一年就须要邻近 4 万元,相比较于电子安全卫戍设施费用并不便于,何况动用电子安全防护装置几年内就不太供给转移。所以人防耗费相对也非常高。人民防空协助:许多场地下,完全靠人来确认保证卫安全全部都以一件很劳顿的业务,非常多事情需重要电报子保卫安全器具(如监视器、报告警察方器)扶助才更完善。特殊场所必须利用:在部分死板条件下(高热、严寒、密封等),人很难用肉眼观看清楚,大概意况根本不适合人的停留,必须选拔电子安全防护设施。遮盖性:使用电子安全防范设施,平凡人不会感到到随时被监督,具有遮蔽性。24 小时安全确定保障:要高达 24 小时不间断的安全须求,电子装置是必须怀念的。远程监察和控制:随着Computer本事与互联网本领的前进,远程监察和控制看到异地图象已经化为大概,未来曾经有相当多公司的管理者已经得以 INTE帕杰罗NET 及时看到世界外市的任何分集团情状,有利于及时理解情形。图象保存:数字水墨画技能的前行,使得印象能够由此Computer数字存储设备得以保存,能够保存时间越来越长,图象更清晰。生产管理:管理职员能够立刻、直观的打听生产第一线的情状,便于指挥与治本。

由于监察和控制系统在国内的必要量十分大,对于大面积的督察,如大巴站,更是供给监察和控制系统来防备意外的发出,今日咱们给大家介绍一下什么创制三个客车站监察和控制系统的前端部分。

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

后天大家给大家介绍一下怎么开创三个监督检查连串的前端部分。

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

图片 5

我们先来确立基础场景,在 HT 中,非平日用的一种艺术来将表面风貌导入到内部便是靠分析 JSON 文件,用 JSON 文件来确立场景的益处之一正是能够循环利用,大家明天的景色就是应用 JSON 画出来的。接下来 HT 将利用 ht.Default.xhrLoad 函数载入 JSON 场景,并用 HT 封装的 DataModel.deserialize(json) 来反体系化,并将反种类化的对象到场 DataModel:

ht.Default.xhrLoad('demo2.json',function(text){

varjson = 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 指标:

varfan1 = dataModel.getDataByTag('fan1');

varfan2 = dataModel.getDataByTag('fan2');

varcamera1 = dataModel.getDataByTag('camera1');

varcamera2 = dataModel.getDataByTag('camera2');

varcamera3 = dataModel.getDataByTag('camera3');

varredAlarm = dataModel.getDataByTag('redAlarm');

varyellowAlarm = dataModel.getDataByTag('yellowAlarm');

自己在下图中做了各标签对应的要素:

图片 6

进而我们对急需旋转、闪耀的对象实行安装,HT 中对“旋转”封装了 setRotation(rotation) 函数,经过获得目标当前的团团转视点,在这么些视点的底蕴上再增添有个别弧度,经过 setInterval 守时调用,那样就能够在早晚的随时距离内转悠一样的弧度:

<blockquote background-color:#ffffff;"="" style="font-family: "sans serif", tahoma, verdana, helvetica; white-space: normal; color: rgb(62, 62, 62);">

setInterval(function(){

vartime = newDate().getTime();

vardeltaTime = time - lastTime;

vardeltaRotation = 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;

}

本文由金沙澳门官网发布于前端知识,转载请注明出处:实现地铁站监控,Canvas实现监控系统页面展示

关键词: 金沙澳门官网

上一篇:【金沙澳门官网网址】技术栈开发web应用
下一篇:没有了