Week 11

Networking and Communications Week

During Networking and Communications Week, we carried out our activities in the Universidad del Pacífico's computer lab. Initially, the topic was new to us, so we dedicated time to researching key concepts such as communication protocols, networks, and tools like MQTT.

Then we moved on to the practical stage, where we explored different platforms, programs, and applications for establishing communication between devices. In the process, we conducted several tests; some didn't work at first due to configuration and connection errors, but this allowed us to better understand how the systems worked and correct them.

Finally, we successfully established communication between two types of boards using the MQTT protocol, connecting the devices through a common network. This allowed us to exchange data in real time and understand how multiple nodes can be integrated into a distributed system.

This experience was key to strengthening our skills in device communication, problem-solving, and collaborative work, as well as opening up new possibilities for future connected (IoT) projects.

Week 3 cover

Assignment Requirements

Group assignment

  • Measure the power consumption of an output device.Send a message between two projects.
  • Document your work to the group work page and reflect on your individual page what you learned.

Individual assignment

  • design, build and connect wired or wireless node(s) with network or bus addresses and a local input and/or output device(s).

Progress Status

This is for reporting progress (not for visitors to click).

Group work Done

Group page link + notes added.

Press-fit kit Done

Missing final photos and conclusions.

Downloads Done

Upload .zip with source files.

Assignment Requirements

Learning outcomes

  • Demonstrate workflows used in network design.
  • Implement and interpret networking protocols and/or communication protocols.

Have you answered these questions?

  • Linked to the group assignment page.✅
  • Documented your project and what you have learned from implementing networking and/or communication protocols.✅.
  • Explained the programming process(es) you used.✅.
  • Ensured and documented that your addressing for boards works.✅.
  • Outlined problems and how you fixed them.✅.
  • Included design files (or linked to where they are located if you are using a board you have designed and fabricated earlier) and original source code.✅.
  • Included a ‘hero shot’ of your network and/or communications setup.✅.

Weekly planning

During the week, we carried out various activities that presented significant challenges but were also very rewarding, especially due to the opportunity to share and learn as a team. We met virtually with our colleagues at the node and participated in lab meetings, which allowed us to organize ourselves and conduct open workshops in different spaces. In these sessions, we reviewed and worked with input devices, understanding their operation and their importance in capturing data from the environment for subsequent processing in electronic systems.

Single image

Gruop Work- Networking and Communications Week

During Networking and Communications Week, we explored the fundamental principles of communication between electronic devices, a key aspect in the development of IoT (Internet of Things) systems. This week focused on understanding how different boards and systems can exchange information over networks using specific protocols such as MQTT.

Problems

  • Projects were unable to connect to each other.
  • Communication failures between devices.

Diagnosis

  • Potential errors in physical connections were identified.
  • Incorrect configurations were detected in the software and the MQTT broker.

Solutions

  • Cable connections were checked and properly secured.
  • The software configuration on each device was verified and corrected.

Tools Used

Installation of MQTTX (MQTT client):

MQTTX was used, whose chat-based interface facilitates interaction and understanding of the data flow. This tool allows:

  • Establishing multiple MQTT connections simultaneously.
  • Performing quick connection tests (MQTT/MQTTS).
  • Easily subscribing to and publishing messages.

MQTT Server Configuration

  • The MQTT broker was configured to allow communication between devices.
  • Quick copy options were added for topics, broker, and host.
  • Whitespace detection was implemented in topics to prevent errors caused by leading or trailing spaces.

More Information

For more details about the group work and collaborative development, visit the following link:
View Group Documentation

Single image

Difficulties

During the group assignment, I was able to better understand how MQTT communication works between devices connected on the same local network. Through testing with the ESP32-C3, MQTTX, and the OLED display, I learned how data can be transmitted and visualized in real time using IoT communication protocols.

One of the main difficulties encountered was related to the micro servo, which did not respond correctly to the signals sent from another computer. This required additional testing, debugging, and adjustments in both the code and communication configuration to better understand the system behavior.

This experience helped me strengthen my knowledge of networking, hardware-software integration, and troubleshooting processes, while also reinforcing the importance of iterative testing to achieve stable and reliable communication between devices.

Video

Individual Assignment – Networking and Communications

In this assignment, the main objective was to explore networking and communication between electronic devices using the ESP32-C3 microcontroller. Different tests were carried out to understand how data can be transmitted, received, and visualized in real time through communication protocols and connected systems.

For these experiments, the PCB previously developed during the Electronics Production assignment was reused, allowing continuity with earlier work while expanding its functionality for networking and communication applications. This demonstrated that the same custom board can be adapted for multiple exercises and integrated into different interactive systems.

Additionally, several components such as OLED displays, sensors, and communication interfaces were tested to validate the behavior of the system and improve the interaction between hardware and software. These activities also contributed to the development of the final project and the mobile laboratory concept.

Components List (USD)

# Item Description Qty Unit Unit Price (USD) Total (USD) Purchase Location
1 XIAO ESP32-C3 1 UNIT 16.22 16.22 J6 Soluciones Tecnológicas
2 LCD Display 4x20 1 UNIT 5.41 5.41 NYABBYCORP S.A.C
3 OLED Display 0.96 (4 pins) 1 UNIT 5.14 5.14 NYABBYCORP S.A.C
4 SMD Resistor 1206 (1K ohm) 30 PCS 0.27 8.11 NYABBYCORP S.A.C
5 Male Header 40 pins 10 UNIT 0.27 2.70 NYABBYCORP S.A.C
6 Female Header 40 pins 10 UNIT 0.27 2.70 NYABBYCORP S.A.C
7 Solder Wick 1.5 mm 1 UNIT 1.89 1.89 NYABBYCORP S.A.C
8 DHT11 Module 2 UNIT 2.16 4.32 NYABBYCORP S.A.C
TOTAL $59.73 USD

RemoteXY WiFi Control with XIAO ESP32-C3

1. Introduction

In this exercise, RemoteXY was used to develop a remote control interface for a mobile device (in this case, an iPad), allowing interaction with a XIAO ESP32-C3 board via a WiFi connection. The programming was done in the Arduino IDE, integrating different electronic components to achieve a real-time interactive system.

2. Creating the Interface in RemoteXY

  1. Go to: https://remotexy.com
  2. Access the Online Editor.
  3. Design the interface by adding:
    • An ON/OFF button to control the system.
    • A data display field (status or information from the board).
  4. Configure the connection type as WiFi.
  5. Select the board: ESP32 (compatible with XIAO ESP32-C3).
  6. Click on “Get Source Code” and copy the generated code.

3. Configuration in Arduino IDE

  1. Open the Arduino IDE.
  2. Install the RemoteXY library from the Library Manager.
  3. Select the board: XIAO ESP32-C3.
  4. Paste the code generated by RemoteXY.
  5. Configure the WiFi network settings:
#define REMOTEXY_WIFI_SSID "YOUR_WIFI"
#define REMOTEXY_WIFI_PASSWORD "YOUR_PASSWORD"

4. Hardware Integration

During the project development, the following components were integrated:

  • OLED display: used to show the number of times the system was activated (power-on counter).
  • RGB LED (3 colors): used to visualize state changes based on interaction from the iPad.

These components improved the visualization of the system behavior in real time.

5. Uploading the Program

  1. Connect the XIAO ESP32-C3 to the computer.
  2. Select the correct port.
  3. Upload the code.
  4. Open the Serial Monitor to verify the connection and obtain the device's IP address.

6. Connecting from the iPad

  1. Ensure the iPad is connected to the same WiFi network.
  2. Open the RemoteXY app or a web browser.
  3. Enter the IP address shown in the Serial Monitor.
  4. View the interface (ON/OFF button and data display).

7. Functionality Test

  1. Press the ON button on the iPad.
  2. Verify system response:
    • The RGB LED changes color.
    • The OLED screen updates the activation count.
  3. Confirm real-time communication via WiFi.

8. Results

Effective wireless communication was established between the iPad and the XIAO ESP32-C3 via WiFi. The integration of RemoteXY, the OLED display, and the RGB LED enabled the creation of an interactive system, demonstrating successful integration of hardware, software, and IoT communication.

Single image

The RemoteXY interface was configured directly from the web platform by accessing the online editor, where the control elements such as buttons and data displays were added visually. Then, the WiFi connection mode and the ESP32 board were selected, allowing the platform to automatically generate the source code used later in the Arduino IDE for communication with the XIAO ESP32-C3.

Single image

The RemoteXY interface was configured from the online editor according to the project requirements and the previous programming already developed for the custom ESP32-C3 PCB. Different interface elements such as buttons, status displays, and control options were added to interact with the system in real time.

During the configuration process, the connection type was selected depending on the communication method required for the project, such as WiFi or Bluetooth. In this case, WiFi communication was used to allow wireless interaction between the mobile device and the XIAO ESP32-C3 through the Arduino IDE environment.

After defining the interface characteristics, RemoteXY automatically generated the source code, which was later integrated into Arduino IDE together with the previous programming developed for the PCB, enabling communication, visualization, and remote control of the system.

Código: RemoteXY + OLED + RGB + Servo   |   XIAO ESP32-C3 
//////////////////////////////////////////////
//        RemoteXY include library          //
//////////////////////////////////////////////

#define REMOTEXY_MODE__WIFI_CLOUD

#include <WiFi.h>
#include <RemoteXY.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ESP32Servo.h>

// RemoteXY connection settings 
#define REMOTEXY_WIFI_SSID "FABLAB-UNI"
#define REMOTEXY_WIFI_PASSWORD "fablabuni321"
#define REMOTEXY_CLOUD_SERVER "cloud.remotexy.com"
#define REMOTEXY_CLOUD_PORT 6376
#define REMOTEXY_CLOUD_TOKEN "b20f9f912916ebac532a12c0555cb59a"
#define REMOTEXY_ACCESS_PASSWORD "1234"

#pragma pack(push, 1)  
uint8_t const PROGMEM RemoteXY_CONF_PROGMEM[] = {
255,5,0,1,0,58,0,19,0,0,0,73,84,73,78,69,82,65,78,84,
69,0,31,1,106,200,1,1,3,0,10,28,11,48,48,48,4,26,31,79,
78,0,31,79,70,70,0,14,16,71,73,27,77,0,94,26,70,30,111,39,
39,16,26,37,0 };

struct {
  uint8_t pushSwitch_01;
  uint8_t editTime_01_hour;
  uint8_t editTime_01_minute;

  uint8_t led_01_r;
  uint8_t led_01_g;
  uint8_t led_01_b;

  uint8_t connect_flag;
} RemoteXY;   
#pragma pack(pop)

// OLED CONFIG
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_ADDR 0x3C
#define SDA_PIN D4
#define SCL_PIN D5

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

// PINES
#define PIN_R D3
#define PIN_G D2
#define PIN_B D1
#define PIN_SERVO D7

Servo miServo;

void setup() 
{
  RemoteXY_Init ();

  pinMode(PIN_R, OUTPUT);
  pinMode(PIN_G, OUTPUT);
  pinMode(PIN_B, OUTPUT);

  miServo.attach(PIN_SERVO);

  Wire.begin(SDA_PIN, SCL_PIN);
  display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR);
  display.clearDisplay();

  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 0);
  display.println("Sistema iniciado");
  display.display();
}

void loop() 
{ 
  RemoteXY_Handler ();

  static uint8_t lastState = 0;
  static int colorIndex = 0;

  if (RemoteXY.pushSwitch_01 == 1 && lastState == 0) {
    colorIndex++;
    if (colorIndex > 5) colorIndex = 0;
  }

  lastState = RemoteXY.pushSwitch_01;

  if (RemoteXY.pushSwitch_01 == 1) {

    switch (colorIndex) {
      case 0:
        analogWrite(PIN_R, 255);
        analogWrite(PIN_G, 0);
        analogWrite(PIN_B, 0);
        break;
      case 1:
        analogWrite(PIN_R, 0);
        analogWrite(PIN_G, 255);
        analogWrite(PIN_B, 0);
        break;
      case 2:
        analogWrite(PIN_R, 0);
        analogWrite(PIN_G, 0);
        analogWrite(PIN_B, 255);
        break;
      case 3:
        analogWrite(PIN_R, 255);
        analogWrite(PIN_G, 255);
        analogWrite(PIN_B, 0);
        break;
      case 4:
        analogWrite(PIN_R, 255);
        analogWrite(PIN_G, 0);
        analogWrite(PIN_B, 255);
        break;
      case 5:
        analogWrite(PIN_R, 0);
        analogWrite(PIN_G, 255);
        analogWrite(PIN_B, 255);
        break;
    }

  } else {
    analogWrite(PIN_R, 0);
    analogWrite(PIN_G, 0);
    analogWrite(PIN_B, 0);
  }

  if (RemoteXY.pushSwitch_01 == 1) {
    miServo.write(90);
  } else {
    miServo.write(0);
  }

  display.clearDisplay();

  display.setCursor(0,0);
  display.println("ITINERANTE");

  display.setCursor(0,15);
  display.print("BUTTON: ");
  display.println(RemoteXY.pushSwitch_01 ? "ON" : "OFF");

  display.setCursor(0,30);
  display.print("RGB:");
  display.print(colorIndex);
  display.println("");

  display.setCursor(0,45);
  display.print("Hora: ");
  display.print(RemoteXY.editTime_01_hour);
  display.print(":");
  display.println(RemoteXY.editTime_01_minute);

  display.display();

  RemoteXY_delay(100);
}

Video

A clear correlation can be observed between the programming developed in Arduino IDE and the RemoteXY platform, since both work together to establish communication between the mobile device and the custom ESP32-C3 PCB through a WiFi connection. Using the generated interface, it was possible to verify the program operation remotely by activating functions from a tablet or smartphone.

Through this communication, the RGB LED could be turned on and controlled wirelessly, while the OLED display simultaneously showed system information and status updates in real time. This demonstrated the correct integration between software, hardware, wireless communication, and interface visualization.

Additionally, this exercise maintains continuity with the final project proposal, since it explores how environmental information, remote interaction, and connected devices can be integrated into the mobile laboratory system using IoT communication technologies.

Video

Reflection

Initially, using RemoteXY and linking the Arduino (XIAO ESP32-C3) with the mobile application was a bit confusing. Setting up the connection, whether via Wi-Fi or Bluetooth, and understanding the generated code were the most challenging aspects.

It also took time to grasp how the interface created in the app relates to the variables within the code. However, through trial and error and continuous adjustments, I gradually gained a better understanding of the operation and communication between both environments.

Conclusion

Using RemoteXY allowed for the effective integration of Arduino with a mobile application, enabling real-time control of various components such as the RGB LED, the servo, and the OLED screen. This experience demonstrated how it is possible to develop interactive systems where the mobile device becomes a control interface.

Additionally, I reinforced my knowledge of programming, wireless connectivity, and IoT communication, understanding the importance of proper configuration and constant testing to achieve a stable and functional system.

Downloads