Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
Hello,
Why RemoteMe.org? Easy to use, free, webpages can be opened on smartphone and desktop browsers, it's accessible around the world, and features out of the box components.
Assumptions- Controlling one ESP for the second ESP
- Simultaneously controlling ESP via the website
- After ESP is enabled, the status is to be set to the current one
- ESPs do not have to be on the same local network and no public IP or tunnels etc. are required
- Knowledge of html and javascript is not required
- Ease of modification
This time, I will show how to communicate with each other to Arduino (I will alternate using the name Arduino and ESP as I’ve use the Wemos D1 mini Pro and NodeMCU) and the website. We can use this type of project to control a switch connected to the ESP remotely via another ESP, as well as via a website. Both the ESP and the device with the website do not have to be in the same local network.
Video version for now only in Polish but steps are visible, so when you're stuck please check out the video. 😉
Principle of OperationESP1:
- RGB LED
- A single color LED
ESP2:
- A single color LED
- Two buttons
Website
- Switcher type component (switch)
- Component for choosing a color
When you press the first button on ESP2, the diode on both Arduino and the switch on the website will change to the opposite one.
When on ESP2, we press second button component color on the website and RGB LEDs will change to random.
The switch on the website changes the states of the individual LEDs on both ESP to the state corresponding to the switch. When the website changes color, the color of the RGB LED will change to the selected one.
ConnectionsIn the example, there is a diode with a common anode, at the RGB with a common cathode – we connect the cathode to ESP ground, of course. And it will require a slight code modification.
Creating a WebsiteIn the devices tab, select “new device” in the top right, then “new webpage." And fill in as on the screen:
After clicking "submit," we have created a new website. We extend it and click on index.html, then "edit."
We have to now add components. In the <body> section, add two lines:
<variable type="BOOLEAN" name="singleLed" label="Led" component="switcher"></variable>
<variable type="SMALL_INTEGER_3" name="rgbLed" label="RGB Led"
component="color" max="1023"></variable>
(More about components here)
max = “1023” means that when we send a white color it has the form {1023, 1023, 1023} instead of the standard 255, 255, 255. This is useful because by default ESP has a range of values entered into PWM 0-1023.
And we’re opening the page in a new tab. Click index.html -> open in new tab.
If we open the page also in the second tab and on one of them, we change the color or state of the diode – it will also change on the second page.
After refreshing the page, it has an incorrectly set color and state of the diode. to change it. we go to the variables tab. And in our variables we set “make persistent."
Similarly for the second variable. Now, after refreshing the page, the last state of the variable is set.
Program for Arduino1 – the One with ButtonsNew device -> New network device and complete:
This will be our Arduino with two buttons.
Generating the sketch: click “burger menu” and “code generator wizard."
In the wizard, select all variables, then complete the connection data, and finally click “view." Then, paste the file into our Arduino IDE and edit it to add button support and LED lights.
We need to add button support. I use the library:
- RBD_Button by Alex Taujenis
- RBD_Timer by Alex Taujenis
If you do not have it installed, you can add it from the Arduino IDE.
Also remember to install RemoteMe library in the newest version:
The completed code looks as follows (changes mark with "// New")
#define WIFI_NAME "home"
#define WIFI_PASSWORD "passwrodtowifi"
#define DEVICE_ID 2
#define DEVICE_NAME "ArduinoWithButtons"
#define TOKEN "~155_D49LDj@aBFXK."
#include <RBD_Timer.h>
#include <RBD_Button.h>
#include <RemoteMe.h>
#include <Variables.h>
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
boolean currentState=false; // New
uint8_t LEDpin = D5;// New
RBD::Button button1(D1);// New
RBD::Button button2(D2);// New
ESP8266WiFiMulti WiFiMulti;
RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);
//*************** CODE FOR CONFORTABLE VARIABLE SET *********************
inline void setRgbLed(int16_t i1, int16_t i2, int16_t i3) {remoteMe.getVariables()->setSmallInteger3("rgbLed", i1, i2, i3); }
inline void setSingleLed(boolean b) {remoteMe.getVariables()->setBoolean("singleLed", b);
}
//*************** IMPLEMENT FUNCTIONS BELOW *********************
void onRgbLedChange(int16_t i1, int16_t i2, int16_t i3) {
//your code here
}
void onSingleLedChange(boolean b) {
currentState=b;// New
digitalWrite(LEDpin, b ? HIGH : LOW);// New
}
void setup() {
WiFiMulti.addAP(WIFI_NAME, WIFI_PASSWORD);
while (WiFiMulti.run() != WL_CONNECTED) {
delay(100);
}
remoteMe.setupTwoWayCommunication();
remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);
remoteMe.getVariables()->observeSmallInteger3("rgbLed" ,onRgbLedChange);
remoteMe.getVariables()->observeBoolean("singleLed" ,onSingleLedChange);
pinMode(LEDpin, OUTPUT);// New
}
void loop() {
remoteMe.loop();
if (button1.onPressed()) {// New
setSingleLed(!currentState);// New
}// New
if (button2.onPressed()) {// New
setRgbLed(random(1024),random(1024),random(1024));// New
}// New
}
Let’s discuss the changes:
boolean currentState=false;
uint8_t LEDpin = D5;
RBD::Button button1(D1);
RBD::Button button2(D2);
The currentState variable stores the current state of a single diode, because after pressing the button we will change the led state it to the opposite one. LEDPin – we have a diode plugged into the D5 pin. Then declare and create buttons.
void onSingleLedChange(boolean b) {
currentState=b;
digitalWrite(LEDpin, b ? HIGH : LOW);
}
When we get information about the diode status change, we light up our diode according to the received state, and set the variable.
pinMode(LEDpin, OUTPUT);
Output as a pin mode:
if (button1.onPressed()) {
setSingleLed(!currentState);
}
if (button2.onPressed()) {
setRgbLed(random(1024),random(1024),random(1024));
}
After pressing the first button, we send the change of diode status to the opposite one, when the second button is pressed, we change the RGB color to something random.
As we have an open website with our components, and press the ESP buttons, the status of the components changes. Similarly, if we change the status of the diode on the page, it changes ESP single LED. When we change the color on the page, nothing happens because we have not implemented the method:
void onRgbLedChange(int16_t i1, int16_t i2, int16_t i3) {
//your code here
}
Let’s create a new device with the type of arduino, but with a different name then previous time. Similarly, we generate the code for Arduino2 (where the RGB and LED diodes are connected).
#define WIFI_NAME "wifi"
#define WIFI_PASSWORD "pass"
#define DEVICE_ID 1
#define DEVICE_NAME "Arduino LED"
#define TOKEN "~155_45678i9oDFGHJ"
#include <ArduinoHttpClient.h>
#include <RemoteMe.h>
#include <Variables.h>
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
ESP8266WiFiMulti WiFiMulti;
RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);
uint8_t R = D5;//New
uint8_t G = D6;//New
uint8_t B = D7;//New
uint8_t singleLed = D1;//New
//*************** CODE FOR CONFORTABLE VARIABLE SET *********************
inline void setRgbLed(int16_t i1, int16_t i2, int16_t i3) {remoteMe.getVariables()->setSmallInteger3("rgbLed", i1, i2, i3); }
inline void setSingleLed(boolean b) {remoteMe.getVariables()->setBoolean("singleLed", b); }
//*************** IMPLEMENT FUNCTIONS BELOW *********************
void onSingleLedChange(boolean b) {
digitalWrite(singleLed, b ? HIGH : LOW);//New
}
void onRgbLedChange(int16_t i1, int16_t i2, int16_t i3) {
analogWrite(R,1023-i1);//New
analogWrite(G,1023-i2);//New
analogWrite(B,1023- i3);//New
}
void setup() {
WiFiMulti.addAP(WIFI_NAME, WIFI_PASSWORD);
while (WiFiMulti.run() != WL_CONNECTED) {
delay(100);
}
remoteMe.setupTwoWayCommunication();
remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);
remoteMe.getVariables()->observeSmallInteger3("rgbLed" ,onRgbLedChange);
remoteMe.getVariables()->observeBoolean("singleLed" ,onSingleLedChange);
pinMode(R, OUTPUT);//New
pinMode(G, OUTPUT);//New
pinMode(B, OUTPUT);//New
pinMode(singleLed, OUTPUT);//New
}
void loop() {
remoteMe.loop();
}
Changes marked with "//New".
The only place requiring explanation is:
void onColorChange(int16_t i1, int16_t i2, int16_t i3) {
analogWrite(R,1023-i1);
analogWrite(G, 1023-i2);
analogWrite(B,1023- i3);
}
Because we have a common anode in the LED, -1023 “reverses the signal” so when the system gets 1023, 1023, 1023, it means white and then the pins should be set to 0.0.0. If You have RGB diode with common cathode, simply remove -1023
After starting both arduino and the website, we can control our ESP, and also the page shows the current values of variables.
We can open the page on a mobile phone then click on index.html -> “get anymous link” -> “QR code icon” which we scan and open on a smartphone using a modern browser (e.g. Chrome, Firefox).
SummaryAs I have shown here, we can control more ESPs, or transfer other variables, and modify the HTML code to change the appearance of our control panel as we desire.
I encourage you to read the quick start documentation.
Source codes: GitHub but I think it’s better to use the wizard and this course to generate / create the code yourself.
You can follow project FB:" https://goo.gl/Bx9HoC to get the latest updates. :-)
Cheers,
Maciek
Comments