Subscribe Us

header ads

Bài 3. Hưỡng Dẫn Tự Học ESP8266 - Điều Khiển Bật Tắt Led Từ Web Server Qua ESP8266

Khoai Lang Nướng tháng 2 21, 2020

ESP8266 Điều Khiển Bật Tắt Led Từ Xa Qua Web Server

Ở bài viết trước mình đã giới thiệu qua led blink huyền thoạitrên Esp8266 rồi. và bài 2 có giới thiệu qua cho các bạn về làm web server cơ bả trên esp 8266 rồi
Bài viết này mình sẽ hưỡng dẫn các bạn làm Wed Server cơ bản để điều khiển bật tắt 2 led qua ESP8266 nhá

Sơ Đồ Mạch điều khiển 2 led từ xa qua internet sử dung ESP8266

Sơ Đồ Mạch điều khiển 2 led từ xa qua internet sử dung ESP8266
Sơ Đồ Mạch điều khiển 2 led từ xa qua internet sử dung ESP8266

Ở đây mình sẽ chọn chân GPIO4 D2 làm chân led
Và thêm chân GPIO5 D1 làm chân Led
Ở bài này mình sẽ dùng mức thấp (LOW) để Bật led Và mức cao (High) Để Tắt led nhá.
Nhớ gắn thêm trở ha dung cho led nhá

Chương Trinh Điều Khiển Bật Tắt Led Từ web server

Chương Trình HTML Cho Trình Duyệt Web Đọc Từ Esp8266


  
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Trợ Lý Học Tập</title>
    <script>

    </script>

    <style>

    </style>
</head>
    <body>
     <div>
            <b>led 4</b>
            <b>OFF</b>
            <br>
            <form action='/4on'>
                <input type='submit' value='ON'>
            </form>
            <form action='/4off'>
                <input type='submit' value='OFF'>
            </form>
            <b>Led 5</b>
            <b>OFF</b>
            <form action='/5on'>
                <input type='submit' value='ON'>
            </form>
            <form action='/5off'>
                <input type='submit' value='OFF'>
            </form>
            <hr>
        </div>
    </body>
</html>

Mở lên bằng Sublime Text
Giải thích chương trình HTML Cho WebServer

<from>
Thẻ from dùng để thu thập dữa liệu bên trong và gửi về địa chỉ Server. ở đây địa chỉ server là địa chỉ IP của esp kèm theo /4on. (VD 192.168.0.186/4on) lúc này chúng ta sẽ lấy URI thì sẽ được 4on.

<input type='submit' value='ON'>
Định nghĩa một nút để gửi dữ liệu từ form người sử dụng nhập tới nơi xử lý dữ liệu của form này (form-handler) Với Tên Là ON
Những thẻ còn lại bạn có thể xem ở bài tạo web cơ bản vớiesp8266

Chương Trình Điều Khiển ON OFF 2 Led Trên Esp8266


 
/* WEB Diều Khiển Led
 *  Tự học esp 8266
 *  https://trolyhoctap.blogspot.com/
*/
 
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);


const char* ssid="HomeSmart";       //viết têm wifi muốn truy cập
const char* password="0988474745"; // viết mật khẩu wifi đo

String webSite;
int ledPin1=4;
int ledPin2=5;
String status1 = "OFF";
String status2 = "OFF";


//trạng thái led
void buildLed1(){
  if (status1 == "ON"){
        Serial.print("status1 la ");
        Serial.println(status1);
        digitalWrite(ledPin1, LOW);       // Led Kich ở mức thấp
  }
  else {
        Serial.print("status1 la ");
        Serial.println(status1);
        digitalWrite(ledPin1, HIGH);
  }
}

void buildLed2(){
  if (status2 == "ON"){
        Serial.print("status2 la ");
        Serial.println(status2);
        digitalWrite(ledPin2, LOW);   //led bật ở mức thấp
  }
  else {
        Serial.print("status2 la ");
        Serial.println(status2);
        digitalWrite(ledPin2, HIGH);
  }
}
//Trang Chủ
void handleWebsite(){
     Serial.print("URI :");
     Serial.print(server.uri());   
     String uriweb = server.uri();
            if (uriweb.indexOf("/4on") >= 0) {
              Serial.println("GPIO 4 on" + uriweb);
              status1 = "ON";
              buildLed1();
            }
            if (uriweb.indexOf("/4off") >= 0) {
              Serial.println("GPIO 4 off" + uriweb);
              status1 = "OFF";
              buildLed1();
            }
            if (uriweb.indexOf("/5on") >= 0) {
              Serial.println("GPIO 5 on" + uriweb);
              status2 = "ON";
              buildLed2();
            }
            if (uriweb.indexOf("/5off") >= 0) {
              Serial.println("GPIO 5 OFF" + uriweb);
              status2 = "OFF";
              buildLed2();
            }
  
  webSite = "<html lang=\"en\" class=\"\"><head>";
  webSite += "<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=no\">";
  webSite += "<title>Trợ Lý Học Tập</title>";
  webSite += "<script>";
  webSite += "</script>";
  webSite += "<style>";
  webSite += "</style>";
  webSite += "</head>";
  webSite += "<body>";
  webSite += "</div>";
  webSite += "<b>led 4 </b>";
  webSite += "<b>" + status1 + "</b>"; //Lấy Trạng Thái Của Led 4 Đưa Lên Web
  webSite += "<br>";
  webSite += "<form action='/4on'>";
  webSite += "<input type='submit' value='ON'>";
  webSite += "</form>";
  webSite += "<form action='/4off'>";
  webSite += "<input type='submit' value='OFF'>";
  webSite += "</form>";
  webSite += "<b>Led 5 </b>";
  webSite += "<b>" + status2 + "</b>";                 //Lấy Trạng Thái Của Led 4 Đưa Lên Web
  webSite += "<form action='/5on'>";
  webSite += "<input type='submit' value='ON'>";
  webSite += "</form>";
  webSite += "<form action='/5off'>";
  webSite += "<input type='submit' value='OFF'>";
  webSite += "</form>";
  webSite += "<hr>";


  webSite += "</body>";
  webSite += "</html>";
  
  server.send(200,"text/html",webSite);
}


void setup() {
  Serial.begin(9600);  
  pinMode(ledPin1,OUTPUT);
  pinMode(ledPin2,OUTPUT);
  digitalWrite(ledPin1, HIGH);
  digitalWrite(ledPin2, HIGH);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid,password);
  while(WiFi.status()!=WL_CONNECTED){
    delay(500);
    Serial.print(".");
  }
  Serial.println("kết nối thành công");
  Serial.print("đã kết nối tới ");
  Serial.println(ssid);
  Serial.print("địa chỉ IP là: ");
  Serial.println(WiFi.localIP());
  server.on("/",handleWebsite);
  server.on("/4on",handleWebsite);
  server.on("/4off",handleWebsite);
  server.on("/5on",handleWebsite);
  server.on("/5off",handleWebsite);
  
  server.begin();
}

void loop() {
    server.handleClient();
}


Giải Thích Chương Trình Esp8266 Trên Arduino IDE


void buildLed1(){
  if (status1 == "ON"){
        Serial.print("status1 la ");
        Serial.println(status1);
        digitalWrite(ledPin1, LOW);       // Led Kich ở mức thấp
  }
  else {
        Serial.print("status1 la ");
        Serial.println(status1);
        digitalWrite(ledPin1, HIGH);
  }
}
Chương trình thực hiện điều khiển trạng thái cho led. Khi chương trình này được gọi. các lệnh con bên trong được thực hiện
if (status1 == "ON") Kiểm tra xem trạng atatus1 có phải là ON hay không. Nếu làu ON lệnh Serial.print sẽ được gọi để in ra trạng Thái led. Và digitalWrite chân led 4 Xuống mức thấp (LOW) để bật Led
else Ngược lại Không Phải là ON thì sẽ in ra trạng Thái led và digitalWrite chân led 4 Lên mức cao(High) để tắt led
Cũng làm tương tự Vậy với buildLed2()

webSite += "<b>" + status1 + "</b>"; //
Lấy Trạng Thái Của Led 4 Đưa Lên Web
Trong Phần Gửi HTML lên Trình duyệt web. Có thêm lệnh này. Lệnh này được thêm vào trong chuỗi webSite để hiện thị trạng thái led mỗi lần tải trang

  pinMode(ledPin1,OUTPUT);
  pinMode(ledPin2,OUTPUT);
  digitalWrite(ledPin1, HIGH);
  digitalWrite(ledPin2, HIGH);
Lệnh này khai báo chân output cho LedPin và xuất tín hiệu ra chân digital

String uriweb = server.uri();
            if (uriweb.indexOf("/4on") >= 0) {
              Serial.println("GPIO 4 on" + uriweb);
              status1 = "ON";
              buildLed1();
            }

Lệnh Lấy Chuỗi URI mỗi Lần Trình Duyệt Web gửi về sever esp8266. Sau mỗi lần nhấn nút submit ở input trên web. Từ đó Lấy chuỗi URI vào uriweb để so sánh từ đó tạo trạng thái cho status rồi gọi chương trình builed

Nạp Chương Trình Điều Kiển Led Từ Arduino IDE Cho ESP8266

Sau khi lưu chương trình lại và biên dich kiểm tra lỗi thì vào bài Làm theo Hưỡng dẫn nạp chuong trình cho esp trong bài trước nhá.
Sau khi nạp chương trình mở cửa sổ serial monitor trên ide ra lấy địa chỉ IP nhập vào trình duyệt web và nhấn ON OFF thử nhá.
Điều Khiển Led Từ Web server
Điều Khiển Led Từ Web server



Cảm ơn bạn đã theo dõi bài giảng. mọi thắc mắ để lại dưới bình luận để mình giả thích và sửa chữa cho phù hợp nhá.
Tags:

Đăng nhận xét

0 Nhận xét