We experimented with some web-based applications that were not only enjoyable, but also very user-friendly.

The first was ”MIT App Inventor”, which is an intuitive and visual programming environment that allows everyone – even children – to build fully functional apps for Android phones, iPhones, and Android/iOS tablets.

To use this web program, you need to open an account. Once you sign in, you can create apps by accessing your library or starting a new one. If you're new to the program, a good starting point is to go to the ”Try a Tutorial” section on the front page. From there, you can choose a tutorial. I selected "Hello Purr", it is a fun and basic-level tutorial to get you started.

When you create an app, you will mainly work with two windows - the “Designer” and the “Blocks”. In the Designer window, you can add various components to your app such as images, media, text, and maps using the palette on the left-hand side.


The “Designer” window has a column on the right-hand side where you can modify the properties of the components in your app. This includes changing colors, adjusting sizes, and adding files, among other options.


The Blocks window is where you can write the code for your app. On the left-hand side of the window, there is a column where you can select the type of "Event Handler" and the "Command" that you want to assign to that event. These blocks are connected to create a desired outcome. In this case, it is to make a sound when the cat is stroked when using the App.


As you design and code your app, you have the option to test it in real-time by uploading it onto a tablet or mobile phone. Once the app is complete, you can share it with others.

The next application we experimented with is Processing.

Processing is an open source IDE that is able to create GUI for applications like Arduino. It is aso being describe as a digital sketchbook where coders can create interactive graphics.

Taking reference from a project found in hackster.io, a simple GUI to control servo motors was created.

First, the processing IDE was downloaded and installed. Then the ControlP5 library was added into the Processing by selecting Sketch>>Import Library...>>Add library, then searching for the ControlP5. size

After the controlled5p library was installed, the sketches found on the from hackster.io reference were ran in Arduino and Processing respectively. The GUI was then tested with a red LED circuit.

Next, the processing sketch was changed to control the servo motors, using the robotic hand Seh Yong used in his output device assignment. The command buttons were changed to Open, Close and Flex.

import controlP5.*; //import ControlP5 library
import processing.serial.*;

Serial port;

ControlP5 cp5; //create ControlP5 object
PFont font;

void setup(){ //same as arduino program

  size(300, 350);    //window size, (width, height)
  printArray(Serial.list());   //prints all available serial ports
  port = new Serial(this, "COM3", 9600);  
  //i have connected arduino to com3, it would be different in linux and mac os
  //lets add buton to empty window
  cp5 = new ControlP5(this);
  font = createFont("calibri light bold", 20); 
  // custom fonts for buttons and title
  cp5.addButton("Close")     //"Close" is the name of button
    .setPosition(100, 50)  //x and y coordinates of upper left corner of button
    .setSize(120, 70)      //(width, height)

  cp5.addButton("Open")     //"Open" is the name of button
    .setPosition(100, 150)  //x and y coordinates of upper left corner of button
    .setSize(120, 70)      //(width, height)

  cp5.addButton("Flex")     //"Flex" is the name of button
    .setPosition(100, 250)  //x and y coordinates of upper left corner of button
    .setSize(120, 70)      //(width, height)

void draw(){  //same as loop in arduino

  background(100, 150 , 150); // background color of window (r, g, b) or (0 to 255)
  //lets give title to our window
  fill(0, 255, 0);               //text color (r, g, b)
  text("HAND CONTROL", 80, 30);  // ("text", x coordinate, y coordinat)

//lets add some functions to our buttons
//so whe you press any button, it sends perticular char over serial port

void Close(){

void Open(){

void Flex(){

The Arduino sketch was also changed to control the servo.


Servo myservo;  // create servo object to control a servo

int pos = 0;    // variable to store the servo position

void setup() {
  myservo.attach(9);  // attaches the servo on pin 9 to the servo object

  Serial.begin(9600);    //start serial communication @9600 bps

void loop(){
  if(Serial.available()){  //id data is available to read

	char val = Serial.read();

	if(val == 'C'){       //if C received
	  myservo.write(170); ; //servo motor moves to 170 degree position
	if(val == 'O'){       //if O received
	  myservo.write(0); ; //servo motor moves to 0 degree position
	if(val == 'F'){       //if F received
	  myservo.write(170); //servo motor moves to 170 degree position
	  delay(500);  //servo motor hold position for 0.5 sec
	  myservo.write(0); //servo motor moves to 0 degree position

The robotic arm circuit was then set up. After setting up the circuit, the sketches were then uploaded one by one, first onto Arduino then Processing. It is important to upload the Arduino sketch first before launching processing to upload the processing sketch. This way it can avoid the situation of the arduino failing to upload use to serial being busy.

After the processing code was uploaded, the resulting GUI was able to control the servo motors on the robotic hand.

Comparing the MIT App Inventor with Processing, While the App Inventor is fast and easy to use, it is more suitable for quick prototyping. On the other hand, though Processing allows for more customization and design of the GUI, it requires at least some basic knowledge in coding.

Source Code

Arduino code for the servo motor circuit.

Processing code for the servo motor circuit.