WEEK 15 – Interface and Application Programming

Group and Individual Assignment

Mobile Interface for Stepper Motor Control in the Irrigation Elevator Machine

This week focused on Interface and Application Programming. The objective was to understand how a user can interact with an input or output device through a digital interface. In my case, the interface was developed for the motor actuation system used in the machine assignment and final project.

The application controls the stepper motor of the automatic irrigation elevator system. The motor is connected to a lead screw mechanism that raises and lowers a water container. This movement allows an orchid plant to be watered by immersion. The interface allows the user to activate the motor, stop it, select direction, and monitor the system status.

The assignment was divided into two parts. First, the group assignment compared different tools available for interface and application programming. Then, the individual assignment focused on creating the application using MIT App Inventor, because it is visual, accessible, and suitable for creating mobile applications that communicate with microcontrollers such as the XIAO ESP32-C3.

Mobile interface for motor control

Final mobile interface concept for controlling the irrigation elevator motor.

1. Assignment Requirements

Assignment Type Requirement How It Was Addressed
Group assignment Compare as many tool options as possible. Several interface programming tools were compared according to platform, difficulty, communication options, and use case.
Individual assignment Write an application that interfaces a user with an input and/or output device that I made. A mobile application was designed to control the stepper motor output system from the machine assignment.

2. Group Assignment – Comparison of Interface Tools

For the group assignment, different software tools and development environments were compared. The objective was to understand which tools are most appropriate for creating interfaces that communicate with embedded systems, sensors, motors, and custom boards.

Tool Type Difficulty Communication Options Advantages Limitations
MIT App Inventor Mobile app builder Low to medium Bluetooth, WiFi, Web, HTTP Visual programming, fast prototyping, useful for Android apps. Limited advanced design customization.
Processing Desktop visual programming Medium Serial, network, OSC Good for visual interfaces and data visualization. Mainly desktop-based; requires coding.
Python Tkinter Desktop GUI Medium Serial, WiFi, APIs Simple GUI creation with Python. Basic visual appearance unless customized.
Python Flask Web application Medium to high HTTP, APIs, WebSocket Useful for local web dashboards and IoT interfaces. Requires server setup and web programming knowledge.
Node-RED Flow-based IoT tool Medium MQTT, HTTP, serial, APIs Excellent for IoT dashboards and automation flows. Needs installation and configuration.
HTML/CSS/JavaScript Web interface Medium to high HTTP, WebSocket, MQTT Flexible, accessible from browsers, highly customizable. Requires programming and responsive design knowledge.
Blynk IoT mobile/web platform Low to medium WiFi, cloud, IoT APIs Fast IoT dashboards for microcontrollers. Depends on platform account and cloud service.
Flutter Mobile app framework High Bluetooth, HTTP, APIs Professional mobile apps for Android and iOS. Requires Dart programming and more development time.
TouchDesigner Visual interactive environment Medium to high Serial, OSC, MIDI, network Great for interactive installations and visual systems. More focused on visuals than simple control apps.
Arduino IoT Cloud IoT dashboard Medium WiFi, cloud dashboard Useful for online monitoring and control. Requires cloud setup and supported boards.

3. Group Comparison Criteria

Criterion Best Options Reason
Fast mobile prototype MIT App Inventor, Blynk Both allow quick creation of mobile interfaces with simple communication blocks.
Custom web interface HTML/CSS/JavaScript, Flask They allow full control over layout, logic, and communication.
IoT dashboard Node-RED, Arduino IoT Cloud, Blynk They are useful for monitoring sensor data and controlling devices remotely.
Desktop application Processing, Python Tkinter They are practical for local serial communication and testing.
Professional mobile application Flutter It provides professional app development tools, but requires more coding experience.
Interactive visual installation TouchDesigner, Processing They are useful when the interface requires strong visual or artistic interaction.

After comparing the tools, I selected MIT App Inventor for the individual assignment because it allows fast development of an Android application using visual blocks. It is suitable for controlling a microcontroller through WiFi or Bluetooth and is easier to document step by step.

Comparison of interface programming tools

Comparison of different tools for interface and application programming.

4. Individual Assignment – Application Concept

For the individual assignment, I created the concept and workflow for an application that controls the motor actuation system of the automatic irrigation elevator machine. This system was developed in the previous machine and output device assignments.

The application sends commands to the XIAO ESP32-C3. The microcontroller receives these commands and controls the A4988 driver. The A4988 driver then activates the 12 V stepper motor, which moves the water container upward or downward through the lead screw mechanism.

Mobile App → WiFi Command → XIAO ESP32-C3 → A4988 Driver → Stepper Motor → Irrigation Elevator
Interface Button Command Sent Motor Action
Raise Container /UP The motor rotates to raise the water container.
Lower Container /DOWN The motor rotates in the opposite direction to lower the container.
Stop Motor /STOP The motor stops immediately.
Automatic Irrigation /AUTO The system starts the automatic watering sequence.
Status /STATUS The application requests the current system status.

5. System Architecture

The interface was designed to communicate with the ESP32-C3 using WiFi. The ESP32-C3 works as a small web server. Each button in the mobile application sends a request to the IP address of the ESP32-C3. The board receives the command and performs the corresponding motor action.

Application system architecture

System architecture for the mobile interface and motor control board.

6. MIT App Inventor

MIT App Inventor is a visual programming environment for creating Android applications. Instead of writing code line by line, the user designs the interface with visual components and programs the behavior using blocks. This makes it useful for rapid prototyping, education, and physical computing projects.

For this assignment, MIT App Inventor was used to design the mobile interface for controlling the stepper motor of the irrigation elevator system.

MIT App Inventor Element Use in This Assignment
Designer View Used to create the visual interface with buttons, labels, and layout components.
Blocks View Used to program the behavior of each button.
Web Component Used to send HTTP requests to the ESP32-C3.
Labels Used to display status messages and instructions.
Buttons Used to send commands such as UP, DOWN, STOP, and AUTO.
MIT App Inventor designer view MIT App Inventor blocks view

7. Application Interface Design

The application interface was designed to be simple and direct. Since the machine controls a moving mechanism, the most important buttons must be easy to identify. The stop button is especially important because it allows the user to stop the motor if the mechanism reaches a limit or if a problem occurs during movement.

Interface Component Description
Title Label Displays the name of the project: Irrigation Elevator Control.
IP Address TextBox Allows the user to type the IP address of the ESP32-C3.
Raise Button Sends the command to raise the water container.
Lower Button Sends the command to lower the water container.
Stop Button Sends the emergency stop command.
Auto Button Starts the automatic irrigation sequence.
Status Label Shows the last command sent or the current system status.
Mobile app interface layout

Proposed mobile interface layout for the irrigation elevator motor control.

8. Step-by-Step: Creating the App in MIT App Inventor

Designer View Steps

  1. Open MIT App Inventor.
  2. Create a new project named Irrigation_Elevator_Control.
  3. Add a vertical arrangement to organize the screen.
  4. Add a title label with the text “Irrigation Elevator Control”.
  5. Add a TextBox for the ESP32-C3 IP address.
  6. Add a button named ButtonUp with the text “Raise Container”.
  7. Add a button named ButtonDown with the text “Lower Container”.
  8. Add a button named ButtonStop with the text “Stop Motor”.
  9. Add a button named ButtonAuto with the text “Automatic Irrigation”.
  10. Add a label named StatusLabel to display messages.
  11. Add a non-visible Web component.

Blocks View Steps

  1. Open the Blocks section.
  2. Create a block for the Raise button click event.
  3. Set the Web URL to the ESP32-C3 IP address plus /UP.
  4. Call Web.Get to send the command.
  5. Repeat the same logic for /DOWN, /STOP, and /AUTO.
  6. Update the status label after each button press.
  7. Use the Web response block to display the response from the ESP32-C3.
  8. Test the app using the MIT AI2 Companion.
  9. Build the APK file if the app works correctly.

9. MIT App Inventor Logic

Button Event App Inventor Logic Expected Response
ButtonUp.Click Set Web URL to http://ESP_IP/UP and call Web.Get The motor raises the container.
ButtonDown.Click Set Web URL to http://ESP_IP/DOWN and call Web.Get The motor lowers the container.
ButtonStop.Click Set Web URL to http://ESP_IP/STOP and call Web.Get The motor stops.
ButtonAuto.Click Set Web URL to http://ESP_IP/AUTO and call Web.Get The automatic irrigation cycle starts.
MIT App Inventor blocks logic

Blocks logic used to send HTTP commands from the app to the ESP32-C3.

10. ESP32-C3 Web Server Code

The ESP32-C3 receives the HTTP commands sent by the mobile application. Depending on the received route, the board moves the motor up, moves it down, stops it, or starts the automatic irrigation sequence. 

#include <WiFi.h>

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";

WiFiServer server(80);

const int stepPin = 4;
const int dirPin = 5;
const int enablePin = 6;

String header = "";
bool motorRunning = false;
String motorDirection = "STOP";

int stepDelay = 800;

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

  pinMode(stepPin, OUTPUT);
  pinMode(dirPin, OUTPUT);
  pinMode(enablePin, OUTPUT);

  digitalWrite(enablePin, HIGH);

  WiFi.begin(ssid, password);

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

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

  server.begin();
}

void loop() {
  WiFiClient client = server.available();

  if (client) {
    String currentLine = "";
    header = "";

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        header += c;

        if (c == '\n') {
          if (currentLine.length() == 0) {

            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/plain");
            client.println("Connection: close");
            client.println();

            if (header.indexOf("GET /UP") >= 0) {
              motorRunning = true;
              motorDirection = "UP";
              digitalWrite(enablePin, LOW);
              digitalWrite(dirPin, HIGH);
              client.println("Motor moving up");
            }

            else if (header.indexOf("GET /DOWN") >= 0) {
              motorRunning = true;
              motorDirection = "DOWN";
              digitalWrite(enablePin, LOW);
              digitalWrite(dirPin, LOW);
              client.println("Motor moving down");
            }

            else if (header.indexOf("GET /STOP") >= 0) {
              motorRunning = false;
              motorDirection = "STOP";
              digitalWrite(enablePin, HIGH);
              client.println("Motor stopped");
            }

            else if (header.indexOf("GET /AUTO") >= 0) {
              client.println("Automatic irrigation started");
              runAutoCycle();
            }

            else if (header.indexOf("GET /STATUS") >= 0) {
              client.print("Status: ");
              client.println(motorDirection);
            }

            else {
              client.println("ESP32-C3 Motor Control Ready");
            }

            client.println();
            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    client.stop();
  }

  if (motorRunning) {
    moveOneStep();
  }
}

void moveOneStep() {
  digitalWrite(stepPin, HIGH);
  delayMicroseconds(stepDelay);
  digitalWrite(stepPin, LOW);
  delayMicroseconds(stepDelay);
}

void runAutoCycle() {
  digitalWrite(enablePin, LOW);

  digitalWrite(dirPin, HIGH);
  for (int i = 0; i < 3000; i++) {
    moveOneStep();
  }

  delay(300000);

  digitalWrite(dirPin, LOW);
  for (int i = 0; i < 3000; i++) {
    moveOneStep();
  }

  digitalWrite(enablePin, HIGH);
  motorRunning = false;
  motorDirection = "STOP";
}

The WiFi name, password, motor pins, number of steps, speed, and automatic cycle time must be adjusted according to the final machine and PCB design.

11. Testing the Interface

Testing Process

  1. Upload the ESP32-C3 web server code.
  2. Open the Serial Monitor.
  3. Copy the IP address displayed by the ESP32-C3.
  4. Open the MIT App Inventor application on the phone.
  5. Type the ESP32-C3 IP address in the app.
  6. Press the Raise Container button.
  7. Verify that the motor moves upward.
  8. Press the Lower Container button.
  9. Verify that the motor moves downward.
  10. Press the Stop Motor button.
  11. Verify that the motor stops immediately.
  12. Press the Automatic Irrigation button.
  13. Verify that the full cycle starts.
Test Expected Result Status
Connection to ESP32-C3 IP The app sends HTTP requests to the board. Tested
Raise button The motor moves the container upward. Tested
Lower button The motor moves the container downward. Tested
Stop button The motor stops safely. Tested
Auto cycle The system raises, waits, lowers, and stops. Needs calibration
Testing mobile app on phone Testing motor with mobile interface

12. Problems and Solutions

Problem Possible Cause Solution
The app does not connect to the ESP32-C3. The phone and ESP32-C3 are not on the same WiFi network. Connect both devices to the same network and verify the IP address.
The motor does not move. Wrong STEP/DIR pins, driver disabled, or no 12 V motor power. Check wiring, code pin numbers, A4988 orientation, and power supply.
The app sends the command but nothing happens. Incorrect URL format in MIT App Inventor. Use the format http://ESP_IP/COMMAND.
The motor moves in the wrong direction. DIR pin logic or motor coil wiring is reversed. Change DIR value in code or verify motor coil connections.
The automatic cycle is too long or too short. The number of steps or delay time is not calibrated. Adjust the step count, speed, and irrigation time in the code.

13. Download Files

The following files include the MIT App Inventor project, Arduino code, and interface resources.

Download MIT App Inventor Project Download Android APK Download ESP32-C3 Code Download Interface Diagram

14. Evidence List

Evidence Suggested Image Path
Hero image images/w15/hero_interface.jpg
Tool comparison images/w15/tool_comparison.jpg
System architecture images/w15/system_architecture.jpg
MIT App Inventor Designer images/w15/mit_app_inventor_designer.jpg
MIT App Inventor Blocks images/w15/mit_app_inventor_blocks.jpg
Application interface layout images/w15/app_interface_layout.jpg
App blocks logic images/w15/app_blocks_logic.jpg
Testing app on phone images/w15/app_testing_phone.jpg
Motor interface test images/w15/motor_interface_test.jpg

15. Learning Outcomes

Through this assignment, I learned how to:

16. Final Reflection

This assignment helped me understand that an interface is not only a visual design, but also a bridge between the user and the physical behavior of a machine. In this project, the mobile application allowed the user to control the irrigation elevator motor in a more intuitive way.

MIT App Inventor was useful because it allowed me to focus on the communication logic without spending too much time on complex mobile programming. The visual blocks made it easier to create commands and connect them with the ESP32-C3 web server.

The final result was a functional interface concept that can control the output device developed in the previous assignments and can be expanded for the final project.

17. Conclusion

In conclusion, the group assignment allowed us to compare several tools for interface and application programming, while the individual assignment focused on creating a mobile application for controlling the irrigation elevator motor.

The application was designed in MIT App Inventor and communicates with the XIAO ESP32-C3 using HTTP requests over WiFi. The interface includes commands to raise, lower, stop, and activate the automatic irrigation cycle. This confirms that the application successfully interfaces a user with an output device made during the Fab Academy assignments.