I am working on a project that will use a color picker on my phone to update a set of addressable strips. I haven gotten to the LED code yet, I'm still working on getting my serial monitor to display accurate data from the webpage. I am getting most of my http requests to respond properly, but when I move the color picker around, my returned data is blank. Oddly, I can modify the URL/ with the same request text manually and it works. That tells me the request handler is working. I feel the issue is in the Java script. It doesn't seem to like the data type of the color value? Maybe? I can assign the variable in the send function a number and it passes. If I add any letters it wont work. I am using the XmlHTTP request objects. The .open() function seems to be the problem. Any ideas would be much appreciated.
Main code
// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "webpage.h"
#include "arduino_secrets.h"
// Replace with your network credentials
//Credentials in arduin secrets
const int output = D6;
String sliderValue = "0";
String colorValue = "0";
const char* PARAM_INPUT = "value";
const char* PARAM_MESSAGE = "message";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
int ledSpeed;
int featureSelect = 1;
int maxFeatures = 8;
// Replaces placeholder with button section in your web page
String processor(const String& var) {
//Serial.println(var);
if (var == "SLIDERVALUE") {
return sliderValue;
}
return String();
}
void setup() {
// Serial port for debugging purposes
Serial.begin(115200);
ledSpeed = sliderValue.toInt();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
int paramsNr = request->params();
Serial.println(paramsNr);
for (int i = 0; i < paramsNr; i++) {
AsyncWebParameter* p = request->getParam(i);
Serial.print("Param name: ");
Serial.println(p->name());
Serial.print("Param value: ");
Serial.println(p->value());
Serial.println("------");
}
request->send_P(200, "text/html", index_html, processor);
});
/*
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
*/
/*
server.on("/prim", HTTP_GET,[] (AsyncWebServer *request){
String primColor;
if (request->hasParam(PARAM_INPUT)) {
primColor = request->getParam(PARAM_INPUT)->value();
} else{
primColor = "No message sent";
}
Serial.println(primColor);
request->send(200,"text/plain", OK);
})
*/
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [](AsyncWebServerRequest* request) {
String inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
ledSpeed = sliderValue.toInt();
} else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send_P(200, "text/plain", "OK");
});
server.on("/prev", HTTP_GET, [](AsyncWebServerRequest* request) {
featureSelect--;
if (featureSelect == 0) {
featureSelect = maxFeatures;
}
Serial.println(featureSelect);
request->send_P(200, "text/html", index_html, processor);
});
server.on("/next", HTTP_GET, [](AsyncWebServerRequest* request) {
featureSelect++;
if (featureSelect > maxFeatures) {
featureSelect = 1;
}
Serial.println(featureSelect);
request->send_P(200, "text/html", index_html, processor);
});
server.on("/color", HTTP_GET, [](AsyncWebServerRequest* request) {
int paramsNr = request->params();
String colorHex;
Serial.println(paramsNr);
for (int i = 0; i < paramsNr; i++) {
AsyncWebParameter* p = request->getParam(i);
Serial.print("Param name: ");
Serial.println(p->name());
Serial.print("Param value: ");
Serial.println(p->value());
Serial.println("------");
}
});
/*
String colorMessage;
if (request->hasParam(PARAM_MESSAGE)) {
colorMessage = request->getParam(PARAM_MESSAGE)->value();
colorValue = colorMessage;
}
else {
colorMessage = "No message sent";
}
Serial.println(colorValue);
request->send(200, "text/plain", "OK");
});
*/
// Start server
server.begin();
}
void loop() {
}
Webpage
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LED Control</title>
<style>
html {
font-family: Helvetica;
display: inline-block;
text-align: center;
}
h1 {
font-size: 2.3rem;
}
h2 {
font-size: 1.3rem;
}
h1 {
color: #444444;
margin: 50px auto 30px;
}
h3 {
color: #444444;
margin-bottom: 50px;
}
p {
font-size: 1.9rem;
}
body {
max-width: 400px;
margin: 0 auto;
padding-bottom: 25px;
}
.slider {
-webkit-appearance: none;
border: radius;
margin: 14px;
width: 360px;
height: 25px;
background: #6d97f3;
outline: none;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 8px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
background: #0800f7cb;
cursor: pointer;
border-radius: 4px;
}
.slider::-moz-range-thumb {
width: 35px;
height: 35px;
background: #3904f7;
cursor: pointer;
}
.button {
display: block;
width: 80px;
background-color: #1abc9c;
border: none;
color: white;
padding: 13px 30px;
text-decoration: none;
font-size: 25px;
margin: 0 auto 35px;
cursor: pointer;
border-radius: 4px;
}
.button-on {
background-color: #0800f7cb;
}
.button-on:active {
background-color: #3498db;
}
.button-off {
background-color: #0800f7cb;
}
.button-off:active {
background-color: #2c3e50;
}
</style>
</head>
<body>
<h1>Light Show Controller</h1>
<h3>Select Light Mode</h3>
<a class="button button-off" href="/prev">
Prev Feature</a>
<a class="button button-on" href="/next">
Next Feature</a>
<hr>
<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" name="color" id="color-picker"/>
<p id="primary"></p>
<br>
<br>
<h2>Speed Control</h2>
<p>
<span id="textSliderValue">%SLIDERVALUE%</span>
</p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<br>
<br>
<script>
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value=" + sliderValue, true);
xhr.send();
}
let colorPicker;
const defaultColor = "#0000ff";
window.addEventListener("load", startup, false);
function startup() {
colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", updateAll, false);
colorPicker.select();
}
function updateFirst(event) {
const p = document.querySelector("p");
if (p) {
let colorHex = document.getElementById("color-picker").value;
document.getElementById("primary").innerHTML = colorHex;
console.log(colorHex);
var xhm = new XMLHttpRequest();
xhm.open("GET", "/color?value=" + colorHex, true);
xhm.send();
}
}
function updateAll(event) {
document.querySelectorAll("p").forEach((p) => {
let colorHex = document.getElementById("color-picker").value;
document.getElementById("primary").innerHTML = colorHex;
console.log(colorHex);
var xhm = new XMLHttpRequest();
xhm.open("GET", "/color?value=" + colorHex , true);
xhm.send();
});
}
</script>
</body>
</html>
)rawliteral";
/*
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<body>
<p>
An example demonstrating the use of the
<code><input type="color"></code>
control.
</p>
<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker"/>
<p id="demo"></p>
<p>
Watch the paragraph colors change when you adjust the color picker. As you
make changes in the color picker, the first paragraph's color changes, as a
preview (this uses the
<code>input</code>
event). When you close the color
picker, the
<code>change</code>
event fires, and we detect that to change
every paragraph to the selected color.
</p>
<script>
let colorPicker;
const defaultColor = "#0000ff";
window.addEventListener("load", startup, false);
function startup() {
colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", updateAll, false);
colorPicker.select();
}
function updateFirst(event) {
const p = document.querySelector("p");
if (p) {
var sliderValue = document.getElementById("color-picker").value;
document.getElementById("demo").innerHTML = sliderValue;
}
}
function updateAll(event) {
document.querySelectorAll("p").forEach((p) => {
var sliderValue = document.getElementById("color-picker").value;
document.getElementById("demo").innerHTML = sliderValue;
});
}
</script>
</body>
</html>
)rawliteral";
*/
