基于SQLite+HTML5 Canvas的動態圖形輸出嵌入式Web服務

穆紅顯 劉亮 趙汝峰

摘? 要：針對嵌入式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文檔需要通過引用、