[GH-ISSUE #761] can someone help me to edit this skech ? #635

New issue

Closed

opened 2026-02-28 01:26:19 +03:00 by kerem · 2 comments

kerem commented

2026-02-28 01:26:19 +03:00

Owner

Originally created by @trarizakaria on GitHub (Oct 31, 2018).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/761

Hello everyone, i made some connected lampe with this sketch that i founded on internet. i want to modificate it to put WIFIManager with fixed IP, wifi manager works fine, but the webserver not work. someone can help me ? thank you

here is what i want make http://cyber-place.ru/showthread.php?t=2699 and sorry for my bad english

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>

// веб страница
String webpage = ""
"<!DOCTYPE html><html><head><title>RGB control</title><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=' + colourCorrect(data[0]),"
" 'g=' + colourCorrect(data[1]),"
" 'b=' + colourCorrect(data[2])"
" ].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></html>";
//////////////////////////////////////////////////////////////////////////////////////////////////

#define red_pin 5
#define green_pin 2
#define blue_pin 4

const char *ssid = "RGB-control"; // точка доступа АР
const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 1, 1); //IP адрес АР
DNSServer dnsServer;        //
ESP8266WebServer webServer(80);  //ПОРТ АР

// получем с веб страницы выбраный цвет
void handleRoot() 
{
String red = webServer.arg(0);
String green = webServer.arg(1);
String blue = webServer.arg(2);

// конвертируем и ШИМ-мим значения на RGB пинах
analogWrite(red_pin, red.toInt());
analogWrite(green_pin, green.toInt());
analogWrite(blue_pin, blue.toInt());

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

void setup() 
{
pinMode(red_pin, OUTPUT); // R
pinMode(green_pin, OUTPUT); // G
pinMode(blue_pin, OUTPUT); // B
analogWrite(red_pin, 512);
analogWrite(green_pin, 512);
analogWrite(blue_pin, 512);

delay(1000);

//Запускаем WiFi AP и сервер
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP(ssid);

dnsServer.start(DNS_PORT, "rgb-control", apIP);
webServer.on("/", handleRoot); //веб страница
webServer.begin();  //запуск сервера
}
//////////////////////////////////////////////////////////////////////////////////////////////////

void loop() 
{
dnsServer.processNextRequest();
webServer.handleClient();
}

Originally created by @trarizakaria on GitHub (Oct 31, 2018). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/761 Hello everyone, i made some connected lampe with this sketch that i founded on internet. i want to modificate it to put WIFIManager with fixed IP, wifi manager works fine, but the webserver not work. someone can help me ? thank you here is what i want make http://cyber-place.ru/showthread.php?t=2699 and sorry for my bad english ```C++ #include <ESP8266WiFi.h> #include <DNSServer.h> #include <ESP8266WebServer.h> // веб страница String webpage = "" "<!DOCTYPE html><html><head><title>RGB control</title><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=' + colourCorrect(data[0])," " 'g=' + colourCorrect(data[1])," " 'b=' + colourCorrect(data[2])" " ].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></html>"; ////////////////////////////////////////////////////////////////////////////////////////////////// #define red_pin 5 #define green_pin 2 #define blue_pin 4 const char *ssid = "RGB-control"; // точка доступа АР const byte DNS_PORT = 53; IPAddress apIP(192, 168, 1, 1); //IP адрес АР DNSServer dnsServer; // ESP8266WebServer webServer(80); //ПОРТ АР // получем с веб страницы выбраный цвет void handleRoot() { String red = webServer.arg(0); String green = webServer.arg(1); String blue = webServer.arg(2); // конвертируем и ШИМ-мим значения на RGB пинах analogWrite(red_pin, red.toInt()); analogWrite(green_pin, green.toInt()); analogWrite(blue_pin, blue.toInt()); webServer.send(200, "text/html", webpage); } ////////////////////////////////////////////////////////////////////////////////////////////////// void setup() { pinMode(red_pin, OUTPUT); // R pinMode(green_pin, OUTPUT); // G pinMode(blue_pin, OUTPUT); // B analogWrite(red_pin, 512); analogWrite(green_pin, 512); analogWrite(blue_pin, 512); delay(1000); //Запускаем WiFi AP и сервер WiFi.mode(WIFI_AP); WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0)); WiFi.softAP(ssid); dnsServer.start(DNS_PORT, "rgb-control", apIP); webServer.on("/", handleRoot); //веб страница webServer.begin(); //запуск сервера } ////////////////////////////////////////////////////////////////////////////////////////////////// void loop() { dnsServer.processNextRequest(); webServer.handleClient(); } ```

kerem

2026-02-28 01:26:19 +03:00

closed this issue
added the
DEV Help Wanted
label

kerem commented

2026-02-28 01:26:20 +03:00

Author

Owner

@martinberlin commented on GitHub (Nov 1, 2018):

The first recommendation I can give you to keep this clean, read a bit the documentation about SPIFFS and save the HTML + JS and so on there. It's much cleaner and easier to handle.

Now it looks all good with your webServer, it's just that I have mines defined like this:

 webServer.on("/capture", HTTP_GET, serverCapture);
 webServer.on("/stream", HTTP_GET, serverStream);

If it's not this please provide some more hints, why it does not work? What is the behavior?
It's even arriving to the loop() ?

@martinberlin commented on GitHub (Nov 1, 2018): The first recommendation I can give you to keep this clean, read a bit the documentation about SPIFFS and save the HTML + JS and so on there. It's much cleaner and easier to handle. Now it looks all good with your webServer, it's just that I have mines defined like this: webServer.on("/capture", HTTP_GET, serverCapture); webServer.on("/stream", HTTP_GET, serverStream); If it's not this please provide some more hints, why it does not work? What is the behavior? It's even arriving to the loop() ?

kerem commented

2026-02-28 01:26:20 +03:00

Author

Owner

@trarizakaria commented on GitHub (Nov 2, 2018):

thank you for your help @martinberlin finally it work, there is the sketch if someone want to make a RGB controler for led strip

`#include <FS.h>                   //this needs to be first, or it all crashes and burns...
#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         //https://github.com/tzapu/WiFiManager

// веб страница
String webpage = ""
"<!DOCTYPE html><html><head><title>RGB control</title><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, '#000000');"
" luminance.addColorStop(0.05, '#000000');"
" luminance.addColorStop(0.5, 'rgba(0,0,0,0)');"
" luminance.addColorStop(0.95, '#ffffff');"
" luminance.addColorStop(1, '#ffffff');"
" 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=' + colourCorrect(data[0]),"
" 'g=' + colourCorrect(data[1]),"
" 'b=' + colourCorrect(data[2])"
" ].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></html>";
//////////////////////////////////////////////////////////////////////////////////////////////////

#define red_pin 5
#define green_pin 2
#define blue_pin 4


const byte DNS_PORT = 53;
DNSServer dnsServer;        //
ESP8266WebServer webServer(80);  //ПОРТ АР


// получем с веб страницы выбраный цвет
void handleRoot() 
{
String red = webServer.arg(0);
String green = webServer.arg(1);
String blue = webServer.arg(2);

// конвертируем и ШИМ-мим значения на RGB пинах
analogWrite(red_pin, red.toInt());
analogWrite(green_pin, green.toInt());
analogWrite(blue_pin, blue.toInt());

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


void setup() {
    // put your setup code here, to run once:
    Serial.begin(115200);
    Serial.println();
    
    //WiFiManager
    //Local intialization. Once its business is done, there is no need to keep it around
    WiFiManager wifiManager;

    


     //set static ip
  //block1 should be used for ESP8266 core 2.1.0 or newer, otherwise use block2

  //start-block1
  //IPAddress _ip,_gw,_sn;
  //_ip.fromString(static_ip);
  //_gw.fromString(static_gw);
  //_sn.fromString(static_sn);
  //end-block1

  //start-block2
  IPAddress _ip = IPAddress(192, 168, 1, 35);
  IPAddress _gw = IPAddress(192, 168, 1, 1);
  IPAddress _sn = IPAddress(255, 255, 255, 0);
  //end-block2

  wifiManager.setSTAStaticIPConfig(_ip, _gw, _sn);


  //tries to connect to last known settings
  //if it does not connect it starts an access point with the specified name
  //here  "AutoConnectAP" with password "password"
  //and goes into a blocking loop awaiting configuration
  if (!wifiManager.autoConnect("AutoConnectAP", "12345")) {
    Serial.println("failed to connect, we should reset as see if it connects");
    delay(3000);
    ESP.reset();
    delay(5000);
  }
    
    //if you get here you have connected to the WiFi
    Serial.println("connected...yeey :)");

    Serial.println("local ip");
  Serial.println(WiFi.localIP());


pinMode(red_pin, OUTPUT); // R
pinMode(green_pin, OUTPUT); // G
pinMode(blue_pin, OUTPUT); // B
analogWrite(red_pin, 512);
analogWrite(green_pin, 512);
analogWrite(blue_pin, 512);

delay(1000);

  //Запускаем WiFi AP и сервер
webServer.on("/", handleRoot); //веб страница
webServer.begin();  //запуск сервер


}

void loop() {
   dnsServer.processNextRequest();
webServer.handleClient(); 
    
}`

@trarizakaria commented on GitHub (Nov 2, 2018): thank you for your help @martinberlin finally it work, there is the sketch if someone want to make a RGB controler for led strip ``` `#include <FS.h> //this needs to be first, or it all crashes and burns... #include <ESP8266WiFi.h> //https://github.com/esp8266/Arduino #include <DNSServer.h> #include <ESP8266WebServer.h> #include <WiFiManager.h> //https://github.com/tzapu/WiFiManager // веб страница String webpage = "" "<!DOCTYPE html><html><head><title>RGB control</title><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, '#000000');" " luminance.addColorStop(0.05, '#000000');" " luminance.addColorStop(0.5, 'rgba(0,0,0,0)');" " luminance.addColorStop(0.95, '#ffffff');" " luminance.addColorStop(1, '#ffffff');" " 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=' + colourCorrect(data[0])," " 'g=' + colourCorrect(data[1])," " 'b=' + colourCorrect(data[2])" " ].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></html>"; ////////////////////////////////////////////////////////////////////////////////////////////////// #define red_pin 5 #define green_pin 2 #define blue_pin 4 const byte DNS_PORT = 53; DNSServer dnsServer; // ESP8266WebServer webServer(80); //ПОРТ АР // получем с веб страницы выбраный цвет void handleRoot() { String red = webServer.arg(0); String green = webServer.arg(1); String blue = webServer.arg(2); // конвертируем и ШИМ-мим значения на RGB пинах analogWrite(red_pin, red.toInt()); analogWrite(green_pin, green.toInt()); analogWrite(blue_pin, blue.toInt()); webServer.send(200, "text/html", webpage); } void setup() { // put your setup code here, to run once: Serial.begin(115200); Serial.println(); //WiFiManager //Local intialization. Once its business is done, there is no need to keep it around WiFiManager wifiManager; //set static ip //block1 should be used for ESP8266 core 2.1.0 or newer, otherwise use block2 //start-block1 //IPAddress _ip,_gw,_sn; //_ip.fromString(static_ip); //_gw.fromString(static_gw); //_sn.fromString(static_sn); //end-block1 //start-block2 IPAddress _ip = IPAddress(192, 168, 1, 35); IPAddress _gw = IPAddress(192, 168, 1, 1); IPAddress _sn = IPAddress(255, 255, 255, 0); //end-block2 wifiManager.setSTAStaticIPConfig(_ip, _gw, _sn); //tries to connect to last known settings //if it does not connect it starts an access point with the specified name //here "AutoConnectAP" with password "password" //and goes into a blocking loop awaiting configuration if (!wifiManager.autoConnect("AutoConnectAP", "12345")) { Serial.println("failed to connect, we should reset as see if it connects"); delay(3000); ESP.reset(); delay(5000); } //if you get here you have connected to the WiFi Serial.println("connected...yeey :)"); Serial.println("local ip"); Serial.println(WiFi.localIP()); pinMode(red_pin, OUTPUT); // R pinMode(green_pin, OUTPUT); // G pinMode(blue_pin, OUTPUT); // B analogWrite(red_pin, 512); analogWrite(green_pin, 512); analogWrite(blue_pin, 512); delay(1000); //Запускаем WiFi AP и сервер webServer.on("/", handleRoot); //веб страница webServer.begin(); //запуск сервер } void loop() { dnsServer.processNextRequest(); webServer.handleClient(); }` ```