第8章

Download Report

Transcript 第8章 

第八章透過網頁控制
嵌入式系統
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>
用來設定一般欄位，這個標籤最常用。
<SELECT>
用來設計有下拉式選單的欄位。
<TEXTAREA> 用來設計一個編輯視窗，供輸入資料之用。
<BUTTON>
主要是可以用來設計圖像按鈕，是HTML4.0
新增的控制標籤。
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">
自動更新內容
檢查參數，確認引發者
原程式保留
自動更新