Week15. 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 that interfaces a user with an input and/or output device(s) on a board that you made.
  

Group assignment can be viewed at this link. - week15 Group assignment

Group assignment:

As a designer, I am not particularly good at computer programming. As for my past programming experience, I only have a small amount of experience in C and Phyton programming.
In order to understand the differences between each programming language more quickly, I use chatgpt to compare different programming languages.
When comparing different programming languages, several factors come into play, including syntax, performance, ease of learning, community support, and specific use cases. Here’s a comparison of some popular programming languages:

Compassion of Programming Languages

1.Python

Syntax: Simple and readable, great for beginners.
Performance: Generally slower than compiled languages, but fast enough for many applications.
Ease of Learning: Very easy to learn due to its straightforward syntax.
Community Support: Extensive community and a wealth of libraries.
Use Cases: Web development, data science, machine learning, automation, scripting.

2.JavaScript

Syntax: C-like syntax, relatively easy to learn.
Performance: Fast execution within browsers due to JIT compilation.
Ease of Learning: Moderate, especially for those familiar with HTML/CSS.
Community Support: Very large community and a vast ecosystem of libraries and frameworks.
Use Cases: Web development (frontend and backend with Node.js), mobile app development, game development.

3.Java

Syntax: Verbose, but well-structured.
Performance: High performance due to JVM optimizations, though slower than C/C++.
Ease of Learning: Moderate; the verbosity can be a barrier.
Community Support: Large community with many resources.
Use Cases: Enterprise applications, Android development, web applications, large-scale systems.

4.C++

Syntax: Complex and powerful, can be challenging to learn.
Performance: Very high performance, close to hardware.
Ease of Learning: Difficult due to complexity and manual memory management.
Community Support: Strong community, but not as beginner-friendly.
Use Cases: System/software development, game development, real-time simulations, performance-critical applications.

5.C

Syntax: Similar to Java, less verbose.
Performance: High performance, especially with .NET optimizations.
Ease of Learning: Easier than C++ and Java for those with some programming experience.
Community Support: Large community, especially within the Microsoft ecosystem.
Use Cases: Windows applications, game development with Unity, web applications with ASP.NET.

6.Ruby

Syntax: Simple and elegant, very readable.
Performance: Slower than many other languages.
Ease of Learning: Very easy to learn, similar to Python in readability.
Community Support: Strong community, particularly in web development.
Use Cases: Web development (primarily with Ruby on Rails), scripting, automation.

6.Swift

Syntax: Clean and modern.
Performance: High performance, optimized for Apple platforms.
Ease of Learning: Relatively easy, especially for those familiar with other C-based languages.
Community Support: Growing community, strong support from Apple.
Use Cases: iOS/macOS applications, system programming.

7.Go

Syntax: Simple and clean.
Performance: Very high performance, close to C/C++ in many cases.
Ease of Learning: Easy to learn, especially for those with experience in C-like languages.
Community Support: Strong and growing community.
Use Cases: System programming, web servers, networking tools, cloud services.

8.Rust

Syntax: Complex but expressive.
Performance: Very high performance, similar to C++.
Ease of Learning: Difficult due to complexity and focus on safety.
Community Support: Strong and passionate community.
Use Cases: System programming, performance-critical applications, web assembly.

Summary

As a person who does not have much programming experience, my main purpose is to do some projects through Arduino IDE and open source hardware, so I prefer to choose C/C++ as my programming language.
Starting with the Arduino language (C/C++) in the Arduino IDE is the best choice for beginners. For beginners at Arduino application, the best programming language to start with is the Arduino language itself, which is essentially a simplified version of C/C++. It provides a smooth learning curve with plenty of resources, and it is specifically designed to work seamlessly with Arduino hardware. This approach will give you a solid foundation in programming and embedded systems.

Types of Device Interfaces

1.Physical Interfaces:

These are the actual connectors and ports through which devices are connected. Examples include:
- USB (Universal Serial Bus): A common interface for connecting peripherals like keyboards, mice, and storage devices.
- HDMI (High-Definition Multimedia Interface): Used for transmitting video and audio from a source device (like a computer) to a display (like a monitor or TV).
- Ethernet: Used for network connections, providing a wired interface for internet and local network access.

2. Communication Protocols:

These define the rules and data formats for communication between devices. Examples include:
- I2C (Inter-Integrated Circuit): A protocol for communication between microcontrollers and peripheral devices like sensors and displays.
- SPI (Serial Peripheral Interface): Another protocol for communication between a master device and one or more slave devices, often used in embedded systems.
- Bluetooth: A wireless protocol for short-range communication between devices like smartphones, headphones, and IoT devices.

3.Software Interfaces:

These include APIs (Application Programming Interfaces) and drivers that enable software to interact with hardware. Examples include:
- Device Drivers: Software that allows the operating system to communicate with hardware devices. For example, a printer driver enables the computer to send print jobs to the printer.
- API (Application Programming Interface): Software libraries and frameworks that provide standardized ways for applications to interact with hardware. For instance, OpenGL provides an API for rendering graphics across different hardware platforms.

Type of User Interfaces

1.Graphical User Interface (GUI)

• Description: Visual interface with elements like windows, icons, buttons, and menus.
  
• Interaction: Through devices like mouse, keyboard, or touchscreen.
  
• Examples: Operating systems (Windows, macOS), software applications (web browsers, graphic design tools).
  

2.Command Line Interface (CLI)

• Description: Text-based interface where users input commands.
  
• Interaction: Typing commands via keyboard.
  
• Examples: Terminal in Linux, Command Prompt in Windows, PowerShell.
  

3.Voice User Interface (VUI)

• Description: Interface based on voice recognition and speech synthesis.
  
• Interaction: Using voice commands.
  
• Examples: Virtual assistants like Amazon Alexa, Google Assistant, Apple Siri.
  

4.Touch User Interface

• Description: Interface on touch-sensitive devices.
  
• Interaction: Tapping, swiping, and pinching on screens.
  
• Examples: Smartphones, tablets, touchscreen kiosks.
  

5. Natural User Interface (NUI)

• Description: Interfaces that use natural gestures and movements.
  
• Interaction: Gestures, body movements, sometimes voice.
  
• Examples: Microsoft Kinect, Leap Motion.
  

Individual assignment

After understanding the device interface and user interface, the design of this lesson became relatively simple.
I prefer interactive art design, so I want to interact with the open source hardware main control board through processing.

What is Processing?

Processing is a flexible software sketchbook and a language for learning how to code within the context of visual arts. It is open-source and free to use, making it accessible for beginners. The Processing environment provides an easy way to create visual art and interactive graphics, ideal for creative coding projects.

How Does Processing Work with Arduino?

Processing and Arduino can work together to create interactive projects that involve visual output and hardware input. I can use Processing to create visual interfaces that interact with the physical world through an Arduino board. The Arduino can collect data from sensors or control actuators based on commands sent from Processing.

Basic Workflow:

1. Connect Arduino to Sensors/Actuators: I set up my Arduino board with various sensors (e.g., temperature, light) and actuators (e.g., LEDs, motors).
   
2. Program the Arduino: I write a sketch for the Arduino to read data from sensors or control actuators.
   
3. Set Up Serial Communication: I use the Serial library in Arduino to send data to and receive data from the Processing environment.
   
4. Create a Processing Sketch: I write a Processing sketch that reads data from the Arduino through the serial port and visualizes it or sends commands to the Arduino.
   

Example Use Case:

1. An Arduino reads temperature data from a sensor.
   
2. he Arduino sends this data to Processing via the serial port.
   
3. Processing receives the data and visualizes it, for example, by drawing a graph of the temperature over time.
   

Learning Steps for Beginners

Step 1: Set Up Your Environment

1. Install Processing:
   
2. I download and install Processing from the Processing website.
   

Step 2: Learn the Basics of Processing

1. Processing Environment:
   

2. I get familiar with the Processing IDE and its components. The IDE consists of a text editor, a console, and a toolbar with buttons for running and stopping sketches.
   

3. Simple Graphics and Interaction:
   

4. I start with writing sketches to draw shapes, use colors, and handle mouse and keyboard events. For example:
   

void setup() {
  size(500, 500); // Set the size of the window
}

void draw() {
  background(255); // Set background color to white
  ellipse(mouseX, mouseY, 50, 50); // Draw an ellipse at the mouse position
}

1. Serial Library in Processing:
   
2. I learn how to use the Serial library in Processing to communicate with the Arduino. This involves importing the Serial library, setting up a serial connection, and reading/writing data.
   

import processing.serial.*;

Serial myPort;

void setup() {
  size(500, 500);
  // Replace "/dev/tty.usbmodemXXXX" with your Arduino's port
  String portName = "/dev/cu.usbmodem14101"; 
  myPort = new Serial(this, portName, 9600);
}

void draw() {
  if (myPort.available() > 0) {
    String data = myPort.readStringUntil('\n');
    if (data != null) {
      println(data); // Print the data received from Arduino
    }
  }
}

In this part, I tried for a long time, because when using the example, I directly used the COM port. This description of the serial port is applicable to the Windows system. For my Mac computer, it kept showing errors at the beginning.
Debugging process: 1. When I opened my Arduino IDE, I found the correct USB device serial port and imported it into the processing window.
2. When I imported the correct serial port name into the processing window, it showed that the serial port was occupied after compiling. So I searched for information again and found that if I wanted to transfer Arduino serial port data to processing, I also needed to close the original serial port debugging assistant of Arduino IDE.
3. When I closed the serial port debugging assistant in Arduino IDE, I found that the serial port window of processing sent data and successfully connected the serial port.

Step 3: Integrate Arduino with Processing

1. Establish and Visualize Communication:
   
2. I write an Arduino sketch that sends data to the serial port.
   Explanation of Arduino Code:
3. 1. Library and Setup:
      
   2. The code includes the Adafruit_NeoPixel library for controlling RGB LEDs.
      
   3. Pins are defined for power (Power), signal (PIN), and a button (ButtonPin).
      
   4. NUMPIXELS specifies the number of RGB LEDs (in this case, 1).
      
   5. DOUBLE_PRESS_TIME sets the maximum time for detecting a double press of the button.
      
4. 1. Setup Function:
      
   2. Serial.begin(9600); initializes serial communication at 9600 baud rate for communication with the Processing sketch.
      
   3. pixels.begin(); initializes the NeoPixel strip.
      
   4. pixels.setBrightness(50); sets the brightness of the LEDs to 50 (adjustable).
      
   5. Pins are configured (pinMode) and initial states set (digitalWrite) for Power (output, high) and ButtonPin (input, with internal pull-up resistor).
      
5. 1. Variables Initialization:
      
   2. lastButtonState, rainbowIndex, rgbOn, lastPressTime, and pressCount are initialized to manage button press detection and LED state.
      
6. 1. Loop Function:
      
   2. Rainbow Color Display:
      
   3. If rgbOn is true and the button (ButtonPin) is not pressed (currentButtonState == HIGH), the LED displays rainbow colors. The color changes continuously based on rainbowIndex and is updated every 20 milliseconds (delay(20)).
      
   4. The current RGB values of the LED are sent over serial using Serial.print and Serial.println for visualization in the Processing sketch.
      
   5. Button Press Detection:
      
   6. digitalRead(ButtonPin) checks the current state of the button.
      
   7. Detects a single button press (pressCount == 1) and a double press (pressCount == 2 within DOUBLE_PRESS_TIME).
      
   8. Toggles rgbOn state when a double press is detected, turning off the LED if rgbOn is false.
      
7. 1. Wheel Function:
      
   2. Wheel(byte WheelPos) generates rainbow colors based on WheelPos, returning an RGB color value.
      

#include <Adafruit_NeoPixel.h>

int Power = 11; // RGB_LED Power GPIO
int PIN = 12; // RGB_LED Signal GPIO
int ButtonPin = 27;  // Button GPIO
#define NUMPIXELS 1 // Numbers of RGB_LED
#define DOUBLE_PRESS_TIME 500 // Maximum time for double press detection in milliseconds

Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

void setup() {
  Serial.begin(9600);  // Initialize serial communication
  pixels.begin();
  pixels.setBrightness(50);  // Set the LED brightness
  pinMode(Power, OUTPUT);
  digitalWrite(Power, HIGH);
  pinMode(ButtonPin, INPUT_PULLUP);  
  // Set the button pin as an input and enable the internal pull-up resistor
}

bool lastButtonState = HIGH;  // last button State
int rainbowIndex = 0;  // Index for tracking rainbow colors
bool rgbOn = true;  // RGB LED initial state
unsigned long lastPressTime = 0;  // Time of the last button press
int pressCount = 0;  // Button press count

void loop() {
  bool currentButtonState = digitalRead(ButtonPin);
  unsigned long currentTime = millis();
  // Displays rainbow colors if button is not pressed and RGB LED is on
  if (rgbOn && currentButtonState == HIGH) {
    rainbowIndex++;
    if (rainbowIndex > 255) {
      rainbowIndex = 0;
    }
    uint32_t color = Wheel(rainbowIndex);  // Get the current color
    pixels.setPixelColor(0, color);  // Set rainbow colors
    pixels.show();
    Serial.print("LED Color: ");
    Serial.print((color >> 16) & 0xFF); // Print Red component
    Serial.print(", ");
    Serial.print((color >> 8) & 0xFF);  // Print Green component
    Serial.print(", ");
    Serial.println(color & 0xFF);       // Print Blue component
    delay(20);  // Adjust the speed to change how quickly the color changes
  }
  // Detect button state changes from unpressed to pressed
  if (lastButtonState == HIGH && currentButtonState == LOW) {
    pressCount++;
    if (pressCount == 1) {
      lastPressTime = currentTime;
    } else if (pressCount == 2 && (currentTime - lastPressTime <= DOUBLE_PRESS_TIME)) {
      rgbOn = !rgbOn;  // Toggle RGB LED state
      if (!rgbOn) {
        pixels.clear();
        pixels.show();
        Serial.println("LED Off");
      }
      pressCount = 0;  // Reset press count
    } else if (pressCount > 2 || (currentTime - lastPressTime > DOUBLE_PRESS_TIME)) {
      pressCount = 1;  // Reset press count and start over
      lastPressTime = currentTime;
    }
  }
  lastButtonState = currentButtonState;  // Update button state
}

// Use wheel functions to generate rainbow colors
uint32_t Wheel(byte WheelPos) {
  WheelPos = 255 - WheelPos;
  if (WheelPos < 85) {
    return pixels.Color(255 - WheelPos * 3, 0, WheelPos * 3);
  }
  if (WheelPos < 170) {
    WheelPos -= 85;
    return pixels.Color(0, WheelPos * 3, 255 - WheelPos * 3);
  }
  WheelPos -= 170;
  return pixels.Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}

1. Visualize Data:
   
2. I use Processing to visualize data from Arduino, such as plotting LED readings.
   Explanation of Processing Code:
3. 1. Library and Variables:
      
   2. import processing.serial.*; imports the serial library for communication with Arduino.
      
   3. Serial myPort; declares a variable for serial communication.
      
4. 1. Setup Function:
      
   2. size(500, 500); sets the size of the Processing window.
      
   3. String portName = “/dev/cu.usbmodem14101”; specifies the serial port name for your Arduino (replace with your port name).
      
   4. myPort = new Serial(this, portName, 9600); initializes serial communication with the specified port at 9600 baud rate.
      
5. 1. Draw Function:
      
   2. background(0); clears the screen with a black background.
      
   3. fill(red, green, blue); sets the fill color of shapes based on the RGB values received from the Arduino.
      
   4. rect(100, 100, 300, 300); draws a rectangle on the screen with the current RGB color.
      
6. 1. Serial Communication:
      
   2. if (myPort.available() > 0) checks if there is data available from the serial port.
      
   3. String data = myPort.readStringUntil(‘\n’); reads the data from the serial port until a newline character is encountered.
      
   4. data.trim(); removes any leading or trailing whitespace from the received data.
      
   5. If the received data equals “LED Off”, it sets red, green, and blue values to 0 to turn off the rectangle.
      
   6. Otherwise, it splits the data into an array rgbValues using “, ” as the delimiter, and parses the RGB values from the array to update red, green, and blue.
      

import processing.serial.*;

Serial myPort;
int red = 0;
int green = 0;
int blue = 0;

void setup() {
  size(500, 500);
  // Replace "/dev/cu.usbmodem14101" with your Arduino's port
  String portName = "/dev/cu.usbmodem14101"; 
  myPort = new Serial(this, portName, 9600);
}

void draw() {
  background(0); // Clear the screen
  fill(red, green, blue); // Set the fill color based on the RGB values
  rect(100, 100, 300, 300); // Draw a rectangle with the current LED color

  if (myPort.available() > 0) {
    String data = myPort.readStringUntil('\n');
    if (data != null) {
      data = data.trim(); // Remove any trailing whitespace
      if (data.equals("LED Off")) {
        red = green = blue = 0; // Turn off the LED color
      } else {
        String[] rgbValues = data.split(", ");
        if (rgbValues.length == 3) {
          red = int(rgbValues[0]);
          green = int(rgbValues[1]);
          blue = int(rgbValues[2]);
        }
      }
    }
  }
}

By following these steps, I can gradually build my skills and create interesting and interactive projects that combine the strengths of both Arduino and Processing.

Hero Shot

By pressing the button on the board, the color of the LED can be synchronized with Processing. At the same time, the action of turning the LED light off and on by pressing the button will also be displayed on the Processing interface.

How They Work Together

1.Arduino: Controls the RGB LED based on button presses and sends RGB color data over serial.

2.Processing: Reads the RGB color data from the serial port and visualizes it by drawing a colored rectangle on the screen.

Communication Flow: - Arduino continuously sends RGB color data to the serial port.
- Processing reads the serial port and updates the visualization based on the received RGB values.