1 / 44

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

第八章透過網頁控制嵌入式系統. HTML. 原始檔內容. 補充教材. 重要標籤. <HTML>…</HTML> ：這一組就是告訴瀏覽器「我是一個網頁文件」的標籤。 <HEAD>…</HEAD> ：這個是網頁開頭輸入的資訊，告訴瀏覽器網頁主要的資訊。

manny
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. HTML 原始檔內容

  3. 補充教材 重要標籤 • <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>：這個區段是編輯網頁的主要地方，也是主要的精華所在；我們可以在這裡加上背景、顏色、影像、連結…等等的內容。

  4. 補充教材 文字標籤

  5. 補充教材 顏色指定

  6. 補充教材 文字外型

  7. 補充教材 圖形標籤 • <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>，就可以強迫文件換一行，所以此例就會在圖形的前後各換行一次；此技巧經常應用在文件中。

  8. 補充教材 連結與路徑 • <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>：與上述的類似，顯示出抬頭文字；輸入名稱是顯示給使用者看的。

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

  10. 補充教材 多重表格 <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>

  11. 表單與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>

  12. 常用表單控制項標籤

  13. Input標籤常用屬性

  14. Type屬性

  15. 其他標籤

  16. 表單例子

  17. HTML編輯工具

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

  19. 完成頁面

  20. 原始檔內容

  21. 開啟頁面的結果

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

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

  24. HTML檔案傳送

  25. 開啟主機上的網頁

  26. 執行CGI結果

  27. CGI程式初步

  28. 簡易例子

  29. 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();

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

  31. 解析 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();

  32. SD/USB訊息列表

  33. 透過選項取得資訊

  34. 測試結果

  35. <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> 監控畫面預設計 原始檔內容

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

  37. 數位輸出控制

  38. 實作 省略部份程式

  39. 網頁控制LED for 2440/2410

  40. Return超連結的情形

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

  42. 網卡IP實作

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

  44. 自動更新

More Related