Hi there, in your esp webserver course, item \”2.4 – Web Server with Slider: Control LED Brightness (PWM)\” seems to be a bug: the example works fine with only 1 client connected, but if more than one clients connected, the slider value is not updated on all clients, only on the one that makes the change. How can this be solved ? Manfred
Hi.
That’s normal.
Because, contrary to the code in the previous example (2.3), it doesn’t include the sections of code to notify all clients when a change is detected.
Take a look at the notifyClients() function in example 2.3.
You need to implement that in the 2.4 example to make it work that way.
If you want, I can modify the code to do that and send it to you.
Let me know if you need it.
Regards,
Sara
Hi Sara,
thanks for the answer. Yes please send me the modified code, just to help me understanding how everything works together.
Thanks in advance
Manfred
Hi.
I’m sorry for taking so long back to you. I’ve been sick for the past few days, and I’m slowly recovering.
Here’s the arduino code:
https://gist.github.com/sarasantos/ed1f4b0f780a0da060fd7616e546aa42
Basically, you need to create this function that notifies all clients
void notifyClients(String state) {
ws.textAll(state);
}
Then, you need to call it inside the handleWebSocketMessage() so that when a client sends a new slider value, we notify all other clients of the change:
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
sliderValue = (char*)data;
notifyClients (sliderValue);
dutyCycle = map(sliderValue.toInt(), 0, 100, 0, 255);
Serial.println(dutyCycle);
}
}
You also need to add just a couple of lines to the Javascript file. Here’s the code: https://gist.github.com/sarasantos/2363ea3a335e0fadbc0cb5de7a2d4441
Basically, you need to add the following lines to the onMessage function so that when it receives a new slider value, it updates the interface:
document.getElementById('textSliderValue').innerHTML = event.data;
document.getElementById('pwmSlider').value = event.data;
And that’s it.
I hope this is useful.
Regards,
Sara
Hi Sara,
after adding your code lines to my project everything works fine now. Also i understand better now, how everything works together …
Thanks for your help,
Manfred