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
mySerial.begin(9600);
pinMode(LED, OUTPUT);
pinMode(BUTTON,INPUT);
}
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
previousButtonState=ButtonState;
if(ButtonState==0){ // If I press the button I send a '0' through the serial port
mySerial.println(0);
}
}
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
}
delay(10);
}
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
myPort.bufferUntil('\n');
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
if(val==0){
stateButton=!stateButton;
val=1;
}
/////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');
if(inString!=null){
inString=trim(inString);
float[] values=float(split(inString,","));
if(values.length>=1){
val=values[0]; //Save data in val
println(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:
This is the code for Arduino IDE:
const int EchoPin = 7;
const int TriggerPin = 8;
void setup() {
Serial.begin(115200);
pinMode(TriggerPin, OUTPUT);
pinMode(EchoPin, INPUT);
}
void loop() {
int cm = ping(TriggerPin, EchoPin);
//Serial.print("Distancia: ");
Serial.println(cm);
Serial.flush();
delay(200);
}
int ping(int TriggerPin, int EchoPin) {
long duration, distanceCm;
digitalWrite(TriggerPin, LOW); //para generar un pulso limpio ponemos a LOW 4us
delayMicroseconds(4);
digitalWrite(TriggerPin, HIGH); //generamos Trigger (disparo) de 10us
delayMicroseconds(10);
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 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.