iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

Maker making IoT !!系列 第 19

[Day18] Esp32用STA mode + Relay - (程式碼講解)

1.前言

今天就不廢話拉,直接進入主題(大家應該都去報復性出遊了吧)。

2.html

其實HTML目前還有一版為HTML5,而HTML5由 W3C 與 WHATWG所共同制定的新標準,最核心技術包含HTML、CSS、JavaScript,可以讓使用者不需安裝額外插件,就可以繞使用者觀賞到豐富的葉面內容,除此之外HTML也提供新語法、API、動畫、多媒體、樣式設計及跨平台等優勢可另網頁更多元化。

HTML原型最早在1980年制定出來,最初主要用於共享文件,而內容多為文字與連結,架構較為單純簡單。
而HTML在一個網頁裡扮演的角色就像是他的骨架,負責規劃出網頁內容與架構。

到這邊都是一堆介紹,所以現在讓各位看一下HTML的語法都是長怎樣,就請大家現在按下F12,各位應該會看到像是下方那張圖一樣

圖片取自:使用者拍攝

能看到許多程式碼都有標籤<></>兩兩一組

<p>Hello World!!!</p>

<>,為起始標籤
</>,為結束標籤
內容,中間的Hello World!!!為內容
元素,由起始標籤、結束標籤及內容所組成

而元素還可以有屬性,如下方範例

<p class="test">Hello World</p>

當然屬性可以設定許多東西,如字體、字型大小、顏色、位置等種類。

像是上方圖片下面的欄位,分別設定位置、高度、字體、行高、顏色、字型大小、背景顏色,而這部份都是CSS的部分。

HTML就像是人,CSS像是衣服一樣,裝飾著人,而JavaScript就人所做的動作,控制人的動作。

而HTML的基本框架

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
      Hello World
  </body>
</html>

現在講完這些,那就可以把這些知識帶入之前那些程式碼當中。

            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP32 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 22  
            client.println("<p>GPIO 22 - State " + output22State + "</p>");
            // If the output22State is off, it displays the ON button       
            if (output22State=="off") {
              client.println("<p><a href=\"/22/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/22/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 23  
            client.println("<p>GPIO 23 - State " + output23State + "</p>");
            // If the output23State is off, it displays the ON button       
            if (output23State=="off") {
              client.println("<p><a href=\"/23/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/23/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
  • 94-96行,HTML開頭
  • 99-102行,設置按鈕的CSS樣式
  • 105行,進入頁面的文字(那個大文字)
  • 108-114行,控制GPIO 22的按鈕狀態(ON/OFF)
  • 117-123行,控制GPIO 23的按鈕狀態(ON/OFF)
  • 124行,HTML結尾語句

如果對HTML有興趣可以上網查詢,有許多教學,那我這邊也稍微推薦一個HTML教學

歡迎交流

好了,終於花了4篇時間,把程式碼大部分的功能都講解各位聽了,除此之外還有一些程式基本觀念或是一些小介紹跟大家說,希望可以幫助到各位的進步,那這次輸出元件只會介紹到LED及繼電器(Relay),其它可以留給各位慢慢玩,那下一篇會如之前預告相同,開始進入讀取資料的篇章,一樣會有AP mode的與STA mode,除此之外還會有結合其它服務去進行推播等功能些,希望大家可以繼續關注拉,我們明天見拉~


上一篇
[Day17] Esp32用STA mode + Relay
下一篇
[Day19] Esp32用AP mode + AHT10
系列文
Maker making IoT !!30

尚未有邦友留言

立即登入留言