第八章透過網頁控制嵌入式系統

第八章透過網頁控制嵌入式系統

HTML 原始檔內容

補充教材 重要標籤 • <HTML>…</HTML>：這一組就是告訴瀏覽器「我是一個網頁文件」的標籤。 • <HEAD>…</HEAD>：這個是網頁開頭輸入的資訊，告訴瀏覽器網頁主要的資訊。 • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">：這一段角括弧是用來告知瀏覽器資訊用的，META在HTML文件中沒有終止標籤，它以屬性=”屬性值”的格式設定HTML文件的內部特性。此標籤只能存在HEAD標籤區段。HTTP-EQUIV屬性表示將資訊以HTTP表頭資訊的方式傳送到用戶端，而CONTENT屬性就是傳給送用啟端的資訊內容；charset=big5指出本文件是繁體中文。屬性設定值，屬性的名稱直接寫出來，而其數值則必須使用一組雙引號(“”)將其括住。 • <META NAME="Author" CONTENT="MATRIX">：和上述相同，但設定的屬性NAME表示文件中的作者資訊。 • <TITLE>…</TITLE>：此組標籤的區段將顯示網頁標題，用來告訴用戶端本網頁的主要內容是什麼。 • <BODY>…</BODY>：這個區段是編輯網頁的主要地方，也是主要的精華所在；我們可以在這裡加上背景、顏色、影像、連結…等等的內容。

補充教材 文字標籤

補充教材 顏色指定

補充教材 文字外型

補充教材 圖形標籤 • <IMG SRC=model.gif> ：這就是圖片排列的最基本指令。<IMG SRC= 部分就是貼圖指令，model.gif就是圖片的檔案名稱。注意！在網頁中的檔案名稱大小寫是有差別的。 • <IMG SRC=model.gif border="0">> ：這是把圖案邊邊藍色的框去掉的指令，有時候如果貼圖被拿來作超連結的按鈕，旁邊會多一個方框，用border="0"就可以把方框消掉。border屬性就是方框設定的意思，0 代表沒有，數字越大框框就越大囉。 • <IMG SRC="model.gif" height="66" width="72"> ：這個是設定圖形大小的指令，可以省去瀏覽器幫你計算圖檔格式的時間(雖然感覺不出來)，也可以自由規劃圖檔的大小格式。其中HEIGHT代表圖案的高度，WIDTH代表圖案的寬度；如果沒有作此設定，瀏覽器將依原始圖檔的尺寸顯示出來。 • <IMG SRC="model.gif" height="66" width="72" alt="圖檔介紹內容"> ：ALT指令是說明圖檔的名稱的，如果有時候圖檔不見了，或是還沒下載完成，可以藉由這個指令事先說明圖檔的名稱或是內容。 • <IMG SRC="model.gif" align="right"> ：ALIGN在貼圖中是代表文字和圖案的相對位置，使用屬性為ALIGN="方位"，ALGIN表示對齊的意思。 • <IMG SRC="model.gif" VSPACE="15"> ：VSPACE是設定圖案旁邊的文字跟圖案本身的垂直距離，HSPACE是設定圖案旁邊的文字跟圖案本身的水平距離。 • <br><IMG SRC="model.gif" VSPACE="15"><br> ：<br>是強迫換行的指令，每輸入一次<br>，就可以強迫文件換一行，所以此例就會在圖形的前後各換行一次；此技巧經常應用在文件中。

補充教材 連結與路徑 • <a href="輸入連結網址">輸入名稱</a>：指定超連結的網址，輸入名稱是則顯示給使用者看的文字。 • <a href="輸入連結網址" target="_blank" title="開啟新視窗瀏覽">輸入名稱</a> ： title="開啟新視窗瀏覽"，加入顯示標題的文字方塊到新開啟的視窗。 • <a href="輸入連結網址" target="resource window">輸入名稱</a>：在另一個視窗顯示內容。 • <a href="輸入連結網址" style="text-decoration: none">輸入名稱</a>： style屬性用來設定css樣式表。 • <p id=main align="right"><a href="輸入連結網址" target="_blank" title="開啟新視窗瀏覽"><img border=0 src="輸入圖形連結網址"> ：p是區塊設定指令，而id=main表示給定一個名字， align為對齊方式，指定為"right"(右邊)，border是邊框設定，指定為0(沒有邊框的意思)。 • <a href="輸入連結網址" title="輸入要顯示的文字">輸入名稱</a>：與上述的類似，顯示出抬頭文字；輸入名稱是顯示給使用者看的。

<TABLE BORDER="1"> <TR> <TD>表格內容</TD> </TR> </TABLE> 表格 • <TABLE BORDER="1">：告訴瀏覽器，我現在要開始作一個表單。 • <TR>：我現在要開始作第一層。 • <TD>：我現在要開始作第一層裡面的第一格，接著把第一格的內容鍵入。 • </TD>：我第一層裡面的第一格已經做完。 • </TR>：我第一層已經做好了。 • </TABLE>：這個表單我做完。補充教材

補充教材 多重表格 <TABLE BORDER="1"> <TR> <TD>表格內容</TD><TD>表格內容2</TD><TD>表格內容3</TD> </TR> <TR> <TD>表格內容2-1</TD><TD>表格內容2-2</TD><TD>表格內容2-3</TD> </TR> <TR> <TD>表格內容3-1</TD><TD>表格內容3-2</TD><TD>表格內容3-3</TD> </TR> <TR> <TD>表格內容4-1</TD><TD>表格內容4-2</TD><TD>表格內容4-3</TD> </TR> </TABLE>

表單與CGI • Method：用來指定與CGI之間的資料傳遞方式，有GET與POST兩種指定方式 • Action：用來指出CGI程式的所在位置，這是由我們設計用來解析客戶端傳來資訊的程式 <form style="height: 160px;" method="post" action="/cgi-bin/login" name="cgi_form"> <div style="text-align: center;"> … </form>

常用表單控制項標籤

Input標籤常用屬性

Type屬性

其他標籤

表單例子

HTML編輯工具

NVU設計步驟 • 開啟nvu程式後，點選「檔案」\「新增」，選擇「空白文件」 • 先作網頁的頁面設定。請選擇功能表上的「格式」\「頁面標題與屬性」 • 在出現的對話框中設定相關的內容；可設定的內容包括了「標題」、「作者」、「描述」，在國際化的選項中，您可選擇中文-台灣的項目 • 在頁面上鍵入您希望的文字，中英文皆可；文字的型態設定可選擇畫面上的格式設定快速鍵來作 • 插入一個表單。插入的方法是在功能表上選擇「插入」\「表單」\「定義表單」 • 在出現的表單設定畫面中，把包括名稱及CGI程式的位置輸入進去 • 畫面上會出現虛線方框，請在這個方框內部鍵入” 使用者帳號：”，當作是提示的文字 • 其他的表單欄位亦使用相同的方式建立，例如您可加入密碼欄位及按鈕的欄位 • 將網頁存檔

完成頁面

原始檔內容

開啟頁面的結果

嵌入式系統的Web伺服程式-boa

boa內容 • Port：指明使用的埠號，一般的http協定使用80，也可以加以更改，但更改後就必須使用新的埠號。 • DocumentRoot：指出根目錄的所在位置，從這裡也可以看出為何之前我們說位置是在/home/httpd。 • DirectoryIndex：指明預設的啟始網頁名稱，一般都是以index.html作為預設名稱，當使用者在瀏覽器上鍵入此伺服器的位址後，就會找此預設的網頁檔來呈現。 • ScriptAlias：定義CGI程式的所在位置。

HTML檔案傳送

開啟主機上的網頁

執行CGI結果

CGI程式初步

簡易例子

HTML結構化函式 html_content(); html_start(" FIRST CGI testing "); html_text("This is produced by boa web server."); html_text("You should see these word."); html_text("MATRIX Embedded Syntem"); cout << "<p><a href=\"http://192.168.2.3/3.htm\">Return</a></p>\n"; html_end();

參數值解析 • GET • Query_String • POST • stdin typedef struct name_value_set { char name[20]; char value[50]; } nv_set;

解析 nv_set nv[20]; int ret,i; char buf[100]; html_content(); ret =get_input(nv); html_start(" FIRST CGI testing "); html_text("This is produced by boa web server."); html_text("You should see these word."); html_text("MATRIX Embedded Syntem"); for (i=0;i<ret;i++) { sprintf(buf,"%d : Name=%s,Value=%s",i,nv[i].name,nv[i].value); html_text(buf); } cout << "<p><a href=\"http://192.168.2.3/3.htm\">Return</a></p>\n"; html_end();

SD/USB訊息列表

透過選項取得資訊

測試結果

<html> <head> <title> FIRST CGI testing </title> <meta name="GENERATOR" content="Namo WebEditor v6.0"> <meta http-equiv="content-type" content="text/html; charset=big5"> <meta name="author" content="TOM"> <meta name="description" content="MATRIX demo1"> </head> <body> <p><BIG style="FONT-WEIGHT: bold"><BIG><BIG>~遠端控制系統現況~</BIG></BIG></BIG></p> <table border="1"> <tr> <td width="138"> <p align="center">現況1</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> <td width="138" bgcolor="#FFFF99"> <p align="center">現況2</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> <td width="138"> <p align="center">現況3</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> <td width="138" bgcolor="#FFFF99"> <p align="center">現況4</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> </tr> <tr> <td width="138" bgcolor="#FFFF99"> <p align="center">現況5</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> <td width="138"> <p align="center">現況6</p> <p align="center"><img src="run.jpg" width="64" height="64" border="0"></p> </td> <td width="138" bgcolor="#FFFF99"> <p align="center">現況7</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> <td width="138"> <p align="center">現況8</p> <p align="center"><img src="stop.jpg" width="64" height="64" border="0"></p> </td> </tr> </table> <p><a href="http://192.168.2.3/3.htm">回登入頁面</a></p> </body> </html> 監控畫面預設計原始檔內容

產生程式 執行結果以下程式省略

數位輸出控制

實作省略部份程式

網頁控制LED for 2440/2410

Return超連結的情形

取得網卡IP ioctl(fd, SIOCGIFADDR, &ifr) • 參數一：socket代碼 • 參數二： • SIOCGIFNAME：回傳網路卡名稱 • SIOCGIFINDEX：取得網路卡索引值 • SIOCGIFFLAGS, SIOCSIFFLAGS：取得或設定裝置的致能旗標(flag) • SIOCGIFMTU, SIOCSIFMTU：傳回或設定最大的傳輸單位。 • SIOCGIFHWADDR, SIOCSIFHWADDR：取得或設定網路卡的硬體位址。 • SIOCSIFHWBROADCAST：設定網路卡的廣播位址。 • SIOCGIFMAP, SIOCSIFMAP：取得或設定網路卡的硬體參數。 • SIOCADDMULTI, SIOCDELMULTI：增加或刪除網路卡的位址。 • SIOCGIFTXQLEN, SIOCSIFTXQLEN：取得或設定傳輸佇列的長度。 • SIOCSIFNAME：改變網路卡名稱。 • SIOCGIFCONF：傳回網路卡位址列表。 • 參數三：

網卡IP實作

網頁自動更新 <META HTTP-EQUIV="refresh" CONTENT="30;URL=http://192.168.2.3/3.htm"> 自動更新內容檢查參數，確認引發者原程式保留

自動更新

第八章透過網頁控制嵌入式系統

第八章透過網頁控制嵌入式系統

Presentation Transcript