Week 15 - Interface and Application Programming

The group assignment reviewed interface options and compared how applications communicate with embedded devices. The complete group documentation is available on the lab page.

The individual assignment was to write an application that interfaces a user with an input or output device that I made. For this work I reused the conveyor belt developed in the machine/mechanical design assignment and added an interface to monitor object detection in real time.

The system detects when an object passes through the conveyor belt sensing area. The HC-SR04 measures distance, the XIAO ESP32-C3 processes the signal, and the Blynk web dashboard displays the process data. This turns the conveyor belt into a small monitoring station for counting cycles and measuring how long an object stays in the detection area.

I used the generic board made in the previous input/output work as the electronic base for the interface assignment. The XIAO ESP32-C3 was soldered to the board and the HC-SR04 ultrasonic sensor was connected to the available pins. Since the HC-SR04 echo signal can return 5 V, I used a resistor voltage divider before connecting the echo line to the ESP32-C3 input pin.

Before choosing the final interface platform, I compared two possible tools for the conveyor monitoring system: MIT App Inventor and Blynk. Both tools can be used to create interfaces for embedded systems, but they solve the problem in different ways. The comparison focused on dashboard creation, real-time data visualization, connection with the XIAO ESP32-C3, development time, and suitability for the final project.

MIT App Inventor is a strong option for building mobile applications with visual blocks, especially when the goal is to create buttons, labels, screens, and phone-based interactions. Blynk, on the other hand, is focused on IoT interfaces and already includes dashboard tools such as datastreams, charts, gauges, labels, switches, and device templates. For this assignment, the interface needed to behave more like an industrial monitoring dashboard than a conventional mobile app.

Interface Evidence

The following images document the interface environment of each program. App Inventor was evaluated through its block-based logic workspace, while Blynk was evaluated through its dashboard console with native widgets.

Why I Decided to Use Blynk

I decided to use Blynk because the assignment required an interface that could display live sensor values and process information without building a complete dashboard infrastructure from zero. In MIT App Inventor, I would have needed external tools to create the dashboard behavior, such as a database, web service, or communication layer for real-time visualization. Blynk already provides these dashboard functions natively.

Blynk was selected because it allows a fast IoT dashboard without building a complete web server from zero. The XIAO ESP32-C3 sends data to Blynk using virtual pins, and the web panel becomes the user interface.

1. Create a new Blynk template named LEAN STATION using ESP32 and WiFi as the hardware configuration.
2. Add a device from the template and copy the template ID, template name, and authentication token into the firmware.
3. Create the datastreams used by the dashboard: cycle count, cycle time, average time, process status, cycles per minute, distance, and reset.
4. Open the web dashboard editor and place the widgets: labels, gauges, chart, and reset button.
5. Assign each widget to its corresponding virtual pin.
6. Upload the firmware to the XIAO ESP32-C3 and verify that the device appears online in Blynk.
7. Move an object through the conveyor sensor area and verify that the dashboard updates in real time.

Each value from the firmware was mapped to a Blynk virtual pin. This structure made the interface easier to debug because each widget had a specific role in the monitoring system.

The firmware reads the ultrasonic sensor every 300 ms. When the measured distance is below the threshold, the system changes to Object detected and starts timing. When the object leaves the area, the program calculates the cycle time, updates the counter, sends the new values to Blynk, and changes the status to Area free.

#define BLYNK_TEMPLATE_ID "TMPL2_cwfk2-a"
#define BLYNK_TEMPLATE_NAME "LEAN STATION"
#define BLYNK_AUTH_TOKEN "PASTE_YOUR_BLYNK_AUTH_TOKEN_HERE"

#include <WiFi.h>
#include <BlynkSimpleEsp32.h>

#define TRIG_PIN D5
#define ECHO_PIN D6

float detectionThreshold = 15.0;

void monitorProcess() {
  distanceCM = readDistance();
  Blynk.virtualWrite(V5, distanceCM);

  objectDetected = distanceCM <= detectionThreshold;

  if (objectDetected && !previousState) {
    startTime = millis();
    Blynk.virtualWrite(V3, "Object detected");
  }

  if (!objectDetected && previousState) {
    cycleTime = (millis() - startTime) / 1000.0;
    cycleCount++;
    totalTime += cycleTime;
    averageTime = totalTime / cycleCount;

    Blynk.virtualWrite(V0, cycleCount);
    Blynk.virtualWrite(V1, cycleTime);
    Blynk.virtualWrite(V2, averageTime);
    Blynk.virtualWrite(V3, "Area free");
  }

  previousState = objectDetected;
}

The public code file uses placeholders for the WiFi credentials and Blynk token. This avoids publishing private access information while keeping the logic reproducible.

The program is divided into small sections so the interface logic is easier to understand and debug. The same code uploaded to the XIAO ESP32-C3 is available in the downloads section in Arduino IDE format and TXT format.

1. Blynk and WiFi Configuration

This block defines the Blynk template ID, template name, and authentication token. In the public version, the token and WiFi credentials are replaced with placeholders, so each user must paste their own values before uploading.

#define BLYNK_TEMPLATE_ID "TMPL2_cwfk2-a"
#define BLYNK_TEMPLATE_NAME "LEAN STATION"
#define BLYNK_AUTH_TOKEN "PASTE_YOUR_BLYNK_AUTH_TOKEN_HERE"

char ssid[] = "YOUR_WIFI_SSID";
char pass[] = "YOUR_WIFI_PASSWORD";

2. Sensor Pins and Process Variables

The HC-SR04 trigger and echo pins are assigned to D5 and D6. The detection threshold defines the distance where an object is considered present in the conveyor belt sensing area.

#define TRIG_PIN D5
#define ECHO_PIN D6

float detectionThreshold = 15.0;
float distanceCM = 0;
bool objectDetected = false;
bool previousState = false;

3. Distance Reading

The function sends the ultrasonic pulse, measures the return time with pulseIn(), and converts the duration into centimeters. If no pulse is received, the function returns a large value to avoid a false detection.

float readDistance() {
  digitalWrite(TRIG_PIN, LOW);
  delayMicroseconds(2);
  digitalWrite(TRIG_PIN, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG_PIN, LOW);

  long duration = pulseIn(ECHO_PIN, HIGH, 30000);
  if (duration == 0) return 999;

  return duration * 0.0343 / 2.0;
}

4. Object Detection and Cycle Measurement

The main monitoring function reads the distance, sends it to Blynk on V5, detects transitions between free area and object present, and calculates the cycle time when the object leaves the sensor area.

if (objectDetected == true && previousState == false) {
  startTime = millis();
  Blynk.virtualWrite(V3, "Object detected");
}

if (objectDetected == false && previousState == true) {
  cycleTime = (millis() - startTime) / 1000.0;
  cycleCount++;
  totalTime += cycleTime;
  averageTime = totalTime / cycleCount;

  Blynk.virtualWrite(V0, cycleCount);
  Blynk.virtualWrite(V1, cycleTime);
  Blynk.virtualWrite(V2, averageTime);
  Blynk.virtualWrite(V3, "Area free");
}

5. Reset Button from Blynk

The reset button uses virtual pin V6. When the button sends a value of 1, the counters and timing variables are cleared and the dashboard values are updated.

BLYNK_WRITE(V6) {
  if (param.asInt() == 1) {
    cycleCount = 0;
    cyclesPerMinute = 0;
    totalTime = 0;
    averageTime = 0;
    cycleTime = 0;
    Blynk.virtualWrite(V3, "Data reset");
  }
}

After uploading the firmware, I verified the readings in the Arduino Serial Monitor and compared them with the Blynk dashboard. When the ultrasonic sensor detected an object on the conveyor belt, the status changed to Object detected, the distance gauge updated, and the cycle measurements were plotted in the chart.

The final test connected the electronic interface to the conveyor belt. The ultrasonic sensor was positioned so it could detect an object passing over the belt. This connected the physical machine from the previous assignment with the application layer from this week.

These files document the application code and the generic PCB used to connect the XIAO ESP32-C3 with the ultrasonic sensor. The code files are provided in Arduino IDE format and TXT format.

Application Code

Download Arduino IDE Code (.ino) Download Code as TXT

PCB Files

Download PCB Image (PNG) Download KiCad PCB Drawing (SVG)

The interface successfully connected the user with the conveyor belt sensing system. Blynk made it possible to see the process status, distance, cycle count, cycle time, average time, and cycles per minute from a web dashboard. The reset button also allowed the user to clear the measurements without reprogramming the board.

The most important learning was that the interface is part of the machine logic, not only a screen. The dashboard helped me understand the behavior of the sensor and made the conveyor process easier to evaluate. This same workflow can be expanded for the final project by adding more sensors, alerts, and control actions.