GUI-O series: Building Android GUI with ASCII commands (IoT with ESP32)

kpoopk · October 14, 2023, 1:14pm

EPISODE 20: GUI-O and ESP32 with MicroPython (MQTT with SSL/TLS support)

This example shows how to connect GUI-O with ESP32 via MQTT using MicroPython.

1. Setup MicroPython environment

The examples are based on ESP32-WROOM-32 board and PyCharm Community Edition IDE (Integrated Development Environment) with MicroPython plugin.

Note that any other ESP32 board can also be used. Also note that any other IDE that supports ESP32 & MicroPython can be used.

Step 1: Install MicroPython on ESP32

Download the ESP32 firmware (for more information and support for other boards, see the firmware download page)
Download the esptool for Linux or Windows (for more information, see esptool Git repository)
Extract the downloaded archive and move the downloaded firmware into the extracted esptool folder
Open the Terminal (Linux) or Command Prompt (Windows) and navigate to the extracted esptool folder
Connect ESP32 to the PC and erase the flash:

./esptool --chip esp32 --port erase_flash

NOTE #1: Replace in the command with the actual port where the ESP32 is connected. On Windows, this might be something like COM4 (or something like /dev/ttyUSB0 on Linux).

NOTE #2: If the command is not recognized on Linux, make the tool executable (for all users):

chmod a+x esptool
Finally, program the ESP32 firmware:

./esptool --chip esp32 --port --baud 460800 write_flash -z 0x1000 <.bin_file>

Step 2: Setup PyCharm IDE

Download and install PyCharm Community Edition for Windows or Linux
Run PyCharm and select Plugins (from welcome screen) or navigate to "File -> Settings -> Plugins"
Search for MicroPython plugin and install it
Create a New Project and specify desired project location
Navigate to "File -> Settings -> Languages & Frameworks -> MicroPython" and enable MicroPython
support
Select ESP8266 under "Device type"
Under "Device path" enter the actual port where the ESP32 is connected - on Windows, this might be something like COM4 (or something like /dev/ttyUSB0 on Linux)
Your project is now ready to run MicroPython code

2. Connect GUI-O and ESP32 via MQTT

Step 1: Create tokens for MQTT communication

Open GUI-O application and select "Add" from the top-right corner of the home screen
Select "IoT (Create device)" and add a new device (specifying arbitrary name and optional user name)
After adding a device, note the In and Out tokens which are required in the following step (tokens can be shared via email by pressing the "Share" icon)

Step 2: Modify and run the Python script

Connect ESP32 to the PC via USB cable
Download the main.zip package to your PC and extract the package
Copy main.py into the root of your PyCharm project and double-click on it within the PyCharm IDE
Set your router name and password
Set the In and Out tokens generated in Step 1
You can optionally disable SSL/TLS (this will make the connection insecure and is not recommended)
Right click on main.py, select Run 'Flash main.py' and confirm

NOTE: In case of any missing libraries, just click on "Fix" button and PyCharm will automatically install them.
After the upload, ESP32 should issue a soft-reboot and begin program execution

NOTE: All debug messages during program execution can be observed using any serial console terminal (baud rate 115200 bps).

Step 3: Using GUI-O application to interact with ESP32

Open GUI-O application and select "Connect" from the top-left corner of the home screen
Tap on the device created in Step 1
Wait for successful connection and try the example

If you have any questions or run into any problems, please let me know!

Best regards,
kl3m3n

kpoopk · November 26, 2023, 7:16pm

EPISODE 21: GUI-O and ESP32 with MicroPython (Bluetooth Low Energy)

This example shows how to connect GUI-O with ESP32 via Bluetooth Low Energy (BLE) using MicroPython.

1. Setup MicroPython environment

The examples are based on ESP32-WROOM-32 board and PyCharm Community Edition IDE (Integrated Development Environment) with MicroPython plugin.

Note that any other ESP32 board can also be used. Also note that any other IDE that supports ESP32 & MicroPython can be used.

Step 1: Install MicroPython on ESP32

Download the ESP32 firmware (for more information and support for other boards, see the firmware download page)
Download the esptool for Linux or Windows (for more information, see esptool Git repository)
Extract the downloaded archive and move the downloaded firmware into the extracted esptool folder
Open the Terminal (Linux) or Command Prompt (Windows) and navigate to the extracted esptool folder
Connect ESP32 to the PC and erase the flash:

./esptool --chip esp32 --port erase_flash

NOTE #1: Replace in the command with the actual port where the ESP32 is connected. On Windows, this might be something like COM4 (or something like /dev/ttyUSB0 on Linux).

NOTE #2: If the command is not recognized on Linux, make the tool executable (for all users):

chmod a+x esptool
Finally, program the ESP32 firmware:

./esptool --chip esp32 --port --baud 460800 write_flash -z 0x1000 <.bin_file>

Step 2: Setup PyCharm IDE

Download and install PyCharm Community Edition for Windows or Linux
Run PyCharm and select Plugins (from welcome screen) or navigate to "File -> Settings -> Plugins"
Search for MicroPython plugin and install it
Create a New Project and specify desired project location
Navigate to "File -> Settings -> Languages & Frameworks -> MicroPython" and enable MicroPython
support
Select ESP8266 under "Device type"
Under "Device path" enter the actual port where the ESP32 is connected - on Windows, this might be something like COM4 (or something like /dev/ttyUSB0 on Linux)
Your project is now ready to run MicroPython code

2. Connect GUI-O and ESP32 via BLE

Step 1: Run the Python script

Connect ESP32 to the PC via USB cable
Download the main.zip and ble_advertising.zip packages to your PC and extract the packages
Copy main.py and ble_advertising.py into the root of your PyCharm project and double-click on it within the PyCharm IDE
Right click on main.py, select Run 'Flash main.py' and confirm

NOTE: In case of any missing libraries, just click on "Fix" button and PyCharm will automatically install them.
Right click on ble_advertising.py, select Run 'Flash ble_advertising.py' and confirm
After the upload, ESP32 should issue a soft-reboot and begin program execution

NOTE: All debug messages during program execution can be observed using any serial console terminal (baud rate 115200 bps).

Step 2: Using GUI-O application to interact with ESP32

Open GUI-O application and navigate to "Settings -> Connections -> Bluetooth LE"
Tap "Available devices" to search for ESP32 Bluetooth device
Tap "BasicBLE" device and wait for successful connection
Close "Settings" and tap GUI-O initialize button from the home screen to try the example

If you have any questions or run into any problems, please let me know!

Best regards,
kl3m3n

kpoopk · December 2, 2023, 8:55am

EPISODE 22: GUI-O and ESP32 with MicroPython (Ethernet)

This example shows how to connect GUI-O with ESP32 via Ethernet using MicroPython.

1. Setup MicroPython environment

The examples are based on ESP32-WROOM-32 board and PyCharm Community Edition IDE (Integrated Development Environment) with MicroPython plugin.

Note that any other ESP32 board can also be used. Also note that any other IDE that supports ESP32 & MicroPython can be used.

Step 1: Install MicroPython on ESP32

Download the ESP32 firmware (for more information and support for other boards, see the firmware download page)
Download the esptool for Linux or Windows (for more information, see esptool Git repository)
Extract the downloaded archive and move the downloaded firmware into the extracted esptool folder
Open the Terminal (Linux) or Command Prompt (Windows) and navigate to the extracted esptool folder
Connect ESP32 to the PC and erase the flash:

./esptool --chip esp32 --port erase_flash

NOTE #1: Replace in the command with the actual port where the ESP32 is connected. On Windows, this might be something like COM4 (or something like /dev/ttyUSB0 on Linux).

NOTE #2: If the command is not recognized on Linux, make the tool executable (for all users):

chmod a+x esptool
Finally, program the ESP32 firmware:

./esptool --chip esp32 --port --baud 460800 write_flash -z 0x1000 <.bin_file>

Step 2: Setup PyCharm IDE

Download and install PyCharm Community Edition for Windows or Linux
Run PyCharm and select Plugins (from welcome screen) or navigate to "File -> Settings -> Plugins"
Search for MicroPython plugin and install it
Create a New Project and specify desired project location
Navigate to "File -> Settings -> Languages & Frameworks -> MicroPython" and enable MicroPython
support
Select ESP8266 under "Device type"
Under "Device path" enter the actual port where the ESP32 is connected - on Windows, this might be something like COM4 (or something like /dev/ttyUSB0 on Linux)
Your project is now ready to run MicroPython code

2. Connect GUI-O and ESP32 via Ethernet

Step 1: Run the Python script

Connect ESP32 to the PC via USB cable
Download the main.zip package to your PC and extract the package
Copy main.py into the root of your PyCharm project and double-click on it within the PyCharm IDE
Right click on main.py, select Run 'Flash main.py' and confirm

NOTE: In case of any missing libraries, just click on "Fix" button and PyCharm will automatically install them.
After the upload, ESP32 should issue a soft-reboot and begin program execution

NOTE: All debug messages during program execution can be observed using any serial console terminal (baud rate 115200 bps).

Step 2: Using GUI-O application to interact with ESP32

Open GUI-O application and navigate to "Settings -> Connections -> Ethernet"
Tap "Add device" icon and set the device name, IP (e.g., 192.168.1.123) and port (e.g., 34567) based on your configuration
Tap the created device and wait for successful connection

NOTE: Make sure that your Android device is connected to the same WiFi network as ESP32 device.
Close "Settings" and tap GUI-O initialize button from the home screen to try the example

If you have any questions or run into any problems, please let me know!

Best regards,
kl3m3n

kpoopk · January 16, 2024, 3:46pm

EPISODE 23: GUI-O push notification from any device

This example shows how to create custom push notification on any Internet enabled device (WiFi, Ethernet) and send it to a targeted Android device.

NOTE: Push notifications are available in GUI-O PRO version only.

The code from this example can be combined with other GUI-O examples using MQTT, Classic Bluetooth or Low Energy Bluetooth. See GUI-O application: Create high-end GUI for any device - GUI-O and BOARDS.

Software prerequisites:

Arduino IDE (https://www.arduino.cc/en/software)
Arduino source code (you can copy the source code from the snippet below, or download it here

/*
 * GUI-O Basic Push notification example
 *
 * Copyright (C) 2024, GUI-O Team
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */


#include <WiFiClientSecure.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>

static const char* ssid = "<ssid>"; // router name
static const char* pass = "<pass>"; // router password
static const char* appUuid = "<appUuid>"; // application uuid (retrieve from GUI-O app)
static const char* resource = "https://apis.gui-o.com:9501/gui-o/resources/api/sendPushNotification"; // request resource / endpoint

static const char* letsencrypt_ca = \
"-----BEGIN CERTIFICATE-----\n" \
"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\n" \
"-----END CERTIFICATE-----\n";

// Connection and requests handling
WiFiClientSecure client;
HTTPClient http;

// Icoming data buffer
String in;

void setup() {
  // Debug output
  Serial.begin(115200);
  
  // Connect WiFi (keep trying...)
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  // Start WiFi
  WiFi.begin(ssid, pass);
  while(WiFi.status() != WL_CONNECTED) { 
    Serial.print(".");
    delay(500); 
  }

  // Set root CA
  client.setCACert(letsencrypt_ca);
  
  Serial.println("WiFi connected!");
}

void loop() {
  while(Serial.available()) {
    const char c = Serial.read();
    in += c;
  
    if(c == '\n') {
      // Send push notification
      sendPushNotification("GUI-O push notification example", in.c_str(), appUuid);
      // clear buffer
      in = "";
    }  
  }  
}

void sendPushNotification(const char* title, const char* message, const char* appUuid) {
  DynamicJsonDocument jsonPayload(512);
  jsonPayload["appUuid"] = String(appUuid);
  jsonPayload["messageTitle"] = String(title);
  jsonPayload["messageText"] = String(message);

  String payload;
  serializeJson(jsonPayload, payload);

  if (http.begin(client, resource)) {
      http.addHeader("Content-Type", "application/json");

      const int httpCode = http.POST(payload);

      if (httpCode == HTTP_CODE_OK) {
        String response = http.getString();
        Serial.print("Response: ");
        Serial.println(response);
      } 
      else {
        Serial.print("Request failed. Status code: ");
        Serial.println(httpCode);
      }

      http.end();
  }
}

GUI-O application (https://play.google.com/store/apps/details?id=com.guio.guioapp)

Hardware prerequisites:

Any Internet enabled board (WiFi, Ethernet) that is compatible with Arduino IDE

1. Retrieve application's universally unique identifier (UUID)

Open GUI-O application, navigate to settings and select "Info"
Verify that the text "Available" is displayed under "Push notifications" entry
Make a note of "Application UUID" (you can share the "Application UUID" by tapping on it)

2. Modify and upload the code

Open Arduino IDE
Select "File -> Open"
Navigate to location where BasicPushNotification.zip archive was extracted (if downloaded)
Select BasicPushNotification.ino and confirm
Set your router name and password
Set your "Application UUID" (retrieved in form the GUI-O app)
Make sure that your board is connected to your PC
Ensure that the correct port and baud rate are selected
Press upload button to start code upload

3. Send a push notification

Open any serial terminal and connect to your board (baud rate 115200)
Enter your push notification message on the serial terminal - the text must be terminated with the \n (new line) character.
Observe the response on the serial terminal - if successful, message "Push notification sent" will be displayed
Check the push notification on your Android device

NOTE: Customize the sound, vibration, LED light, and priority of GUI-O app notifications by navigating to "Android settings -> Apps -> Manage apps".

If you have any questions or run into any problems, please let me know!

Best regards,
kl3m3n

system · July 14, 2024, 3:46pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
GUI-O : interfaces graphiques faciles sur smartphones Android Français	15	1990	June 17, 2023
Sketchkontrolle und Optimierung Deutsch	22	137	February 3, 2026
Hosting a web page on Giga R1 GIGA R1 WiFi	3	513	January 9, 2026
Waveshare oled module is not working Programming	23	198	September 24, 2025
Oled Kein Bild nur komische Streifen Deutsch	35	193	November 19, 2025

GUI-O series: Building Android GUI with ASCII commands (IoT with ESP32)

EPISODE 20: GUI-O and ESP32 with MicroPython (MQTT with SSL/TLS support)

1. Setup MicroPython environment

Step 1: Install MicroPython on ESP32

Step 2: Setup PyCharm IDE

2. Connect GUI-O and ESP32 via MQTT

Step 1: Create tokens for MQTT communication

Step 2: Modify and run the Python script

Step 3: Using GUI-O application to interact with ESP32

EPISODE 21: GUI-O and ESP32 with MicroPython (Bluetooth Low Energy)

1. Setup MicroPython environment

Step 1: Install MicroPython on ESP32

Step 2: Setup PyCharm IDE

2. Connect GUI-O and ESP32 via BLE

Step 1: Run the Python script

Step 2: Using GUI-O application to interact with ESP32

EPISODE 22: GUI-O and ESP32 with MicroPython (Ethernet)

1. Setup MicroPython environment

Step 1: Install MicroPython on ESP32

Step 2: Setup PyCharm IDE

2. Connect GUI-O and ESP32 via Ethernet

Step 1: Run the Python script

Step 2: Using GUI-O application to interact with ESP32

EPISODE 23: GUI-O push notification from any device

1. Retrieve application's universally unique identifier (UUID)

2. Modify and upload the code

3. Send a push notification

Related topics