Skip to content

14. Interface and Application Programming

This week I worked on defining my final project idea and started to getting used to the documentation process.

Weekly Objectives

  • Group assignment:

  • Compare as many tool options as possible.

  • Document your work on the group work page and reflect on your individual page what you learned.

  • Individual assignment

  • Write an application for the embedded board that you made. that interfaces a user with an input and/or output device(s)

Group Assignment

In this week group assignment, I reviewed tool options for this week. You can find our full group documentation here.

Refelction of Group Assignment

I did the Processing infomation for the group. I also used it in our Biomedical Engineering class. It isreally helpful if you want to see really accurate graph based on a sensor. However, I still prefered serial plotter in Arduino IDE since it is easy to use for C++ code while Processing is Java-based.

Creating a Web Server

I first built the circuit on the breadboard. When I touched the touch sensor, the LED will light up. Then when I added the web server, the web server can tell whether the touch sensor is being touched or not.

Next, I used ChatGPT to create the code.

The Final Code:

http://172.16.110.138/

#include <WiFi.h>
#include <WebServer.h>


const char* ssid = "EngineeringStudent";       // <-- Change this
const char* password = "cls2024!"; // <-- Change this


WebServer server(80);


const int touchPin = 2;  // Touch sensor pin
const int ledPin = 8;    // LED pin


String currentStatus = "NO TOUCH DETECTED";


void setup() {
  pinMode(touchPin, INPUT);
  pinMode(ledPin, OUTPUT);


  Serial.begin(115200);
  Serial.println("Hello, Raspberry Pi Pico!");


  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }


  Serial.println("");
  Serial.println("WiFi connected!");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  server.on("/", handleRoot);
  server.begin();
  Serial.println("HTTP server started");
}


void loop() {
  int touch = digitalRead(touchPin); // Read touch sensor state


  if (touch == HIGH) {
    currentStatus = "TOUCH DETECTED!";
    Serial.println(currentStatus);
    digitalWrite(ledPin, HIGH); // Turn LED ON
  } else {
    currentStatus = "NO TOUCH DETECTED";
    Serial.println(currentStatus);
    digitalWrite(ledPin, LOW);  // Turn LED OFF
  }


  server.handleClient();
  delay(500);
}


void handleRoot() {
  String html = "<!DOCTYPE html><html><head><title>Touch Status</title>";
  html += "<meta http-equiv='refresh' content='1'>";
  html += "</head><body><h1>" + currentStatus + "</h1></body></html>";


  server.send(200, "text/html", html);
}

At first, the web server did not show anything. Then I figured out that for XIAO esp32-c3, I need an antenna to make the webserver work. After I put on an antenna, the web server worked pretty well.

Designing and Milling PCB

Next step is designing a PCB.

Here’s the schematic view of the PCB:

Here’s the 2D view of the PCB:

Here’s the 3D view of the PCB:

Then, I milled out two PCBs. One for backup.

Failed PCB

Here are the components I soldered onto the PCB:

When I tested the first PCB, the led did not light up when the touch is detected.

The Successful Version

I decided to re-solder using the abck up PCB. This time, the board worked perfectly!

Reflection of the Week

For this week, it was kinda easy since I already know how to build a circuit for the touch senor. Because I am not using a web server or interface in my final project, I completed this week really quick in order to have time to work on the machine and my final project. It was really cool to figure out how to make a web server. I would definitely explore more about it in the future.

File Download

You can download my files here.

AI Usage

I used ChatGPT to help me generate the code and fixing my wiring. You can found the whole conversation here.


Last update: June 3, 2025