Subscribe Us

header ads

Bài 5 Hưỡng Dẫn Tự Học ESP8266. Phần 2 Dao Diện WebServer ESp8266 Với HTML Và CSS

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

Tạo Dao Diện WebServer Trên ESP8266 Với HTML Và CSS


Dao Diện WebServer với HTML và CSS

Mẫu CSS Cho ESP8266

Ở phần trước chúng ta đã được học cách tạo mẫu dao diện web với HTML và css. Ở bài này mình sẽ đưa dao diện mẫu đó vào chương trình cho esp8266. Và tách phần CSS ra riêng để có thể sử dụng cho nhiều mục đích và trang web khác nhau trên esp8266.
Mình sẽ lấy riêng phần css trong phần trước ra và để vào một biến kiểu String với tên là CSS

  
String CSS = "h3 { text-align: center } .ctn, .ctn1, .ft{ width: 350px; margin: 0 auto; padding: 0.3rem; background: #ffffff; } .ctn{ border: 1px solid #ddd; } .f-i{ padding: 8px; width: 93%; margin-bottom: 1rem } input[type=submit]{ width: 100%; } .button, input[type=submit]{ background: #69d2e7; color: #ffffff; padding: 10px; border-radius: 10px; } .button:hover, input[type=submit]:hover{ background: #088A85; } .bc, .button { display: inline-block; margin: 0; width: 40%; } #ct { text-align: center; } .ft{ font-size: 75%; color: #838383; text-align: right; }";


Chương Trình Web ESP8266 Và CSS

Mình sẽ lấy chương trình của bài học esp8266 button webserver điều khiển led. Mình sẽ thay dao diện mới vào. Dao diện này k có chức năng điều khiển led ON OF như bài trước nhá, chức năng điều khiển ON OFF led trên dao diện web này sẽ làm ở bài sau với việc mình sẽ thêm ngôn ngữ lập trình JavaScript.

  
/*  LePan Trợ Lý Học Tập
 *  Dao Diện WEB Với CSS 
 *  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="098847474567"; // viết mật khẩu wifi đo

String webSite;
int ledPin1=4;
int ledPin2=5;
int buttonPin1=12;
int buttonPin2=14;
String status1 = "OFF";
String status2 = "OFF";
int previous1;        //trạng thái trước khi an nút
int previous2;
int reading1;        // lưu lại trạng thái nút ấn ở cuối loop
int reading2;
long time1 = 0;       // dùng để lưu millis khi nhấn nút
long time2 = 0;
long debounce = 200;    // thời gian chờ chống rung nút nhấn
//===========================Khai Báo String Cho WEB==================
String CSS = "h3 { text-align: center } .ctn, .ctn1, .ft{ width: 350px; margin: 0 auto; padding: 0.3rem; background: #ffffff; } .ctn{ border: 1px solid #ddd; } .f-i{ padding: 8px; width: 93%; margin-bottom: 1rem } input[type=submit]{ width: 100%; } .button, input[type=submit]{ background: #69d2e7; color: #ffffff; padding: 10px; border-radius: 10px; } .button:hover, input[type=submit]:hover{ background: #088A85; } .bc, .button { display: inline-block; margin: 0; width: 40%; } #ct { text-align: center; } .ft{ font-size: 75%; color: #838383; text-align: right; }";
//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>LePa Trợ Lý Học Tập</title>";
  webSite += "<script>";
  webSite += "</script>";
  webSite += "<style>";
  webSite += CSS;
  webSite += "</style>";
  webSite += "</head>";
  webSite += "<body>";
  webSite += "<div class='ctn'>";
  webSite += "<h3>MAIN MENU</h3>";
  webSite += "<div id=ct>";
  webSite += "<div class='bc'><h1 id='L1'>ON</h1></div>";
  webSite += "<div class='bc'><h1 id='L2'>OFF</h1></div>";
  webSite += "</div>";
  webSite += "<div id=ct>";
  webSite += "<button onClick='FA(\"?Start=1\")' class='button'>BUTTON 1</button>";
  webSite += "<button onClick='FA(\"?Start=2\")' class='button'>BUTTON 2</button>";
  webSite += "</div>";
  webSite += "</div>";
  webSite += "<div class='ctn1'>";
  webSite += "<form action='/swifi'>";
  webSite += "<input type='submit' value='Configure Wifi'>";
  webSite += "</form>";
  webSite += "<form action='/smqtt'>";
  webSite += "<input type='submit' value='Configure MQTT'>";
  webSite += "</form>";
  webSite += "<form action='/ssms'>";
  webSite += "<input type='submit' value='Thông Tin'>";
  webSite += "</form>";
  webSite += "</div>";
  webSite += "<div class='ft'>";
  webSite += "<hr>";
  webSite += "<p>&copy; LEPA-Trợ Lý Học Tập</p>";
  webSite += "</div>";
  webSite += "</body>";
  webSite += "</html>";
  server.send(200,"text/html",webSite);
}
void setup() {
  Serial.begin(9600);  
  pinMode(ledPin1,OUTPUT);
  pinMode(ledPin2,OUTPUT);
  pinMode(buttonPin1,INPUT);
  pinMode(buttonPin2,INPUT);
  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();
    reading1 = digitalRead(buttonPin1);
    reading2 = digitalRead(buttonPin2);
    if(reading1 == LOW  && previous1 == HIGH && millis() - time1 > debounce) {
        if(status1=="OFF"){
          status1="ON";
        }else if(status1=="ON"){
          status1="OFF";
        }
        time1 = millis();
        Serial.println("reading1");
        Serial.println(reading1);
        buildLed1();
    }
    
    if(reading2 == LOW  && previous2 == HIGH && millis() - time2 > debounce) {
        if(status2=="OFF"){
          status2="ON";
        }else if(status2=="ON"){
          status2="OFF";
        }
        time2 = millis();
        Serial.println("reading2");
        Serial.println(reading2);
        buildLed2();
    }
    previous1 = reading1;
    previous2 = reading2;
}


Sau khi coppy vào Arduino ide các bạn biên dich rồi nạp thử. sau đó mở cửa sổ serial monitor lên lấy IP rồi truy cập nhá.
Mẫu Dao Diện Web Cho ESP8266

Cảm ơn các bạn đã theo dõi. mọi thắc mắc hay góp ý các bạn để dưới mình luận mình sẽ phản hồi và khác phục sớm nhất
GOOD LUKY
Tags:

Đăng nhận xét

0 Nhận xét