Interface and Application Programming¶

alt text

For this week, we have to write an application that acts as an interface between a user, and an output/input device. I’ll be using the board that I made last week, and not much has changed since I already made a user interface last week to control an LED, so I’ll be working based on that. But before that, it’s time to schedule !!!

After meeting with our regional instructor, I’ve decided that I’ll be switching out my SSD1306 OLED Display with a 16x02 I2C LCD. So, I’m going to be experimenting with that this week.

16x02 I2C LCD¶

The 16x02 I2C LCD is a popular display module that combines a 16x2 character LCD screen with an I2C interface, simplifying connections and reducing the number of required pins. It allows users to easily display text and symbols on two lines with up to 16 characters per line, making it ideal for displaying basic information in Arduino and other microcontroller projects. I decided to change to this display because it’s more visible, and I won’t be needing any special characters for my final project.

Library Installation¶

Before I started, I installed a library for this LCD. On your Arduino IDE, open your library manager tab, and then enter “LiquidCrystal I2C”, then install the package by Frank de Brabander. alt text

Now that we have everything ready, let’s start !!!

Arduino Test¶

Before I use my actual board, we’ve gotta check for whether the LCD works, and for it’s I2C address. So, I went online and found this tutorial that was really helpful.

After following everything on that tutorial to the DOT, I got my LCD address (0x27), and made sure that the LCD worked !!!

alt text

XIAO ESP32 C3 Webserver 1¶

I already mentioned, but I’ll be using the same board that I used last week, so please check refer to it here if you’d like to find out the fabrication process.

I wanted a webserver where I could enter any text, and it’d be displayed on my LCD. So, I modified the code that I generated last week (which you can access here), and made sure to stick to theme. Here’s the code that I used, and an attached video of how it came out at the end !!!

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

const char* ssid = "DGI";
const char* password = "ummmmm";

WebServer server(80);

LiquidCrystal_I2C lcd(0x27, 16, 2); // set the LCD address to 0x27 for a 16 chars and 2 line display

void setup() {
  // Initialize Serial port
  Serial.begin(115200);

  // Initialize I2C communication for LCD
  Wire.begin();
  lcd.init();
  lcd.backlight(); // Turn on the backlight

  // Connect to Wi-Fi network
  Serial.println();
  Serial.println("Connecting to Wi-Fi");
  WiFi.begin(ssid, password);

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

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

  // HTML for the web page
  String html = "<html><head><style>";
  html += "body { font-family: Arial, sans-serif; background-color: #957dad; color: #ffffff; margin: 0; padding: 0; }";
  html += "h1 { text-align: center; margin-top: 50px; }";
  html += "form { text-align: center; }";
  html += "input[type='text'] { width: 300px; padding: 10px; font-size: 16px; margin-top: 20px; }";
  html += "input[type='submit'] { padding: 10px 20px; font-size: 16px; background-color: #5e5874; border: none; border-radius: 5px; color: #ffffff; cursor: pointer; }";
  html += "input[type='submit']:hover { background-color: #7d75a2; }";
  html += "</style></head><body>";
  html += "<h1>ESP32 Web Server with I2C LCD</h1>";
  html += "<form action='/text' method='GET'>";
  html += "<input type='text' name='lcd_text' placeholder='Enter text to display on LCD'>";
  html += "<input type='submit' value='Display on LCD'>";
  html += "</form>";
  html += "</body></html>";

  // Route for root / web page
  server.on("/", HTTP_GET, [html]() {
    server.send(200, "text/html", html);
  });

  // Route to handle displaying text on LCD
  server.on("/text", HTTP_GET, []() {
    if (server.hasArg("lcd_text")) {
      String text = server.arg("lcd_text");
      lcd.clear();
      lcd.setCursor(0, 0);
      lcd.print(text);
      server.sendHeader("Location", "/", true); // Redirect to main page
      server.send(302, "text/plain", "Text displayed on LCD: " + text);
    } else {
      server.send(400, "text/plain", "No text provided.");
    }
  });

  // Start server
  server.begin();
  Serial.println("HTTP server started");
}

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

alt text

XIAO ESP32 C3 Webserver 2¶

Now that we have that done, I wanted to simulate a card being scanned, so I redid the code from last week, but I changed things up a bit, getting the help of Chat GPT to figure out how to use the LCD library.

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

const char* ssid = "DGI";
const char* password = "ummm no";

WebServer server(80);

LiquidCrystal_I2C lcd(0x27, 16, 2); // set the LCD address to 0x27 for a 16 chars and 2 line display

void setup() {
  // Initialize Serial port
  Serial.begin(115200);

  // Initialize I2C communication for LCD
  Wire.begin();
  lcd.init();
  lcd.backlight(); // Turn on the backlight

  // Connect to Wi-Fi network
  Serial.println();
  Serial.println("Connecting to Wi-Fi");
  WiFi.begin(ssid, password);

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

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

  // HTML for the web page
  String html = "<html><head><style>";
  html += "body { font-family: Arial, sans-serif; background-color: #957dad; color: #ffffff; margin: 0; padding: 0; }";
  html += "h1 { text-align: center; margin-top: 50px; }";
  html += "form { text-align: center; }";
  html += "input[type='submit'] { padding: 10px 20px; font-size: 16px; background-color: #5e5874; border: none; border-radius: 5px; color: #ffffff; cursor: pointer; }";
  html += "input[type='submit']:hover { background-color: #7d75a2; }";
  html += "</style></head><body>";
  html += "<h1>ESP32 Web Server with Button</h1>";
  html += "<form action='/scan' method='GET'>";
  html += "<input type='submit' value='SCAN'>";
  html += "</form>";
  html += "</body></html>";

  // Route for root / web page
  server.on("/", HTTP_GET, [html]() {
    server.send(200, "text/html", html);
  });

  // Route to handle button press
  server.on("/scan", HTTP_GET, []() {
    lcd.clear();
    lcd.setCursor(0, 0);
    lcd.print("Success");
    lcd.setCursor(0, 1);
    lcd.print("ID: " + generateRandomID());
    server.sendHeader("Location", "/", true); // Redirect to main page
    server.send(302, "text/plain", "Redirecting...");
  });

  // Start server
  server.begin();
  Serial.println("HTTP server started");
}

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

String generateRandomID() {
  // Generate a random 9-digit number
  return String(random(100000000, 999999999));
}

This is how the code came out, and a video of it too:

alt text

Reflection¶

This week was pretty fun, I didn’t have any problems with anything, and I’m excited to see what else I can do more in the future. I’m spending more time on my final project and I think I’m going to be able to do it. On another note, next week is wildcard week and I’m also really excited for that.

-Wozer

This website was created using a template provided by Mr. Anith Ghalley and was used with his permission.*

Last update: June 28, 2024