Wednesday, April 28, 2021

ESP32-S2/Arduino (ESP32-S2-Saola-1) web server control onboard RGB LED (NeoPixel)

With arduino-esp32 2.0.0-alpha1 installed, we can program ESP32-S2 using Arduino IDE.

This exercise run on ESP32-S2-Saola-1 (ESP32-S2), act as access point, setup web server, and turn ON/OFF onboard RGB LED (NeoPixel) according to user click.

Scroll down to have another exercise changing onboard LED color with HTML ColorPicker.

The onboard RGB LED of ESP32-S2-Saola-1 is connected to GPIO18.

Adafruit NeoPixel library is needed, can be install in Arduino IDE's Library Manager.



ESP32_WebRGB.ino

/*
 A simple web server that lets you blink the onboard RGB LED via the web.

 Run on ESP32-S2-Saola-1 (ESP32-S2),
 ast as access point, setup web server,
 and turn ON/OFF onboard RGB LED (NexPixel) accordingly.

 The onboard RGB LED of ESP32-S2-Saola-1 is connected to GPIO18.

 http://yourAddress/H turns the LED on
 http://yourAddress/L turns it off

reference examples in Arduino:
Examples > WiFi > WiFiAccessPoint
Examples > WiFi > SimpleWiFiServer
Examples > Adafruit NeoPixel > simple
 
 */
#include <Adafruit_NeoPixel.h>
#include <WiFi.h>
#include <Esp.h>

//Onboard RGB LED (NeoPixel)
#define PIXELPIN  18
#define NUMPIXELS 1

const char* ssid     = "esp32s2";
const char* password = "password";

const char* html="<html>"
      "<head>"
      "<meta charset=\"utf-8\">"
      "<title>ESP32-S2 Web control NeoPixel</title>"
      "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">"
      "</head>"
      "<body>"
      "Click <a href=\"/H\">here</a> to turn the RGB LED (NeoPixel) ON.<br>"
      "Click <a href=\"/L\">here</a> to turn the RGB LED (NeoPixel) OFF.<br>"
      "</body>"
      "</html>";

Adafruit_NeoPixel pixel(NUMPIXELS, PIXELPIN, NEO_GRB + NEO_KHZ800);
WiFiServer server(80);

void setup()
{
    Serial.begin(115200);
    pixel.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
    pixel.clear(); // Set pixel colors to 'off'
    pixel.show();

    delay(1);
    Serial.printf("\n\n---Start---\n");
    Serial.print("Chip Model: ");
    Serial.print(ESP.getChipModel());
    Serial.print("\nChip Revision: ");
    Serial.print(ESP.getChipRevision());
    Serial.println();
  
    Serial.println();
    Serial.println("Configuring access point...");

    WiFi.softAP(ssid, password);

    IPAddress myIP = WiFi.softAPIP();
    Serial.print("AP IP address: ");
    Serial.println(myIP);
    server.begin();
    
    Serial.println("Server started");

}

int value = 0;

void loop(){
 WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             // if you get a client,
    Serial.println("New Client.");          // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            client.print(html);
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          Serial.println("\n--- ON ---");
          pixel.setPixelColor(0, pixel.Color(100, 100, 0));
        }
        if (currentLine.endsWith("GET /L")) {
          Serial.println("\n--- OFF ---");
          pixel.setPixelColor(0, pixel.Color(0, 0, 0));
        }

        pixel.show();
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
}




ESP32-S2/Arduino (ESP32-S2-Saola-1) web control onboard NeoPixel, with HTML ColorPicker

This another exercise run on ESP32-S2-Saola-1 (ESP32-S2), act as station, connect to mobile hotspot, setup web server. User can open the web page using browsers on mobile, change LED color using HTML ColorPicker.



ESPAsyncWebServer and the AsyncTCP libraries are need.

ESP32_WebRGB_ColorPicker.ino
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_NeoPixel.h>

//Onboard RGB LED (NeoPixel)
#define PIXELPIN  18
#define NUMPIXELS 1
Adafruit_NeoPixel pixel(NUMPIXELS, PIXELPIN, NEO_GRB + NEO_KHZ800);

AsyncWebServer server(80);

// ssid/password match your WiFi Network
const char* ssid = "ssid";
const char* password = "password";

const char* Param_COLOR ="color";

// HTML
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>ESP32-S2 exercise</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <p>Select Color</p>
  <form action="/get">
    <input name="color" type="color">
    <input type="submit" value="Update RGB">
  </form><br>

</body></html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  Serial.println("---Start---");
  Serial.println("Chip Model: ");
  Serial.println(ESP.getChipModel());
  Serial.println("\nChip Revision: ");
  Serial.println(ESP.getChipRevision());
  Serial.println();
  
  pixel.begin();    // INITIALIZE NeoPixel
  pixel.clear();    // Set pixel colors to 'off'
  pixel.show();

  //Act as STA, connect to WiFi network
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("Visit IP Address: ");
  Serial.println(WiFi.localIP());

  // Send HTML
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to <ESP_IP>/get?color=#rrggbb
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String color_value;

    //check if parameter "color" found
    if (request->hasParam(Param_COLOR)) {
      Serial.println("param_COLOR received");
      color_value = request->getParam(Param_COLOR)->value();
      Serial.println(color_value);

      //Convert intMessage in #rrggbb form to r,g,b
      color_value.remove(0, 1);
      int intColor = hstol(color_value);
      int r = (intColor & 0xff0000)>>16;
      int g = (intColor & 0x00ff00)>>8;
      int b = (intColor & 0x0000ff);
      Serial.println(r);
      Serial.println(g);
      Serial.println(b);

      //set NeoPixel color
      pixel.setPixelColor(0, pixel.Color(r, g, b));
      pixel.show();
    }
    
    else {
      Serial.println("No color found");
    }
    
    
    //re-send html
    request->send_P(200, "text/html", index_html);
    
  });
  server.onNotFound(notFound);
  server.begin();
}

//hex-string to long
long hstol(String recv){
  char c[recv.length() + 1];
  recv.toCharArray(c, recv.length() + 1);
  return strtol(c, NULL, 16); 
}

void loop() {
  
}


1 comment:

  1. Nice video. But I want to know some details: Which version of Arduino IDE? Where to get - URL? Which version of ESP32-S2 board for Arduino IDE? Where to get? And last which version of libraries - see the following header files. I am an old ESP programmer and I had my share of version mis match. So please tell or I will wait until the dust has settled.
    #include
    #include
    #include

    ReplyDelete