Dear All,
I'm working on arduino over last year with small and bigger luck.
Lastly, I've started to prearing final deployment of Arduino Uno WiFi Rev.2 as a furniture LED controller.
Excluding everything, I've faced a problem with a code - and Yes - i've looked into google, i've looked into forum, there was a topic regarding this, however, something in my brain is not allowing me to implement missing part of code into my project.
So:
- HTML 5 Color picker to provide hex code for color
- JS event Listener to retrieve hax code
PROBLEM: How to retrieve color value from Color Picker and set it as variable in Arduino Code?
{
WiFiClient ArWebClient = ArWebServer.available(); // CLIENT initialization & SERVER listening for incoming clients
if (ArWebClient) { Serial.println("[S01][INFO]:SERVER established new connection"); // SERVER connections status display #1
while (ArWebClient.connected())
{ if (ArWebClient.available())
{ c = ArWebClient.read(); Serial.write(c); if (c == '\n')
{ if (currentLine.length() == 0)
// Web Site Build Code (HTML)
{ ArWebClient.println("HTTP/1.1 200 OK"); ArWebClient.println("Content-type:text/html"); ArWebClient.println();
ArWebClient.println("<!DOCTYPE HTML>"); // <html> <head> ");
ArWebClient.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> "); //</head> <body>"); // WEB compatiblity for Mobile Devices Usage
ArWebClient.println("Click <a href=\"/H\"> here </a> to turn built LED ON <br>");
ArWebClient.println("Click <a href=\"/L\"> here </a> to turn built LED OFF <br>");
ArWebClient.println("Click <a href=\"/0\"> here </a> to turn LED strip OFF <br>");
ArWebClient.println("<input type=\"color\" id=\"colorPicker\" /> <input type=\"hidden\" name=\"clbln\" id=\"clbl\"> x0000 </lable> <a href=\"\" id=\"acolor\" /><br> ");
ArWebClient.println("<script type=\"text/javascript\" language=\"javascript\"> let color=document.getElementById(\'colorPicker\'); color.addEventListener(\'input\', function(e) {alert(this.value); clbl.innerHTML = this.value; document.location.href=this.value;}) ; </script>");
Serial.println(ArWebClient.println("<script type=\"text/javascript\" language=\"javascript\"> let color=document.getElementById(\'colorPicker\'); color.addEventListener(\'input\', function(e) {alert(this.value); clbl.innerHTML = this.value; document.location.href=this.value; document.getElementById(\'clbln\').value=this.value;}) ; </script>"));
ArWebClient.println("Submit color: <button class=\"favorite styled\" type=\"button\" name=\"test\"> Test </button> <br>" ); //break;
ArWebClient.println("</body> </html>"); break;
} else { currentLine=""; }
} else if (c !='\r') { currentLine += c; }
if (currentLine.endsWith("GET /0")) { opt=0; }
if (currentLine.endsWith("GET /H")) { digitalWrite(LED_BUILTIN,HIGH); opt=1;}
if (currentLine.endsWith("GET /L")) { digitalWrite(LED_BUILTIN,LOW); opt=2; }
}
}
}
ArWebClient.stop();
}