HTML5嵌入式系统JIAOCHENG
本应用摆脱了以往嵌入式系统的数据采集方式，借助HTML5的Canvas API及WebSocket API两大特性，实现了数据的在线实时采集功能，提升了嵌入式采集系统的性能和用户体验，为嵌入式开发工作者提供参考。
关键字：HTML5；HTTP Server；Canvas；WebSocket；W5500；实时；采集系统
信息实时性的重要性
在当今信息社会，信息就是金钱，而信息必然承载着时效性，过时的信息将不具有任何价值，由此可见信息实时性的重要性。
随着近几年物联网在各行各业的迅猛发展，越来越多的终端设备连入网络，实现远程交互及控制。各式传感器的广泛普及，使得数据节点分布越来越多。这些交互数据本身属于原始信息，需要我们进行采集、分析、处理和反馈。数据的真实有效性、准确性以及实时性，保证了整个工作的效率、质量和价值。
在此，我们基于W5500实现了一个在线采集系统，并引入了HTML5这一新鲜元素。通过这种最新的Web语言，为大家呈现一种更为实时、高效的在线实时采集系统。相信随着HTML5在嵌入式领域的不断深入推广，必然会对产业效能及价值提升产生积极作用。
在具体介绍这种实时采集系统之前，让我们先简单了解一下HTML5。
HTML5和HTML的区别
HTML是为创建网页并使其能够在网络浏览器中呈现而设计的一种标记语言。
HTML5是HTML的下一个修订版本。广义的HTML5包括了新的以及增强的HTML、CSS3、JavaScript API和事件的一套技术组合。
以下是HTML5较HTML新增强的主要功能：
- 提高优化网页元素
- 表单
- Canvas绘图
- 网页套接字（WebSocket）
- 本地存储
- 页面间信息传输
- 视频与音频（定时媒体播放）
- 地理位置（Communication APIs）
- 微数据
Canvas API及Web Socket API
实现该在线实时采集系统，得益于HTML5新增的两个API函数：Canvas及WebSocket。
Canvas API
Canvas由2004年苹果公司为MAC OS X仪表板开发的像素绘图元素发展而来，由Canvas元素和相应的JavaScript组成。这使得开发者能够无需借助其他第三方插件，利用JavaScript的Canvas图形工具，在Canvas元素画板上实现动态绘制图形。
WebSocket API
WebSocket提供了一个直接与服务器通讯的Socket。在通讯建立之后，客户端（浏览器）能够与网页服务器实现双向通讯，而无需客户端频繁轮询服务器。这样能够减少HTTP请求的额外开销，减轻数据包负担，而且通讯更加实时。
通过对这两个API函数的灵活应用，我们实现了通过HTTP Server实时接收数据，并在网页上进行动态模拟的功能。
在线实时采集系统演示
系统环境
- 单片机：STM32F103RC，具有256K字节Flash、48K字节SRAM和2K字节EEPROM。
- 以太网控制器：W5500，通过SPI接口与单片机相连。
- 电源：USB供电。
开发工具
IAR for ARM v5.41，这是本工程所使用的版本。如果使用不同版本的IAR，请对STM的库稍作调整。
在查看代码之前，我们先来了解一下整个的程序流程。在硬件初始化完成之后，将进行网络参数配置，需要根据自己网络的情况来配置W5500的IP地址等网络参数，确保W5500能连网。本程序中，我们会使用W5500的两个socket资源，一个用来创建Http Server，这样在浏览器上输入配置的IP地址，就能远程访问我们的硬件；另一个用来创建Web Socket Server，与网页端建立通信链路，用来传输温湿度数据。
当我们在浏览器上访问硬件的IP地址时，会向W5500发送HTTP请求，W5500在收到请求后将HTML5的网页信息发送给浏览器，这样浏览器上就能显示我们的温湿度检测系统的主界面。在网页的代码中，浏览器会主动连接W5500的Web Socket Server，在完成握手操作后，数据通信通道即建立。这样硬件就可以无障碍地将温湿度数据发送给浏览器端，浏览器在收到温湿度数据后，使用画布功能，在指定位置画出温湿度示数的点和曲线。
后续将对html5中Web Socket（网络套接字）和Canvas（画布）代码、W5500的Web Socket握手和数据帧协议、温湿度采集程序进行详细介绍。