13. Interface and application programming

Individual assignment:

  • Write an application that interfaces a user with an input &/or output device that you made.

Group assignment:

  • Compare as many tool options as possible.

13.1. Individual Assignment

This week I have to make an application with a user interface that communicates with inputs or outputs of a device made by me.

In my work I develop virtual content for training in occupational risk prevention using Unity software, although I am actually a mechanical engineer, but it is something that I like and I have learned thanks to online tutorials online. So who is interested can get it.

13.1.1 Processing

First I’m going to do something using the Processing software. I had never used it, and I like it because it is simple.. Although it requires a bit of programming skill, but there is a lot of information online.

First, I watch a video in which Marta explained to FabLab León students from last year how to use Processing. Marta, thanks: D

To test serial communication I only have the hello44 board that I made. It has a button and a led.

Problems!! I spent two days trying to communicate my board through the FTDI cable. After I’m going crazy, I got another FTDI cable and it worked. A faulty FTDI cable was the cause of all my ills. Things that happen when you buy from Amazon …

In this video I show the final result:

I have used Arduino IDE to program my board.

The script for my hello44 board is this:

#include <SoftwareSerial.h>
SoftwareSerial mySerial(0,1); // RX, TX
int LED=8;//Pin Led (Attiny44 pin 5 = Arduino pin 8 )
int BUTTON=3; //Pin Button (Attiny pin 10 = Arduino pin 3).
int previousButtonState=1;
int ButtonState=1;
int ledState = LOW;             // ledState used to set the LED
void setup() {
  // set the data rate for the SoftwareSerial port
  pinMode(LED, OUTPUT);
void loop() { // run over and over
  ButtonState = digitalRead(BUTTON);  
  if (ButtonState !=previousButtonState) {  // This serves to only detect that I have pressed the button once until I release it and press again
    if(ButtonState==0){                   // If I press the button I send a '0' through the serial port
  if (mySerial.available()) {     // If it receive data through the serial port ..
    ledState=mySerial.read();     //Read '0'(LOW) or '1' (HIGH)
    digitalWrite(LED, ledState);  //Turn on/off the led

Link to download my Arduino IDE file.

On the other hand, this is my script for Processing:

This sketch connects the helloboard44 with processing.
You can turn on/off the Led of the helloBoard44 by pressing a button on Processing.
And you can change the direction of rotation of the FabLab logo by pressing the helloBoard button.
import processing.serial.*;
//Define the variables
Serial myPort;  // Create object from Serial class
float val;      // Data received from the serial port
String text;
boolean stateButton;
boolean stateLed;
String txtLed;
PImage logo;
float angle;
void setup() 
  size(500, 500);  //Configure the size of the window  
  println("Ports detected: ");  //Print text
  printArray(Serial.list());  //Print ports detected
  String portName = Serial.list()[0];// Set the port name
  myPort = new Serial(this, portName, 9600); //Configure the serial communication. The baud (9600) must be the same in the microcontroller 
  logo=loadImage("logoFabLab.png"); //Initializes a PImage passing an image file name  
  stateButton=false;//initial state of the button
  stateLed=false;//initial state of the led
  angle=0;//initial rotation angle of the FabLab logo
  val=1; //initial value (it will be equal to 0 when you press the button on the board)
void draw()
  //////////Set the background image that not change
  /////Background color
  background(158,227,226);  // Set background to blue clear
  /////Shapes that don't change over time
  fill(50);//Sets the color used to fill shapes (gray)
  circle(350, 100, 180);  // Draw a circle to led button (posX,posY,Diameter)
  line(0,250,500,250);  //draw a line to divide the screen into 2 
  triangle(230,375,270,375,250,335);  //Draw a triangle(X1,Y1,X2,Y2,X3,Y3)
  triangle(230,385,270,385,250,425);  ////Draw a triangle(X1,Y1,X2,Y2,X3,Y3)
  /////Texts that don't change over time
  fill(0);//Sets the color used to fill the text (black)
  textSize(25);  //Sets text size
  text("Press this button \nto turn on and off \nthe board led",10,50);  //Displays a text on the screen (string,posX,posY)  
  text("Press the board \nbutton to change \nthe direction of \nrotation of the \nFabLab logo",10,300);//Displays a text on the screen (string,posX,posY)    
  //////////Configure what happens when I press the BUTTON ON THE BOARD
  /////Processing receives a 0 each time I press the button on my board. So I want every time it receives 0 to change stateButton variable
  /////Configure what happens according to the value of the stateButton variable
  if (stateButton==false) {  // If the stateButton value is false,
    fill(255,0,0);    // Set fill to red
    triangle(230,375,270,375,250,335);  //Draw a triangle pointing up
    angle+=0.02;  //Change the angle of rotation of the FabLab logo (+ 0.02 radians)
  else {                       // If the stateButton value is true,
    fill(255,0,0);     // Set fill to red
    triangle(230,385,270,385,250,425);  //Draw a triangle pointing down
    angle-=0.02;  //Change the angle of rotation of the FabLab logo (- 0.02 radians)
  /////Rotation controlled by buttom of board. Draw the Fablab logo
  imageMode(CENTER); //Draw image using CENTER mode 
  pushMatrix();  //Save the current matrix (translate, rotate and scale values)
    translate(380,380);  //Move the anchor point to a certain position. After this the (0,0) is the certain position.
    rotate(angle);  //Change plane rotation according the axis
    image(logo,0,0,180,180);  //Draw the FabLab logo. imageMode(CENTER) --> (img,posx,posy,width,height)
  popMatrix();  //Go back to the last saved matrix  
  //////////Configure what happens according to the value of the stateLed variable
  if (stateLed == true) {  // If the stateButton value is true,
    fill(45,255,0);  // change color for the led button (green)
    myPort.write(1); //Send '1' to serial port. My helloboard turn on the led
    txtLed="Led ON"; //Change the string txtLed
  else {  // If the stateButton value is false,
    fill(200);  // change color for the led button(gray)
    myPort.write(0); //Send '0' to serial port. My helloboard turn off the led 
    txtLed="Led OFF";  //Change the string txtLed
  circle(350, 100, 150);  // Draw a circle (led button)  
  fill(0);  //Change color for text
  textSize(32); //Set text size
  text(txtLed,290,110); //Display a text on the screen
void mouseClicked(){  //Runs when any mouse button is pressed and released
  if((mouseX >= 275) && (mouseX <= 425) && (mouseY >= 25) && (mouseY <= 175)){  //If the mouse is on the led button
    stateLed=!stateLed;  //Change the stateValue value
void serialEvent(Serial myPort){  //This function runs when it receives data through the serial port
  String inString = myPort.readStringUntil('\n');
    float[] values=float(split(inString,","));
     val=values[0]; //Save data in val

Link to download my Processing file.

13.1.1 Unity

As I have experience with Unity software, I have done something more complex, a game in which the player has to avoid obstacles and collect points. The player moves when interacting with an ultrasound sensor (HC-SR04) connected to an Arduino Uno.

The following video shows the final result:

Link to download the game

This is the code for Arduino IDE:

const int EchoPin = 7;
const int TriggerPin = 8; 
void setup() {
   pinMode(TriggerPin, OUTPUT);
   pinMode(EchoPin, INPUT);
void loop() {
   int cm = ping(TriggerPin, EchoPin);
   //Serial.print("Distancia: ");
int ping(int TriggerPin, int EchoPin) {
   long duration, distanceCm;   
   digitalWrite(TriggerPin, LOW);  //para generar un pulso limpio ponemos a LOW 4us
   digitalWrite(TriggerPin, HIGH);  //generamos Trigger (disparo) de 10us
   digitalWrite(TriggerPin, LOW);   
   duration = pulseIn(EchoPin, HIGH);  //medimos el tiempo entre pulsos, en microsegundos   
   distanceCm = duration * 10 / 292/ 2;   //convertimos a distancia, en cm
   return distanceCm;

The following video shows how I have done it. The video is long …

To make serial communication work I have used a free Asset (Ardity).

I put the link to download the scripts I have made for the game:

Link to download Scripts.

Link to download complete unity project

13.2. Group Assignment

The Group Assignment page is at the following link.

There are many tools to make a user interface.

  • Unity

My favorite is Unity because it is the one I know best hehe. In addition Unity is multiplatform (Windows, Mac, Linux, Android, iOS, …), it has a powerful graphics engine, its user interface is like that of a 3D software, this makes it easy to generate 3D shapes and scenes and there is a lot of information on-line. It also allows creating virtual, augmented or mixed reality content. The downside is that it requires some programming skill, it is programmed in C #.

  • Processing

Processing allows you to make simple applications quickly. It allows you to make applications for Windows, Mac and Linux. The generated executables take up little space. The bad thing is that all the geometries and shapes have to be generated by code, this is a bit hard.

  • App Inventor

This software is a free cloud-based service that allows you to create your own mobile applications using a block-based programming language. I have not tried it, but I have looked at it. Block programming saves you from having to write code to program, making programming easier, although it can be a bit messy at first. You are limited to creating apps for android devices. It seems to me a good option if you want to make an Android app as a user interface to control a device.