16. Interface and application programming¶

Learning Outcomes:

Implement a User Interface (UI) using programming and explore protocols to communicate with an embedded board.

Group Assignment Summary:¶

Tool 1 - Arduino Cloud¶

Brief¶

Arduino Cloud is a platform that enables users to connect their Arduino devices to the cloud, allowing for remote monitoring and control of connected devices. It provides a convenient way to manage IoT (Internet of Things) projects without extensive backend development.

Typical use cases¶

Arduino Cloud is typically used by makers, hobbyists, and IoT enthusiasts who want to create projects that involve remote monitoring and control. It’s also suitable for prototyping IoT solutions due to its ease of use and integration with Arduino hardware.

Workflow and setup¶

To utilize Arduino Cloud, follow these steps: 1. Setting up Arduino Cloud: - Start by creating an Arduino account and logging in. - Download Arduino Client to you device.

Navigate to the Arduino Cloud dashboard.
Choose the appropriate device (e.g., Arduino Xiao ESP32C3) and create a new “thing.”
Programming the Device:
Write the necessary Arduino code to connect your device to Arduino Cloud using the provided libraries.
Define variables that represent the components you want to control or monitor remotely (e.g., LED state).
Creating a Dashboard:
Customize the dashboard to display the variables and controls relevant to your project.
Add widgets to interact with the connected devices (e.g., switches, sliders).

Arduino Code¶

Below is the Arduino code used to connect the device to Arduino Cloud and control the LED:

#include "thingProperties.h"

const int ledPin = 10; // Define the pin for the LED

void setup() {
  Serial.begin(9600);
  delay(1500); 

  pinMode(ledPin, OUTPUT); // Set the LED pin as an output

  initProperties();
  ArduinoCloud.begin(ArduinoIoTPreferredConnection);
  setDebugMessageLevel(2);
  ArduinoCloud.printDebugInfo();
}

void loop() {
  ArduinoCloud.update();

  // Check the value of lED variable from the cloud
  if (lED) {
    digitalWrite(ledPin, HIGH); // Turn on the LED
  } else {
    digitalWrite(ledPin, LOW); // Turn off the LED
  }
}

void onLEDChange() {
  // This function is called when the value of lED changes in the cloud
  // No need to read the value from the cloud since it's already updated the variable
  // Control the LED based on the value received from the cloud
  digitalWrite(ledPin, lED ? HIGH : LOW);
}

Result¶

:

Opinions:

Likes: - User-friendly interface for setting up and managing IoT projects. - Seamless integration with Arduino hardware and libraries. Dislikes: - Limited customization options for the dashboard. - Reliance on a stable internet connection for remote control.

Advantages¶

Simplified setup process for connecting Arduino devices to the cloud.
Well-documented libraries and resources for developers.
Provides basic IoT functionalities without extensive backend development.

Disadvantages¶

Limited flexibility in dashboard customization.
Dependency on internet connectivity for remote access.

Tool 2 - Processing¶

Brief¶

Processing is an open-source graphical library and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities. It provides a simple yet powerful programming environment for creating interactive visual applications.

Typical use cases¶

Processing is commonly used for creating interactive art installations, data visualizations, simulations, and educational tools. It’s favored by artists, designers, educators, and hobbyists for its ease of use and versatility.

Workflow and setup¶

To use Processing for creating a simple dashboard to control an LED, follow these steps:

Installing Processing:
Download and install Processing from the official website (https://processing.org/download/).
Programming the Interface:
Write a Processing sketch to create the user interface for controlling the LED.
Utilize the Serial library to establish communication with the Arduino board.
Running the Sketch:
Connect your Arduino board to your computer via USB.
Upload the provided Arduino code to the board.
Open the Processing sketch in the Processing IDE and run it.
Interacting with the Interface:
Click on the buttons in the Processing window to send commands to the Arduino board and control the LED.

Arduino Code¶

Below is the Arduino code used to control the LED:

const int led = 4;  // Pin connected to first LED

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

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(led, HIGH);  // Turn on LED
    } else if (command == '2') {
      digitalWrite(led, LOW);   // Turn off LED
    }
}

Processing Code¶

Below is the Processing code used to create the interface for controlling the LED:

import processing.serial.*;

Serial port;

void setup() {
  size(200, 100);
  port = new Serial(this, "COM17", 9600);  // Change "COM17" to match your serial port
}

void draw() {
  background(255);
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(20);
  text("LED Control Interface", width/2, 20);
  rect(30, 40, 60, 40);  // Button for LED ON
  rect(110, 40, 60, 40); // Button for LED OFF
  fill(255);
  text("ON", 60, 60);
  text("OFF", 140, 60);
}

void mousePressed() {
  if (mouseX > 30 && mouseX < 90 && mouseY > 40 && mouseY < 80) {
    port.write('1'); // Send command to turn on LED
  } else if (mouseX > 110 && mouseX < 170 && mouseY > 40 && mouseY < 80) {
    port.write('2'); // Send command to turn off LED
  }
}

Result¶

:

Opinions: Likes: - Intuitive graphical interface design. - Seamless integration with Arduino via serial communication. Dislikes: - Limited scalability for complex applications. - Lack of built-in support for advanced UI components.

Advantages¶

Rapid prototyping of interactive visual applications.
Extensive community support and resources.
Cross-platform compatibility (Windows, macOS, Linux).

Disadvantages¶

Steeper learning curve for advanced features.
Limited support for 3D graphics and advanced rendering techniques.

Tool 3 - Blynk¶

Brief¶

Blynk is a platform that allows for easy development of IoT applications with drag-and-drop widgets. It provides a variety of pre-built widgets that can be easily configured to interact with hardware devices.

Typical use cases¶

Blynk is commonly used for creating IoT projects that involve remote monitoring and control of hardware devices. It’s popular among hobbyists, makers, and professionals for its simplicity and versatility.

Workflow and setup¶

To use Blynk for creating a simple interface to control an LED, follow these steps: 1. Installing Blynk: - Download and install the Blynk app from the App Store or Google Play Store. - Create a new Blynk account or log in if you already have one. 2. Creating a Blynk Project: - Create a new project in the Blynk app. - Select the appropriate hardware device (e.g., Arduino) and connection type. 3. Adding Widgets: - Add widgets to the Blynk project to control the LED (e.g., Button widget). - Configure the widgets to send commands to the hardware device. 4. Programming the Device: - Write the necessary Arduino code to connect your device to the Blynk server. - Define the functionality to respond to commands sent from the Blynk app. 5. Running the Project: - Upload the Arduino code to your device. - Open the Blynk app and run the project.

Result¶

Video and screenshots of the results:

Opinions: Likes: - User-friendly interface for creating IoT projects. - Wide range of pre-built widgets for different use cases. Dislikes: - Limited customization options for widget appearance. - Dependency on internet connectivity for remote control.

Advantages¶

Rapid development of IoT applications without extensive coding.
Cross-platform compatibility with support for various hardware devices.
Integration with popular IoT platforms and services.

Disadvantages¶

Limited flexibility in UI design and customization.
Subscription-based pricing model for advanced features.