# Individual Assignment: Application Interface for My Robotic Arm Lamp Prototype

## Project Title
Web-Based User Interface for Controlling a Robotic Arm Lamp Prototype

## 1) Assignment Objective
For this assignment, I designed and programmed an application that interfaces a user with output devices connected to my embedded board.

My final project is a robotic arm lamp, so I used this assignment as a functional prototype. I created a web-based control interface that allows the user to control:

- One servo motor
- One NeoPixel LED

The servo motor represents one joint of the robotic arm lamp, and the NeoPixel represents the lamp light.

## 2) Link to Group Assignment
Group assignment page:  
<https://fabacademy.org/2026/labs/chaihuo/docs/week15/>

In the group assignment, we compared different tool options for application and interface programming. Based on this comparison, I selected a web-based interface hosted directly on XIAO ESP32.

## 3) Project Overview
The user opens a webpage from a phone or laptop browser. The page includes:

- A slider to control servo angle
- A slider to control NeoPixel brightness
- Color control (color picker / color commands)
- A reset button to return to default state

XIAO ESP32 receives HTTP requests and then controls the servo motor and NeoPixel LED.

## 4) Relevance to Final Project
This prototype demonstrates the core interaction model of my final project.

| Final Project Function | Assignment Prototype |
| --- | --- |
| Robotic arm movement | One servo motor controls one joint |
| Lamp lighting | One NeoPixel controls color and brightness |
| User control system | Web-based control interface |
| Communication system | HTTP requests over Wi-Fi |

## 5) Input and Output Devices
### Input
The input is the web user interface in the browser.

- Servo angle slider: sends angle value from 0 to 180
- Brightness slider: sends brightness value from 0 to 255
- Color control: sends color command to NeoPixel
- Reset button: resets servo and light state

### Output
- Servo motor: moves one part of the robotic arm lamp
- NeoPixel LED: works as the lamp light

## 6) Technology Track
| Category | Tool / Technology |
| --- | --- |
| Embedded board | XIAO ESP32 |
| Programming language | Arduino C/C++ |
| User interface | HTML, CSS, JavaScript |
| Communication protocol | HTTP over Wi-Fi |
| Servo control | ESP32Servo library |
| LED control | Adafruit NeoPixel library |
| Application type | Web-based interface |

## 7) Method Comparison
| Method | How It Works | Advantages | Disadvantages |
| --- | --- | --- | --- |
| HTTP Web Server | ESP32 hosts webpage and receives control requests | Simple, wireless, no extra app, easy to document | Usually best on same Wi-Fi network |
| MQTT + Node-RED | Node-RED publishes MQTT messages to ESP32 | Scalable, good for multi-device systems | Needs broker, more setup and debugging |
| USB Serial + Python Tkinter | Desktop app sends serial commands by USB | Stable and easy to debug | Wired to computer, less suitable for smart lamp use |

## 8) Why I Chose HTTP Web Server
I chose HTTP Web Server because:

- It runs directly on XIAO ESP32 with built-in Wi-Fi
- It does not require external broker or mobile app
- It is simple to explain and test in browser
- It matches the wireless interaction expected for a smart lamp

Example requests:

- `/servo?angle=90`
- `/brightness?value=180`
- `/color?r=255&g=100&b=50`
- `/off`
- `/reset`

## 9) System Diagram
Phone / Laptop Browser  
-> Webpage UI (sliders and buttons)  
-> HTTP request over Wi-Fi  
-> XIAO ESP32 Web Server  
-> Servo Motor + NeoPixel LED

## 10) Hardware Used
| Component | Purpose |
| --- | --- |
| XIAO ESP32 | Main embedded board |
| Servo motor | Controls lamp arm / lamp head position |
| NeoPixel LED | Represents lamp light |

## 11) Wiring
### Servo
| Servo Wire | Connection |
| --- | --- |
| Signal | XIAO ESP32 D2 |
| VCC | External 5V |
| GND | Common GND |

### NeoPixel
| NeoPixel Pin | Connection |
| --- | --- |
| DIN | XIAO ESP32 D3 |
| VCC | 5V |
| GND | Common GND |

Important note: XIAO ESP32 GND, servo GND, NeoPixel GND, and external power GND must be connected together.

## 12) UI Design
The webpage includes:

- Servo angle slider (0 to 180)
- Brightness slider (0 to 255)
- Color control
- Turn off light button
- Reset button

The UI is intentionally simple so communication behavior is easy to test and debug.

## 13) Communication Between App and Board
The board runs as a web server.

When the user moves sliders or clicks buttons, JavaScript `fetch()` sends HTTP requests to ESP32 routes.  
ESP32 parses parameters and updates servo or NeoPixel state.

| User Action | HTTP Request | Board Action |
| --- | --- | --- |
| Move servo to 90 | `/servo?angle=90` | Servo moves to 90 |
| Set brightness to 180 | `/brightness?value=180` | NeoPixel brightness changes |
| Set color | `/color?r=255&g=100&b=50` | NeoPixel color updates |
| Turn off light | `/off` | NeoPixel turns off |
| Reset | `/reset` | Servo to 90, light reset |

## 14) Programming Process
1. Set up XIAO ESP32 in Arduino IDE.
2. Install required libraries (`ESP32Servo`, `Adafruit NeoPixel`).
3. Test servo separately.
4. Test NeoPixel separately.
5. Connect ESP32 to Wi-Fi and start web server.
6. Build HTML/CSS/JS UI and send requests using `fetch()`.
7. Implement and test each route (`/`, `/servo`, `/brightness`, `/color`, `/off`, `/reset`).

## 15) Source Code (Core Structure)
```cpp
#include <WiFi.h>
#include <WebServer.h>
#include <ESP32Servo.h>
#include <Adafruit_NeoPixel.h>

const int SERVO_PIN = D2;
const int NEOPIXEL_PIN = D3;
WebServer server(80);

void handleServo();
void handleBrightness();
void handleColor();
void handleOff();
void handleReset();

void setup() {
  // setup servo, neopixel, wifi, and routes
  server.on("/servo", handleServo);
  server.on("/brightness", handleBrightness);
  server.on("/color", handleColor);
  server.on("/off", handleOff);
  server.on("/reset", handleReset);
  server.begin();
}

void loop() {
  server.handleClient();
}
```

## 16) Problems Encountered and Fixes
### Problem 1: Unstable output behavior
Servo jitter and inconsistent LED behavior occurred with weak supply.

**Fix:** Use stable external 5V and common ground for all devices.

### Problem 2: Commands not updating output reliably
Some route parameters were not parsed correctly at first.

**Fix:** Standardize route handlers, validate input args, and debug via Serial Monitor.

## 17) Learning Reflection
This assignment helped me connect UI logic with physical hardware behavior for my final project.  
I learned that robust interaction requires both clear communication protocol design and stable hardware power design.

## 18) Submission Assets
- Original source code: included in project repository
- App code screenshot: to be inserted
- Hero shot (app controlling board): to be inserted