原创 搭建属于你的在线实时采集系统——HTML5 在嵌入式系统中的应用

※已刊登在《无线电》04月刊上   搭建属于你的在线实时采集系统

——HTML5 在嵌入式系统中的应用

作者：刘琛，徐洋

摘要： 本应用摆脱了以往嵌入式系统的数据采集方式，借助于最新的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和事件的一套技术组合。

图1HTML5 Logo

以下为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上动态模拟的功能。

在线实时采集系统演示

1. 系统环境

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，与网页端建立通信链路，用来传输我们的温湿度数据。

图2硬件运行流程

当我们在浏览器**问硬件的IP地址，会向W5500发送http请求，W5500在收到请求后将html5的网页信息发送给浏览器，这样浏览器上就能显示我们的温湿度检测系统的主界面了。在网页的代码中，浏览器会主动连接W5500的Web Socket Server，在完成握手操作后，数据通信通道即建立了。这样硬件就可以无障碍的将温湿度数据发送给浏览器端，浏览器在收到温湿度数据后，使用画布功能，在指定位置画出温湿度示数的点和曲线。以下是html5中Web Socket（网络套接字）和Canvas（画布）代码、W5500的Web Socket握手和数据帧协议、温湿度采集程序的介绍。

图3网页显示界面

Canvas和Web Socket

在浏览器端我们使用HTML5的Canvas绘制工具和WebSocket API搭建我们的web界面。当有新的温湿度数据来临时，在画布的坐标系里会有画点显示，并标识示数，并且随着采集次数的增加，多个数据连线，就可以看到曲线变化。网页程序步骤如下：

1）  创建页面和canvas所属的style、body标记

2）  绘制坐标轴，添加标题；建立WebSocket连接

3）  新数据到来，绘制点和线

利用Canvas绘图

下面先介绍如何创建一张画布以及代码中使用到的绘制函数。

1） 建立一张600×400的画布，单位是像素

<canvasid=‘graph’width=’600′height=’400′></canvas>

2） 定义画布的边框宽度、颜色和内边距大小。

#graph {

border: 1px solid #03F;

margin:0 40px 0 80px;

}

3） 为了在JavaScript中对canvas进行绘制，首先需要通过目标canvas的id获取绘制环境。代码需要通过id获取canvas元素，然后使用此元素的getContex方法获取其二维绘制环境的引用

canvas=document.getElementById(‘graph’);

context=canvas.getContext(’2d’);

4） 绘制一条线段

context.lineWidth=2;//设置线宽

context.strokeStyle=‘#999′;//设置线的颜色

context.moveTo(x1,y1);//移动到起点

context.lineTo(x2,y2);//创建到终点的路径

context.stroke();//实际绘出这段直线

继续阅读：http://blog.iwiznet.cn/?p=6191

完整的程序代码程序请到http://wizwiki.net/forum/viewtopic.php?f=91&t=740&p=2527#p2527下载。