Fab Project Journey

Workplan

Here is a rough schedule for my final project.

Concept map

• ESP32 Firmware:

Responsibility: Handles physical interactions, such as button presses, LCD display, and wireless communication. Functions: Initiates communication with the web server to request topics. Displays received topics on the LCD screen.

• Web Server (Python Backend using Flask):

Responsibility: Manages online topic submission, stores topics in a database, and responds to ESP32 requests. Functions: Receives topic submissions from teachers via an online platform. Stores submitted topics in a database. Provides an endpoint for ESP32 to request topics. Manages feedback received from teachers.

Right now, I am trying to make a webserver using ESP8266. (I was able to make it and control the led!!!!)

Here are some things I did:

I used arduino ide to programme my esp.

Firstly, I downloaded the esp8266 board.

Then, I downloaded some libraries. These are some libraris that you’ll require:

Arduino Uno WiFi Dev Ed
Esp8266WiFi 
asyncwebserver

• Database:

Responsibility: Stores and retrieves submitted topics. Components: Topic Table: Stores information about submitted topics (e.g., title, teacher, timestamp).

• Online Topic Submission Platform:

Responsibility: Securely facilitates teachers’ submission of speech topics. Components: Topic Submission Form: Allows teachers to submit topics securely. Authentication: Ensures only authorized users (teachers) can submit topics.

• Feedback Mechanism:

Responsibility: Allows teachers to provide feedback on student speeches. Components: Approval Button: Marks a speech as approved, temporarily excluding the student from further selections. Disapproval Button: Maintains the student in the random selection pool.

• Communication Protocol (Wireless):

Responsibility: Enables communication between ESP32 and the web server. Components: HTTP Requests: ESP32 sends requests to the web server to get topics. HTTP Responses: Web server responds with requested topics.

• User Interface (Web Page):

Responsibility: Provides a user-friendly platform for teachers to submit topics and view information. Components: Topic Submission Form: Allows teachers to submit topics. Topics List: Displays submitted topics. Feedback Buttons: Allow teachers to provide feedback on student speeches.

Prototype!!

I have been working on making a cardbox protoptype for my final project and this is how it turned out!

Details: The led buttons will glow to show that the button is being pressed or that it functions because I haven’t attached the recording module yet because I have a lot of stuff to do. I’m considering using an adapter that can roughly supply 9V to power the direct switch power source.

Circuit sample diagram and simulations

Circuit diagram

I have also tried making a sample circuit diagram for my final project. I only DIDNOT include the resistors, capacitors , regulators and all. SO it is just a rough sketch:

Circuit simulation

I have done 2 different simulations for my FP. I did the first one in tinkercad and the other one in Wokwi due to some limitaions.

I did not use any resistors/ regulators/ capacitors for this!!

Use this link to view my simulation in tinkercad

Use this link to view my simulation in wokwi

First Final Project Board

Since on week 6 we had to programme our own board, so I decided to try to make a 1st draft of my final project board and programme it. I have been able to make a simple board with almost all the requirements for my FP. As a part of week 6’s assignment, I tried to do a simple programming; controlling a led using a button.

Here are the schematic and pcb deisgns which I designed using KIcad:

SO I used the Monofab SRM Milling machineto make my board.

After cutting my board, I listed the required components like this:

Soldering!!

This is how it looks!

I used the button example to control 2 leds using a tactile push button like this:

Here is how it looks!

video

Final board edition 2

For week 8, I decided to use xiao esp32c3 as my final project board and use the above link to view the whole process.

Here is the schematic design and the pcb design:

I edited the design and this is how it looks:

Here is how the board looks after soldering:

Testing

I am using arduino ide for programming and testing:

Here is a video me testing the blink code:

Here is a video of me using a tactile push button to control a led:

Programming

For now, I have been able to display the input I enter in the webpage on my serial monitor. Here is the code:

/*********

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

#include <Arduino.h>
#include <WiFi.h> // Use WiFi.h library for ESP32-C3
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";

// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/get">
    input1: <input type="text" name="input1">
    <input type="submit" value="Submit">
  </form><br>
  <form action="/get">
    input2: <input type="text" name="input2">
    <input type="submit" value="Submit">
  </form><br>
  <form action="/get">
    input3: <input type="text" name="input3">
    <input type="submit" value="Submit">
  </form>
</body></html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on <ESP_IP>/get?input1=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
    }
    // GET input2 value on <ESP_IP>/get?input2=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_2)->value();
      inputParam = PARAM_INPUT_2;
    }
    // GET input3 value on <ESP_IP>/get?input3=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = PARAM_INPUT_3;
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage);
    request->send(200, "text/html", "HTTP GET request sent to your ESP on input field (" 
                                     + inputParam + ") with value: " + inputMessage +
                                     "<br><a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {

}

Here’s a brief explanation of the main parts:

Network Setup: It connects to a Wi-Fi network using the provided SSID and password.

HTML Page: The index_html constant stores an HTML page with three input fields (input1, input2, input3) and submit buttons.

Request Handling: When a client accesses the root URL “/”, the server sends the HTML page to the client. When the server receives a GET request at “/get”, it extracts the value of the input parameter (input1, input2, or input3) from the URL query string. It then sends a response back to the client with the received input value and a link to return to the home page.

Error Handling: If the requested URL is not found, it returns a 404 error.

Loop: The loop function is empty since the server functionality is handled asynchronously.

And here is a video showing how it turned out!!!

Displaying the message in oled.

#include <Arduino.h>
#include <WiFi.h> // Use WiFi.h library for ESP32-C3
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "your-ssid";
const char* password = "your-ssid-password";

const char* PARAM_INPUT = "input";

// OLED settings
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// Button pin
#define BUTTON_PIN 3

// Define maximum number of input messages to store
#define MAX_MESSAGES 10

// Array to store input messages
String messages[MAX_MESSAGES];

// Variables to track number of stored messages
int numMessages = 0;

bool buttonPressed = false;

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  Wire.begin();

  pinMode(BUTTON_PIN, INPUT_PULLUP);

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for (;;);
  }
  display.clearDisplay();
  display.display();

  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult()!= WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", "<form action='/get' method='get'>"
                                     "Input: <input type='text' name='input'><br>"
                                     "<input type='submit' value='Submit'></form>");
  });

  // Send a GET request to <ESP_IP>/get?input=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    // Get input message and store it
    if (request->hasParam(PARAM_INPUT)) {
      storeMessage(request->getParam(PARAM_INPUT)->value());
    }

    // Send response to client without displaying the message
    request->send(200, "text/html", "Data received. Press the button to display.");
  });

  server.onNotFound(notFound);
  server.begin();
}

void loop() {
  // Check if the button is pressed
  if (digitalRead(BUTTON_PIN) == LOW) {
    buttonPressed = false;
    delay(1000); // Add debounce delay if needed
  }

  // Display random message only if the button is pressed
 if (digitalRead(BUTTON_PIN) == HIGH) {
    displayRandomMessage();
    buttonPressed = true; // Reset buttonPressed flag after displaying message
  }
}

void storeMessage(String message) {
  // Check if there's still space in the array to store the message
  if (numMessages < MAX_MESSAGES) {
    // Store the message in the array
    messages[numMessages++] = message;}
}

void displayRandomMessage() {
  if (buttonPressed && numMessages > 0) {
    int randomIndex = random(0, numMessages);
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0, 0);
    display.println("Message:");
    display.println(messages[randomIndex]);
    display.display();
    buttonPressed = true; // Reset buttonPressed flag after displaying message
  } else {
    Serial.println("No messages to display.");
  }
}      

And Since I already explained how to add the required libraries in the previous weeks, I will not be including the addition process of the libraries. So here is the output!

Changes made:

• SINCE THE OLED SCREEN WAS A BIT TOO SMALL, I SWITCHED TO 20X4 I2C LCD AGAIN!!!
• Cancelled the storing of inouts through webserver in a sd card.
• Switched to storing data in google sheets (Although I am still working on it).
• Did storing of data in arrays for the presentation.
• Changed the enclosure design to a pear
• Added piezo buzzer.
• Still working on the thumbs up and down buttons.

That’s it for the journey, now lets move on to the real project. It was a great journey and I was able to make a lott of changes in the past few months.

Click here to view my final project documentation

Files

• Design files

This website templete was used from Mr. Anith Galley with his permission.

Have A Good Day!

---

Last update: June 27, 2024