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