Tuesday, May 3, 2016

NodeMCU/ESP8266 act as AP (Access Point) and web server to control GPIO

Further works on previous exercise "NodeMCU/ESP8266 act as AP (Access Point) and simplest Web Server"; this example of NodeMCU/ESP8266 act as AP and implement a web server to control GPIO (on-board LED) using HTML interface.


ESP_AP_WebServer.ino
/*
 * NodeMCU/ESP8266 act as AP (Access Point) and simplest Web Server
 * to control GPIO (on-board LED)
 * Connect to AP "arduino-er", password = "password"
 * Open browser, visit 192.168.4.1
 */
#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <ESP8266WebServer.h>

const char *ssid = "arduino-er";
const char *password = "password";
int stateLED = LOW;

ESP8266WebServer server(80);

void handleRoot() {
    response();
}

void handleLedOn() {
  stateLED = LOW;
  digitalWrite(LED_BUILTIN, stateLED);
  response();
}

void handleLedOff() {
  stateLED = HIGH;
  digitalWrite(LED_BUILTIN, stateLED);
  response();
}

const String HtmlHtml = "<html><head>"
    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /></head>";
const String HtmlHtmlClose = "</html>";
const String HtmlTitle = "<h1>Arduino-er: ESP8266 AP WebServer exercise</h1><br/>\n";
const String HtmlLedStateLow = "<big>LED is now <b>ON</b></big><br/>\n";
const String HtmlLedStateHigh = "<big>LED is now <b>OFF</b></big><br/>\n";
const String HtmlButtons = 
    "<a href=\"LEDOn\"><button style=\"display: block; width: 100%;\">ON</button></a><br/>"
    "<a href=\"LEDOff\"><button style=\"display: block; width: 100%;\">OFF</button></a><br/>";

void response(){
  String htmlRes = HtmlHtml + HtmlTitle;
  if(stateLED == LOW){
    htmlRes += HtmlLedStateLow;
  }else{
    htmlRes += HtmlLedStateHigh;
  }

  htmlRes += HtmlButtons;
  htmlRes += HtmlHtmlClose;

  server.send(200, "text/html", htmlRes);
}

void setup() {
    delay(1000);
    Serial.begin(9600);
    Serial.println();

    WiFi.softAP(ssid, password);

    IPAddress apip = WiFi.softAPIP();
    Serial.print("visit: \n");
    Serial.println(apip);
    server.on("/", handleRoot);
    server.on("/LEDOn", handleLedOn);
    server.on("/LEDOff", handleLedOff);
    server.begin();
    Serial.println("HTTP server beginned");
    pinMode(LED_BUILTIN, OUTPUT);
    digitalWrite(LED_BUILTIN, stateLED);
}

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


Next:
NodeMCU/ESP8266 implement WebSocketsServer to control RGB LED


- more example of "ESP8266 core for Arduino".

10 comments:

  1. Thank you for posting this bro...

    ReplyDelete
  2. I copied the same code but it says
    'response' was not declared in this scope.
    What might be the problem?

    ReplyDelete
    Replies
    1. I re-tried it without problem. May be your browser insert some invisible code in the text.
      you can try:
      - Use another browser.
      - Use simplest text editor, such as notepad. Paste it, and copy again.

      hope can help.

      Delete
    2. Copy response function and paste it above the other functions. And also copy string constants above the response function. The error will be removed.

      Delete
  3. Great post and great blog you have created... thanx buddy

    ReplyDelete
  4. that's what I was looking for, thank you

    ReplyDelete
  5. Recive digital input (switch , pir ) show on browser (display circle red or blue)

    ReplyDelete
  6. Works great.
    Selected all the code.
    Dropped it in the Arduino IDE.
    Upload.
    Done compiling.
    Great.

    ReplyDelete
  7. Response was not declared in this scope, same problem cant solve it ; (
    hope somebody can help, the user that says about the invisible text, i dont think so, maybe is an indented issue

    ReplyDelete