Example sketches for the new Arduino IDE for ESP8266

Moderator: igrr

User avatar
By swilson
#64536
Pindi King wrote:Hi Swlison,

That's an impressive work.
I am looking for an example sketch with just one slider and its receiving code for ESP8266. I being a newbie trying to finish level control.

I have modified your html code to have just one line slider control.
Please help me if you can further change it to get the response by moving the slider on PC without the submit button.
Code: Select all.
.
.
.
.
  if(request.indexOf("?????????") != -1)   // WHAT SHOULD GO IN PLACE OF "???????" IN THIS LINE ?
.
.
.
.

// Return the response
  client.println("<!DOCTYPE HTML>");
 
  client.println("<html>");
  client.println("<head>");
  client.println("<title> Level Setting </title>");

  client.println("<form method=get><br>Level:  <input type='range' min='1' max='100' name=levelVal  value='levelTemp' oninput='showValue(this.value)'>");
  client.println("<span id='range'>50</span>");
 
  client.println("<script type='text/javascript'>");
  client.println("function showValue(newValue)");
  client.println("{");
  client.println("document.getElementById('range').innerHTML=newValue;");
  client.println("}");
  client.println("</script>");
 
  client.println("&nbsp;<br><br><input name=H type=submit value=submit><br><br>"); 
 
  client.println("</script>");

  client.println("</head>");
  client.println("</html>");

  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");

}

Thanks


Try this post http://www.esp8266.com/viewtopic.php?f=8&t=4307. There is some code on page 7 or 8 with a working slider. Also you might want to check out using websockets as well.

Also check this page out: https://babaawesam.com/2015/11/26/control-input-output-of-esp8266-with-ajax/
User avatar
By Pindi King
#64540
swilson wrote:
Code: Select all.
.
  if(request.indexOf("?????????") != -1)   // WHAT SHOULD GO IN PLACE OF "???????" IN THIS LINE ?
.
.

}

Thanks


Thanks Swilson for getting back.
Sorry I left that with ?????.
Actually as the slider moves, its min & max value (0 ~ 100) should go in place of "?????" as part of the string that I will read with << String request = client.readStringUntil('\r'); >> on ESP8266 server end, .... and then filter the slider value out of this string with << request.indexof( ) >> .....
.
Hope you get my point and I really appreciate if you can help me getting the slider value in ESP8266 in real time as the slider moves without the need of any Submit button.
User avatar
By deprem
#72212 Please help me. I copied your code but it does not work properly
I do not know what I'm doing wrong. The door status is only updated at the first time since the page is updated every 10 seconds but the status does not change until I restart the circuit




JoseAngel wrote:Seems the contributor miss use or have an wrong meaning of the F() Macro, the code to compile needed few cleanup as to remove the F() macro from Variables or Expressions like F(varName).

this revised code by me now compiles with Arduino ide 1.6.5 and the Stagging version of ESP8266.arduino

Code: Select all#include "Arduino.h"



/* IoT Garage Door Opener
/ This is a sketch for the ESP8266, ESP-12 in my case, using the Arduino IDE for ESP8266.  This sketch will allow you to see the current
/ state of the garage door using a magnetic switch on the garage door, one side connected to pin 4 of the ESP-12 and the other side
/ connected to ground.  Doing this pulls pin 4 LOW when the Garage Door is closed completely.  The webpage updates (doesn't reload) via AJAX every 1 second
/ in order to update the status of the door.  It is possible to add another magnetic switch to show when the door is fully open by
/ tieing it to another pin the same way.  You would have to add the code for the new pin.
/ Activating the button for the door requires a 4 digit pass code.  If you put in the code and then close the browser or app you are using
/ and then log back on you will have to re-enter the code again.  That is done in case you enter the code and close the browser and someone else logs on.
/ They would be able to activate the door since the ESP would still think that codeOK=1.  Each client connect sets codeOK=0 right off the bat.
/
/ To open the door I am using a High level triggered single 5V relay.  I am pulling pin 5 LOW in setup then high for 1 second to
/ trigger the door.  ESP is on a smd adapter with onboard LDO (5v to 3.3V voltage regultor) from Electrodragon. I am powering the ESP and the relay using a 5V 1A power adapter.
/
/ I am using watchdog to detect any crashes and hopefully restart the software.  I am not completely sure the watchdog works yet.
/ I hope they mplement watchdog interrupt capability in the near future.
*/

#include <ESP8266WiFi.h>

extern "C" {
  #include "user_interface.h"
}
 


int openClosePin = 5;
int statusPin = 4;
int serverPort = 80;// server port

String HTTP_req;
String code;

WiFiServer server(serverPort);

//*-- IoT Information
const char* _SSID = "yourSSID"; // previously [const char* SSID = "xxxxxx";] seems SSID now is an reserved constant, so I added "_"
const char* _PASS = "yourPASS";//not sure but seems similar to anterior I added "_"  to avoid conflict
const char* pass_sent = "anotherPASS";
char codeOK='0';//start Code is blank....

void setup() {
    ESP.wdtDisable();
    Serial.begin(115200);
    pinMode(openClosePin, OUTPUT);
    pinMode(statusPin, INPUT);
    digitalWrite(openClosePin, LOW);
    delay(50);
    Serial.print("Connecting to ");
    Serial.println(_SSID);
    WiFi.begin(_SSID, _PASS);
   
    while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected");
    delay(1000);
    ESP.wdtEnable(WDTO_4S);
    //Start the server
    server.begin();
    Serial.println("Server started");
   
    //Print the IP Address
    Serial.print("Use this URL to connect: ");
    Serial.print("http://");
    Serial.print(WiFi.localIP());
    Serial.print(":");
    Serial.print(serverPort,DEC);
    Serial.println("/");

    delay(1000);
}

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

  Serial.println("found client");
 
  // Return the response
  boolean currentLineIsBlank = true;
  codeOK='0';
  while (client.connected()) {
    if (client.available()) {   // client data available to read
      char c = client.read(); // read 1 byte (character) from client
      HTTP_req += c;  // save the HTTP request 1 char at a time
      // last line of client request is blank and ends with \n
      // respond to client only after last line received
      if (c == '\n' && currentLineIsBlank) {
        client.println("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nConnection: keep-alive");
        client.println();
        if (HTTP_req.indexOf("ajax_switch") > -1) {
          // read switch state and send appropriate paragraph text
          GetSwitchState(client);
          delay(0);
        }
        else {  // HTTP request for web page
          // send web page - contains JavaScript with AJAX calls
          client.print("<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>IoT Garage Door</title>\r\n<meta name='viewport' content='width=device-width', initial-scale='1'>");
          client.print("<script>\r\nfunction GetSwitchState() {\r\nnocache = \"&nocache=\" + Math.random() * 1000000;\r\nvar request = new XMLHttpRequest();\r\nrequest.onreadystatechange = function() {\r\nif (this.readyState == 4) {\r\nif (this.status == 200) {\r\nif (this.responseText != null) {\r\ndocument.getElementById(\"switch_txt\").innerHTML = this.responseText;\r\n}}}}\r\nrequest.open(\"GET\", \"ajax_switch\" + nocache, true);\r\nrequest.send(null);\r\nsetTimeout('GetSwitchState()', 1000);\r\n}\r\n</script>\n");
          client.print("<script>\r\nfunction DoorActivate() {\r\nvar request = new XMLHttpRequest();\r\nrequest.open(\"GET\", \"door_activate\" + nocache, true);\r\nrequest.send(null);\r\n}\r\n</script>\n");
          client.print("</head>\r\n<body onload=\"GetSwitchState()\">\r\n<center><h1>IoT Garage Door</h1><hr>\r\n<div id=\"switch_txt\">\r\n</div>\r\n<br>\n");
          client.print("Input password to control Garage Door.\r\n<br><br><form name=\"passcode\" onSubmit=\"GetCode()\"><input type=\"password\" name=\"password\" size='8' maxlength='4'>&nbsp;<input type=submit name=\"Submit\" value=\"Submit\" onClick=\"GetCode()\" style='height:22px; width:80px'></form><br><br>\n");
          if (HTTP_req.indexOf(pass_sent) > 0) {
            GetCode();
          }
          if (codeOK == '0') {
            client.print("<button type=\"button\" disabled style='height:50px; width:225px'>Activate the Door</button><br><br>\n");
          }
          if (codeOK == '1') {
            client.print("<button type=\"button\" onclick=\"DoorActivate()\" style='height:50px; width:225px'>Activate the Door</button><br><br>\n");
          }
          //client.println(system_get_free_heap_size());
          if (HTTP_req.indexOf("door_activate") > -1) {
            // read switch state and send appropriate paragraph text
            DoorActivate();
          }
          //}
          client.print("</body>\r\n</html>\n");
          delay(0);
        }
 
        // display received HTTP request on serial port
        Serial.println(HTTP_req);
        HTTP_req = "";            // finished with request, empty string
        break;
      }
      // every line of text received from the client ends with \r\n
      if (c == '\n') {
          // last character on line of received text
          // starting new line with next character read
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // a text character was received from client
          currentLineIsBlank = false;
        }
      } // end if (client.available())
  } // end while (client.connected())
  delay(1);      // give the web browser time to receive the data
  client.stop(); // close the connection
  delay(0);
}

// send the state of the switch to the web browser
void GetSwitchState(WiFiClient cl) {
    if (digitalRead(4)) {
      cl.println("<p>Garage Door is currently: <span style='background-color:#FF0000; font-size:18pt'>Open</span></p>");
    }
    else {
      cl.println("<p>Garage Door is currently: <span style='background-color:#00FF00; font-size:18pt'>Closed</span></p>");
    }
  }
 
  void GetCode() {
      codeOK='1';
  }
 
  void DoorActivate() {
    digitalWrite(openClosePin, HIGH);
    delay(1000);
    digitalWrite(openClosePin, LOW);
    codeOK='0';
  }