Wi-Fi Relay Controller

Difficulty

Power

Summary

Use relays effortlessly with this simple two-part setup! Simply connect any device you want to test or activate to the relay module; then use the in-built phone app to control them whenever you want. Set relays to toggle, timer, or momentary activation; and even set them go at certain times in the day. Great for automatic plant watering kits, testing devices, controlling lights or any other load up to 10 amps.

Materials Required

1	Arduino Compatible 8 Channel Relay Module	XC4418
1	Duinotech UNO r3 Main Board with Wi-Fi	XC4411
1	150mm Plug to Socket Jumper Leads - 40 Pieces	WC6028

Resources

View on Github Download Project Resources

Table of Contents

System overview
Integration and Assembly
Use
Debugging when things go wrong
How the code works: Relays
Future Improvements and Code Discussion
Further reading

System overview

This system is a pretty simple set up. As we know, the XC4411 is an UNO and ESP combined into a single board setup. The ESP portion will handle running a simple "web-app" type of program, which will then communicate with the UNO.

The UNO portion of the code will simply be responsible for activating and controlling the relays once it receives a command.

connects both the UNO and ESP together through the Serial port, which means we'll simply have to do some Serial.read() and Serial.write() to communicate between the two of them. To keep things simple we'll keep the data flow one way, so the ESP will never know how the relays look, which means the web-app will not be able to show what the actual relays look like, but we can make simple guesses.

Integration and Assembly

This is a simple one-module build, thanks to the simplicity of the

board.

Simply connect 5V and GND to the top two pins of the relay board, ( you should find that they are labelled VCC and GND). Then connect all the other IN# pins to the digital pins of the UNO. To keep things simple, we keep the pins in order, starting from Pin 2 and moving up to Pin 9 - This will match what's on the relay board, starting from the bottom side.

It's a reasonable idea to keep the green tab between the COM and GND pins on the relay board as well.

On the

you should find the row of dip-switches. This is used to set what mode the device is in.

(Ours is a little dirty due to how often we use it).

For this section we will want to program the UNO side of things, so use a pen or otherwise to set the dip-switches as such:

Pin	1	2	3	4	5	6	7	8
State	OFF	OFF	ON	ON	OFF	OFF	OFF	OFF

Then open up the uno/uno.ino portion of the code in the Arduino IDE editor, and upload as normal.

You should be able to test this side of things, by opening up the Serial Monitor and setting the options to:

No Line endings

115200 baud

Then type in a command such as:

>4a

If you really want to debug the code, you should find some defines on line 10 and 11 of the uno code. The one on line 10 will output text similar to below.

The other define (on line 11) will do nothing, and will simply turn the relay on. You want line 11 defined when you finalise the project.

Set the dip-switches as below.

Pin	1	2	3	4	5	6	7	8
State	OFF	OFF	OFF	OFF	ON	ON	ON	OFF

For this portion you need to open up the esp/esp.ino code in the Arduino IDE, and change the board type to Generic ESP8266 board.

Change the "Flash Size" of the program to be 4M (3M SPIFFS) - this will portion off some of the code so we can fit in our data/ folder. You will find our website code in the data folder, which we want to put all of it onto the ESP. Below is a screenshot of our settings.

Firstly, upload the code as normal. If you press upload and you find that the IDE is failing to upload, or you get some output like this:

This just means that the IDE is waiting for the ESP to reboot. Press the RESET button on the board when you see the IDE show this message. It should upload without a hitch.

Once the code is done, use the ESP Data Upload Tool (as highlighted in the image above) to upload our website onto the ESP. You will have to press the reset button similar to before. Once it is programmed, you can switch off the

dip-switch 7

and open the serial monitor to see what output the ESP has when you connect to the

"Relay Controller"

hotspot and navigate to

- or just continue on.

Similar to the uno code, we have another bunch of defines for debugging. you can enable or disable the debug messages this way.

Some important things to remember, when changing the code:

Always keep Flash size the same. If you change it, you will have to reupload both the code and the website.

When uploading, you must turn

dip-switch 7

to be

. Then turn it

OFF

when you want to interact with the Serial Monitor and the ESP.

If you change website code, you will have to use the data upload tool to copy it onto the flash, Still with the dip-switch 7 on.

Once the two halves are programmed, Finally switch the dip switches to the below.

Pin	1	2	3	4	5	6	7	8
State	ON	ON	OFF	OFF	OFF	OFF	OFF	OFF

This will connect the Serial of the ESP to the Serial of the UNO. Now it is only powered by USB and the Serial Monitor will not be connected to anything.

Use

Open up your phone's Wi-Fi and reboot the

- You should find that there is a new wireless network called "Relay Controller". Connect to it, then open up the browser and go to:

The website isn't much to look at, but it works. You should be able to press buttons and find the relays turned on and off. If you know how to make a website look good and want to have a shot of making this look better, have a go of developing a new data/ folder and submit it on the github issues tab, or

and

Debugging when things go wrong

If you find some things not working, connect your computer to the network ( alternatively, connect the ESP to your home network) and open up the website on your computer. You should be able to open up the "Chrome Inspector Tool" and find a console that will output messages.

A surefire way to test what is happening however, is to connect the Serial Monitor to the device ( with the dip-switches corresponding to what section you're testing) and test each portion of the code as you require.

For instance, you should find that with the uno code, sending >3a turns on relay 3, and >3d turns off relay 3.

Similarly, with the ESP code, pressing on the "Turn On Relay 1" button, you should get a >1a command output on the Serial Monitor.

How the code works: Relays

Future Improvements and Code Discussion

Obviously the website needs work, but any number of changes can happen to this project. You should still have some pins free and all you would have to do to add something is:

add a button to the website data.

make the button

fetch

a page, similar to how the relays are done.

build in that code on the ESP, to send the right command to the uno.

program the uno to accept the code and interpret it.

Below are some code segments to explain.

On the website is a button that we use to turn the relay on, it's a simple <button id='3' class='relay'></button> element which has the ID of what pin it is (not entirely, but close enough for this example).

Then we have some javascript code (simplified):

1  $('button.relay').on('click', function() {
2      //do this when a button with the class 'relay' is clicked
3  });

In this function we fetch() a new webpage, which points to /relay, and if the return status is ok, we add the class "isOn" to the button:

1  fetch('relay?relay=3&mode=activate').then(response => {
2      if (response.status == 200) {
3          button.addClass('isOn');
4      }
5  });

This means the website will be trying to access a new web page at http://192.168.4.1/relay with the parameters of ?relay=3&mode=activate. Let's check out the ESP code:

1     //firstly, set the handler function in the setup():
2      server.on("/relay", handleRelayCommand);
3  
4      // ... later ...
5  
6      void handleRelayCommand(){
7          String relayNumber = server.arg("relay");
8          String mode = server.arg("mode");
9          // ...
10      }

The command server.arg("relay"); simply gets whatever the argument "relay" has been set to. In our original request: ?relay=3&mode=activate this will be the string "3". Similarly, the mode argument is set to a string "activate"

We then simply do some checks, find what relay the "3" corresponds to and whether "activate" means we are turning on the relay, and send that as a command to the UNO:

1  Serial.write('>'); //start of command
2  Serial.write('3'); //relay 3
3  Serial.write('a'); //activate, or turn on

This will be interpreted by the UNO, which will then actually turn the relay on:

In the UNO.ino (again, simplified):

1      while(Serial.read() != '>') //do nothing until we get '>'
2          continue;
3  
4      char relay = Serial.read(); //next character is relay;
5      char mode = Serial.read(); //next character is mode;
6  
7      // ... do some checks, turn char into int, see if it's valid, etc.
8  
9      digitalWrite(theRelay, theMode);

One thing to note is that dataflow is only one direction in this code, There is no Serial.write() on the UNO to be Serial.read() by the ESP.