随着国内经济的快速发展，人们对安全的要求越来越高。为了防止以下情况的发生，需要考虑安装安防系统：提供证据和线索：很多工厂、银行被盗或事故相关机构可以根据视频信息侦破案件，这是非常重要的线索。还有一些纠纷或者事故，通过视频也很容易查到相关人员的责任。人防成本高：现在很多地方一想到安全就会想到聘请保安。每个保安800元一个月，每天3班倒。一班一年需要近4万元。与电子安防设备的成本相比，它并不便宜，而且电子安防设备的使用几年内不需要更换。因此，民防成本相对较高。民防协助：在大多数情况下，完全依靠人来保障安全是非常困难的。很多事情都需要电子安防设备（比如监控器、报警器）的辅助才能更加完善。必须在特殊场合使用：在一些恶劣的条件下（高温、寒冷、封闭等），人肉眼很难观察清楚，或者环境根本不适合人停留，必须使用电子安全设备。隐蔽性：使用电子安防设备，普通人不会感觉到自己时刻被监视，所以具有隐蔽性。24小时安全保障：要实现24小时不间断的安全需求，必须考虑电子设备。远程监控：随着计算机技术和网络技术的发展，异地远程监控和查看图像成为可能。现在，很多公司的负责人都可以通过互联网实时查看全球任何一家分公司的情况，有利于及时了解情况。图像保存：随着数字视频技术的发展，图像可以通过计算机数字存储设备进行保存，保存时间更长，图像更清晰。生产管理：管理人员可以及时直观的了解生产线的情况，便于指挥管理。鉴于我国对监控系统的需求量大，对于大范围的监控，比如地铁站，需要监控系统来预防事故的发生。今天我们将介绍如何创建地铁站监控系统的前端部分。http://www.hightopo.com/demo/...进入该页面右击“InspectElement”可以查看示例源代码。本例动效如下：先搭建基本场景。在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文件中的title赋值给全局变量titledataModel.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');我做了下图中每个标签对应的元素：然后我们设置需要旋转闪烁的物体，HT中的“旋转”封装了setRotation(rotation)函数，通过获取物体当前的旋转角度，在这个角度的基础上加上一定的弧度，通过setInterval定时调用，使同一个弧度在一定的时间间隔内旋转：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()+增量旋转/3);camera3.setRotation(camera3.getRotation()+deltaRotation/3);如果（时间-楼梯时间>500）{楼梯索引--;如果(stairIndex<0){stairIndex=8;}楼梯时间=时间；}for(vari=0;i<8;i++){//因为有一些相似的元素，所以我们设置的标签名也相似，但是后面改成了1,2,3，所以我们使用for循环获取varcolor=stairlyIndex===i？'#F6A623':'#CFCFCF';dataModel.getDataByTag('stair_1_'+i).s('shape.border.color',color);dataModel.getDataByTag('stair_2_'+i).s('shape.border.color',color);}if(newDate().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。具体样式请参考HTforWebStyle手册：for(vari=0;i<8;i++){//因为有一些相似的元素我们设置的标签名称相似，只是改为1、2、3之后，所以我们用for循环来获取varcolor=stairlyIndex===i？'#F6A623':'#CFCFCF';dataModel.getDataByTag('stair_1_'+i).s('shape.border.color',color);dataModel.getDataByTag('stair_2_'+i).s('shape.border.color',color);}我们还控制了“警告灯”闪烁的时间。如果是偶数秒，则将灯的背景色设置为“无色”，否则，如果是黄色报警，则设置为“黄色”，如果是红色报警，则设置为“红色”：if(newDate().getSeconds()%2===1){yellowAlarm.s('shape.background',null);redAlarm.s('shape.background',null);}else{yellowAlarm.s('shape.background','yellow');redAlarm.s('shape.background','red');}整个例子很容易解决，很容易。.有兴趣继续学习的朋友可以到HTforWeb官网查看各种手册进行学习。
