GUI-O IoT Example (Arduino)

(1)

(2)

The information contained in this tutorial is provided on an "as is" basis with no guarantees of completeness, accuracy, usefulness or timeliness and without any warranties of any kind whatsoever, express or implied. The GUI-O Team does not warrant that this tutorial and any information of material downloaded from the GUI-O site, will be uninterrupted, error-free, omission-free or free of viruses or other harmful items. You are solely responsible for determining whether GUI-O application is compatible with your equipment and other software installed on your equipment. You are also solely responsible for the protection of your equipment and backup of your data, and the GUI-O Team will not be liable for any damages you may suffer in connection with using, modifying, or distributing GUI-O application.

(3)

Required hardware

• ESP8266 WiFi module (throughout this example ESP-01S is used, but other ESP based modules such as Wemos D1, D1 mini, etc. can be used)

• Arduino Uno • LED

• 220 ohm resistor • Breadboard

• Breadboard jumper wires

Required software

• Arduino IDE

• GUI-O application

Step 1. ESP8266 programming

The ESP8266 board acts as a pass-through bridge. It is responsible for receiving messages from the GUI-O application and forwarding them to the microcontroller and vice versa.

Wiring connections

Wire the ESP8266 board and Arduino Uno as shown in the image and table below.

WARNING: During the programming of the ESP8266 board, the ATmega328 microcontroller must be removed from the Arduino Uno board.

(4)

ESP8266 Arduino Uno

GND GND

IO2 Not connected

IO0 GND* RX1 _{RX (pin 0)} TX1 _{TX (pin 1)} 3V3 3V3 EN 3V3 RST Not connected

1 Note that the ESP8266 uses 3V3 voltage levels, while the Arduino Uno uses 5V voltage levels. The RX and TX lines can be directly connected, but a safer option is to use a voltage divider to reduce

(5)

Upload the code

Follow the steps below:

1. Use a USB cable to connect the Arduino UNO to the PC.

2. NOTE: If you are using the ESP-01S module, make sure that it is started in bootloader mode. To select bootloader mode, the IO0 pin must be held low / GND on reset (the ESP8266 board can be reset by removing and reapplying its power supply).

3. Download the 'guio_esp8266' source code from:

https://www.gui-o.com/resources-esp8266-bridge.html

and follow the 'Quick start' instructions to upload the code to the ESP board. 4. NOTE: This example uses the ESP-01S module, but other ESP based modules

can also be used, e.g., Wemos D1, D1 mini, etc. In the latter cases, the module can be programmed directly via the USB port.

Also note that if ESP-01S module is used, open 'config.h' file and replace before compiling:

#define _GUIO_AP_BUTTON D4

with

#define _GUIO_AP_BUTTON 0

to ensure that the built-in LED works properly. If any other module is used, do not modify the 'config.h' file.

Step 2. Arduino Uno programming

Arduino Uno will be communicating over the serial interface with the ESP8266 board (prepared in Step 1. ESP8266 programming). Messages sent from Arduino to the ESP8266 board will be forwarded to the MQTT broker. Similarly, all messages received from the MQTT will be routed to the Arduino Uno through the ESP8266 board.

(6)

Wiring connections

Wire the ESP8266 board and Arduino Uno as shown in the image and table below.

WARNING: During the programming of the Arduino Uno board, the ATmega328 microcontroller must be present on the Arduino Uno board. The power supply to the ESP8266 board must be removed, otherwise it may interfere with the upload process. It is advised to program Arduino Uno before connecting the ESP8266 board.

ESP8266 Arduino Uno

GND GND

IO2 Not connected

IO0 Connected to 3V3

RX TX (pin 1)

TX RX (pin 0)

(7)

WARNING: Remember to connect the ESP8266 RX pin to Arduino Uno TX pin!

Connect the ESP8266 TX pin to Arduino Uno RX pin!

Wire the LED and Arduino Uno board as shown in the table below.

LED Arduino Uno

Anode (+) pin 9 through 220

ohm resistor Cathode (-) GND

NOTE: To force the ESP8266 to start in pairing (i.e., access point) mode during power-on, the Arduino Uno pin 13 (configured as input pin) should be connected to the GND

pin. Note that after first programming, the ESP8266 should start in pairing mode by

default.

During normal operation the Arduino pin 13 should be connected to the 5V pin to disable forced pairing mode.

The code

After including headers and setting up global variables, two callback functions are defined. One callback toggles the LED on / off and the other sets the LED brightness:

/* CALLBACK functions to register */ // toggle LED callback

static void handle_led_state(const String &payload) { if(payload.startsWith("0")) { analogWrite(ledPin, 0); } else if(payload.startsWith("1")) { analogWrite(ledPin, 255); } }

// slider LED brightness callback

static void handle_led_brightness(const String &payload) { const int value = payload.toInt();

if(value >= 0 && value <= 255) { analogWrite(ledPin, value); }

(8)

Next, we setup serial communication with ESP8266 board and register the widget callbacks. We also check if 'apPin' is connected to the GND; if it is, a command is sent to the ESP8266, which causes it to reboot into access point (AP) mode. AP is used to pair the ESP8266 with the GUI-O application:

/* INITIALIZATION / SETUP */

void setup() {

// start serial interface with 115200 bps

Serial.begin(115200);

// wait for serial interface connection success

while(!Serial) {}

// setup pin to toggle LED

pinMode(ledPin, OUTPUT);

// setup pin to read input pinMode(apPin, INPUT);

// 10k pull-down forces Esp8266 to AP mode if(digitalRead(apPin) == LOW) {

// delay before requesting reboot delay(1500);

Serial.println("!REBOOT_AP");

}

/* register callbacks for widgets:

* widget UID and callback function for each widget */

registerCallback("tg1", &handle_led_state); // LED toggle widget

registerCallback("sl1", &handle_led_brightness); // LED slider brightness widget

}

If the EEPROM of the ESP8266 board is blank (i.e., first ESP8266 programming), the AP mode should be booted by default. For normal operation (after pairing), connect the 'apPin' to 5V to disable forced boot to AP mode after power-on.

Finally, in the main loop we read any data available on the serial interface. When the

GUI-O application sends the initialization request (@init), the commands to create a toggle and a slider widget is sent as a response:

// INITIALIZATION REQUEST from GUI-O app?

if(inData.startsWith("@init")) {

// clear screen

Serial.print("@cls\r\n");

// create toggle widget tg1 (same UID as registered for callback)

(9)

When the user interacts with the widget on the GUI-O application side, the appropriate callback method is called, which toggles the LED or changes its brightness level:

// WIDGET INTERACTION BY THE USER?

else {

// try separate UID and payload

const int startIdx = inData.indexOf('@'); const int endIdx = inData.indexOf(' '); if(startIdx >= 0 && endIdx >= 0) {

// correct format

const String uid = inData.substring(startIdx+1, endIdx); const String payload = inData.substring(endIdx+1);

/* go through callbacks array

* complexity - best case O(1), worst case O(n) */

for(int i=0; i<COMPONENTS_BUFFER; i++) { if(components[i].uid == uid) {

// call appropriate callback based on widget UID

components[i].cb(payload); break; } } } }

For more information see the comments in the full source code:

arduino_led_control_mqtt_pre_paired.ino

Upload the code

1. Connect the Arduino Uno to the PC.

2. ATmega328 must be present on the Arduino Uno board. 3. Select the Arduino Uno board from Tools > Board.

4. Open the project arduino_led_control_mqtt_pre_paired.ino and upload the code.

(10)

5. Restart Arduino Uno using an external power source (recommended 7 to 12V). Ensure that wiring corresponds to the diagram shown in Figure 2.

Step 3. Application setup

1. Start the GUI-O application and select Settings > Quick pair > Direct device pairing .

2. Follow the pairing instructions. For additional information see the 'User's

device pairing' manual:

https://www.gui-o.com/resources.html#pairing

GUI-O IoT Example (Arduino)

Table of Contents

Required hardware

Required software

Step 1. ESP8266 programming

Wiring connections

Upload the code

Step 2. Arduino Uno programming

Wiring connections

The code

Upload the code

Step 3. Application setup