為了使頁面呈現(xiàn)出動(dòng)態(tài)效果，如顯示當(dāng)前時(shí)間、視頻數(shù)據(jù)傳輸速率等，頁面將嵌入Javascript代碼。整個(gè)界面分為兩個(gè)區(qū)：視頻顯示區(qū)和控制面板區(qū)。視頻顯示區(qū)顯示視頻流服務(wù)器傳輸上來的視頻數(shù)據(jù)，控制面板區(qū)通過按鈕與CGI串口應(yīng)用程序交互控制電機(jī)驅(qū)動(dòng)板。
Javascript是一種流行的通用腳本語言，基于Javascript可以實(shí)現(xiàn)用戶與頁面的交互，并響應(yīng)頁面上發(fā)生的事件。
HTML表單是Web文檔的一部分，用來將信息從瀏覽器傳遞到服務(wù)器，它提供多種接收輸入的方法，包括單選按鈕、多選框、文本框等，表單以form>標(biāo)簽開始，以／form>標(biāo)簽結(jié)束。本系統(tǒng)控制面板的按鈕采用“button”輸入類型。傳統(tǒng)的HTML表單需要通過提交按鈕(“subm it”)來發(fā)送表單數(shù)據(jù)，數(shù)據(jù)以名／值對的形式發(fā)送至服務(wù)器端的CGI程序。本系統(tǒng)的每個(gè)按鈕都需要實(shí)時(shí)提交，如果通過傳統(tǒng)方法來實(shí)現(xiàn)，則需要對每個(gè)按鈕配對一個(gè)不同名的提交按鈕，這樣會使頁面代碼變得更復(fù)雜，因此本系統(tǒng)使用Ajax方法。使用Ajax創(chuàng)建HTML表單時(shí)，不再需要提交按鈕來發(fā)送表單數(shù)據(jù)，對于每個(gè)按鈕，只要在屬性中添加事件處理函數(shù)onClick()，就能在點(diǎn)擊按鈕時(shí)觸發(fā)Ajax建立瀏覽器和服務(wù)器CGI應(yīng)用程序間的通信，實(shí)現(xiàn)代碼如下：



結(jié)語
本文所介紹的系統(tǒng)在實(shí)驗(yàn)中獲得了較好的結(jié)果，視頻圖像的傳輸具有較好的穩(wěn)定性，為了提高圖像的連續(xù)性，可以通過修改代碼提高攝像頭的采集頻率。該移動(dòng)機(jī)器人平臺可以根據(jù)實(shí)際需要進(jìn)行功能擴(kuò)充，并可以通過本文所闡述的方法，對控制面板的功能進(jìn)行相應(yīng)的擴(kuò)展，比如攝像頭的調(diào)焦、溫濕度顯示、機(jī)械手臂運(yùn)動(dòng)控制等。