//Logo Image
作者:馬鴻祥(2005-02-24);推薦:吳昌暉、徐業良(2005-02-27);最近更新:徐業良(2005-03-08)

PIC_SERVER教材(8)—動態WWW/HTTP伺服器之遠端控制

本文將介紹PIC_SERVER控制的功能,藉以實現使用者於遠端控制PIC_SERVER的需求。本文首先將呼應PIC_SERVER教材(6)(7),介紹遠端系統時鐘調校的範例程式,接下來則配合PIC_SERVER教材(4),討論如何透過PIC_SERVER控制遠端致動器。

1. 動態WWW/HTTP伺服器遠端控制

1是利用PIC_SERVER作遠端控制之架構圖,當PIC_SERVER的韌體函式bios_EtherNetHandler()發現遠端的HTTP client所要求的是檔名前6字為“to_pic”的檔案,且HTTP client送來的密碼正確無誤時,就會呼叫callback函式callback_HTTPclientCmdHandler(),立刻開始處理HTTP client送來的字串指令或數據。

1. 遠端控制之架構圖

2. 遠端系統時鐘調校範例程式說明

本文首先介紹遠端系統時鐘調校的範例程式。圖2為本範例程式client端呈現畫面,分為兩個框架,上半部與PIC_SERVER教材(7)相同,動態呈現PIC_SERVER可變電阻搖臂上的電壓,並加入展示動態圖片的功能。下半部則用做遠端控制,HTTP client端可利用網頁瀏覽器送出更正時鐘的指令,進行人工調校PIC_SERVER系統時間的動作。在這個範例中所需要的程式包含:

l          HTTP client端程式:用IENetscape等網頁瀏覽器或Visual Basic介面

l          PIC_SERVER端網頁程式:ex_2\index.htm, sorry.htm, fmxpic.egi, to_pic3.egi, tips.gif, tree.jpg, yzu1.jpg

l          PIC_SERVERC程式:ex_2_web_remote_control.c

2. 用戶端畫面

接下來先介紹PIC_SERVER端所需的網頁程式,再說明PIC_SERVER端所需的C程式。

2.1 PIC_SERVER端網頁程式的設計與製作

實現圖2範例程式畫面需要3個網頁程式,第一個是入口網頁index.htm,如下:

1.          <HTML>

2.          <TITLE>範例: pic_server_step_3.c </TITLE>

3.          <FRAMESET rows="50%,50%" border=5>

4.          <FRAME name="top"  src="fmxpic.egi">

5.          <FRAME name="down" src="to_pic3.egi?pas=guest__playing?cmd=T_1025__設定時鐘_">

6.          </FRAMESET>

7.          </HTML>

入口網頁index.htm3行將網頁分割為兩個框架,瀏覽器看到第4行指令,便向PIC_SERVER索取fmxpic.egi,放置於index.htm的上框架中。在PC硬碟資料夾C:\YZ_PIC\Samples\pic_SERVER\Beginner\WebPage\ex_2裡面的fmxpic.egi內容如下:

1.          <html><meta http-equiv="refresh" content="1">

2.          Welcome to pic_SERVER !    <br><br>

3.          AN0 = @4                   <br><br>

4.          目前時間 ( 年月日/時分秒/0.01 )@2 <br><br>

5.          <img src=@Z><br>

6.          </html>

其中AN0與系統時鐘的顯示已於前面教材中介紹,於此便不再贅述。第5行的@Z便是傳輸自block_0_data[36]開始的字串(也就是圖片檔案的檔名,動態圖片檔案的處理在下一節PIC_SERVERC程式中會作詳細說明)。

接著當瀏覽器看到index.htm的第5行指令,便向PIC_SERVERHTTP伺服器送出下述字串

GET /to_pic3.egi?pas=guest__playing?cmd=T_1025__設定時鐘_

其作用不僅索取to_pic3.egi檔,放置於index.htm的下框架中,也同時送出密碼“guest__playing”和指令「T_1025__設定時鐘_」,讓圖2的用戶端畫面得以顯示「T_1025__設定時鐘_」這個指令範例。此外,如圖1之架構圖,當HTTP client所要求的是檔名前6字為“to_pic”的檔案時,同時必須傳送密碼與指令給PIC_SERVER,即index.htm5行後半內容“to_pic3.egi?pas=guest__playing?cmd=T_1025__設定時鐘_”。指令中的文字“T_1025”會被PIC_SERVER端的C程式視為一組具有特定意義的指令,其意義將在下一節再作詳細說明。

檔案to_pic3.egi的內容如下:

1.          <html>

2.          <form action='to_pic3.egi'>

3.          Password : <input type=text name=pas size=15 value='guest__playing'> (14 char) <br><br>

4.          Command : <input type=text name=cmd size=15 value='@3'> (56 char)

5.          <INPUT type=submit value=送出指令 name="value='SEND'">

6.          </form>

7.          Have fun, and ... enjoy pic_SERVER.net !

8.          </html>

to_pic3.egi的第3行定義輸入使用者密碼的方框,預設值為“guest_playing”;第4行定義下達命令的輸入方框,預設值為@3,其效果是覆頌(echo)PIC_SERVER所收到的HTTP client指令(詳見pic_SERVER_egi.c裡面的樣版回呼函數,EGI碼索引規則已在PIC_SERVER教材(7)說明),即傳送index.htm中的指令“T_1025__設定時鐘_”;第5行則是在定義送出指令的按鍵。PIC_SERVERPassword是在ICP中設定(請參閱PIC_SERVER教材(2),倘若輸入錯誤密碼則會回傳sorry.htm檔(如圖3,請參閱「PIC_SERVER Quick Guide.pdf附錄C」)。

3. 使用者輸入錯誤密碼畫面

網頁檔to_pic3.egi建立了一個圖形介面,方便使用者輸入,但沒有圖形介面也可以傳送控制指令給PIC_SERVER。例如改寫PIC_SERVER的入口網頁index.htm如下:

1.          <HTML>

2.          <FRAMESET>

3.          <FRAME src="fmxpic.egi">

4.          </FRAMESET>

5.          </HTML>

入口網頁所需的fmxpic.egi與前面相同,而控制系統時鐘僅需在網址鍵入http://140.138.40.158/to_pic3.htm?pas=guest__playing?cmd=T_1234,同樣也能以瀏覽器來調校PIC_SERVER的系統時鐘。

2.2 PIC_SERVER端的C程式

本範例PIC_SERVER端的C程式如圖4,其中第1~19行與先前教材完全相同。在本範例一系列的callback函式中,除了callback_HTTPclientRequestData()函式用來傳輸數據,已先前的教材已介紹過外,也呼叫了callback_HTTPclientCmdHandler()函式,用來處理HTTP client傳來的命令。

4. PIC_SERVER端的C程式

函式callback_HTTPclientRequestData()除了動態呈現PIC_SERVER可變電阻搖臂上的電壓,圖4程式37~40行也以一變數picture_index控制顯示圖片,此函式每次被呼叫時,將tree.jpgyzu1.jpgtips.jpg三張圖片序列指定給block_0_data[36],前一節中fmxpic.egi5行的@Z便是傳輸自block_0_data[36]開始的字串,達成展示動態圖片的功能。PC硬碟資料夾C:\YZ_PIC\Samples\pic_SERVER\Beginner\WebPage\ex_2下的tree.jpgyzu1.jpgtips.jpg三個圖片檔案隨著封包的動作也一併被包含於EX_2.ROM中了。

如前所述,回呼函式callback_HTTPclientCmdHandler()的任務與功能就是負責處理HTTP client所送來的指令,至於是誰呼叫callback_HTTPclientCmdHandler()這個函式、HTTP client所送來的指令又儲存在哪個變數裡,其中的過程都是由韌體BIOS程式bios_EtherNetHandler()負責的。當bios_EtherNetHandler()收到HTTP用戶送來的字串之後,若字串中所指定的檔案名稱的前6字為to_pic,而且字串中的密碼與儲存在PIC_SERVEREEPROM中的密碼吻合,就會將HTTP用戶送來的指令(在本例中就是“T_1025…”這一串字元),寫入最多可容納56字的字串變數http.clientCmd[…]裡,再呼叫回呼函數callback_HTTPclientCmdHandler()去處理這個定義於頭文件pic_SERVER.h裡面的整體變數http.clientCmd

在本例中,HTTP用戶送出指令“T_1025”之後,http.clientCmd的第一個元素http.clientCmd[0]裡面的數值就是字元“T”,第二個元素http.clientCmd[1]的數值就是字元“_”,依此類推。實際執行HTTP用戶送來的指令,就在圖6程式22~28行,當HTTP client提出T_1025的命令,C程式讀取到這行命令的第1個字元“T”時,便啟動了程式24~28行事件的發生,亦即將第23字元轉換為十進位的數值再寫入時鐘變數clock.hour,將第45字元轉換為十進位的數值再寫入時鐘變數clock.min,藉此從遠端設定更新系統時鐘的數值。程式24252627行拆開成兩行的寫法是為了位移的運算。

3. 遠端控制PIC_SREVER上的馬達或LED

PIC_SERVER教材(4)中介紹,PIC_SERVER藉由板子上的一顆L293D功率放大IC來驅動馬達,L293D4channel可提供總計0.6A的連續電流與1.2A的峰值電流。圖5青色字體M1AM1B代表接馬達#1的腳位,M2AM2B則是代表馬達#2,將馬達兩端接於此即可驅動馬達並控制其正反轉與速度。完整文件請參閱C:\YZ_PIC\Util\Schematics\PIC_SERVER_Circuit\ PIC_SERVER Layout.pdf

5. PIC_SERVER部分layout

PIC_SERVER內建驅動馬達的函式如下

        motor(ch , speed)

其中ch變數代表馬達,speed表示模擬的速度,其值在-15~15間,正、負值表示不同的馬達轉動方向。

遠端控制PIC_SREVER上的LED或馬達,所需C程式與第2.2節十分類似,差別僅於C程式if(…)後面所要驅動或觸發的事件(圖424~29行)。舉例來說,將callback_HTTPclientCmdHandler()函式改為如圖10幾行程式,自行定義一個client端指令“M”的動作(馬達1全速運轉2秒後停止作動),當client端在網址欄輸入http://140.138.40.158/to_pic3.egi?pas=guest__playing?cmd=M,即可控制遠端馬達運轉。

6. 遠端驅動馬達程式

同理,在C程式if(…)後面若換成

                {

output_low(PIN_A4);      delay_ms(2000);      output_high(PIN_A4);

                }

便可控制遠端PIC_SERVER上的LED2秒後熄滅。

【實驗】

在「PIC_SERVER教材(4)—近端馬達控制」實驗,曾以以PIC_SERVER板上的可變電阻VR1來控制馬達的轉速,以ICP按鍵控制馬達正反轉。修改此實驗PICC程式,並以本教材介紹方式建立一網頁介面,可在遠端透過網頁下達命令,從遠端控制2個玩具馬達的轉速與方向,於下週課堂上展示。