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

PIC_SERVER教材(7)—動態WWW/HTTP伺服器即時數據蒐集

本文接續PIC_SERVER教材(6),繼續介紹動態EGI檔的應用,特別是如何透過網頁瀏覽器取得遠端PIC_SERVER所擷取的即時數據。

1. 動態WWW/HTTP伺服器即時數據蒐集

1是利用PIC_SERVER蒐集遠端感測器及時數據之典型應用架構,當PIC_SERVER收到遠端HTTP用戶傳來的請求後,立刻擷取如極限開關、熱敏電阻、光敏電阻、可變電阻等感測器數據,然後即時回傳給遠端用戶。用戶收到數據的時間點與PIC_SERVER擷取更新數據的時間點之差異僅為網路傳輸延遲時間,故可稱為「即時」數據。

1. 即時數據蒐集之架構圖

2. 範例程式說明

本例所要傳遞的即時數據是PIC_SERVER所擷取到可變電阻搖臂上的電壓,用0~1023的整數表示0~5V的類比電壓值,希望當HTTP client在網頁瀏覽器中鍵入PIC_SERVER的網址http://140.138.40.158/,並按下ENTER鍵之後,瀏覽器軟體的視窗中呈現如圖2所示的畫面與資訊,且每2秒更新一次。在這個範例中所需要的程式包含:

l          HTTP client端程式:用IENetscape等網頁瀏覽器即可

l          PIC_SERVER端網頁程式:ex_1\index.htmex_1\fmxpic.egi

l          PIC_SERVERC程式:ex_1_dynamic_webpage.c

2. 用戶端畫面

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

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

2AN0係連接可變電阻搖臂的PIC單晶片的接腳代號,數值508即表示當PIC_SERVER收到HTTP用戶的請求的那一瞬間,接腳AN0電壓值是

        Volt

這動態網頁畫面需要用兩個網頁程式才能實現,第一個是入口網頁index.htm,如下:

1          <HTML>

2          <FRAMESET>

3          <FRAME src="fmxpic.egi">

4                    </FRAMESET>

5                    </HTML>

HTTP client在網頁瀏覽器中鍵入PIC_SERVER的網址http://140.138.40.158/並按下ENTER鍵之後,瀏覽器就會向IP網址為140.138.40.158PIC_SERVER索取入口網頁檔案index.htm,當瀏覽器收到index.htm之後,看到第3行的指令,就會再繼續向PIC_SERVER索取第3行的指令中所要求的網頁檔案fmxpic.egi,在PC硬碟資料夾C:\YZ_PIC\Samples\pic_SERVER\Beginner\WebPage\ex_1裡面的fmxpic.egi的檔案內容如下:

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

2      Welcome to pic_SERVER !         <br><br>

3      本網頁每 2 秒鐘自動更新乙次    <br><br>

4      AN0 = @4                      <br><br>

5      目前時間 ( 年月日/時分秒/0.01 )@2

6      </html>

這段程式僅較PIC_SERVER教材(4)中的EGI程式多了第4AN0 = @4,如先前教材的敘述,硬碟中的fmxpic.egi並沒有動態的即時數據,當PIC_SERVER從它的唯讀記憶體中取出fmxpic.egi這個副檔名為EGI的動態網頁檔案傳送給HTTP用戶時,才會用當時的電壓數據508取代檔案中的EGI“@4”,且以當時的系統時鐘數值取代檔案中的EGI“@2”

檢視PC硬碟中的index.htmfmxpic.egi這兩個網頁程式的執行效果無誤之後,就可以把這兩個檔案製成ROM檔燒入PIC_SERVER的唯讀記憶體。

2.2  PIC_SERVER端的C程式

PIC_SERVER如何用即時數據取代EGI碼,已於PIC_SERVER教材(4)中詳細說明。本範例中要以即時電壓數據取代EGI“@4”的程式,已經寫在程式庫中的「樣板程式」裡,使用者僅需在C程式中正確寫出所擷取資訊存放的記憶體位置即可,如圖325行。

3. PIC_SERVER端的C程式

在圖322~31行一系列的callback函式中,callback_HTTPclientRequestData()函式不難從字意上大略猜測其作用,表示當HTTP client端請求發送數據,則server端就立刻執行此函式內的工作並送回給bios_EtherNetHandler()發送。圖3範例程式的第25

        block_0_s_16 [0] = read_analog (0)

即指定蒐集PIC_SERVERA0腳位的類比訊號,並暫存在block_0_s_16 [0]的記憶體位置。

存入記憶體位置的資料依據特定規則被索引到動態egi網頁,egi檔便是依據“@”後面的EGI碼索引到PIC_SERVER的特定記憶體位置。當此EGI碼回傳至callback_HTTPdynamicEGIcodeHandler()函式中,函式中的規則便將EGI索引至該記憶體位置。如PIC_SERVER教材(6)所述,EGI碼索引規則被定義在pic_SERVER_egi.c的樣版程式callback_HTTPdynamicEGIcodeHandler()中,再次整理如表1。例如fmxpic.egi的第5行程式

        目前時間 (年月日/時分秒/0.01): @2

對照表1EGI“@2”所傳送之變數是clock,即當動態網頁執行到有“@2”此二字元時,便跟PIC_SERVER要求傳輸在結構變數clock內的數據資料,亦即clock.yearclock.monthclock.dayclock.hourclock.minclock.sec、以及clock.tick7個數值(結構變數clock的定義與宣告請參閱pic_SERVER.h)。使用者也可依需求修改或簡化pic_SERVER_egi.c這個樣板程式,變更此EGI碼索引規則。

1. EGI碼索引規則表

EGI

傳送格式

傳送之記憶體的位置

陣列數據資料

@0

【註1

block_0_data [0..47]block_0_s_16 [0..23]

@1

%u

block_1_data [0..47]

@2

%u

clock

@3

%c

http.clientCmd [0..55]

單一數據資料

@4..@?【註2

%ld

block_0_s_16 [0...11]

@!..@,

%ld

block_0_s_16 [12..23]

@a..@z

%u

block_1_data [0...25]

@A..@V

%c

block_1_data [26..47]

@Y

%s

block_0_data [ 24 ]開始的字串

@Z

%s

block_0_data [ 36 ]開始的字串

【註1】:用EGI檔傳輸block_0_data時所用的格式,是在pic_SERVER_init()裡用setup_egiDataFormat(1,1,1)所設預設初始值,可在主程式中隨意變更。

【註2】:4 ... ?! … , ASCII碼的33...4752...63,詳細如表2

2. ASCII碼對照表(32-127)

dec

符號

Hex

 

dec

符號

Hex

 

dec

符號

Hex

 

dec

符號

Hex

 

dec

符號

Hex

 

dec

符號

Hex

32

(sp)

20

48

0

30

64

@

40

80

P

50

96

`

60

112

p

70

33

!

21

49

1

31

65

A

41

81

Q

51

97

a

61

113

q

71

34

"

22

50

2

32

66

B

42

82

R

52

98

b

62

114

r

72

35

#

23

51

3

33

67

C

43

83

S

53

99

c

63

115

s

73

36

$

24

52

4

34

68

D

44

84

T

54

100

d

64

116

t

74

37

%

25

53

5

35

69

E

45

85

U

55

101

e

65

117

u

75

38

&

26

54

6

36

70

F

46

86

V

56

102

f

66

118

v

76

39

'

27

55

7

37

71

G

47

87

W

57

103

g

67

119

w

77

40

(

28

56

8

38

72

H

48

88

X

58

104

h

68

120

x

78

41

)

29

57

9

39

73

I

49

89

Y

59

105

i

69

121

y

79

42

*

2A

58

:

3A

74

J

4A

90

Z

5A

106

j

6A

122

z

7A

43

+

2B

59

;

3B

75

K

4B

91

[

5B

107

k

6B

123

{

7B

44

,

2C

60

< 

3C

76

L

4C

92

\

5C

108

l

6C

124

|

7C

45

-

2D

61

=

3D

77

M

4D

93

]

5D

109

m

6D

125

}

7D

46

.

2E

62

> 

3E

78

N

4E

94

^

5E

110

n

6E

126

~

7E

47

/

2F

63

?

3F

79

O

4F

95

_

5F

111

o

6F

127



7F

3. 實例測試

3.1 類比訊號的監測

本實例中使用者希望能藉由如圖4之網頁介面來實現遠端監控廚房之溫度。

4. 使用者需求介面

本實例中index.htmfmxpic.egi這兩個網頁程式十分簡單,此處略去不談。在PIC_SERVER端的C程式中,則需修改callback_HTTPclientRequestData()函式內執行的工作(如圖524~28行)。第25行中首先宣告變數“temp”int16,亦即此變數數值範圍在-32768~32767之間,若使用加減乘除等運算時,需小心運算值是否超出範圍發生「溢位」。此測試實例中使用熱敏電阻作為溫度感測的元件,需以實驗求出熱敏電阻之溫度-電壓特性曲線,在圖526行加入熱敏電阻之溫度-電壓轉換公式,將PIC_SERVERA0腳位的所擷取類比電壓值經公式轉換後指定給變數temp,並暫存在block_0_s_16 [0]的記憶體位置。最後此變數temp的數值在PIC_SERVER傳回fmxpic.egi網頁程式時,EGI“@4”PIC_SERVER記憶體位置block_0_s_16 [0]索引至動態網頁中,呈現在遠端使用者的網頁上。

5. 遠端監測室溫範例程式

3.2 開關事件的監測

本測試實例中使用者希望藉由圖6畫面,上網就能知道家中門窗是否被打開。

6. 使用者需求介面

本實例中以磁簧開關作為監測門開、關狀態之感測器。將磁簧開關NOCOM接腳分別接至PIC_SERVERPIN_B2腳位與地線,此時假設為門窗開啟狀態,PIC_SERVER抓到的是1”的狀態;一旦門窗關閉,磁簧開關受到磁力作用為Close狀態,此時PIC_SERVER抓到的是0”的狀態。此處同樣需在PIC_SERVER端的C程式中修改callback_HTTPclientRequestData()函式內執行的工作(如圖724~28行)。第25行定義了一個二元變數(int1)“door_state”,第26行定義door_state值為PIN_B2腳位輸入數位訊號(其他可以作digital input的腳位還有PIN_B0PIN_B3),並暫存在block_0_s_16 [0]的記憶體位置(第27行)。

7. 遠端監測門窗開關範例程式

在感測器數量增多時(例如同時要監測溫度及門開關狀態),更好、更容易維護的C程式寫法,是在程式開始統一宣告變數,如此在callback_HTTPclientRequestData()函式內執行的工作,每個感測器只要只要一行就好,同時應養成好習慣,在程式中寫下簡明的註解說明,以便於日後管理維護。同時要監測溫度及門開關狀態C程式可改寫如下:

#define door_state  input(PIN_B2) // 在此統一宣告,比較容易維護管理

#define kitchen_temperature (8200-read_analog(0)/44*9)/160 // 轉換為deg.C

// 電路為 +5V3.3kW電阻再串接NTC 10kW 熱敏電阻再接地,熱敏電阻與3.3kW電阻之接點接到PICPIN_A0

void main()

{

}

void callback_HTTPclientRequistData(void)

{

        block_0_s_16[0] = door_state; //@4傳送

       block_0_s_16[1] = kitchen_temperature; // @5傳送

}

【實驗】

利用在「PIC_SERVER教材(3)-近端感測器數據擷取與顯示」單元實驗中製作的感測器電路,結合PIC_SERVER製作一個能在網際網路即時蒐集感測器數據之網頁。設想一個應用情境(scenario),並適當設計網頁操作與呈現方式(如密碼輸入或圖形介面等),並於下次課堂上實際展示。