[SOLVED] ESP8266 Webserver variable mit HEX Color Wert an Fastled übergeben

Hallo zusammen,

ich bin relativ neu (arbeite die letzten 6 Tage am selben Problem.
Ich möchte gerne wie in diesem Tutorial beschrieben, Input Data on HTML Form ESP32/ESP8266 Web Server Arduino IDE | Random Nerd Tutorials über einen Webserver einen HEXwert mit einer Farbangabe in meinem Code an eine LED weitergeben damit man die Farbe über die Webseite festlegen kann.

Board: ESP8266 (NodeMCU (ESP-12E)
IDE: 1.8.12
Windows 10

Wenn ich allerdings auf der Webseite, im Feld 3 Input3 einen wert alla 0x39ff33 eingebe wird die LED 4 leider nur weiß.

An LED 3 sehe ich aber, dass er Hex Werte nimmt.

Ich wäre über Hilfe sehr dankbar, ich bekomme es einfach nicht ans laufen.

Sketch:

/*********
 Rui Santos
 Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-input-data-html-form/
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files.
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
*********/
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FastLED.h>
#include <pixeltypes.h>

AsyncWebServer server(80);



// NETWORK SETUP==========================================================================================
// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "???";
const char* password = "???";

IPAddress ipaWifiIP(0 , 0, 0, 0);
IPAddress ipaWifiSubnet(0, 0, 0, 0);
IPAddress ipaWifiGateway(0, 0, 0, 0);
IPAddress ipaWifiDns(0, 0, 0, 0);

//======================================================================================================

//FAST LED SETUP========================================================================================
#include <FastLED.h>

#define LED_PIN     6 
#define NUM_LEDS    21
#define LED_TYPE    WS2812B
#define COLOR_ORDER RGB
#define BRIGHTNESS  50
CRGB leds[NUM_LEDS];
//======================================================================================================


const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";

/*
String PARAM_INPUT_1 = "input1";
String PARAM_INPUT_2 = "input2";
String PARAM_INPUT_3 = "input3";
*/

// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
 <title>ESP Input Form</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 </head><body>
 <form action="/get">
   input1: <input type="text" name="input1">
   <input type="submit" value="Submit">
 </form>

 <form action="/get">
   input2: <input type="text" name="input2">
   <input type="submit" value="Submit">
 </form>

 <form action="/get">
   input3: <input type="text" name="input3">
   <input type="submit" value="Submit">
 </form>
</body></html>)rawliteral";

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

void setup() {
 LEDS.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS);
 FastLED.setBrightness(BRIGHTNESS);
 Serial.begin(115200);
 WiFi.mode(WIFI_STA);
 WiFi.config(ipaWifiIP, ipaWifiDns, ipaWifiGateway, ipaWifiSubnet);
 WiFi.hostname("Todestor");
 WiFi.begin(ssid, password);
 if (WiFi.waitForConnectResult() != WL_CONNECTED) {
   Serial.println("WiFi Failed!");
   return;
 }
 Serial.println();
 Serial.print("IP Address: ");
 Serial.println(WiFi.localIP());

 // Send web page with input fields to client
 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send_P(200, "text/html", index_html);
 });

 // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
 server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
   String inputMessage;
   String inputParam;
   // GET input1 value on <ESP_IP>/get?input1=<inputMessage>
   if (request->hasParam(PARAM_INPUT_1)) {
     inputMessage = request->getParam(PARAM_INPUT_1)->value();
     inputParam = PARAM_INPUT_1;
   }
   // GET input2 value on <ESP_IP>/get?input2=<inputMessage>
   else if (request->hasParam(PARAM_INPUT_2)) {
     inputMessage = request->getParam(PARAM_INPUT_2)->value();
     inputParam = PARAM_INPUT_2;
   }
   // GET input3 value on <ESP_IP>/get?input3=<inputMessage>
   else if (request->hasParam(PARAM_INPUT_3)) {
     inputMessage = request->getParam(PARAM_INPUT_3)->value();
     inputParam = PARAM_INPUT_3;
     
     leds[0] = CRGB::Red;
     leds[1] = CRGB::Yellow;
     leds[2] = CRGB::Green;
     leds[3] = 0x39ff33;
     leds[4] = "input Message";
     FastLED.show();
     delay(20);
     FastLED.clear();
   }
   else {
     inputMessage = "No message sent";
     inputParam = "none";
   }
   Serial.println(inputMessage);
   //Serial.println(inputParam);
   request->send(200, "text/html", "HTTP GET request sent to your ESP on input field (" 
                                    + inputParam + ") with value: " + inputMessage +
                                    "
<a href=\"/\">Return to Home Page</a>");
 });
 server.onNotFound(notFound);
 server.begin();
}

void loop() 
{
}

Setze Deinen Code bitte in Codetags (</>-Button oben links im Forumseditor oder [code] davor und [/code] dahinter ohne *).
Dann ist er auch auf mobilen Geräten besser lesbar.
Das kannst Du auch noch nachträglich ändern.

Gruß Tommy

Erledigt. sorry

Da kommt garantiert Murks raus:

 leds[4] = "input Message";

"input Message" ist ein konstanter Text.

In inputMessage könnte evtl. was brauchbares drin stehen. Das solltest Du Dir mal über Serial.println anschauen.

Ansonsten wäre das Erlernen wenigstens der einfachsten Grundlagen durchaus förderlich.

Gruß Tommy

Ja im Serial hat Inputmessage den Wert der Farbe die ich möchte. Je nachdem wass ich auf der Webseite eingebe. 0xCC0000 etc.

Dann probiere mal (ungetestet)

leds[4]=atol(inputMessage.c_str());

Gruß Tommy

Er übernimmt es klaglos, im Serial Monitor sehe ich auch dass die Variable ankommt aber die LED tut sich nichts.

Serial Monitor:

IP Address: 192.168.178.100
0x333fff
33ff8a
0x33ff8a
0x33ff8a
0xff5833
/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-input-data-html-form/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FastLED.h>
#include <pixeltypes.h>

AsyncWebServer server(80);



// NETWORK SETUP==========================================================================================
// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "??";
const char* password = "???";

IPAddress ipaWifiIP(0 , 0, 0, 0);
IPAddress ipaWifiSubnet(0, 0, 0, 0);
IPAddress ipaWifiGateway(0, 0, 0, 0);
IPAddress ipaWifiDns(0, 0, 0, 0);

//======================================================================================================

//FAST LED SETUP========================================================================================
#include <FastLED.h>

#define LED_PIN     6 
#define NUM_LEDS    21
#define LED_TYPE    WS2812B
#define COLOR_ORDER RGB
#define BRIGHTNESS  50
CRGB leds[NUM_LEDS];
//======================================================================================================


const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";

/*
String PARAM_INPUT_1 = "input1";
String PARAM_INPUT_2 = "input2";
String PARAM_INPUT_3 = "input3";
*/

// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/get">
    input1: <input type="text" name="input1">
    <input type="submit" value="Submit">
  </form>

  <form action="/get">
    input2: <input type="text" name="input2">
    <input type="submit" value="Submit">
  </form>

  <form action="/get">
    input3: <input type="text" name="input3">
    <input type="submit" value="Submit">
  </form>
</body></html>)rawliteral";

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

void setup() {
  LEDS.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS);
  FastLED.setBrightness(BRIGHTNESS);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.config(ipaWifiIP, ipaWifiDns, ipaWifiGateway, ipaWifiSubnet);
  WiFi.hostname("Todestor");
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on <ESP_IP>/get?input1=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
    }
    // GET input2 value on <ESP_IP>/get?input2=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_2)->value();
      inputParam = PARAM_INPUT_2;
    }
    // GET input3 value on <ESP_IP>/get?input3=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = PARAM_INPUT_3;
      
      leds[0] = CRGB::Red;
      leds[1] = CRGB::Yellow;
      leds[2] = CRGB::Green;
      leds[3] = 0x39ff33;
      leds[4]=atol(inputMessage.c_str());
      FastLED.show();
      delay(20);
      FastLED.clear();
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage);
    //Serial.println(inputParam);
    request->send(200, "text/html", "HTTP GET request sent to your ESP on input field (" 
                                     + inputParam + ") with value: " + inputMessage +
                                     "
<a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
 }

void loop() 
{
}
  1. Wenn Du 20 ms nach Show cliear aufrufst, siehst Du wohl nix.
  2. gib doch mal aus:
Serial.println(atol(inputMessage.c_str()),HEX);

Gruß Tommy

Ahh jetzt tut sich was. Habe es direkt drunter gepackt. Und das Ergebnis im Monitor lautet 0
scheint nichts drin zu sein.

// GET input3 value on <ESP_IP>/get?input3=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = PARAM_INPUT_3;
      leds[0] = atol(inputMessage.c_str());
      Serial.println(atol(inputMessage.c_str()),HEX);
      leds[1] = CRGB::Red;
      leds[2] = CRGB::Yellow;
      leds[3] = CRGB::Green;
      FastLED.show();
      delay(20);
      FastLED.clear();
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";

Gib mal nacheinander aus:

Serial.print(">>>");
Serial.print(inputMessage);
Serial.println("<<<");
Serial.print(">>>");
Serial.print(inputMessage.c_str());
Serial.println("<<<");
Serial.println(atol(inputMessage.c_str()),HEX);

Gruß Tommy

0

0xCC0000<<<
0xCC0000<<<
0
0xCC0000

ist das Ergebnis.

    // GET input3 value on <ESP_IP>/get?input3=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = PARAM_INPUT_3;
      leds[0] = atol(inputMessage.c_str());
      Serial.println(atol(inputMessage.c_str()),HEX);
      Serial.print(">>>");
      Serial.print(inputMessage);
      Serial.println("<<<");
      Serial.print(">>>");
      Serial.print(inputMessage.c_str());
      Serial.println("<<<");
      Serial.println(atol(inputMessage.c_str()),HEX);
      leds[1] = CRGB::Red;
      leds[2] = CRGB::Yellow;
      leds[3] = CRGB::Green;
      FastLED.show();
      delay(20);
      FastLED.clear();
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage);
    //Serial.println(inputParam);
    request->send(200, "text/html", "HTTP GET request sent to your ESP on input field (" 
                                     + inputParam + ") with value: " + inputMessage +
                                     "
<a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
 }

void loop() 
{
}

Du musst das 0x entfernen (das solltest Du gleich in der Website machen) und dann sollte

leds[0] = strtol(inputMessage.c_str(), NULL, 16);

ein Ergebnis liefern. atol ist nur für dezimal.

Gruß Tommy

Super und vielen Dank für deine Hilfe.

Ich hab aber leider nicht ganz verstanden was du meinst. Das Formular der Webseite übergibt ja den Wert in diesem Format 0xff5733 wenn ich diesen Wert direkt auf die LED schreibe funktioniert das auch.
Was nicht funktioniert, wenn derselbe Wert aus einer Variable kommt ?!

Ich hatte jetzt vermutet das der Datentyp nicht passt ?

Gruß
Stephan

Hi

Du bekommst eine Zeichenkette, Die halt mit 0x anfängt - dem LCD ist Das völlig schnuppe.
Der variable aber nicht - Die sieht ‘0 <Müllzeichen>’ - und übernimmt die Null - wie von Dir gewünscht!!

So musst Du nach dem X erst anfangen, den Kram zu interpretieren.

MfG

0x123456 ist die Schreibweise, um klar zu machen, dass damit eine Hexzahl gemeint ist.
strtol("123456",NULL,16) erfährt durch die 16, dass es Hex sein soll.
Da stört das 0x.

Gruß Tommy

Tommy56:
Du musst das 0x entfernen (das solltest Du gleich in der Website machen) und dann sollte

leds[0] = strtol(inputMessage.c_str(), NULL, 16);

strtol()/strtoul() geht auch mit 0x davor. Wenn man als Zahlenbasis 0 angibt kann es daran sogar automatisch das Zahlensystem erkennen

http://www.cplusplus.com/reference/cstdlib/strtol/

If the value of base is zero, the syntax expected is similar to that of integer constants
...
An optional prefix indicating octal or hexadecimal base ("0" or "0x"/"0X" respectively)

The sequence may optionally be preceded by a sign (either + or -) and, if base is 16, an optional "0x" or "0X" prefix.

Und natürlich hat er vollkommen recht es geht nun. ohne 0x kann ich die Leds ansteuern.

So meine Hausaufgabe wäre noch die Webseite anzupassen oder im Sketch eine Zeile einzubauen die das 0x rausstreicht ? substring ?

kosmophobian:
Und natürlich hat er vollkommen recht es geht nun. ohne 0x kann ich die Leds ansteuern.

Das Problem war nicht das "0x", sondern die falsche Funktion. atol() kann überhaupt nicht mit Hex-Zahlen umgehen. Bei strtol() darf auch ruhig ein "0x" davorstehen

Einfach mal die Doku der entsprechenden Funktionen durchlesen

Die von Dir verlinkte Seite hatte ich sogar offen, das 0x aber überlesen.
Danke für die Korrektur.

Gruß Tommy

Auf jeden Fall geht es jetzt ob mit 0x oder ohne.

Besten Dankl an euch!

SOLVED