Problem with control RGB by sliders on web server - ESP8266

Hi, I have problem with control diodes by the internet. I touch sliders, but this not work.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>



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

ESP8266WebServer server(80);

const int R = 14;
const int G = 12;
const int B = 13;

void handleRoot() {
  
  String red = server.arg(0);          // read RGB arguments
  String green = server.arg(1);
  String blue = server.arg(2);
  
  analogWrite(R, red.toInt());
  analogWrite(G, green.toInt());
  analogWrite(B, blue.toInt());

   Serial.println(red.toInt());   // for TESTING
   Serial.println(green.toInt()); // for TESTING
   Serial.println(blue.toInt());  // for TESTING


  String webpage;     
      webpage += "<!DOCTYPE HTML>\r\n";
      webpage += "<html>\r\n";
      webpage += "<header><title>ESP8266 RGB LED</title><h1>ESP8266 RGBLED</h1></header>";
      
      webpage += "<head>";    
      webpage += "<meta name='mobile-web-app-capable' content='yes' />";
      webpage += "<meta name='viewport' content='width=device-width' />";
      webpage += "</head>";
      webpage += "<body>";
      webpage += "<center>LED Control:

R:"; 
      webpage += "<input id=\"r\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" onchange=\"handleEvent();\" />
G:"; 
      webpage += "<input id=\"g\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" onchange=\"handleEvent();\" />
B:"; 
      webpage += "<input id=\"b\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" onchange=\"handleEvent();\" />
";
      webpage += "</center>";
      webpage += "<style type=\"text/css\">body {background: #00bfff;}";
      webpage += "</body>";
      webpage += "<script type='text/javascript'>";
    
  
      webpage += " function handleEvent() {";
      webpage += " var r = document.getElementById('r').value"; 
      webpage += " var g = document.getElementById('g').value";
      webpage += " var b = document.getElementById('b').value";

      webpage += " var params = [";
      webpage += " 'r=' + r,"; 
      webpage += " 'g=' + g,";
      webpage += " 'b=' + b";
      webpage += " ].join('&');";
      webpage += " var req = new XMLHttpRequest();";
      webpage += " req.open('POST', '?' + params);";
      webpage += " req.send();";
      webpage += " }";   
      webpage += "</script><html>\r\n";

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


void testRGB() { // fade in and out of Red, Green, Blue
    analogWrite(R, 1023);     // R off
    analogWrite(G, 1023);     // G off
    analogWrite(B, 1023);     // B off 
    fade(R); // R
    fade(G); // G
    fade(B); // B
}

void fade(int pin) {
    for (int u = 0; u < 1024; u++) {
      analogWrite(pin,  1023 - u);
      delay(1);
    }
    for (int u = 0; u < 1024; u++) {
      analogWrite(pin, u);
      delay(1);
    }
}

void handleNotFound(){
  //digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  //digitalWrite(led, 0);
}

void setup(void){
  pinMode(R, OUTPUT);
  pinMode(G, OUTPUT);
  pinMode(B, OUTPUT);

  analogWrite(R, 600);     // R 
  analogWrite(G, 600);     // G 
  analogWrite(B, 600);     // B 

  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);
  testRGB();

  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

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

I dont get any errors. Maybe anyone have idea?
Thanks

Take a look at this guide:

[A Beginner's Guide to the ESP8266: Controlling RGB LEDs from a web interface using WebSockets

](A Beginner's Guide to the ESP8266)

Thanks, but I would like do this without WebSocket.
Can you tell me, what is wrong in my code?
BR

ShineHunter:
Can you tell me, what is wrong in my code?

Not without seing

  • The Serial output
  • The HTML page as seen by your browser
  • The HTTP request, as sent by the browser

Use the developer options (F12) in your browser for the latter two.

PieterP:
Not without seing

  • The Serial output
  • The HTML page as seen by your browser
  • The HTTP request, as sent by the browser

Use the developer options (F12) in your browser for the latter two.

  1. It's 0V (you ask for it? Sorry, but I poorly understand English)
    2-3.
<!DOCTYPE HTML>
<html>
<header><title>ESP8266 RGB LED</title><h1>ESP8266 RGBLED</h1></header><head><meta name='mobile-web-app-capable' content='yes' /><meta name='viewport' content='width=device-width' /></head><body style='margin: 0px; padding: 0px;'><canvas id='colorspace'></canvas></body><script type='text/javascript'>(function () { var canvas = document.getElementById('colorspace'); var ctx = canvas.getContext('2d'); function drawCanvas() { var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0); for(var i=0; i <= 360; i+=10) { colours.addColorStop(i/360, 'hsl(' + i + ', 100%, 50%)'); } ctx.fillStyle = colours; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height); luminance.addColorStop(0, '#ffffff'); luminance.addColorStop(0.05, '#ffffff'); luminance.addColorStop(0.5, 'rgba(0,0,0,0)'); luminance.addColorStop(0.95, '#000000'); luminance.addColorStop(1, '#000000'); ctx.fillStyle = luminance; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } var eventLocked = false; function handleEvent(clientX, clientY) { if(eventLocked) { return; } function colourCorrect(v) { return Math.round(1023-(v*v)/64); } var data = ctx.getImageData(clientX, clientY, 1, 1).data; var params = [ 'r=' + 1023, 'g=' + 0, 'b=' + 0 ].join('&'); var req = new XMLHttpRequest(); req.open('POST', '?' + params, true); req.send(); eventLocked = true; req.onreadystatechange = function() { if(req.readyState == 4) { eventLocked = false; } } } canvas.addEventListener('click', function(event) { handleEvent(event.clientX, event.clientY, true); }, false); canvas.addEventListener('touchmove', function(event){ handleEvent(event.touches[0].clientX, event.touches[0].clientY);}, false); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawCanvas(); } window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); drawCanvas(); document.ontouchmove = function(e) {e.preventDefault()}; })(); </script> <body> <center>LED Control:

R: <input id="r" type="range" min="0" max="1023" step="1" onichange="handleEvent();" />
G: <input id="g" type="range" min="0" max="1023" step="1" onchange="handleEvent();" />
B:<input id="b" type="range" min="0" max="1023" step="1" onchange="handleEvent();" />
</center><script type='text/javascript'> var r = document.getElementById('r').value); var g = document.getElementById('g').value); var b = document.getElementById('b').value); var params = [ 'r=' + 1023, 'g=' + 0, 'b=' + 600 ].join('&'); var req = new XMLHttpRequest(); req.open('POST', '?' + params, true); req.send(); </script><html>

ShineHunter:

  1. It's 0V (you ask for it? Sorry, but I poorly understand English)

No, I mean the text that appears in the Serial Monitor as a result of your Serial.print() statements in the code.

A couple of remarks:

  • You don't need to prepend your url-encoded parameters with a '?' if you're using HTTP POST.
  • It would be a good idea to log/display the result of your XMLHttpRequest if it fails. It will probably tell you what's wrong.
  • You have to check for the HTTP request method (GET or POST) in you handleRoot function.

Ohh, okey

The all code now

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>



const char* ssid = "Lubania13";
const char* password = "s.krzysztof13";

ESP8266WebServer server(80);

const int R = 14;
const int G = 12;
const int B = 13;

void handleRoot() {
  
  String red = server.arg(0);          // read RGB arguments
  String green = server.arg(1);
  String blue = server.arg(2);
  
  analogWrite(R, red.toInt());
  analogWrite(G, green.toInt());
  analogWrite(B, blue.toInt());

   Serial.println(red.toInt());   // for TESTING
   Serial.println(green.toInt()); // for TESTING
   Serial.println(blue.toInt());  // for TESTING


  String webpage;     
      webpage += "<!DOCTYPE HTML>\r\n";
      webpage += "<html>\r\n";
      webpage += "<header><title>ESP8266 RGB LED</title><h1>ESP8266 RGBLED</h1></header>";
      
        webpage += "<head>";    
      webpage += "<meta name='mobile-web-app-capable' content='yes' />";
      webpage += "<meta name='viewport' content='width=device-width' />";
      webpage += "</head>";

      webpage += "<body style='margin: 0px; padding: 0px;'>";
      webpage += "<canvas id='colorspace'></canvas></body>";
     
      webpage += "<script type='text/javascript'>";
      webpage += "(function () {";
      webpage += " var canvas = document.getElementById('colorspace');";
      webpage += " var ctx = canvas.getContext('2d');";
      webpage += " function drawCanvas() {";
      webpage += " var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);";
      webpage += " for(var i=0; i <= 360; i+=10) {";
      webpage += " colours.addColorStop(i/360, 'hsl(' + i + ', 100%, 50%)');";
      webpage += " }";
      
      webpage += " ctx.fillStyle = colours;";
      webpage += " ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);";
      webpage += " var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);";
      webpage += " luminance.addColorStop(0, '#ffffff');";
      webpage += " luminance.addColorStop(0.05, '#ffffff');";
      webpage += " luminance.addColorStop(0.5, 'rgba(0,0,0,0)');";
      webpage += " luminance.addColorStop(0.95, '#000000');";
      webpage += " luminance.addColorStop(1, '#000000');";
      webpage += " ctx.fillStyle = luminance;";
      webpage += " ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);";
      webpage += " }";
      webpage += " var eventLocked = false;";
      
      webpage += " function handleEvent(clientX, clientY) {";
      webpage += " if(eventLocked) {";
      webpage += " return;";
      webpage += " }";

      webpage += " function colourCorrect(v) {";
      webpage += " return Math.round(1023-(v*v)/64);";
      webpage += " }";
      webpage += " var data = ctx.getImageData(clientX, clientY, 1, 1).data;";
      webpage += " var params = [";
      webpage += " 'r=' + colourCorrect(data[0]),";
      webpage += " 'g=' + colourCorrect(data[1]),";
      webpage += " 'b=' + colourCorrect(data[2])";
      webpage += " ].join('&');";
      webpage += " var req = new XMLHttpRequest();";
      webpage += " req.open('POST', '?' + params, true);";
      webpage += " req.send();";
      webpage += " eventLocked = true;";
      webpage += " req.onreadystatechange = function() {";
      webpage += " if(req.readyState == 4) {";
      webpage += " eventLocked = false;";
      webpage += " }";
      webpage += " }";
      webpage += " }";
      webpage += " canvas.addEventListener('click', function(event) {";
      webpage += " handleEvent(event.clientX, event.clientY, true);";
      webpage += " }, false);";
      webpage += " canvas.addEventListener('touchmove', function(event){";
      webpage += " handleEvent(event.touches[0].clientX, event.touches[0].clientY);";
      webpage += "}, false);";
      webpage += " function resizeCanvas() {";
      webpage += " canvas.width = window.innerWidth;";
      webpage += " canvas.height = window.innerHeight;";
      webpage += " drawCanvas();";
      webpage += " }";
      
      webpage += " window.addEventListener('resize', resizeCanvas, false);";
      webpage += " resizeCanvas();";
      webpage += " drawCanvas();";
      webpage += " document.ontouchmove = function(e) {e.preventDefault()};";
      webpage += " })();";   
      webpage += " </script>";
      webpage += " <body>";
      webpage += " <center>LED Control:

R:"; 
      webpage += " <input id=\"r\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" onchange=\"sendRGB();\" />
G:"; 
      webpage += " <input id=\"g\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" onchange=\"sendRGB();\" />
B:"; 
      webpage += "<input id=\"b\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" onchange=\"sendRGB();\" />
";
      webpage += "</center>";
      webpage += "<script type='text/javascript'>";
      webpage += " function sendRGB() {";
      webpage += " var r = document.getElementById('r');";  
      webpage += " var g = document.getElementById('g');";  
      webpage += " var b = document.getElementById('b');";  
      webpage += " var params = [";
      webpage += " 'r=' + r,";
      webpage += " 'g=' + g,";
      webpage += " 'b=' + b";
      webpage += " ].join('&');";
      webpage += " var req = new XMLHttpRequest();";
      webpage += " req.open('POST', '?' + params, true);";
      webpage += " req.send();";
      webpage += " }";
      webpage += " </script>";
      webpage += "<html>\r\n";

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


void testRGB() { // fade in and out of Red, Green, Blue
    analogWrite(R, 1023);     // R off
    analogWrite(G, 1023);     // G off
    analogWrite(B, 1023);     // B off 
    fade(R); // R
    fade(G); // G
    fade(B); // B
}

void fade(int pin) {
    for (int u = 0; u < 1024; u++) {
      analogWrite(pin,  1023 - u);
      delay(1);
    }
    for (int u = 0; u < 1024; u++) {
      analogWrite(pin, u);
      delay(1);
    }
}

void handleNotFound(){
  //digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  //digitalWrite(led, 0);
}

void setup(void){
  pinMode(R, OUTPUT);
  pinMode(G, OUTPUT);
  pinMode(B, OUTPUT);

  analogWrite(R, 600);     // R 
  analogWrite(G, 600);     // G 
  analogWrite(B, 600);     // B 

  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);
  testRGB();

  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

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

I will send code from monitor and serial for 5 min (limit)

From debuger

<!DOCTYPE HTML>
<html>
<header><title>ESP8266 RGB LED</title><h1>ESP8266 RGBLED</h1></header><head><meta name='mobile-web-app-capable' content='yes' /><meta name='viewport' content='width=device-width' /></head><body style='margin: 0px; padding: 0px;'><canvas id='colorspace'></canvas></body><script type='text/javascript'>(function () { var canvas = document.getElementById('colorspace'); var ctx = canvas.getContext('2d'); function drawCanvas() { var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0); for(var i=0; i <= 360; i+=10) { colours.addColorStop(i/360, 'hsl(' + i + ', 100%, 50%)'); } ctx.fillStyle = colours; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height); luminance.addColorStop(0, '#ffffff'); luminance.addColorStop(0.05, '#ffffff'); luminance.addColorStop(0.5, 'rgba(0,0,0,0)'); luminance.addColorStop(0.95, '#000000'); luminance.addColorStop(1, '#000000'); ctx.fillStyle = luminance; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } var eventLocked = false; function handleEvent(clientX, clientY) { if(eventLocked) { return; } function colourCorrect(v) { return Math.round(1023-(v*v)/64); } var data = ctx.getImageData(clientX, clientY, 1, 1).data; var params = [ 'r=' + 1023, 'g=' + 0, 'b=' + 0 ].join('&'); var req = new XMLHttpRequest(); req.open('POST', '?' + params, true); req.send(); eventLocked = true; req.onreadystatechange = function() { if(req.readyState == 4) { eventLocked = false; } } } canvas.addEventListener('click', function(event) { handleEvent(event.clientX, event.clientY, true); }, false); canvas.addEventListener('touchmove', function(event){ handleEvent(event.touches[0].clientX, event.touches[0].clientY);}, false); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawCanvas(); } window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); drawCanvas(); document.ontouchmove = function(e) {e.preventDefault()}; })(); </script> <body> <center>LED Control:

R: <input id="r" type="range" min="0" max="1023" step="1" onichange="handleEvent();" />
G: <input id="g" type="range" min="0" max="1023" step="1" onchange="handleEvent();" />
B:<input id="b" type="range" min="0" max="1023" step="1" onchange="handleEvent();" />
</center><script type='text/javascript'> var r = document.getElementById('r').value); var g = document.getElementById('g').value); var b = document.getElementById('b').value); var params = [ 'r=' + 1023, 'g=' + 0, 'b=' + 600 ].join('&'); var req = new XMLHttpRequest(); req.open('POST', '?' + params, true); req.send(); </script><html>

Serial monitor

Connected to ********
IP address: **********
MDNS responder started
HTTP server started
0
0  // test
0
1023
85        //original way
211
0
0
0       //when use sliders
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0

now work only with original way, the sliders doesn't work
I think it's a problem with html/js code only

PieterP:
A couple of remarks:

  • You don't need to prepend your url-encoded parameters with a '?' if you're using HTTP POST.
  • It would be a good idea to log/display the result of your XMLHttpRequest if it fails. It will probably tell you what's wrong.
  • You have to check for the HTTP request method (GET or POST) in you handleRoot function.

You haven't changed anything to your code?

Also, print r, g, b as String, not as int.
Inspect the XHR HTTP requests in the network tab of the developer options.

Hi, thanks for patience to me and endurance to my fails... :slight_smile:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>



const char* ssid = "Lubania13";
const char* password = "s.krzysztof13";

ESP8266WebServer server(80);

const int R = 14;
const int G = 12;
const int B = 13;

void handleRoot() {
  
  String red = server.arg(0);          // read RGB arguments
  String green = server.arg(1);
  String blue = server.arg(2);
  
  analogWrite(R, red.toInt());
  analogWrite(G, green.toInt());
  analogWrite(B, blue.toInt());

   Serial.println(red);   // for TESTING
   Serial.println(green); // for TESTING
   Serial.println(blue);  // for TESTING

String webpage;     
      webpage += "<!DOCTYPE HTML>";
      webpage += "<html>";
      webpage += "<header><title>ESP8266 RGB LED</title><h1>ESP8266 RGBLED</h1></header>";
      
      webpage += "<body>";
      webpage += "<center><input id=\"R\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" value=\"0\" onchange=\"sendRGB();\" />"; 
      webpage += "<p>Value: <span id=\"demo\"></span></p>";
      webpage += "</center>";

      webpage += "<script>";
      //webpage += "var slider2 = document.getElementById(\"g\");";
      //webpage += "var output2 = document.getElementById(\"demo2\");";
      //webpage += "output2.innerHTML = slider2.value;";
      //webpage += "slider2.oninput = function() {";
      //webpage += "output2.innerHTML = this.value;}";
      //webpage += " var slider3 = document.getElementById(\"b\");";
      //webpage += "var output3 = document.getElementById(\"demo3\");";
      //webpage += "output3.innerHTML = slider3.value;";
      //webpage += "slider3.oninput = function() {";
      //webpage += "output3.innerHTML = this.value;}";
      webpage += "function sendRGB() {";
      //webpage += "var r = document.getElementById(\"R\");";
      webpage += "var params = [";
      webpage += "'r=' + 1023";
      webpage += "].join('&');";
      webpage += "var req = new XMLHttpRequest();";
      webpage += "req.open('POST', params, true);";
      webpage += "req.send();";
      webpage += "}";
      webpage += "</script>";
      webpage += "</body>";
      webpage += "</html>";
      server.send(200, "text/html", webpage);    
}


void testRGB() { // fade in and out of Red, Green, Blue
    analogWrite(R, 1023);     // R off
    analogWrite(G, 1023);     // G off
    analogWrite(B, 1023);     // B off 
    fade(R); // R
    fade(G); // G
    fade(B); // B
}

void fade(int pin) {
    for (int u = 0; u < 1024; u++) {
      analogWrite(pin,  1023 - u);
      delay(1);
    }
    for (int u = 0; u < 1024; u++) {
      analogWrite(pin, u);
      delay(1);
    }
}

void handleNotFound(){
  //digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  //digitalWrite(led, 0);
}

void setup(void){
  pinMode(R, OUTPUT);
  pinMode(G, OUTPUT);
  pinMode(B, OUTPUT);

  analogWrite(R, 600);     // R 
  analogWrite(G, 600);     // G 
  analogWrite(B, 600);     // B 

  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);
  testRGB();

  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

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

In inspektor I get:404, POST, r=1023, plain.
How to fix it?

You are not sending a correct XMLHttpRequest.
Please read the documentation.

webpage += "var eventLocked = false;";
      webpage += "function sendRGB() {";
      webpage += "if(eventLocked) {";
      webpage += "return;";
      webpage += "}";
      webpage += "var r = document.getElementById(\"R\");";
      webpage += "var params = [";
      webpage += "'r=1023'";
      webpage += "].join('&');";
      webpage += "var req = new XMLHttpRequest();";
      webpage += "req.open('POST', params, true);";
      webpage += "req.send(params);";
      webpage += "eventLocked = true;";
      webpage += "req.onreadystatechange = function() {";
      webpage += "if(req.readyState == 4) {";
      webpage += "eventLocked = false;";
      webpage += "}";
      webpage += "}";
      webpage += "}";

I'm sorry for spam, but it's hard for me.
it's not work, 404, POST, true, plain
How to fix it? pls help :slight_smile:

Look at the example on the page I linked to. It is not the same as what you are trying to do. You are sending your data as the URI, instead of in the message body. Of course that'll result in a 404.

var xhr = new XMLHttpRequest();
xhr.open("POST", '/', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status == 200) {
            console.log('Request successful');
        } else {
            alert('Request failed with status '+xhr.status);
        }
    }
}
var r = document.getElementById('r').value;
var g = document.getElementById('g').value; 
var b = document.getElementById('b').value; 
var params = [ 'r=' + r, 'g=' + g, 'b=' + b ].join('&');

console.log('Sending request: '+params);
xhr.send(params);

You also have mismatched parentheses in your JavaScript code. Please use the SPIFFS for your HTML files. The inline, escaped strings are completely unreadable and prone to errors, as you've discovered.

Yea!! Thanks very much. I will study this :wink:
Best Regards,
Shine

Hello, I have next problem.
I need send information from server, where I use a forms, to module.
I try with this.

<form action="..." onsubmit="sendRGB(); return false">
<input type="text" name="tekst" /><input type="submit" value="OK" />
</form>

But it's not work.
Anyone can help??
Thanks

You cannot send information from a server to another server. You don't have forms on a server.

Explain in detail what you actually want to do.

PieterP:
You cannot send information from a server to another server. You don't have forms on a server.

Explain in detail what you actually want to do.

I need use forms instead sliders, how is now.
But I don't now how to send it.
Thanks very much for help

Ps. the informations from forms can I load to strings?
String red = server.arg(0);

The answer is in the guide I posted earlier.

PieterP:
The answer is in the guide I posted earlier.

Yes, thanks, but I would like make this:

webpage += "<script>function sendRGB() {";
      webpage += "var xhr = new XMLHttpRequest();";
      webpage += "xhr.open(\"POST\", '/', true);";
      webpage += "xhr.setRequestHeader(\"Content-type\", \"application/x-www-form-urlencoded\");";
      webpage += "var r = document.getElementById('r').value;";
      webpage += "var g = document.getElementById('g').value;";                                         
      webpage += "var b = document.getElementById('b').value;";
      webpage += "var params = [ 'r=' + r, 'g=' + g, 'b=' + b ].join('&');";
      webpage += "console.log('Sending request: '+params);";
      webpage += "xhr.send(params);";
      webpage += "}";
      webpage += "</script>";
      webpage += "<body> <center>LED Control:

R: <form action=\"sendRGB();\" method=\"POST\"><input type=\"text\" name=\"r\" placeholder=\"R\"></form> <input id=\"g\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" oninput=\"sendRGB();\"/> <input id=\"b\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" oninput=\"sendRGB();\" /> </center></body></html>";

Edit.
I made how you "tell", but when I send informations and IP change to xxx.xxx.x.xx/login, server don't back and writed "Broken connection"

all code

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>



const char* ssid = "Lubania13";
const char* password = "s.krzysztof13";

ESP8266WebServer server(80);

const int R = 14;
const int G = 12;
const int B = 13;

void handleRoot() {
  
  String red = server.arg(0);          // read RGB arguments
  String green = server.arg(1);
  String blue = server.arg(2);
  
  analogWrite(R, red.toInt());
  analogWrite(G, green.toInt());
  analogWrite(B, blue.toInt());

   Serial.println(red);   // for TESTING
   Serial.println(green); // for TESTING
   Serial.println(blue);  // for TESTING
   Serial.println(red.toInt());   // for TESTING
   Serial.println(green.toInt()); // for TESTING
   Serial.println(blue.toInt());  // for TESTING

  String webpage;     
      webpage += "<!DOCTYPE HTML><html><header><title>ESP8266 RGB LED</title><h1>ESP8266 RGBLED</h1></header><head><meta name='mobile-web-app-capable' content='yes' /><meta name='viewport' content='width=device-width' /></head><body style='margin: 0px; padding: 0px;'>";
      webpage += "<script>function sendRGB() {";
      webpage += "var xhr = new XMLHttpRequest();";
      webpage += "xhr.open(\"POST\", '/', true);";
      webpage += "xhr.setRequestHeader(\"Content-type\", \"application/x-www-form-urlencoded\");";
      webpage += "var r = document.getElementById('g').value;";
      webpage += "var g = document.getElementById('g').value;";                                         
      webpage += "var b = document.getElementById('b').value;";
      webpage += "var params = [ 'r=' + r, 'g=' + g, 'b=' + b ].join('&');";
      webpage += "console.log('Sending request: '+params);";
      webpage += "xhr.send(params);";
      webpage += "}";
      webpage += "</script>";
      webpage += "<body> <center>LED Control:

R: <form action=\"/login\" method=\"POST\"><input type=\"text\" name=\"username\" placeholder=\"Username\">
<input type=\"text\" name=\"password\" placeholder=\"Password\">
<input type=\"submit\" value=\"Login\"></form> <input id=\"g\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" oninput=\"sendRGB();\"/> <input id=\"b\" type=\"range\" min=\"0\" max=\"1023\" step=\"1\" oninput=\"sendRGB();\" /> </center></body></html>";


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

void handleLogin() {                         // If a POST request is made to URI /login
  String username = server.arg("username");          // read RGB arguments
  String password = server.arg("password");
  Serial.println(username);   // for TESTING
  Serial.println(password);
}


//void testRGB() { // fade in and out of Red, Green, Blue
    //analogWrite(R, 1023);     // R off
    //analogWrite(G, 1023);     // G off
    //analogWrite(B, 1023);     // B off 
    //fade(R); // R
    //fade(G); // G
    //fade(B); // B
//}

//void fade(int pin) {
    //for (int u = 0; u < 1024; u++) {
     // analogWrite(pin,  1023 - u);
      //delay(1);
   // }
   // for (int u = 0; u < 1024; u++) {
    //  analogWrite(pin, u);
   //   delay(1);
  //  }
//}

void handleNotFound(){
  //digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  //digitalWrite(led, 0);
}

void setup(void){
  pinMode(R, OUTPUT);
  pinMode(G, OUTPUT);
  pinMode(B, OUTPUT);

  analogWrite(R, 600);     // R 
  analogWrite(G, 600);     // G 
  analogWrite(B, 600);     // B 

  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }
  //server.on(" ");
  server.on("/", handleRoot);
  server.on("/login", HTTP_POST, handleLogin);
  //testRGB();

  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

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

Edit2
I add
server.send(200, "text/html", "

Welcome, " + server.arg("username") + "!

Login successful

");
and it's work, but how back to first side? without /login in IP?

You don't seem to be familiar with the HTTP protocol. Please read through the entire guide I linked to, or one of the other countless guides online.