ioESP แอพฯควบคุมพอร์ต ESP8266

ioESP Page app

สวัสดีครับ 🙂 เมื่อหลายวันที่ผ่านมา ผมได้จัดทำแอพฯ ตัวหนึ่งขึ้นมา ชื่อว่า ioESP ใช้สำหรับควบคุมพอร์ตของ ESP8266 ที่รองรับทั้งโหมด AP และโหมด STA หรือ AP+STA โดยในบล็อกนี้จะสาธิตการใช้งานแอพฯ และใช้งาน ESP8266 ในโหมด STA ครับ

ESP8266 Upload Firmware

ผมจะใช้งาน Arduino IDE ในการอัพเฟิร์มแวร์เข้าไปครับ รายจะเอียดการใช้งาน Arduino IDE ในการอัพโหลดเฟิร์มแวร์ สามารถอ่านได้ที่บทความที่แล้วครับ : เขียนโปรแกรมควบคุม ESP8266 ด้วย Arduino IDE

/*
* ioESP open source software by Host-1gb.com
* https://www.host-1gb.com/
* Blog : http://www.elec-za.com/ioesp-app
* GifHub : https://github.com/max30012540/ioESP
*
* Contact
* E-mail : max30012540@hotmail.com
* Facebook : http://fb.me/maxthai
*/

#include <ESP8266WiFi.h>

String ResponseControl(void);

WiFiServer server(80);

int pinList[8] = {2, 4, 5, 12, 13, 14, 15, 16};
String responseHeader = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nAccess-Control-Allow-Origin: *\r\nConnection: close\r\n\r\n";

void setup() {
  Serial.begin(115200);
  delay(10);

  // prepare
  for (int i=0;i<8;i++){
    pinMode(pinList[i], OUTPUT);
    digitalWrite(pinList[i], LOW);
  }

  WiFi.mode(WIFI_AP);
  WiFi.softAP("ioESP"); // ตั้งค่าให้ชื่อเป็น ioESP และไม่ตั้งพาส
  // WiFi.softAP("ioESP", "123456789"); // ตั้งค่าให้ชื่อเป็น ioESP และพาสเป็น 123456789 หากจะแก้พาส ต้องตั้งให้ความยาวอย่างน้อย 8 ตัวอักษร

  // Start the server
  server.begin();
  Serial.println("Server started");

  // Print the IP address
  Serial.println(WiFi.localIP());
}

void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }

  // Wait until the client sends some data
  Serial.println("new client");
  while(client.connected() && !client.available()){
    delay(1);
  }

  // Read the first line of the request
  String req = client.readStringUntil('\r');
  Serial.println(req);
  client.flush();

  if (req.indexOf("/api") >= 0){ // Is API request
    for (int i=0;i<8;i++){
      if (req.indexOf("/api/gpio" + String(pinList[i])) >= 0){
        if (req.indexOf("/api/gpio" + String(pinList[i]) + "/1") >= 0){
          digitalWrite(pinList[i], HIGH);
          client.flush();
          client.print(responseHeader + "OK");
        }else if (req.indexOf("/api/gpio" + String(pinList[i]) + "/0") >= 0){
          digitalWrite(pinList[i], LOW);
          client.flush();
          client.print(responseHeader + "OK");
        }else if (req.indexOf("/api/gpio" + String(pinList[i]))){
          client.flush();
          client.print(responseHeader + "Status:" + (digitalRead(pinList[i]) ? "1" : "0")); // Send the response to the client
        }
        break;
      }
    }
  }else{
    // Match the request
    for (int i=0;i<8;i++){
      if (req.indexOf("/gpio" + String(pinList[i]) + "/1") >= 0)
        digitalWrite(pinList[i], HIGH);
      else if (req.indexOf("/gpio" + String(pinList[i]) + "/0") >= 0)
        digitalWrite(pinList[i], LOW);
    }

    client.flush();

    // Prepare the response
    String s = ResponseControl();

    // Send the response to the client
    client.print(s);
  }

  Serial.println("Client disonnected");
  delay(1);
  // The client will actually be disconnected
  // when the function returns and 'client' object is detroyed
}

String ResponseControl(){
  String ControlHTML = responseHeader;
  ControlHTML += "<title>ioESP</title>\r\n";
  ControlHTML += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n";
  ControlHTML += "<h1 style=\"margin-bottom:0\">ioESP</h1>\r\n";
  ControlHTML += "<h3 style=\"color:#999;margin-top:5px;\">open source software by Host-1gb.com</h3>\r\n";
  ControlHTML += "<table width=\"180\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\">\r\n";
  for (int i=0;i<8;i++){
    ControlHTML += "<tr>\r\n";
    ControlHTML += "<td width=\"100\">GPIO" + String(pinList[i]) + "</td>\r\n";
    ControlHTML += "<td width=\"60\" align=\"center\"><button onClick=\"location='/gpio" + String(pinList[i]) + "/" + (digitalRead(pinList[i]) ? "0" : "1") + "'\">" + (digitalRead(pinList[i]) ? "OFF" : "ON") + "</button></td>\r\n";
   ControlHTML += "</tr>\r\n";
  }
  ControlHTML += "</table>\r\n";
  return ControlHTML;
}

Code update 6/4/2014 23:58

ใช้อุปกรณ์ที่สามารถเชื่อมต่อ WiFi ได้ ค้นหน้าอุปกรณ์ที่มีชื่อขึ้นต้นด้วย ESP แล้วลองเข้าไปที่ไอพี 192.168.4.1 จะพบหน้าควบคุมง่ายๆขึ้นมาแล้วครับ สามารถกดปุ่ม ON OFF เพื่อควบคุมได้เลย

ESP8266

API

API คือส่วนที่เป็นช่องทางติดต่อสื่อสารโดยใช้โค้ดโปรแกรมอื่นๆ ในการติดต่อควบคุม การใช้งาน API สามารถทำได้ง่ายๆดังนี้

ส่งคำร้องขอไปได้เลยที่ลิ้ง /api/gpioport/setto ตัวอย่างเช่น

http://192.168.4.1/api/gpio2/1 # หมายถึงเซ็ตให้พอร์ต GPIO2 มีลอจิกเป็น 1
http://192.168.4.1/api/gpio2/0 # หมายถึงเซ็ตให้พอร์ต GPIO2 มีลอจิกเป็น 0
http://192.168.4.1/api/gpio4/1 # หมายถึงเซ็ตให้พอร์ต GPIO4 มีลอจิกเป็น 1

โดยปกติแล้ว จะส่งค่ากลับมาเป็น OK

การดึงว่าขณะนี้พอร์ตมีสถานะเป็นอะไร สามารถส่งได้เป็น /api/gpio ตัวอย่าง

http://192.168.4.1/api/gpio2
http://192.168.4.1/api/gpio4

จะส่งกลับมาเป็น Status:0 คือมีลอจิกเป็น 0 หรือ Status:1 คือมีลอจิกเป็น 1

ioESP App

ioESP App

โหลดแอพ ioESP โดยค้นหาใน Google Play ว่า ioESP แล้วดาว์โหลดมาได้เลยครับ โดยแอพมีความสามารถดังนี้

  • สามารถควบคุมได้ทั้งหมด 8 พอร์ต ได้แก่ GPIO2 GPIO4 GPIO5 GPIO12 GPIO13 GPIO14 GPIO15 และ GPIO16
  • สามารถแก้ไข IP ได้ ในกรณีที่ใช้งาน ESP8266 ในโหมด STA

Codings

GitHub : https://github.com/max30012540/ioESP