Week 15 | Interface and Application Programming

Group Assignment

As part of the group work, the focus was on understanding and testing different strategies for interface development and system communication. This included exploring diferents tools for creating graphical interfaces, testing serial communication, and validating how digital interfaces can interact with embedded systems in real time.

For more details about the group work, including testing procedures and results, please visit the group page:

Group assignment documentation

Individual Assignmet

The individual work focused on the design and implementation of an interactive system that connects a Processing interface with a physical mechanism. This included the development of the graphical interface, the integration of serial communication, and the programming of the microcontroller to control a servo motor based on both user input and sensor data.

The system was developed progressively, starting from basic Processing sketches and evolving into a fully functional interface capable of sending commands (OPEN, CLOSE, AUTO) to the microcontroller. Additionally, the hardware configuration, sensor behavior, and system logic were implemented and tested to achieve a responsive interaction.

1. Setup & Installation

Before implementing the system logic, the development environment was installed and configured to enable interface development using Processing.

Processing was downloaded from the official website and installed on the system. Once installed, the software was opened and the initial environment was explored, including the interface layout, available examples, and basic sketch structure.

• Processing: Download Processing

A new sketch was created to verify that the environment was working correctly. This step allowed confirming that the software was properly installed and ready for further development.

At this stage, no hardware integration was performed yet. The focus was on preparing the software environment as a foundation for the subsequent development of the graphical interface and system interaction.

2. Interface Development test

Before integrating the system with hardware, an initial exploration was carried out in Processing to understand how the environment works and how to create basic visual outputs.

The process started with simple tests to verify that Processing was correctly installed and running. Basic sketches were created to understand the structure of the program, particularly the use of the setup() and draw() functions.

These first tests focused on displaying simple shapes on the screen and modifying them to observe how changes in the code affect the visual output. This helped to build a basic understanding of how Processing handles rendering and continuous updates.

At this stage, the goal was not to develop a complete interface, but to become familiar with the tool and validate that it could be used for future interaction development.

A. Static Sphere Test

A first sketch was created to display a sphere at the center of the screen. This helped to understand the basic structure of Processing, particularly the roles of setup() and draw().

void setup() {
  size(400, 400);
}

void draw() {
  background(0);
  ellipse(200, 200, 100, 100);
}

B. Mouse Interaction Test

The sketch was then modified so that the sphere follows the movement of the mouse. This allowed validating real-time interaction and understanding how user input affects visual elements.

void setup() {
  size(400, 400);
}

void draw() {
  background(0);

  if (mousePressed) {
    fill(0, 255, 0);
  } else {
    fill(255);
  }

  ellipse(mouseX, mouseY, 80, 80);
}

The result was:

3. Application Test

After completing the initial tests in Processing, the next step was to develop a simple application to simulate the behavior of the mechanism. The objective was to create a basic interface that could represent two system states: open and closed.

A. First application Test

The first application included a visual representation of the flower mechanism and a button that allowed the user to change its state. When the button was pressed, the interface updated the visual feedback, showing whether the mechanism was open or closed.

This stage helped validate the basic interaction logic before connecting the interface to the microcontroller. It also allowed testing important interface elements such as button detection, state changes, conditional behavior, and visual feedback.

Although this version did not yet communicate with the physical system, it served as a first prototype of the control application and helped define the structure for the final interface.

The code I used:

boolean flowerOpen = false;

void setup() {
  size(500, 400);
}

void draw() {
  background(245);

  fill(0);
  textSize(24);
  text("Flower Control Interface", 100, 50);

  if (flowerOpen) {
    fill(255, 120, 180);
    ellipse(250, 180, 180, 180);
    fill(255, 200, 220);
    ellipse(250, 180, 90, 90);
  } else {
    fill(180);
    ellipse(250, 180, 80, 80);
  }

  if (mouseX > 175 && mouseX < 325 && mouseY > 300 && mouseY < 350) {
    fill(80, 160, 255);
  } else {
    fill(50, 120, 220);
  }

  rect(175, 300, 150, 50, 10);

  fill(255);
  textSize(18);
  textAlign(CENTER, CENTER);

  if (flowerOpen) {
    text("Close Flower", 250, 325);
  } else {
    text("Open Flower", 250, 325);
  }
}

void mousePressed() {
  if (mouseX > 175 && mouseX < 325 && mouseY > 300 && mouseY < 350) {
    flowerOpen = !flowerOpen;
  }
}

B. Second Interface Prototype

This Processing sketch represents a more advanced interface prototype designed to simulate the behavior of the mechanism without establishing communication with the microcontroller. The goal of this stage was to develop a structured and visually organized interface that mimics the final control system.

Unlike the previous tests, this version introduces a modular interface layout, dividing the screen into functional sections such as system status, progress visualization, and user controls. This allowed organizing the code into reusable functions and improving readability and scalability.

This prototype was used as an intermediate validation step to test interaction logic, interface layout, and visual feedback before integrating serial communication and real hardware control.

boolean isOpen = false;
float progress = 0;

void setup() {
  size(430, 720);
  smooth();
  textAlign(CENTER, CENTER);
}

void draw() {
  background(242, 244, 248);

  float target = isOpen ? 1 : 0;
  progress = lerp(progress, target, 0.08);

  drawPhoneUI();
  drawStatusCard();
  drawProgressModule();
  drawButton();
}

Code Description

The system is based on two main variables: isOpen, which defines the state of the mechanism, and progress, which is used to generate a smooth visual transition between states. The use of linear interpolation (lerp()) allows simulating gradual motion, avoiding abrupt changes and providing a more realistic representation of the opening and closing process.

The draw() function continuously updates the interface, refreshing the background, calculating the transition state, and calling different functions responsible for rendering each part of the interface. This structure replicates how the final system will behave once connected to the hardware.

4. Hardware Configuration

After validating the interface behavior in Processing, the next step was to define and configure the hardware components required for the physical system. At this stage, the focus was on setting up the electronic elements and verifying their basic functionality before establishing full integration with the interface.

The system integrates the following components:

• Microcontroller: XIAO ESP32-C3
• Sensor: PIR motion sensor connected to digital pin D4
• Switch: Digital input to enable or disable automatic mode connected to D5
• Actuator: Servo motor connected to pin D3
• Feedback: LED connected to digital pin D6 through a current-limiting resistor

The following diagram shows the wiring configuration of the system. It was used as a reference during the assembly and testing process.

The servo motor is powered and controlled through the microcontroller, receiving its signal from pin D3. The PIR sensor provides digital motion detection input through pin D4. A switch connected to pin D5 allows enabling or disabling the automatic mode, giving control over whether the system responds to sensor input or user commands.

The LED, connected to pin D6 through a resistor, provides visual feedback of the system state, indicating whether the mechanism is active or inactive. All components share a common ground to ensure stable operation.

Each component was individually tested to verify correct operation. This included validating the LED response, checking the movement range of the servo motor, and confirming correct signal readings from both the PIR sensor and the switch.

These preliminary tests ensured that the hardware setup was stable and functional before proceeding to full system integration and communication with the Processing interface.