Joe Margevicius asked 3 years ago
The code in the eBook is in general, explained, but the flow of actions is less clear (a flow chart would be really helpful). So, in the Slider Webserver example, the startup flow has me scratching my head. This is my understand of the startup — can someone verify this is correct? Thanks
1) ESP initializes stuff (wifi, pins, serial port, PWM)
2) ESP sets up “background processes” (HTTP webserver sensor for “/” and “/currentValue”, and the websocket)
3) ESP goes into an infinite loop writing the duty cycle to the PWM module
4) sometime later, a client pokes the ESP (i.e. server) IP address
5) The ESP HTTP sensor for “/” sees this, and sends off the .js, .html and .css files
6) The client, on receiving these, presents the graphics on the web page, and then runs the .js script … however, since there is no “process function” in the ESP HTTP “/” code (like in the simple LED on/off button web server example), the present state of the slider (and brightness) are at zero (to be dealt with shortly)
7) The client’s .js code then sets up a websocket, which immediately does a handshake with the server’s websocket process; that background comm. port is now active
8) (this is where is gets hazzy to me) The client then runs the getCurrentValue() function, setting up a HTTPrequest object, and then sending off a GET to the server, with the appendage “/currentValue” (presumably to update the graphics with what the ESP knows)
9) The ESP HTTP webserver sees this, and sends off the “slider value” to the client in the HTTP protocol, not the websocket part. (it’s important to keep in mind that the client has not yet touched the slider — this is just the setup section)
10) The client receives the HTTP message, and acts on it via the code in the getCurrentValue() function, using that single “slider value” to create both values for “pwmSlider” and “textSliderValue” in the index.html code.
… so a question (if the above is correct so far): why are there 2 values in the .html code (i.e. pwmSlider and textSliderValue) if there is only 1 thing being sent it from the ESP ? (I realize one can be generated from the other in the html code .. but why even have 2 in the first place?)
The code for what happens when the client moves the slider is clear to me, although it took a while to realize that there is no “notifyClients()” function like in the LED on/off webserver example, so this slide example does not update multiple clients, unfortunately.
Thanks for any clarification.
Sara Santos Staff answered 3 years ago
Hi.
All the steps you described are correct.
textsliderValue and pwmSlider are ids for two different HTML elements. The textSliderValue corresponds to the place in the HTML file where we display the slider value as text:
<p class="state">Brightness: <span id="textSliderValue"></span> %</p>
The pwmSlider is the id for the HTML element that corresponds to the slider itself.
<input type="range" oninput="updateSliderPWM(this)" id="pwmSlider" min=
"0" max="100" step="1" value="0" class="slider">
</p>
Because those are two different HTML elements, they need to have different ids.
If you take a look closely at the Javascript file, you see that there is only one variable to save the slider value, which is the sliderValue variable. pwmSlider and textSliderValue are ids for different HTML elements.
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
websocket.send(sliderValue);
}
You are right, this example doesn’t update automatically in all clients. We created a similar example in our website that does that. Here it is: https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/
I hope this is not confusing.
Let me know if you need further clarification.
Regards,
Sara
Joe Margevicius answered 3 years ago
Thanks Sara. … you state: “Because those are two different HTML elements, they need to have different ids”. I guess what is confusing (and I’m still referring to the initialization – using the getCurrentValue(), not the updateSliderPWM(element) function you described above – that function is used when the client touches the slider; I’m not there yet). … what is/was confusing is that on receiving the currentValue from the ESP, the client’s getCurrentValue() function applies “this.responseText” to both id’s … the same value applied to both id’s. Maybe that just the way HTML/CSS code works and it needs two different id’s for the same value.
You can close this question … thanks 🙂 (and thanks for the link to the multi-slider/notifyClients code 🙂 … have a happy holiday and a better New Year!
Sara Santos Staff answered 3 years ago
Thank you.
Happy Holidays.
If you need further help, you just need to open a new question in our forum.
Regards,
Sara