Interface and Application Programming¶
This week there are two types of assignments, one group and one individual. In my case I’m alone in ESNE’s Fab Lab so I am doing both.
Assignment¶
Group assignment:
- Compare as many tool options as possible
Individual assignment:
- Write an application that interfaces a user with an input &/or output device that you made
Group assignment¶
Group assignment page¶
In the following link you can access the Leon Fab Lab page that contains all the group assignments: Fab Lab Leon group assignment page
Compare as many tool options as possible¶
App inventor¶
The first program I tried was App Inventor, the program is designed to design applications for Android and iPhone.
In my case, I used the application using my mobile device, within the App Inventor website there are several tutorials where they explain in detail what you should do if you want to work from your computer or by connecting your mobile device.
In my case I followed a tutorial on the page called Mole Mash, you agreed to create a game where you have to touch a creature in a limited time and your score increases depending on the creatures you touch. The tutorial on the page seemed well explained and easy to follow, this was the result after finishing the tutorial.
Later, with the emulator of the web page, I was able to test that my app worked correctly as if I was using it on my phone, every time I clicked on the creature with the mouse, it added a point to the marker and moved the creature from place.
Individual assignment¶
Write an application that interfaces a user with an input &/or output device that you made¶
First tutorials in Processing¶
This was the first time that I used Processing, I started by following several Marta Verde tutorials that my Leon instructors sent me this week, which were very useful to start using this program.
I started with a basic program in which I drew various elements on the screen and blue circles were generated at the mouse position, the end result was very colorful
Here is the code I used
void setup() {
size(500, 500);
background(#7EE3E8);
}
void draw() {
stroke(0);
strokeWeight(5);
point (100,100);
stroke(255);
line (0,0,100,50);
noStroke ();
fill(0,150,34,10);
ellipse (width/2, height/2,100,200);
rectMode(CENTER);
fill(0,25,45,10);
rect(mouseX,mouseY,20,20);
ellipse(mouseX, mouseY, 100 ,100);
}
Then I made a program in which the position of my mouse generated circles of blue colors
Here is the code I used
float tamanho;
float area;
void setup() {
size(500, 500);
background(#000203);
area = 50;
}
void draw() {
tamanho = random (1,50);
noStroke();
fill (0,random (255),random (255),150);
ellipse (random(mouseX- area,mouseX+ area),
random (mouseY- area, mouseY+ area), tamanho,tamanho);
fill (33,150,200,20);
}
Then a program on how to load images and make them rotate at different speeds according to the position of my mouse
Here is the code I used
PImage foto;
float giro;
float velocidad;
void setup() {
size (400,400);
foto = loadImage("mifoto2.jpg");
}
void draw() {
imageMode(CENTER);
velocidad = map(mouseX, 0, width, 0,1);
pushMatrix();
translate (width/2, height/2);
rotate (giro);
image (foto,0,0,foto.width/4, foto.height/4);
popMatrix();
rect (100,100,30,30);
giro = giro +velocidad;
}
Processing + potentiometer¶
After the previous tutorials I made a program including a potentiometer as input. This program draws circles at the mouse position of different colors, but with the potentiometer we can control the diameter of these circles
Here is the code that I have used in arduino
int val;
void setup()
{
Serial.begin(9600);
}
void loop()
{
val = analogRead(A0);
Serial.println(val);
delay(25);
}
}
Here is the code that I have used in processing
import processing.serial.*;
Serial myPort;
String val;
float radio;
float tamanho;
void setup()
{
printArray(Serial.list());
delay (1000);
String portName = Serial.list()[2];
myPort = new Serial(this, portName, 9600);
delay(1000);
size(800, 800);
background(#FFFFFF);
}
void draw()
{
val = myPort.readStringUntil('\n');
radio = map(float(val), 0, 1023, 20, 200);
tamanho = random (1,50);
noStroke();
fill (0,random (255),random (255),150);
ellipse(mouseX, mouseY, radio , radio);
delay(25);
}
Processing + humidity sensor DHT11¶
The next thing I wanted to do was a screen that would show the relative humidity value that the humidity sensor on my input board measured. I wanted Relative Humidity to be written on the screen and below it the value that my sensor was measuring, this value would be updated every second.
I started by modifying my input board arduino code so that it only printed the humidity value on the serial port.
Here is the code that I have used in arduino
#include "DHT.h"
#define DHTPIN 1 // Digital pin connected to the DHT sensor
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
void setup() {
Serial.begin(9600);
Serial.println(F("DHTxx test!"));
Serial.print("hello");
dht.begin();
}
void loop() {
// Wait a few seconds between measurements.
delay(1000);
// Reading temperature or humidity takes about 250 milliseconds!
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(h) || isnan(t) || isnan(f)) {
Serial.println(F("Failed to read from DHT sensor!"));
return;
}
// Compute heat index in Fahrenheit (the default)
float hif = dht.computeHeatIndex(f, h);
// Compute heat index in Celsius (isFahreheit = false)
float hic = dht.computeHeatIndex(t, h, false);
Serial.println(h);
}
Then create the code in processing to make the screen that would show the measurement of the sensor. The base code worked correctly but when the humidity value changed the data appeared one on top of the other :(
Solve the problem by adding a background before each 2 second reading, also modify the size of the screen and add a blue circle that increased or decreased in size depending on the measurement of the sensor
Here is the code that I have used in Processing
import processing.serial.*;
Serial myPort;
String val;
float radio;
void setup()
{
printArray(Serial.list());
delay (1000);
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);
delay(1000);
size(500, 500);
}
void draw()
{
background(#FFFFFF);
val = myPort.readStringUntil('\n');
radio = map (float(val), 0, 100, 10, 100);
fill(0,0,200);
textSize(50);
text("Humedad relativa:", 50, 200);
fill(0,0,200);
textSize(50);
text (val,200,350);
noStroke();
fill (0,0,250);
ellipse (370,320,radio,radio);
fill (33,150,200,20);
delay(2000);
}
With these changes everything worked fine, this would not have been possible without the help of my colleague Luis, I wish everyone had someone in the fabacademy who helps them as much as Luis helps me. Thanks another week!
Processing VS Arduino¶
I had never used processing for data visualization, my instructor Nuria asked me for a comparison between reading data from the arduino serial monitor or the program I created with Processing. My conclusion is that processing seems to me a good program to generate infographics with attractive data. I would only use it if my project has a part that shows something, for projects such as reading the water level of my pot I would use the ardiun serial monitor because I will only use it to see if the data reading by the sensors is correct but it does not represent anything in itself.
See you next week!