-->
Page 1 of 2

Need help!!

PostPosted: Wed Sep 06, 2017 9:52 pm
by boinkz68
Hello ESP geeks!

I would like to ask some help from you guys. I am planning to make a monitoring of my 8 push button. Now I found a code on google and I revised it a little from the Led output into Push Button output.

Code: Select all#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("PB-MONITORING");
 
  // 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>TEST MONITOR</title>\r\n";
  ControlHTML += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n";
  ControlHTML += "<h1 style=\"margin-bottom:0\">PB-Monitoring</h1>\r\n";
  ControlHTML += "<h3 style=\"color:#FF0000;margin-top:5px;\">Powered by: TESTER</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\">STATUS" + String(pinList[i]) + "</td>\r\n";
    ControlHTML += "<td width=\"60\" align=\"center\"><style=\"color:#FF0000;><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;
}



Now I want to ask help to modify/add more some code to;

1. Autorefresh the server every 5sec. (Where to add and where to place in the code)
2. Add more ESP to bridge it because it will disconnect with I go beyond its wifi range.

That's all for now. Thank you ho

Re: Need help!!

PostPosted: Fri Sep 08, 2017 2:33 pm
by martinayotte
You can use AJAX or JQuery to do a JSON request directly in javascript into you HTML page and refresh status accordingly.
Or, you can refresh the whole page with HTML META, but it is the whole page that will refresh and flicker :
Code: Select all<meta http-equiv="refresh" content="5">

Re: Need help!!

PostPosted: Fri Sep 08, 2017 7:21 pm
by boinkz68
Hello sir martinayotte thank you for your response. Which part of the program should I put the META sir?

Re: Need help!!

PostPosted: Sat Sep 09, 2017 3:28 am
by Cosmic Mac
With server events you can go realtime with no more effort than javascript polling (but http refresh is definitively the easiest solution ;)).