Skip to content

15. Interface and Application Programming

Hero Shot!

Group Assignment

You can find more details on our lab site: TechWorks - Interface and Application Programming

  • MIT App Inventor Getting started with MIT App Inventor is a great way to build simple mobile apps, and the best part is that it’s designed to be beginner-friendly.

If you’re ever unsure about what a component or block does, you can check out the official MIT App Inventor documentation.

  • Processing IDE Processing IDE is a free and easy-to-use programming environment designed to make coding visual and interactive. It is mainly used to create graphics, animations, and interactive applications. You write code using a simplified version of Java, and it’s great for beginners, artists, and designers who want to learn programming by making visual projects.

  • Comparison: MIT App Inventor vs Processing IDE

Feature MIT App Inventor Processing IDE
Purpose Mobile app development (mainly Android) Creative coding & graphics (PC-based apps)
Interface Style Visual block-based programming Text-based coding
Target Audience Beginners, educators, students Artists, designers, developers
Programming Language Blockly (converted to Java under the hood) Java-based Processing language
Hardware Integration Bluetooth/Internet with Arduino Serial communication with Arduino, sensors
Mobile Compatibility Android only (iOS in test phase) Not directly for mobile apps
Ease of Use Very easy; drag-and-drop blocks Requires basic coding knowledge
Platform Web-based (with companion mobile app) Desktop IDE (Windows, Mac, Linux)
Custom UI Design Yes, with drag-and-drop components Needs manual drawing and GUI logic
Offline Support Limited (requires emulator or companion) Fully offline
Best For Mobile apps, beginner education Visual arts, graphics, serial communication

Summary

  • MIT App Inventor is best for beginners who want to create mobile apps without writing code.
  • Processing is more powerful for creating visual, artistic, or interactive PC applications with code.

Individual Assignment

Arduino Serial Communication

I used the Arduino IDE to test serial communication and control an LED connected to pin 26 on my XIAO RP2040 board.

When I enter 0, the LED turns off; when I enter 1, it turns on.

✅ What You Need:

  • XIAO RP2040 board
  • LED connected to pin 26 (my board has a built-in LED on this pin)
  • Arduino IDE (for uploading code)
  • USB cable

Arduino code 

int ledPin = 26;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available()) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(ledPin, HIGH);  // Turn LED ON
    } else if (command == '0') {
      digitalWrite(ledPin, LOW);   // Turn LED OFF
    }
  }
}

Processing IDE

I used Processing IDE to create a simple graphical user interface (GUI) to control the LED via serial communication, allowing interaction between the computer and the microcontroller.

✅ What You Need: - XIAO RP2040 board - LED connected to pin 26 “I’ve a built in led connected to pin 26 on my board” - Arduino IDE (for uploading code to XIAO) - Processing IDE (for creating the UI) - USB cable

✅ Steps for Using Processing IDE:

  1. Download and Install
  2. Go to https://processing.org/download/
  3. Choose your operating system (Windows, macOS, or Linux)
  4. Download and install the IDE

  1. Open the Processing IDE
  2. Launch the Processing application
  3. A code editor window will appear (called a “sketch”)

  1. Write Your Code

  2. Run the Sketch Click the ▶ Run button at the top-left

A window will open showing the visual output

Simple Serial Communication

To test the Processing IDE, I uploaded simple code. When pressing 0 or 1 on the keyboard, the LED turns off or on respectively.

Processing Code (Keyboard Control)

import processing.serial.*;

Serial myPort;

void setup() {
  printArray(Serial.list()); // Shows available COM ports
  myPort = new Serial(this, "COM8", 9600);  // Use your actual COM port
}

void draw() {
  // Empty unless you want something on screen
}

void keyPressed() {
  if (key == '1') {
    myPort.write('1');  // Turn LED ON
  } else if (key == '0') {
    myPort.write('0');  // Turn LED OFF
  }
}

Graphical User Interface (GUI)

As I became more familiar with Processing IDE, I created a GUI to control the LED.

Arduino Code for XIAO RP2040

Upload this code to the XIAO RP2040 using the Arduino IDE:

int ledPin = 26;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available()) {
    char cmd = Serial.read();
    if (cmd == '1') digitalWrite(ledPin, HIGH);
    if (cmd == '0') digitalWrite(ledPin, LOW);
  }
}

Processing Code to Create UI

Run this code in Processing IDE. It creates two clickable buttons to control the LED:

import processing.serial.*;

Serial myPort;

void setup() {
  size(300, 200);
  myPort = new Serial(this, "COM8", 9600);  // Make sure COM8 is correct
}

void draw() {
  background(220);

  // Draw ON button
  fill(0, 255, 0);
  rect(50, 80, 80, 40);
  fill(0);
  textSize(16);
  text("LED ON", 60, 105);

  // Draw OFF button
  fill(255, 0, 0);
  rect(170, 80, 80, 40);
  fill(0);
  textSize(16);
  text("LED OFF", 175, 105);
}

void mousePressed() {
  // Check if ON button is clicked
  if (mouseX > 50 && mouseX < 130 && mouseY > 80 && mouseY < 120) {
    myPort.write('1');
  }

  // Check if OFF button is clicked
  if (mouseX > 170 && mouseX < 250 && mouseY > 80 && mouseY < 120) {
    myPort.write('0');
  }
}

📌 Result: - When you click the green button, the LED turns ON.

  • When you click the red button, the LED turns OFF.

Files