Hello! and fantastic tutorial

[griffomd]

wow this is one of the best and most informative tutorials. I am new to websockets, jason and ESP32. i followed through your tutorial learning all about websockets. i have the project working but wanted to add more led's and buttons and not sure how to do this the best way. do you have any tutorials or is there a quick way to figure it out. i can get it to work but there is a lot of repetitive code. any ideas???

Thank you
Mark

[m1cr0lab]

Hi Mark,

Thank you for your very flattering feedback. I am very happy to have been able to light your way through the ESP32 programming learning process.

To answer your question, in fact, it's quite simple and it's even simpler because of the way we implement LED and button handling, with structures.

To define a set of LEDs and buttons, you can use arrays as follows:

Led led[] = {
    { LED_1_PIN, false },
    { LED_2_PIN, false },
    ...
    { LED_n_PIN, false }
};

Button button[] = {
    { BTN_1_PIN, HIGH, 0, 0 },
    { BTN_2_PIN, HIGH, 0, 0 },
    ...
    { BTN_n_PIN, HIGH, 0, 0 }
};

For example, assuming that there are as many LEDs as there are buttons, and you want to reverse the state of the i-th LED when you press the i-th button, just do the following:

void loop() {
    
    for (uint8_t i=0; i < NB_LEDS_AND_BUTTONS; i++) {
        button[i].read();
        if (button[i].pressed()) {
            led[i].on = !led[i].on;
            led[i].update();
        }
    }

}

During the exchanges between the server (ESP32) and the clients (smartphones), it will also be necessary to think about specifying the rank of the LED or button concerned by the event to be broadcast. The web user interface will also have to distinguish the virtual representations of these elements so that they can be easily handled with Javascript.

For example, very roughly, when the user presses the i-th physical button, web clients should be notified as follows:

if (button[i].pressed()) {
    led[i].on = !led[i].on;
    led[i].update();
    ws.printfAll("{\"rank\":\"%u\",\"status\":\"%s\"}", i, led[i].on ? "on" : "off");
}

Assuming that, in the HTML code, the virtual LEDs are defined as follows:

<div id="led_1" class="%STATE_1%"></div>
<div id="led_2" class="%STATE_2%"></div>
...
<div id="led_n" class="%STATE_n%"></div>

The way to process the notification event with Javascript is then very simple:

function onMessage(event) {
    let data = JSON.parse(event.data);
    document.getElementById('led_' + data.rank).className = data.status;
}

Depending on what you want to do, we could probably optimize things. But you see that, already, it doesn't require a lot of extra code. Do these few leads give you a clearer idea of how to proceed?

Regards,
Steph

[marcio0408]

Hello again.
Thank you for your help.
Using the above ideas, this part of the error code:

// ----------------------------------------------------------------------------
// Definition of the LED component
// ----------------------------------------------------------------------------

struct Led {

// state variables
uint8_t pin;
bool    on;

// methods
void update() {
    digitalWrite(pin, on ? HIGH : LOW);
}

};

[m1cr0lab]

Uh... sorry, I didn't understand what you were getting at?

[marcio0408]

Unfortunately I couldn't get it to work with more than one LED.

[timdf911]

Just a quick note to say what a great tutorial especially for a novice like myself. I had the basic code up and running in less than 10 minutes and have enjoyed learning how it all works as I plan on using it to remotely control the heating and lighting in a garden room. I intend to add a couple of other remote control relays to the device, wish me luck !
Regards Tim

[m1cr0lab]

Thanks a lot for your nice feedback, @timdf911.
I'm sure you'll do fine if you understand the basics.
Good luck with your project!

Regards,
Steph