Comments (6)
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
from remote-control-with-websocket.
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);
}
};
from remote-control-with-websocket.
Uh... sorry, I didn't understand what you were getting at?
from remote-control-with-websocket.
Unfortunately I couldn't get it to work with more than one LED.
from remote-control-with-websocket.
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
from remote-control-with-websocket.
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
from remote-control-with-websocket.
Related Issues (20)
- Stability HOT 1
- Excellent tutorial
- Great Tutorial. One question about the code HOT 1
- Secure Sockets
- thank you will have a look if i can make Electra to work with this HOT 1
- Question from a user from Germany
- How to add some functionality using Websockets
- question to everyone.....
- Thank you for the great tutorial
- Help needed for my project
- Huge thanks, and a request to cover saving parameters HOT 2
- Super
- TRES BON TUTO HOT 1
- Removed function mbedtls_md5_starts in WebAuthentication.cpp results in build error HOT 2
- Merci pour ce trรจs bon tutoriel HOT 1
- vscode+platformIO is giving me errors when compiling version 0.6! HOT 1
- Client-side display of websocket data
- Thanks - very nice
- esp switch scheduler
- Can you point me in the right direction please?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remote-control-with-websocket.