應用 Ajax 與 SVG 技術於 Web-Based 即時生理訊號監視系統
A Web-Based Real-Time Monitoring System for Physiological Signal
Using Ajax and SVG Technologies
張淵仁
a*陳右穎
b林俊良
b郭佳瑋
a a中臺科技大學資訊管理系/醫學工程暨材料科學研究所
b交通大學電機與控制工程研究所
*ronchang@ctust.edu.tw
摘要 在本研究中，嘗試以 Ajax 與 SVG 技術，應用於 web-based 即時生理訊號監視系統之製作，此系統包 含無線生理感測網路，WWW 與資料庫伺服器，以及 用戶端即時生理訊號顯示器。藉由生理感測器量測病 患之生理訊號，以無線之方式傳送至病患附近區域之Router，再以無線傳送至 PAN Coordinator 進行類比數
位訊號轉換，再傳送至遠端資料庫儲存。而醫護人員 可藉由瀏覽器使用用戶端即時生理訊號顯示器直接 連上 WWW 伺服器，即時且連續監視病患之生理訊 號。此 web-based 的生理訊號監測系統可提供醫護人 員隨時隨地的操作與使用，不受時空之限制。而使用 web 2.0 概念所設計的 web-based 即時生理訊號監視系 統，則是本研究的重點。 關鍵詞：Ajax, SVG, 資料庫, 生理訊號 Abstract
In this research, a web-based real-time physiological signal monitoring system with Ajax and SVG technique was developed. This system includes the wireless physiological detection network, web and database server, and the client side real-time physiological signal monitoring system. The patient’s physiological signal measured by biosensor was transmitted to router near the patient and then forward to PAN Coordinator in wireless way. After being converted from analog to digital, the data will be stored in remote database sever. And the doctor can use browser connecting to web server to display the real-time physiological signal continuously. The web-based physiological signal
monitoring system can provide a convenient way to doctor to monitor patient’s situation anywhere and anytime. The key point in this research is the web-based real-time physiological signal monitoring system developed with web 2.0 concept.
Keywords: Ajax, SVG, database, physiological signal
壹、緒論 近年來無線通訊之快速發展，筆記型電腦、手持式裝 置都已經具有無線通訊的功能，配合網際網路的普及 化，將遠距醫療照護產業與網際網路、無線通訊等產 業結合已是未來醫療方式的重要趨勢。又因為人類平 均壽命的延長，讓老年人口的比例大幅增加，居家型 的照護系統的重要性明顯增加，主要的目的即是能夠 提生醫療服務在居家照護的品質。而其主要的方式， 便是藉由使用非侵入式生理監測系統或非察覺式健 康監測系統，長期蒐集與監測病患之生理訊號（如血 壓、心跳、脈搏、心電圖、呼吸頻率、體溫、血氧濃 度等）或是與生活品質相關健康數據（如活動力、睡 眠品質、代謝模式、環境品質等），然後以無線方式 傳輸至網際網路伺服器，供家人、照護者或醫生進行 即時瀏覽，或將長期的監測資訊完整的儲存在資料庫 中，作為病患疾病分析與預警。 貳、文獻探討 近年來在國內外與遠距醫療或無線照護系統相關的 研究相當的蓬勃發展，在此只舉出部分的研究文獻， 例如有的研究著重在硬體的設計，包括將無線感測器 的設計更人性化，訊號的偵測能夠連續而不中斷，訊 號偵測範圍能夠更廣[1]；有研究則著重在硬體與通訊 介面的整合，讓更多不同的醫療儀器所偵測到的生理
訊號能夠互相傳輸與整合到資料庫中[2]，有的則是著 重在通訊網路的架構設計，建構出適合生理訊號擷取 與傳送的架構[3]，有的則是著重生理訊號量測工具的 開發，讓病患在醫院的所有活動都能被連續且確實的 記錄下來[4]。 由前人的研究可以看出未來遠距醫療照護的趨勢，為 提升病患的居家生活品質，在訊號量測的部分，無線 通訊的方式將取代傳統有線的量測工具或儀器。加上 病患活動的範圍將不只侷限在建築物內，更遠的訊號 傳送距離將是必要的。 另外，隨著 Web 2.0 的時代的來臨[5]，以 Internet 做 為 軟 體 開 發 平 台 來 提 供 使 用 者 各 種 服 務 (web service) ， 將 取 代 原 來 桌 面 應 用 程 式 (Desktop application)開發的思考模式，此 Web 2.0 的商業模型， 以 Google 最具代表性。 因此，在本研究中，嘗試結合無線網路技術之生醫感 測器，資料庫，並以 web-based 為基礎設計此生理訊 號監測與顯示系統，而重點是首次加入 Ajax 與 SVG 技術，以提供即時動態的生理訊號顯示功能，這是傳 統網頁技術尚無法達成的功能。 參、材料與方法 系統架構 圖 1 為整個系統的架構示意圖，共包括三個主要的部 分：（1）無線生理訊號感測網路，（2）WWW 與資料 庫伺服器，（3）用戶端即時生理訊號顯示器。無線生 理感測網路主要功能為接收與處理生理訊號，並透過 網際網路直接將生理訊號資料傳送至遠端的資料庫 伺服器。使用者（例如醫護人員）可由電腦透過網際 網路，使用 Ajax Engine 以非同步方式連上 WWW 伺 服器，存取任一使用者生理訊號，並利用 SVG 技術 做即時繪圖與顯示。詳細流程說明如下。 無線生理訊號感測網路 我們實作一個無線感測網路 , 這個網路採取樹狀之 三階層式架構，整個網路包含了 PAN coordinator， Routers 與無線生理感測器 , 並且採取階層式路由 (routing)的方式。我們所使用的無線網路是所謂的無 線個人區域網路(Wireless Personal Area Network)，目 前相關的技術有 Bluetooth 與 ZigBEE。我們比較兩者 的優缺點（如表 1），選擇傳輸距離長，低功率消耗， 高定址容量的 ZigBee 當作我們無線傳輸的技術。 網際網路 網際網路 圖 1 系統架構圖
表 1 Comparison of ZigBee with Bluetooth
Operation Range Connect Capacity Data Rate Time spend: ready for data
after sleeping Battery Life 802.15.4(ZigBee) 10-75m Up to 254 nodes 250Kbps 3 m sec 6 month to 2 years 802.15.1(Bluetooth) 10m Up to 8 nodes 1Mbps 3 sec Several weeks
此無線感測網路使用到生理感測器、嵌入式系統、嵌 入式即時作業系統與無線傳輸的相關技術，每個生理 感測器，Router 與 PAN Coordinator 都包含了 嵌入式 系統(嵌入式處理器)與嵌入式即時作業系統與無線傳 輸晶片，並且有相關的 firmware code 去達成相關的功 能。Firmware 最主要是透過嵌入式即時作業系統去實 現 ZigBee 的 protocol stack 與不同裝置所需要的功能。 生理訊號的擷取流程如下 (1) 透過生醫感測器將人體的生理訊號擷取出來，再 經由嵌入式系統所提供的 ADC 將它轉換成數位訊號。 (2) 嵌入式系統將 ADC 轉換後的數位訊號存到內部 的記憶體後，再透過無線傳輸的方式傳輸給無線感測 網路的 Router。 在本系統使用到兩個生理訊號的感測器，第一個是心 電圖 Electrocardiogram (ECG)感測器，它會將人體的 心電圖連續的擷取出來，但因為擷取出來的是類比信 號，所以我們必須透過 ADC (Analog to Digital Convert) 將它轉換成數位信號才能交给嵌入式系統處理，然後 嵌入式系統會將轉換後的生理資料送給無線感測器 中的 Router。 第二個則是 SPO2 感測器，它會將人體的心跳，脈搏 的生理訊號透過 UART 的介面送出來。 於是我們將 我們的嵌入式系統的 UART 與該感測器的 UART 連 接，嵌入式系統會透過 UART 取得感測器送出來的 心 跳與脈搏的生理訊號，再將它送給無線感測器中的 Router。 WWW 與資料庫伺服器 因為無線感測網路有相當多的感測裝置，在管理與控 制上有相關的困難。為了解決這個問題，我們透過以 資料庫為中心的 web-based 的方式去管理，讓整個架 構更有彈性，存取資料也更容易，使用者只要有瀏覽 器，便可透過網際網路，隨時隨地監看任一使用者之 電 生 理 訊 號 。 在 此 伺 服 器 使 用 開 放 源 碼 的 Apache+MySQL+PHP 的架構。而生理訊號則直接透 過 MySQL connector/ODBC [6]直接儲存在遠端資料 庫。 用戶端即時生理訊號顯示器 在本研究中首次嘗試在用戶端的生訊號顯示器採用 Ajax 搭配 SVG 技術來即時顯示生理訊號。使用 Ajax 技術可改善傳統 web-based 網頁顯示的效能，而使用 SVG 技術可提供即時動畫繪圖的功能來動態顯示即 時生理訊號。 Ajax 是由數個現成的技術所構成，而且已經在網際網 路上被應用多年，但 Ajax 真正被清楚定義，則是在 2005 年 由 Garrett [7] 提 出 ， 所 謂 Ajax 就 是 Asynchronous JavaScript + XML ， 又 稱 為 非 同 步 JavaScript 與 XML。而由於 Google 大量的採用 Ajax 技術，使得 Ajax 在網際網路的應用有逐漸增加的趨 勢。圖 2 為 Ajax 應用程式運作模型，在用戶端使用具 Ajax 引擎的瀏覽器，以 JavaScript 觸發一個呼叫給 Ajax 引擎後，便將此呼叫交由 Ajax 引擎接手，由 Ajax 引擎負責透過 HTTP request 對遠端伺服器進行資料索 取，此時瀏覽器便不需要等待伺服器端反應即能繼續 進行下一個動作。當伺服器端傳回所需要的資料後， 便由 Ajax 引擎將資料接收並回傳給瀏覽器進行資料 分析與顯示。這與傳統瀏覽器需等待伺服器回應才能 進行下一個動作（同步）並不相同，因此 Ajax 是一個 非同步的技術。而由於回傳的資料為 XML 格式，可 以使用 DOM（Document Object Model），即時更新網 頁資料，便可將伺服器回應的資料即時顯示在網頁 上。 使用者介面 Ajax 引擎 web伺服器 HTTP request 資料庫伺服器 JavaScript call XML data HTML+CSS data 用戶端 伺服器端 圖 2 Ajax 網頁應用程式模型
SVG(Scalable Vector Graphics)又稱為可縮放向量圖形 [8]，是由 W3C 組織所推薦的標準，目前最新的標準 為 1.2[9,10]。使用 SVG 技術，可以在網頁上呈現向量
的圖形，也能做動畫的顯示。加上 SVG Mobile 的規 格中，也定義了手持式裝置（例如手機）的 SVG Tiny 的規格[11]，使得在手持式裝置上也能呈現 SVG 網 頁。在圖 3 中，我們顯示了 Ajax 與 SVG 如何協同工 作，以進行即時生理訊號的顯示與動態繪圖。此流程 詳述如下。 開始 非同步送出生理資料擷 取需求 設定擷取生理訊號間隔 時間並開始擷取程序 Yes No No Yes Yes No Asynchronous call 接收資料，並以DOM 處理更新SVG path 組 件資料 在定時間隔後重新開始 程序擷取程序 定時檢查生理感應 器是否到資料庫註 冊啟用？ 開始定時檢查資料 庫是否新增生理資 料？ 是否成功完成接收 資料？ 圖 3 Ajax 與 SVG 協同工作流程圖 整個生理訊號的擷取是由無線生理感測網路這邊啟 動，當一個生理感測器它開始運作時，它會主動的尋 找目前存在的無線個人區域網路，並找尋一個 Router 去註冊加入該網路。Router 獲知有感測器註冊後，會 將此感測器的資料向 PAN Coordinator 傳送，並透過 PC 端程式向資料庫加上一筆記錄表示此感應器已經 註冊開始使用，並同時從資料庫傳回擷取資料的間隔 時間，然後傳給 Router。接著 Router 會使用從 PC 端 收到的間隔時間來設定一個定時器，定時通知生理感 測器傳送生理資料給 Router，Router 接收到生理訊號 後，隨即將感測器傳送過來的生理資料傳給 PAN Coordinator，然後傳送給與它連接的 PC。此時 PC 端 的程式會使用 ODBC API 將它傳給遠端的資料庫並儲 存。 而用戶端的生理訊號監視，則是由啟動瀏覽器開始， 只要設定好定時擷取的時間，便能透過 Ajax 非同步的 HTTP request 方式檢查資料庫來獲知是否有任何生理 感測器開始註冊啟用。若有任何感測器註冊啟用，便 開始進行非同步的資料擷取，並將成功擷取的資料， 以 DOM 的方式即時更新 SVG 當中的 path 組件，以 進行生理訊號動態繪圖的動作。此程序並依照設定的 間隔時間重複進行資料擷取動作。而由於 Ajax 的非同 步資料擷取特性，使用者並不會感覺到網頁幕後的資 料擷取動作，加上以 DOM 即時更新 SVG 內容，使得 動態繪製即時生理訊號圖成為可能。 肆、結果與討論 在本研究中，我們實作出具生理訊號感測與傳輸功能 之無線 ECG 感測器， Router 與 PAN Coordinator（如 圖 4 所示）。由此三個裝置構成無線生理感測網路， 其實際偵測距離可達 70 公尺。 圖 4 無線生理感測模組照片(以 ECG sensor 為例) 另外，我們以 Ajax 搭配 SVG 技術，成功的實現 real-time 動態顯示 ECG 生理訊號的用戶端生理監測 系統（如圖 5），在此監測系統中，可以透過遠端連線， 將目前註冊使用的生理感測器的即時資料，透過資料
庫取回用戶端，以 DOM 更新 SVG 檔案的 path 組件， 讓其動態顯示生理訊號，目前設定間隔時間為 0.1 秒。除此之外，我們也可以針對儲存在資料庫中歷史 生理資料進行繪圖，只要透過此使用者介面，設定欲 繪圖的資料（如圖 6），然後便可將歷史生理訊號繪製 成圖形存檔，供相關的醫護人員參考（如圖 7）。 圖 5 用戶端 web-based 即時生理顯示器 圖 6 歷史生理資料繪圖設定 圖 7 歷史生理資料繪圖結果 伍、結論 使用 Ajax/SVG 技術所架構出來的 web-based 生理訊 號監測系統，在實用上遠優於桌上型生理訊號監測系 統，並具有下列特性： 1. 無須安裝，且具有跨平台、不受作業系統限制的優 點，只要有瀏覽器便可使用此系統。 2. 不受空間的限制，只要有網路，便可即時監看位在 世界任何角落的生理訊號。 3. 由於採用 Ajax 與 SVG 技術，具有傳統網頁做不到 的動畫特效，可以即時且連續的顯示動態的生理訊 號。 陸、致謝 本研究之 SVG 技術感謝英福達科技股份有限公司董 事長邵新中博士親自指導，特此致謝。 參考文獻 1. 賴辰彥,朱嘯秋,邱創乾,陳勇華,黃志仁,”一種醫療用 智慧衣之無線網路傳輸系統研製”,國際醫學資訊研 討會(MIST), paper No. D4-1, 2005.
2. 何仁田,”遠端生理監視系統與電子病歷之研究”，國 立中正大學電機工程研究所碩士論文，民國 90 年。 3. K.I. Hwang, J. In, N. K. Park, D. S. Eom, ” A Design and Implementation of Wireless Sensor Gateway for Efficient Querying and Managing through World Wide Web”, IEEE Transactions on Consumer Electronics, Vol. 49, No. 4, NOVEMBER 2003. 4. G. LeBellego, N. Noury, G. Virone, M. Mousseau,
and J. Demongeot, “A Model for the Measurement of Patient Activity in a Hospital Suite”, IEEE Transactions on Information Technology in Biomedicine, Vol. 10, No. 1, Jan. 2006.
5. http://www.web2con.com/web2con/ 6. http://dev.mysql.com/downloads/connector/odbc/3.51. html 7. http://adaptivepath.com/publications/essays/archives/0 00385.php 8. http://zh.wikipedia.org/wiki/SVG 9. http://www.w3.org/TR/2005/WD-SVG12-20050413/ 10. http://www.w3.org/Graphics/SVG/ 11. http://www.w3.org/TR/SVGMobile/
