YFHMI 画面组态最早支持 WinCE 平台，后来在 WinCE 平台软件的基础上开发出了基于.NET Micro Framework 平台的版本。.NET Micro Framework 一般运行在相对资源较小的物联网芯片（Cortex-M 系列）上，所以 YFHMI 在性能和体积上做了进一步的优化。考虑到 Html5+WebSocket 是未来 WEB 前端的主流，在 YFHMI 支持 Windows 版本后，又直接推出了 Html5 的组态版本。

1 Web 组态画面构建

1.1 创建组态画面

在创建基本组态画面的同时，我们还是需要导入在【2.4.5】章节所导出的 IO 配置文件，以便于动画绑定对应的 IO 变量（如图 16 所示）。

图 16 YFHMI 图元创建 & IO 导入

我们构建的组态画面比较简单，两个指示灯分别对应智能终端的 I1、I2，一个切换开关对应 Q2,四个文本框分别对应 T1、T2、T3 和 H。IO 变量导入后，相关的图元分别绑定上对应的变量。

5.1.2 导出 Html5 文件

图 17 Html5 网页导出

导出的 bg.png、Monitor.html、PublishIO.xml 和 YFWebSocket.js 四个文件需要上传到云端对应的项目模板目录下。导出的 PublishIO.xml 文件需要导入云端 IO 列表，以设定对应的发布 IO。

2 Web 画面呈现及操控

在 Web 网页上我们打开动画监控页，可以看到这个内容是和我们在 YFHMI 中创建的组态画面是一致的，并且其显示的数据也和真实设备的值一样（和 YFIOs 云端中间件的 IO 实时数据保持一致）。这个时候如果我们用鼠标操作开关按钮，可以看到物联网智能终端的继电器吸合或释放。 

————————————————  

免责申明：

本文系转载，版权归原作者所有，如若侵权请联系我们进行删除！