基于SQLite+HTML5 Canvas的動態(tài)圖形輸出嵌入式Web服務

穆紅顯 劉亮 趙汝峰

摘? 要：針對嵌入式Web服務器對資源和數(shù)據(jù)處理能力有限的特點，為了解決在嵌入式Web中輸出如折線圖等具有交互能力的動態(tài)圖形問題，首先分析了FLASH、VML、SVG以及Java Applet等技術(shù)的不足，提出一種基于HTML5 Canvas繪制動態(tài)圖形的瘦服務器思想，通過CGI程序與SQLite數(shù)據(jù)庫交互實現(xiàn)圖形的動態(tài)輸出，并給出實例驗證，為基于嵌入式Web服務器的動態(tài)圖形輸出提供一種解決思路。

關(guān)鍵詞：嵌入式Web Canvas標簽;SQLite數(shù)據(jù)庫;動態(tài)圖形;瘦服務器

中圖分類號：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? 引? 言

基于筆者所在單位智慧農(nóng)業(yè)領(lǐng)域相關(guān)項目需求，本文研究了溫室大棚溫濕度實時環(huán)境數(shù)據(jù)的采集與監(jiān)測，溫室大棚溫濕度的實時環(huán)境數(shù)據(jù)和歷史數(shù)據(jù)變化趨勢對于農(nóng)業(yè)生產(chǎn)具有重要意義。對于溫室大棚等特定地點的溫濕度的監(jiān)測和數(shù)據(jù)傳輸通常由嵌入式設備完成，通過傳感器進行數(shù)據(jù)采集，并通過無線通信技術(shù)進行數(shù)據(jù)傳輸。為了數(shù)據(jù)訪問的便捷性，筆者所研究的溫室大棚溫濕度等環(huán)境數(shù)據(jù)的監(jiān)測基于嵌入式Web服務實現(xiàn)，這需要嵌入式Web服務器與瀏覽器進行交互并具有提供動態(tài)數(shù)據(jù)訪問的能力，而為了形象直觀地描述數(shù)據(jù)的范圍及變化趨勢等信息，在該應用中需提供動態(tài)圖形頁面。筆者的研究重點在于動態(tài)圖形繪制與輸出技術(shù)的探索與實現(xiàn)。

嵌入式設備軟硬件資源有限，作為Web服務器的載體，其數(shù)據(jù)處理能力遠不如傳統(tǒng)服務器[1]，因此筆者沒有采用在嵌入式服務器端計算、繪制圖形并將其輸出至瀏覽器端的傳統(tǒng)方法，一方面這種方式會增加嵌入式服務器的資源消耗，另一方面，在服務器與瀏覽器之間傳輸溫濕度數(shù)據(jù)變化趨勢的圖片將造成極大的帶寬消耗。本文在詳細分析、比較服務器端繪圖及現(xiàn)有的VML、SVG、FLASH、JavaScript以及Java Applet等客戶端圖形繪制技術(shù)的基礎上，指出傳統(tǒng)技術(shù)的不足之處，并提出一種基于HTML5規(guī)范的將Canvas標簽直接在瀏覽器端進行動態(tài)繪制的瘦服務器思想，將采集的實時溫濕度數(shù)據(jù)存入SQLite數(shù)據(jù)庫，通過CGI程序讀取SQLite中的關(guān)鍵數(shù)據(jù)信息并完成瀏覽器和服務器端數(shù)據(jù)的交互后，最終由客戶端瀏覽器的Canvas元素完成動態(tài)圖形的繪制，這樣一來減輕了嵌入式服務器的負載，提高了系統(tǒng)運行效率，能夠滿足項目需求和生產(chǎn)生活需要。

1? 相關(guān)技術(shù)介紹

1.1? SQLite介紹

在本研究中，SQLite數(shù)據(jù)庫用于存儲溫濕度等環(huán)境數(shù)據(jù)，它由D.Richard Hipp用C語言開發(fā)，它開源免費，是跨平臺、輕量級關(guān)系型數(shù)據(jù)庫，提供對多數(shù)SQL92標準的支持：多表、事務、索引、觸發(fā)、視圖以及一系列應用程序接口[2]。作為文件型數(shù)據(jù)庫，其所有信息包含于一個文件內(nèi)，方便轉(zhuǎn)移，并且其核心引擎不依賴第三方軟件，直接編譯鏈接即可。該數(shù)據(jù)庫由內(nèi)核、后端、編譯器及附件等構(gòu)成，SQL語句被編譯后生成能在虛擬機中運行的代碼。

1.2? CGI程序

CGI（Common Gateway Interface）是Web服務器與外部擴展應用程序交互的一種標準接口，在本研究中用于前后端溫濕度等環(huán)境數(shù)據(jù)的交互，作為嵌入式Web服務器的重要內(nèi)容之一，其主要功能是通過標準輸入輸出完成客戶端與服務器的動態(tài)交互，一方面它可以通過GET或POST方法將HTML頁面中的內(nèi)容傳遞到服務器并做出相應的處理;另一方面通過編寫不同的CGI外部擴展程序，能夠采集現(xiàn)場設備數(shù)據(jù)及訪問外部數(shù)據(jù)庫，并將數(shù)據(jù)以純文本ASCⅡ碼或HTML形式傳遞給服務器守護進程[3]，守護進程將數(shù)據(jù)回送到客戶端瀏覽器。

CGI是B/S架構(gòu)下服務端編程的鼻祖，編程語言獨立和平臺無關(guān)，有較高的運行效率和良好的可移植性;絕大多數(shù)的Web服務器和瀏覽器都支持CGI[4]，其具有一定的靈活性、兼容性和可擴展性?；谝陨?，CGI技術(shù)完全適用于嵌入式Web程序的開發(fā)。

1.3? HTML5 Canvas元素

Canvas元素是HTML5引入的新標簽，為繪制客戶端矢量圖形而出現(xiàn)，目前支持二維繪圖，是基于像素的即時模式圖形系統(tǒng)。它沒有自己的行為，但能把HTML5定義的繪圖函數(shù)集Canvas API展現(xiàn)給客戶端JavaScript，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，并支持定義事件行為的標準事件屬性，通過腳本能在畫布上便捷、實時地繪制、渲染各種圖形及動畫效果或開發(fā)交互式游戲，無需第三方插件參與[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元素繪制瀏覽器端的溫濕度歷史數(shù)據(jù)變化趨勢動態(tài)圖形。

2? 已有圖形繪制技術(shù)分析與比較

目前在嵌入式系統(tǒng)中繪制動態(tài)圖形的方法主要有以下幾種：在嵌入式服務器端進行運算、繪制圖形并將其輸出至瀏覽器;通過VML或Flash技術(shù)繪制動態(tài)圖形;通過SVG技術(shù)繪制動態(tài)圖形;通過Java Applet技術(shù)繪制動態(tài)圖形;利用JavaScript繪圖。下面對以上技術(shù)進行分析比較。

2.1? 服務器端圖形繪制

利用GTK、SDL、OpenGL ES、MiniGUI或QT/E等圖形庫，通過在嵌入式服務器端將數(shù)據(jù)進行運算、繪制圖形及轉(zhuǎn)化為圖像文件，并將圖像文件傳輸?shù)竭h程客戶端的瀏覽器中顯示。然而目前嵌入式設備軟硬件資源有限且處理能力較差，如果客戶端頻繁并發(fā)地發(fā)送繪制請求，一方面增加服務器端的負載，導致服務器超負荷運轉(zhuǎn);另一方面圖像在網(wǎng)絡的傳輸消耗大量帶寬，延長響應時間，影響客戶端瀏覽速度。

2.2? 利用VML或FLASH技術(shù)繪制圖形

VML即矢量可標記語言，它通過XML文檔來描述繪圖，直接在瀏覽器端繪制輸出圖形，具有編寫簡單、兼容HTML文檔等優(yōu)點[7]，但在繪制高精度矢量圖形、動畫或3D效果等深層應用時效率低下，作為微軟的私有技術(shù)，它不被任何其他瀏覽器支持，在瀏覽器兼容方面存在問題。

Flash用于制作動畫和圖像，通過Action Script腳本在瀏覽器端實現(xiàn)功能，由Flash Player中的腳本虛擬機（AVM）執(zhí)行，所以瀏覽器端需要依賴Flash Player。作為解釋性語言，F(xiàn)lash執(zhí)行效率低，應用于嵌入式系統(tǒng)時情況更為嚴重。作為私有技術(shù)，其尚未與開放標準兼容，雖然Flash技術(shù)暫時占據(jù)了大部分的矢量動畫市場，但各主流瀏覽器對Flash的支持情況不容樂觀，近年來其面臨SVG、Canvas等技術(shù)的挑戰(zhàn)，發(fā)展前景尚未十分明朗。

2.3? 通過SVG技術(shù)繪制動態(tài)圖形

SVG即可縮放矢量圖形，使用XML來描述二維圖形和繪圖程序。如果把SVG嵌入HTML文檔需要通過引用、