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