标签: 在线实时采集系统

※已刊登在《无线电》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，$#$#Script 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元素和相应的$#$#Script组成。使得开发者能够无需借助其他第三方插件，利用$#$#Script的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，与网页端建立通信链路，用来传输我们的温湿度数据。 图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绘图 下面先介绍如何创建一张画布以及代码中使用到的绘制函数。 继续阅读：http://blog.iwiznet.cn/?p=6191 完整的程序代码程序请到http://wizwiki.net/forum/viewtopic.php?f=91t=740p=2527#p2527下载。

※已刊登在《无线电》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上动态模拟的功能。 在线实时采集系统演示 系统环境 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=91t=740p=2527#p2527下载。