Group Assignment

Step 5: Starting PuTTY

Double-click the PuTTY icon to start the PuTTY client and begin configuration.

Figure 1.5: Initial PuTTY SSH & Serial client interface.

Simultaneous Validation

This side-by-side view demonstrates both screens displaying real-time distance measurements.

Figure 1.10: Double validation of HC-SR04 readings in real-time.

Step-by-Step Procedure

1. Step 1 – Upload Arduino Code: The microcontroller was programmed to listen for commands ("ON", "OFF", "BLINK") over serial and change the D6 pin accordingly.
   Arduino LED Control Code C++

   #define LED_PIN D6
   bool blinkMode = false;
   bool ledState = false;
   unsigned long lastBlinkTime = 0;
   
   void setup() {
     Serial.begin(115200);
     Serial.setTimeout(20);
     pinMode(LED_PIN, OUTPUT);
     digitalWrite(LED_PIN, LOW); // apagado
   }
   
   void loop() {
     if (Serial.available()) {
       String command = Serial.readStringUntil('\n');
       command.trim();
       
       if (command == "ON") {
         blinkMode = false;
         digitalWrite(LED_PIN, HIGH);
         Serial.println("ON");
       }
       else if (command == "OFF") {
         blinkMode = false;
         digitalWrite(LED_PIN, LOW);
         Serial.println("OFF");
       }
       else if (command == "BLINK") {
         blinkMode = true;
         Serial.println("BLINK");
       }
     }
     
     if (blinkMode) {
       if (millis() - lastBlinkTime > 300) {
         lastBlinkTime = millis();
         ledState = !ledState;
         digitalWrite(LED_PIN, ledState ? HIGH : LOW);
       }
     }
   }

2. Step 2 – Verify Serial Communication: Run the serial monitor and type "ON", "OFF" or "BLINK" to ensure hardware reactions.
   

   Figure 2.6: Verifying led reactions via serial text lines.
3. Step 3 – Close Serial Monitor: Important! You must close the Serial Monitor before launching the Processing application, otherwise, the serial port will be locked and busy.
4. Step 4 – Run Processing Interface: Open and run the custom Processing script. This script opens a COM port at 115200 and renders interactive graphical buttons ("ON", "OFF", "BLINK") to control the board.
   Processing Graphical Interface Code Java

   import processing.serial.*;
   
   Serial myPort;
   String status = "OFF";
   
   void setup() {
     size(430, 500);
     smooth();
     textAlign(CENTER, CENTER);
     println(Serial.list());
     myPort = new Serial(this, "COM3", 115200);
     myPort.clear();
   }
   
   void draw() {
     background(245);
     fill(0);
     textSize(28);
     text("LED Control", width/2, 60);
     
     fill(120);
     textSize(14);
     text("ON / OFF / BLINK", width/2, 90);
     
     // STATUS BOX
     fill(255);
     rect(50, 120, 330, 100, 20);
     
     fill(0);
     textSize(18);
     text("Status", width/2, 150);
     
     fill(status.equals("ON") ? color(0,200,100) :
          status.equals("BLINK") ? color(0,120,255) :
          color(150));
     textSize(28);
     text(status, width/2, 190);
     
     // BUTTONS
     drawButton(60, 270, 90, 70, "ON");
     drawButton(170, 270, 90, 70, "OFF");
     drawButton(280, 270, 90, 70, "BLINK");
   }
   
   void drawButton(float x, float y, float w, float h, String label) {
     boolean hover = mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h;
     noStroke();
     fill(hover ? color(80) : color(50));
     rect(x, y, w, h, 15);
     
     fill(255);
     textSize(16);
     text(label, x + w/2, y + h/2);
   }
   
   void mousePressed() {
     if (mouseY > 270 && mouseY < 340) {
       if (mouseX > 60 && mouseX < 150) {
         send("ON");
         status = "ON";
       }
       if (mouseX > 170 && mouseX < 260) {
         send("OFF");
         status = "OFF";
       }
       if (mouseX > 280 && mouseX < 370) {
         send("BLINK");
         status = "BLINK";
       }
     }
   }
   
   void send(String cmd) {
     myPort.write(cmd + "\n");
     println("Sent: " + cmd);
   }

Step 2: Project Settings Configuration

In this stage, the critical communication parameters between the mobile interface and the board hardware are defined in the properties sidebar:

• Connection Type: Wi-Fi Access Point (allows the board to broadcast its own network)
• Motherboard: XIAO ESP32-C3
• Communication Module: Built-in ESP32 Wi-Fi module
• Baud Rate: 115200 (stable serial diagnostic transfer speed)
• SSID Name: IoT_UP
• Password: Configured securely

Figure 3.3: Configuring project wireless properties.

🔹 Step 4: Source Code Generation

By clicking on "Get Source Code", RemoteXY automatically compiles network structures, control arrays, sync arrays, and headers.

Figure 3.6: Generation tab.

Figure 3.7: Export structures.

Figure 3.8: Complete source code ready for import.

Step 7: Media Image Embedding

We loaded a custom image inside the interface to improve graphical appearance and design.

Figure 4.8: Complete visual mockup layout with active image element.

Microcontroller Programming (Bluetooth Serial)

Open Arduino IDE, connect the ESP32 board, select the ESP32 Dev Module, and program the controller to act as a Bluetooth host receiving serial char commands:

Arduino Bluetooth Serial Code C++

#include "BluetoothSerial.h"

BluetoothSerial SerialBT;
const int ledPin = 2; // LED Pin representation

void setup() {
  SerialBT.begin("ESP32-Bluetooth"); // Bluetooth broadcast name
  pinMode(ledPin, OUTPUT);
}

void loop() {
  if (SerialBT.available()) {
    char c = SerialBT.read();
    if(c == '1') {
      digitalWrite(ledPin, HIGH); // LED ON
    } else if (c == '0') {
      digitalWrite(ledPin, LOW);  // LED OFF
    }
  }
}

Figure 4.16: Confirming successful code upload.

Overall Testing and Validation Diagram

This diagram summarizes our overall exploration of different physical communication and software layers.

Figure 5.1: Overall systematic structure of weekly interface lab work.