In this latest instalment of the Arduino and Protocoder programming course for makers, carrying on from the previous entry, we are going to create a new button that turns a relay on and off, as well as a timer to turn automatically it off.

Electrical circuit

In this entry, we are going to use a relay module that is connected to pin 2 of the ZUM board. We will be using an external device, in this case a 12 V LED strip, so a 12 V power source will be required.

The electrical connections we need to make are as follows:

The relay we have used supports 10 A at different voltages. To avoid damaging the relay, it´s important that the supported current is greater than that supplied to the system.

Arduino code

Relay-control variables, the checkAuto function, as well as two new cases in the switch block located in the checkIncomming function, have been included with respect to the Arduino code from the previous entry. The newly included variables are relay1Pin and nextTime, and they are declared as follows:

Pin 2 of the ZUM board will be used to activate or deactivate the relay (we will use a relay module that is properly equipped to protect the board).

The unsigned long type has been used for the nextTime variable to increase its range and allow the device to operate correctly for a longer time. To find out more about this variable type, visit the Arduino reference page.

The relay pin must be declared as output using the pinMode command. This occurs in the setup function, which is as follows:

To control the new operating modes, two new cases are created in the switch block of the checkIncomming function. Case 2 is used for manual relay-control mode and case 3, for automatic mode. We will program the Protocoder part accordingly so that the corresponding flag is sent for each mode.

The isOn variable is also created, which will indicate if the manual relay control has been activated. If it has, this variable will be set to true so that if a timer has been programmed, the relay won’t deactivate once the activation time elapses.

For manual relay control we will use case 2 of the switch:

From Protocoder we send a 0, which corresponds to “off”, and a 1 for “on”. The if condition determines which value has been sent, if it is 0, the isOn variable is set to false and the relay pin set LOW. Conversely, if it is 1, the isOn variable is set to true and the relay pin set HIGH.

For automatic relay control we will use case 3 of the switch:

From Protocoder, we send the time, in minutes, that the relay is to remain active. This value is multiplied by 60000 thereby converting it to milliseconds, the current value of millis (this returns the elapsed time in milliseconds since the board was turned on or reset) is then added, and the result is stored in the nextTime variable. We also activate the relay pin.

The new checkAuto function checks if the value of millis has exceeded that of the nextTime variable and if the isOn variable is false, that is, the manual relay control has not been activated from Protocoder.

If both conditions are met, the relay pin is deactivated. Consequently, the device connected to it turns off.

Protocoder codes

In Protocoder code, we are going to create a text box and a button for automatic operation mode, and another button with images that will manually activate and deactivate the relay pin.


The following code is used to create the new text box and the button that activates automatic mode:

The time value entered in the setSleep text box is stored in the timeToSend variable, which was created in the previous instalment. On pressing the setSleepBtn button, we assign the flag variable a value of 3 and we pass the flag and timeToSend parameters to the send function. This data will be processed in the Arduino code, changing the time from minutes to milliseconds.

We will use a button with images to manually control the relay and the button’s state will be controlled with a variable. We will also create variables to control the height (hImg) and width (wImg) of the image.

The images used have a width of 500 px and a height of 210, so we will use a scaling factor of 210/500 to adjust the height in accordance with the width, resulting in a correctly proportioned image.

The complete code for the button with images is:

The R1State variable is initialised to false given that in the Arduino code we have set the relay to be off when execution starts. Each time the button is pressed, R1State will alternate between false and true. In the button’s programming we use if conditions to determine the value of the R1State variable. If it is true we assign 1 to the relayStatus variable, and 0 if it is false.

We will also change the displayed image (on/off) in accordance with the state of the relayStatus variable. To change the image we use the commands relay1.setImage(“on.png”); and relay1.setImage(“off.png”);.


on off


The image change is produced when the button is pressed using the ui.jump(relay1); command, which creates a “pulse” effect.

To send the button’s state to the ZUM board we use the send(flag,relayStatus); command.