基于HTML5的物联网实验室动画网页设计  

Design of animated web page of Internet of Things based on HTML5

作　　者：王开宇[1] 张晶 巢明[1] 秦晓梅[1] 赵权科[1] WANG Kai-yu;ZHANG Jing;CHAO Ming;QIN Xiao-mei;ZHAO Quan-ke(National Electrical and Electronic Experimental Teaching Demonstration Center;Faculty of Electronic Information and Electrical Engineering, Dalian University of Technology, Dalian 116024, China)

机构地区：[1]大连理工大学电工电子国家级实验教学示范中心,辽宁大连116024 [2]大连理工大学电子信息与电气工程学部,辽宁大连116024

出　　处：《实验室科学》2019年第2期56-59,共4页Laboratory Science

基　　金：中央高校基本科研业务费专项(项目编号:DUT16QY32);辽宁省自然科学基金资助(项目编号:201602166)

摘　　要：现有的实验室展示系统无法交互式地让操作者和参观者在线了解实验室各部分的功能和特点。创建了一个基于Html5,WebGL和CSS3技术的具有3D结构的网站页面。通过物联网技术,在实验室安放传感器,经由网络通信模块和WIFI发射器,将实验室各模块信息及时上传到浏览器端。用户在浏览器端可以实时接收和控制实验室各传感器模块的信息和状态。网页展示以窗帘控制,灯光控制,风扇控制,CO_2控制四部分为例,在WebGL环境下实现实验室360度全景展示。经测试,网页的性能和运行效率满足了设计要求,使用户能够通过移动端或PC机的浏览器登录智能实验室系统,实时通过传感器获取实验室各模块信息并进行监控。The existing laboratory display system can t interactively allow operators and visitors to understand the functions and characteristics of the laboratory online. The paper created a web page with 3D structure based on Html5, WebGL and CSS3 technology. Through the Internet of Things technology, the sensors are placed in the laboratory. Through the network communication module and the WIFI transmitter, the information of each module in the laboratory can be uploaded to the browser end in time. The user can receive the state of each module in the laboratory in real time at the browser end. The web page mainly includes four parts of curtain control, lighting control, air conditioning control and opening control, and the 360 degree panoramic display of the laboratory is realized under the WebGL environment. After testing, the performance and efficiency of the web page meet the design requirements. The user is able to log in to the intelligent laboratory system through the browser. The user can also get the information of each module in the laboratory and monitor the laboratory in real time.

关 键 词：HTML5 实验室展示 3D动画 物联网 

分 类 号：TP311[自动化与计算机技术—计算机软件与理论]