Interface and application programming

Group homework:

• Compare as many tool options as possible.
• Document your work on the group work page and reflect on what you've learned on your individual page.

Individual Task

• Write an application for the built-in boardyou've created, which allows user interaction with one or moreinput and/oroutput devices.

Objective of the Activity

• The goal this week was to develop an application that allows direct interaction between the user and theXIAO ESP32-C3 microcontroller board, by implementing a graphical user interface (GUI) and using wireless communication.
• This activity aimed to integrate software and hardware into a functional system, allowing real-time control and monitoring of the devices connected to the microcontroller.

As a result, it was possible to establish a two-way communication between a mobile interface and the physical system of the smart pot, allowing the user to visualize information and execute actions remotely.

Link to Group Assignmenthttps://fabacademy.org/2026/labs/lima/Weeks/Week14/Week14.html

Learning Achieved

Through the group assignment, I learned to compare different interface and application development tools, analyzing their features, usability, and compatibility with embedded systems. I understood the importance of selecting the appropriate tool for user interaction, communication, and real-time data visualization. This activity helped me better understand how software interfaces can be integrated with hardware systems to create efficient and user-friendly applications.

INDIVIDUAL ASSIGNMENT

1. Objective of the Activity

This week's goal was to develop an application that allows direct interaction between the user and the XIAO ESP32-C3 integrated board using a graphical interface and wireless communication.

The activity made it possible to integrate hardware and software into a functional system for the smart pot, achieving real-time control and monitoring from a mobile device.

As a result, a two-way communication was implemented between the application and the embedded system, allowing information to be visualized and devices connected to the microcontroller to be controlled.

Machines and tools

Integrated input and output components

My Process

Tool Selection (RemoteXY)

The RemoteXYplatform was selected for the development of the user interface due to its ability to create graphical interfaces quickly and efficiently, without the need to develop a mobile application from scratch.

The main reasons for his choice were:

• Allows you to design graphical interfaces (GUI) in a visual and intuitive way
• Automatically generates the communication code between the interface and the microcontroller
• Is compatible with Arduino-based platforms and microcontrollers such asXIAO ESP32-C3
• Facilitates the implementation of wireless communication using WiFi modules such asthe ESP8266
• Significantly reduces application development time

Thanks to this tool, it was possible to quickly implement a functional mobile interface capable of interacting in real time with the smart pot system, allowing the control and monitoring of the system's status.

System Configuration

🔹 Access

Entered editor:
https://remotexy.com/en/editor/

🔹 Configuration (Properties)

The parameters were defined:

• Connection: Wi-Fi Access Point
• Board: XIAO ESP32-C3
• Module: ESP8266
• Baud Rate: 115200
• SSID: IoT_UP
• Password: 12345678

This allows the system to create its own WiFi network.

Interface Design (UI)

🔹 Components used:

• Switch → On/Off
• Action → Button
• Gauge → Indicator
• Text → "Smart Pot"

🔹 Design

The interface was organized considering:

• Visual hierarchy
• Ease of use
• Centered layout
• Landscape orientation

This improves the user experience.

Variable Configuration

Each element of the graphical interface was linked to internal variables automatically generated by the RemoteXY platform. These variables act as a communication bridge between the user interface and the microcontroller.

The following main variables were configured:

• switch_1button_1 → On/off control (persistent state)
• → Momentary activation (temporary event)

Each time the user interacts with these elements in the mobile application, the state of the variables changes and is sent to the microcontroller through the configured communication protocol.

These variables are read in real time by the microcontroller, allowing physical actions to be carried out such as activating digital outputs, controlling actuators or modifying the behavior of the system.

This demonstrates atwo-way interaction, where the user sends commands and the system responds based on that data.

Code Generation

The following were used:

"Get Source Code"

The system generated:

• Communication Code
• Variables
• WiFi Settings

Programming in Arduino IDE

🔹 Configuration:

• Board: XIAO ESP32-C3
• RemoteXY Bookcase Installed
• COM Port Selected

🔹 Implemented logic:

• Variable reading
• Output activation
• Real-time communication

Example:

• Switch → controls LEDs
• Button → activates temporary action

Physical System Integration

The physical integration made it possible to connect all the electronic components of the system to achieve functional communication between the mobile interface and the smart pot.

🔹 Components used:

• XIAO ESP32-C3ESP8266-01OLED (I2C)LED Display/Humidity Sensor → Main System Microcontroller
• → Communication Module WiFi (access point)
• → Real-time data visualization
• → System Input and Output Elements

🔹 Connections made:

• Allows serial communication between both devices TX (ESP8266) → RX (XIAO) RX (ESP8266) → TX (XIAO)

• Power supply: 3.3V and common GND
  All components share ground reference for system stability

Important technical considerations:

• TheESP8266-01 module operates exclusively at 3.3V
• Higher voltage can permanently damage the module
• Power stability must be ensured to prevent reboots or loss of connection
• Correct TX/RX connection is critical for serial communication

This integration allows the system to receive data from the mobile app and execute physical actions in real-time.

System Communication Flow

The system implements a communication architecture that connects the mobile interface to the hardware through multiple layers.

🔹 Data Flow:

Cell Phone (App RemoteXY )
↓
WiFi (ESP8266 – Access Point)
↓
Serial Communication (UART)
↓
XIAO ESP32-C3 (Processing)
↓
Salida (OLED / LED / Sensor)

🔹 Explanation of the flow:

• The user interacts with the mobile app
• The signal is sent by WiFi to the ESP8266
• The ESP8266 transmits the data by serial communication to the XIAO
• The microcontroller processes the information
• A physical action is executed (turn on LEDs, display data, activate alerts)

This flow demonstrates acomplete connected embedded system architecture, integrating interface, communication and control.

Final Result (HERO SHOT)

The system was able to:

• Cellular control
  ✔ Real-time communication
  ✔ OLED display
  ✔ Full integration

Problems and Solutions

Problem 1: The cell phone was not detecting the WiFi network

Solution:

SSID and ESP8266 configuration were verified.

Problem 2: OLED display was not displaying information

Solution:

Revised I2C connections and display direction.

Problem 3: Serial communication was failing

Solution:

Fixed TX and RX connections between the ESP8266 and the XIAO ESP32-C3.

Learning achieved

During this week I learned how to develop interfaces and applications to interact with embedded systems and visualize information in real time. I understood how to connect hardware with digital applications through serial communication, data processing, and graphical interface design.

I also learned:

• Establish communication between the microcontroller and the computer.
• To send and receive data via serial communication.
• To develop visual interfaces to display system information.
• Integrate sensors and output devices with digital applications.
• Organize data from hardware for visualization.
• To test the interaction between software and electronics in real time.

In addition, I understood the importance of:

• Design clear and functional interfaces.
• Maintain stable communication between hardware and software.
• Validate the data received from the microcontroller.
• Optimize the user experience through easy visualization.

This experience allowed to strengthen knowledge on integration between programming, electronics and digital interfaces, understanding how embedded systems can communicate with external applications for monitoring, control and visualization of information.

📋 Check-off List

1. Have you linked the group assignment page?

Yes. I linked to the Interface and Application Programming group page and documented on my individual page what I learned about graphical interfaces, WiFi communication and real-time control.

2. Did you document your process?

Yes. I documented the entire workflow, from RemoteXY selection, WiFi configuration, interface design, physical integration of the hardware, and programming in Arduino IDE.

3. Did you explain the UI you created and how you made it?

Yes. I designed a graphical interface in RemoteXY with buttons, switch, gauge and text to control and monitor the smart pot from the cell phone via WiFi.

4. Did you explain how your app communicates with the built-in board?

Yes. The app communicates via WiFi using the ESP8266 module and UART serial communication with the XIAO ESP32-C3 to send and receive data in real-time.

5. Did you explain the problems encountered and how did you solve them?

Yes. I documented issues such as WiFi connection failures, serial communication errors, and OLED display issues, along with the solutions applied.

6. Did you include original source code or screenshots of the code?

Yes. I included the code generated and adapted in the Arduino IDE using the RemoteXY libraries and the control logic implemented for the system.

7. Did you include a hero shot of the app working and communicating with the board?

Yes. I included evidence of the system working, showing the mobile interface connected via WiFi and real-time communication with the XIAO ESP32-C3 board and the OLED screen.

❓ Frequently Asked Questions

1. How can I compare the different tool options in the group assignment?

Answer:
To compare the different tools, I relied on real-world use cases and how each one integrates within a functional workflow. During the group work we analyzed different platforms for the development of interfaces and communication with microcontrollers.

In my case, I compared the tools based on their ease of use, compatibility with theXIAO ESP32-C3, stability in wireless communication, and speed of development. Finally, I selectedRemoteXY because it allows you to create graphical interfaces (GUIs) quickly and automatically generates the communication code between the mobile app and the microcontroller. This facilitated the implementation of a functional system in real time.

2. Do we need to contact a committee for group assignment?

Answer:
It is not necessary to contact a committee for group assignment. The important thing is to have a clear vision of the tools available and organize the work within the team.

In our project, the distribution of the group was done internally, assigning specific roles such as programming, electronics, design and system integration. This organization allowed progress to be made in an orderly and efficient manner without the need for an external assignment structure.

3. Is it OK to use the command-line interface (CLI)?

Answer:
Yes, it is totally valid to use the command-line interface (CLI), as long as the system also includes a graphical interface (GUI) when necessary.

In my project I mainly used a graphical interface developed withRemoteXY, which allowed the user to interact from the cell phone with the embedded system. However, I also used CLI tools like theArduino IDE and serial monitor for programming, code loading, and system debugging.

The combination of GUI for user interaction and CLI for development and debugging made it possible to build a complete, functional, and stable system.