基于SQLite+HTML5 Canvas的动态图形输出嵌入式Web服务
作者：穆红显 刘亮 赵汝峰
来源：《现代信息科技》2020年第16期
svg和canvas的区别        摘 要：针对嵌入式Web服务器对资源和数据处理能力有限的特点，为了解决在嵌入式Web中输出如折线图等具有交互能力的动态图形问题，首先分析了FLASH、VML、SVG以及Java Applet等技术的不足，提出一种基于HTML5 Canvas绘制动态图形的瘦服务器思想，
通过CGI程序与SQLite数据库交互实现图形的动态输出，并给出实例验证，为基于嵌入式Web服务器的动态图形输出提供一种解决思路。
        关键词：嵌入式Web Canvas标签;SQLite数据库;动态图形;瘦服务器
        中图分类号：TP311.1 文献标识码：A 文章编号：2096-4706（2020）16-0078-04
        Dynamic Graphic Output Embedded Web Service Based on SQLite + HTML5 Canvas
        MU Hongxian，LIU Liang，ZHAO Rufeng
        （CETC Satellite Navigation Operation & Service Co.，Ltd.，Shijiazhuang 050200，China）
        Abstract：In view of the limited resources and data processing capacity of embedded Web server，in order to solve the problem of interactive dynamic graphics such as line graph output in embedded Web，this paper first analyzes the shortcomings
of FLASH，VML，SVG and Java Applet technologies，and proposes a thin server idea of drawing dynamic graphics based on HTML5 canvas. The dynamic output of graphics is realized through the interaction between CGI program and SQLite database. An example is given to verify the idea，which provides a solution for dynamic graphics output based on embedded Web server.
        Keywords：embedded Web Canvas tag;SQLite database;dynamic graphics;thin server
        0 引 言
        基于笔者所在单位智慧农业领域相关项目需求，本文研究了温室大棚温湿度实时环境数据的采集与监测，温室大棚温湿度的实时环境数据和历史数据变化趋势对于农业生产具有重要意义。对于温室大棚等特定地点的温湿度的监测和数据传输通常由嵌入式设备完成，通过传感器进行数据采集，并通过无线通信技术进行数据传输。为了数据访问的便捷性，笔者所研究的温室大棚温湿度等环境数据的监测基于嵌入式Web服务实现，这需要嵌入式Web服务器与浏览器进行交互并具有提供动态数据访问的能力，而为了形象直观地描
述数据的范围及变化趋势等信息，在该应用中需提供动态图形页面。笔者的研究重点在于动态图形绘制与输出技术的探索与实现。
        嵌入式设备软硬件资源有限，作为Web服务器的载体，其数据处理能力远不如传统服务器[1]，因此笔者没有采用在嵌入式服务器端计算、绘制图形并将其输出至浏览器端的传统方法，一方面这种方式会增加嵌入式服务器的资源消耗，另一方面，在服务器与浏览器之间传输温湿度数据变化趋势的图片将造成极大的带宽消耗。本文在详细分析、比较服务器端绘图及现有的VML、SVG、FLASH、JavaScript以及Java Applet等客户端图形绘制技术的基础上，指出传统技术的不足之处，并提出一种基于HTML5规范的将Canvas标签直接在浏览器端进行动态绘制的瘦服务器思想，将采集的实时温湿度数据存入SQLite数据库，通过CGI程序读取SQLite中的关键数据信息并完成浏览器和服务器端数据的交互后，最终由客户端浏览器的Canvas元素完成动态图形的绘制，这样一来减轻了嵌入式服务器的负载，提高了系统运行效率，能够满足项目需求和生产生活需要。
        1 相关技术介绍
        1.1 SQLite介紹
        在本研究中，SQLite数据库用于存储温湿度等环境数据，它由D.Richard Hipp用C语言开发，它开源免费，是跨平台、轻量级关系型数据库，提供对多数SQL92标准的支持：多表、事务、索引、触发、视图以及一系列应用程序接口[2]。作为文件型数据库，其所有信息包含于一个文件内，方便转移，并且其核心引擎不依赖第三方软件，直接编译链接即可。该数据库由内核、后端、编译器及附件等构成，SQL语句被编译后生成能在虚拟机中运行的代码。
        1.2 CGI程序
        CGI（Common Gateway Interface）是Web服务器与外部扩展应用程序交互的一种标准接口，在本研究中用于前后端温湿度等环境数据的交互，作为嵌入式Web服务器的重要内容之一，其主要功能是通过标准输入输出完成客户端与服务器的动态交互，一方面它可以通过GET或POST方法将HTML页面中的内容传递到服务器并做出相应的处理;另一方面通过编写不同的CGI外部扩展程序，能够采集现场设备数据及访问外部数据库，并将数据以纯文本ASCⅡ码或HTML形式传递给服务器守护进程[3]，守护进程将数据回送到客户端浏览器。
        CGI是B/S架构下服务端编程的鼻祖，编程语言独立和平台无关，有较高的运行效率和良好的可移植性;绝大多数的Web服务器和浏览器都支持CGI[4]，其具有一定的灵活性、兼容性和可扩展性。基于以上，CGI技术完全适用于嵌入式Web程序的开发。
        1.3 HTML5 Canvas元素
        Canvas元素是HTML5引入的新标签，为绘制客户端矢量图形而出现，目前支持二维绘图，是基于像素的即时模式图形系统。它没有自己的行为，但能把HTML5定义的绘图函数集Canvas API展现给客户端JavaScript，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，并支持定义事件行为的标准事件属性，通过脚本能在画布上便捷、实时地绘制、渲染各种图形及动画效果或开发交互式游戏，无需第三方插件参与[5]。目前，Safari 1.3、Firefox 1.5、Opera 9、Chrome 2.0、IE 9及以上版本的浏览器均支持Canvas，IE 9以下的IE浏览器通过导入Google的开源JavaScript项目excanvas.js获得支持[6]。笔者采用HTML5的Canvas元素绘制浏览器端的温湿度历史数据变化趋势动态图形。
        2 已有图形绘制技术分析与比较
        目前在嵌入式系统中绘制动态图形的方法主要有以下几种：在嵌入式服务器端进行运算、绘制图形并将其输出至浏览器;通过VML或Flash技术绘制动态图形;通过SVG技术绘制动态图形;通过Java Applet技术绘制动态图形;利用JavaScript绘图。下面对以上技术进行分析比较。
        2.1 服务器端图形绘制
        利用GTK、SDL、OpenGL ES、MiniGUI或QT/E等图形库，通过在嵌入式服务器端将数据进行运算、绘制图形及转化为图像文件，并将图像文件传输到远程客户端的浏览器中显示。然而目前嵌入式设备软硬件资源有限且处理能力较差，如果客户端频繁并发地发送绘制请求，一方面增加服务器端的负载，导致服务器超负荷运转;另一方面图像在网络的传输消耗大量带宽，延长响应时间，影响客户端浏览速度。
        2.2 利用VML或FLASH技术绘制图形
        VML即矢量可标记语言，它通过XML文档来描述绘图，直接在浏览器端绘制输出图形，具有编写简单、兼容HTML文档等优点[7]，但在绘制高精度矢量图形、动画或3D效果
等深层应用时效率低下，作为微软的私有技术，它不被任何其他浏览器支持，在浏览器兼容方面存在问题。
        Flash用于制作动画和图像，通过Action Script脚本在浏览器端实现功能，由Flash Player中的脚本虚拟机（AVM）执行，所以浏览器端需要依赖Flash Player。作为解释性语言，Flash执行效率低，应用于嵌入式系统时情况更为严重。作为私有技术，其尚未与开放标准兼容，虽然Flash技术暂时占据了大部分的矢量动画市场，但各主流浏览器对Flash的支持情况不容乐观，近年来其面临SVG、Canvas等技术的挑战，发展前景尚未十分明朗。
        2.3 通过SVG技术绘制动态图形
        SVG即可缩放矢量图形，使用XML来描述二维图形和绘图程序。如果把SVG嵌入HTML文档需要通过引用<embed>、<object>或<iframe>标签，不能通过引用SVG的命名空间直接将其添加到HTML代码[8]。SVG技术多用于地图文件的绘制，不利于动态图形的直接输出。
        2.4 基于Java Applet的图形绘制
        柯宗武、陈年生等在“Java在基于Web的嵌入式系统中的应用”中指出通过Java Applet可以实现动态图形的绘制。用户访问嵌入Java Applet的网页时，代码会被下载至客户端运行，这样动态图形的绘制直接由客户端完成而无需增加嵌入式服务器的负载[9，10]。然而这种方法需要额外编写服务器端程序，将数据不断读出并传输至客户端;支持Java Applet运行还需要Java虚拟机，这就要求所有浏览器安装虚拟机，增加了系统的复杂性和操作的繁琐性。
        2.5 JavaScript图形绘制
        如果不引用Canvas，直接通过JavaScript与CGI交互完成动态图形绘制，则需要冗长繁杂的代码，容易出错且运行不够稳定。此外，虽然主流浏览器均支持JavaScript，但不同浏览器的支持程度和标准并不完全相同，在编写脚本时需根据客户端浏览器种类分别开发，增加了开发的难度。
        3 基于Canvas的动态图形绘制
        3.1 流程设计
        在不需要与后台数据库进行数据交互时，利用Canvas绘制简单图形只需直接在HTML中添加该标签并编写相关JavaScript代码，然而在笔者监测的温湿度等环境数据变化趋势的实际绘制中，为了使趋势图更有意义，能直观形象地体现温湿度等指标数据的变化趋势和范围，往往需要提取关键历史数据点并将其体现于折线图等图形中，而历史数据存储于数据库中，这就需要利用CGI技术进行前后台温湿度数据的交互，将数据库中的数据提取并绘制在动态图形中，工作流程如图1所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。