Interface and Application Programming¶

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)

Learning outcomes

Implement a User Interface (UI) using programming and explore protocols to communicate with a microcontroller board that you designed and made.

Have you answered these questions?

Linked to the group assignment page.
Documented your process.
Explained the UI that you made and how you did it.
Explained how your application communicates with your embedded microcontroller board.
Explained any problems you encountered and how you fixed them.
Included original source code (or a screenshot of the app code if that’s not possible).
Included a ‘hero shot’ of your application running & communicating with your board.

Time Management¶

In order to keep track of my progess and manage time well, Mr. Rico put in a lot of emphasis on making a GANTT chart. Therefore, I decided to make one. Turns out it’s actually super HELPFUL. I went through this video to make my very own GANTT chart in goggle spreadsheets.

You can access my GANTT chart here.

Group Assignment¶

You can access the link to our group assignmemt here.

Individual Assignment¶

Webserver for RFID module¶

For this week’s individual assignment, I decided to develop a webserver which interacts with my RFID module. The vision is for my webserver to be able print the UID of the RFID card scanned and refresh the page when a new one is being scanned. It will print the latest RFID scanned.

I will be using the board I designed during week 9(Tsheyang-duino). You can get more details here.

Here are the connections I made with my PN532 RFID module and my Xiao board.

RFID module	Xiao board
VCC	3V3
GND	GND
TXD	D5
RXD	D4

To get more details on how to download the necesarry libraries and program the PN532 RFID module, go through my final project development page.

Programming

Here is the prompt I entered in ChatGPT to generate the code needed to create my webserver.

write a code for me to create a webserver with UI which programs my Xiao board, with a Wi-Fi antenna, and my RFID PN532 module. The webserver should be able to create a log which displays the RFID card scanned whenever one is scanned. (does this even implements UI though?)

Here is the code generated.

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

// Wi-Fi credentials
const char* ssid = "STUDENT";
const char* password = "LetMeIn!";

// Web server on port 80
WebServer server(80);

// Create PN532 instance on Serial1 (UART)
#define PN532_RX D5
#define PN532_TX D4
HardwareSerial mySerial(1);
Adafruit_PN532 nfc(PN532_TX, &mySerial);

// To store latest UID
String lastUID = "No card scanned yet";

void handleRoot() {
  String html = "<!DOCTYPE html><html><head><meta http-equiv='refresh' content='2'/>"
                "<title>RFID Log</title></head><body>"
                "<h1>Last scanned RFID UID:</h1>"
                "<p>" + lastUID + "</p>"
                "</body></html>";
  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(115200);
  delay(1000);

  // Start Wi-Fi
  Serial.println("Connecting to WiFi...");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConnected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // Start web server
  server.on("/", handleRoot);
  server.begin();
  Serial.println("Web server started");

  // Start RFID on Serial1
  mySerial.begin(115200, SERIAL_8N1, PN532_RX, PN532_TX);
  nfc.begin();

  uint32_t versiondata = nfc.getFirmwareVersion();
  if (!versiondata) {
    Serial.println("Didn't find PN532");
    while (1) delay(10);
  }

  // Configure board to read RFID tags
  nfc.SAMConfig();
  Serial.println("Waiting for RFID card...");
}

void loop() {
  server.handleClient();

  // Check for an RFID card
  uint8_t success;
  uint8_t uid[7];    // Buffer to store UID
  uint8_t uidLength; // UID length

  success = nfc.readPassiveTargetID(PN532_MIFARE_ISO14443A, uid, &uidLength);

  if (success) {
    Serial.print("RFID UID: ");
    String uidStr = "";
    for (uint8_t i = 0; i < uidLength; i++) {
      uidStr += String(uid[i], HEX);
      uidStr += " ";
    }
    Serial.println(uidStr);
    lastUID = uidStr;
    delay(1500); // debounce time
  }
}

Results

As you can see, the page refreshes and prints the UID of the latest RFID card scanned.

Thank you!

The template for this website was provided by Mr. Anith Ghalley and used with his permission

Last update: May 14, 2025