-
标
签
归
档
：
W
E
B
< br>S
O
C
K
E
T
搭建属于你的在线实时采集系
统
——
HTML5
在
嵌入式系统中的应用
发表于
2014
年
4
月
11
日
由
admin
※
已刊登在《无线电》
04
月刊上<
/p>
搭建属于你的在线实时采集系统
——
HTML5
在嵌入式系统中的应用
作者：刘琛，徐洋
摘要：本应用摆脱
了以往嵌入式系统的数据采集方式，借助于最新的
HTML5
的
Canvas
API
及
WebSocket API
两大特性，实现了数据的在线实时采集功能。提升
了嵌入式采集系统的性能及体验。为嵌
入式开发工作者提供参考。
关键字：
HTML5
；
HTTP Server
；
Canvas
；
WebSocket
；
W5500
；实时；采集系
统；
当今信息社会，信息就是金钱，而但凡是
信息便必然承载着时效性，过时的信息将
不具有任何价值。由此可见，信息实时性的重要
性。
随着近几年物联网在各行各业的迅猛发展，越来越多的终
端设备连入网络，实现远
程交互及控制；各式传感器的广泛普及，使得数据节点分布越来
越多。而这些交互
数据本身也属于一种原始信息，这些数据量需要我们采集、分析、处理
、反馈，其
数据真实有效性，准确性，以及实时性保证了整个工作的效率，质量以及价值
。
在此，我们基于
W5500
实现了一个在线采集系统，并且为其引入了一个新鲜的元
素
——
HTML5
。通过这种最新的
Web
语言，为大家呈现一种更为实时、高效的在
线实
时采集系统。相信随着
HTML5
在嵌入式领域的不断深入推广
，必然对产业效
能及价值提升产生不小的作用。
在具体介绍这种实时采集系统前，让我们先简单的来认识一下
HTML5
。
HTML5
和
HTML
的区别
HTML
为创建网页
Web
使之能
够在网络浏览器呈现而设计的一种标记语言。
HTML5
为
HTML
的下一个修订版本。而广义的<
/p>
HTML5
，包括了新的以及增强的
HT
ML
，
CSS3
，
JavaScript API
和事件的一套技术组合。
图
1HTML5 Logo
以下为
HTML5
较
HTML
新增强的主要功能：
?
?
?
?
?
?
?
?
?
提高优化网页元素；
表单；
Canvas
绘图；
网页套接字（
WebSocket
）
< br>
本地存储；
页面间信息传输；
视频与音频（定时媒体播放）；
地理位置（
Communication
APIs
）；
微数据；
Canvas
API
及
Web Socket
API
其实，实现该在线实时采集系统，得益于
HTML5
新增的
2
个
API
函数：
Canvas
及
WebSocket
。
<
/p>
Canvas
，由
04
< br>年苹果公司为
MAC OS X
仪表板开发的像素绘图元
素发展而来。由
Canvas
元素和相应的
JavaScript
组成。
使得开发者能够无需借助其他
第三方插件，
利用
JavaScript
的
Canvas
图形工具，在
Can
vas
元素画板上实现动态绘制图形。
Websocket
，提供了一个直接与服务器通讯的
Soc
ket
。使得在通讯建立之后，客户
端
（浏览器）
能够与网页服务器实现双向通讯，
而无需客户端频繁
轮询服务器实现。
这样能够减少
Http
请求的额外开销，减轻数据包负担，而且通讯更加实时。
通
过对于这
2
个
API
< br>函数的灵活应用，我们实现了通过
HTTP Server
，实时的接收
数据量，并在网页
Web
上动态模拟的功能。
在线实时采集系统演示
1.
系统环境
a) <
/p>
单片机：
STM32F103RC
，
256K
字节
Flash
< br>，
48K
字节
SRAM
，
2K
字节
EEPRO
M
b)
以太网控制器：
W5500
，
SPI
接口与单片机
相连
c)
电源：
USB
供电
2.
开发工具
: IAR for
ARM v5.41
，这是我们工程所使用的版本。如果使用不同版本
< br>的
IAR
，请对
STM
的库稍作调整。
看代码之前，我们还是先来了
解一下整个的程序流程，如下图所示。在硬件初始化
完成之后，将进行网络参数配置，这
是要根据自己网络的情况来配置
W5500
的
< br>IP
地址等网络参数，
确保
W5
500
能连网；
本程序中，
我们会使用
W5500
的两个
socket
资源，一个用来创建
Http Server
，这样在浏览器上输入配置的
IP
地址，就能远程
访问我们的硬件了；
另一个用来创建
Web
Socket Server
，
与网页端建立通信链路，
用来传输我们的温湿度数据。
图
2
硬件运行流程
当我们在浏览器上访问硬件的
IP
地址，会
向
W5500
发送
http
请求，
W5500
在收
到
请求后将
html5
的网页信息发送给浏览器，这样浏览器上就
能显示我们的温湿度
检测系统的主界面了。在网页的代码中，浏览器会主动连接
W5500
的
Web Socket
Server
，在完成握手操作后，数据通信通道即建立了。这样硬件就
可以无障碍的将
温湿度数据发送给浏览器端，浏览器在收到温湿度数据后，使用画布功能
，在指定
位置画出温湿度示数的点和曲线。以下是
html5<
/p>
中
Web Socket
（网络套接字）
和
Canvas
（画布）代码、
W55
00
的
Web Socket
握手和数
据帧协议、温湿度采集程
序的介绍。
图
3
网页显示界面
Canvas
和
Web
Socket
在浏览器端我们使用
H
TML5
的
Canvas
绘制工具和<
/p>
WebSocket API
搭建我们的
web
界面。当有新的温湿度数据来临时，在画布的坐标系里会有画点显示，并标识
示数，并且随着采集次数的增加，多个数据连线，就可以看到曲线变化。网页程序
步骤如下：
1
）
创建
页面和
canvas
所属的
style
、
body
标记
2
）
绘制坐标轴，添加标题；建立
WebSocket
连接
3
）
新数据到来，绘制点和线
利用
Canvas
绘图
下面先介绍如何创建一张画布以及代码中使用到的绘制函数。
1
）建立一张
600×
400
的画布，单位是像素
‘graph’
width=
’600′
height=
’400′
>
2
）定义画布的边框宽度
、颜色和内边距大小。
#graph
{
border: 1px solid
#03F;
margin:0 40px 0
80px;
}
3
）为了在
JavaScript
中对
canvas
进行绘制，首先需要通过目标
canvas
的
id
获取
绘制环境。代码需要通过
id
获取
canvas
元素，然后使用此元素的
getC
ontex
方法
获取其二维绘制环境的引用
canvas
=
mentByI
d
(
?graph?
);
context
=
tex
t
(
?2d?
);
4
）绘制一条线段
dth
=
2
;//
设置线宽
Style
=
?#999′
;//
设置线的颜色
(
x1,y
1
);//
移动到起点
(
x2,y2
);//
创建到终点的路径
();//
实际绘出这段直线
5
）绘制圆
yle
=
?#000′
;//
设置填充色
ath
();
(
x,y
,
2
,
0
,
*
2
,
true<
/p>
);//
在坐标
(x,y)
处绘制半径
2
的圆
ath
();
-
-
-
-
-
-
-
-
-
上一篇：国际贸易、航运、租船和保险缩略语(C-cj-cy)
下一篇：中国主要海运航线