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

13th鐵人賽自我挑戰程式編成

ks_wwlin

2021-09-19 18:32:22

1532 瀏覽

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，除此之外還會有結合其它服務去進行推播等功能些，希望大家可以繼續關注拉，我們明天見拉~