Introduction: Control Two ESP Through Internet by WebPage or Buttons

By remoteme.org
About: Hello, I'm working on project https://remoteme.org whcih helps You link your devices together and control them throught internet

Assumptions

controlling one ESP for the second ESP

  • simultaneously controlling ESP via the websit
  • eafter 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 to modificate

This time, I will show how to communicate with each other two arduino (I will alternate using the name arduino and ESP 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.

Step 1: Video

Video version for now only in Polish but steps are good visible, so when u stuck please checkout video

Step 2: Principle of Operation

  • ESP1:
    • 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

Step 3: Connections

In 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.

Step 4: Creating a Website

In the Devices tab, select “New Device” on the top right, then “New WebPage”. And fill in as on the screen.

after clicking Submit. We have created a new website. We develop it and click on index.html, then “Edit”:

Step 5: Esit Webpage

Collapse webPage device then click at "index.html" then "Edit"

We have to now add components. In the section, add two lines:

<variable type="BOOLEAN" name="singleLed"  label="Led" component="switcher"><br><variable type="SMALL_INTEGER_3" name="rgbLed"  label="RGB Led" component="color" max="1023">

(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.

Step 6: Open Your WebPage

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.

Step 7: Make Ariable Remember Its State

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".

Screen

similarly for the second variable. Now, after refreshing the page, the last state of the variable is set.

Step 8: Adding Arduino1 - the One With Buttons

New Device -> New network device and complete as at screen

Step 9: Program Arduino1 - the One With 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 arduinoIDE

Also remember to install RemoteMe library in the newest version:

The completed code looks like in attachement arduino1.txt. The added lines mark with //New

I recomend to just add //new llines to your generated code rather copy from source

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 th firste 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 

}

Attachments

Step 10: Arduino2 Sketch

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).

File in arduino2.txt - new lines mark as //New

I recomend to just add //new llines to your generated code rather copy from source

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 (eg chrome, firefox)

Attachments

Step 11: Summary

As 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.

Cheers,

Maciek