Interface and Application Programming
Week 16
This week I was supposed to create an application that shows an interface that communicates with an input or output device. In the group assignment I should try some more tools.
Individual assignment
Processing LED
The first thing I wanted to do was try Processing, as it might be a suitable for my final project. Processing is an object-oriented programming language with an integrated development environment. The focus of the programming language is specialized in graphics, simulation and animation. For this I downloaded it from the Processing website. Several tutorials recommend the installation and use of the library control5 to create a nice interface. To install a new library go to menu: Sketch - Import Library… - Add Library…
At the beginning I wanted to make LEDs blink and create an interface for them. I looked at forums and tutorials that dealt with the topic. As basis I used the ESP32 board from week 14. I wrote the code myself based on the following tutorial by Hardik Rathod at hackster.io.
The board should receive data via a serial connection. If the variable that is transmitted has the value g, r or b, the LEDs are triggered accordingly. The whole sketch looked like this:
Arduino Sketch
void setup() {
pinMode(5, OUTPUT); //green
pinMode(21, OUTPUT); //red
Serial.begin(9600);
}
void loop(){
if(Serial.available()){
char val = Serial.read();
if(val == 'g'){
digitalWrite(5, HIGH);
}
if(val == 'r'){
digitalWrite(21, HIGH);
}
if(val == 'b'){
digitalWrite(5, LOW);
digitalWrite(21, LOW);
}
}
}
Next, Processing must be informed that the serial communication is used to transmit the data that is retrieved via the interface. Therefore buttons are created which call the function port.write() when activated with a characteristic value. The corresponding processing code then looked like this:
Processing Sketch
import controlP5.*;
import processing.serial.*;
Serial port;
ControlP5 cp5;
PFont font;
void setup(){
size(300, 350);
printArray(Serial.list());
port = new Serial(this, "CHOOSE_YOUR_PORT", 9600);
cp5 = new ControlP5(this);
font = createFont("calibri light bold", 25);
cp5.addButton("green")
.setPosition(100, 50)
.setSize(120, 70)
.setFont(font)
;
cp5.addButton("red")
.setPosition(100, 150)
.setSize(120, 70)
.setFont(font)
;
cp5.addButton("off")
.setPosition(100, 250)
.setSize(120, 70)
.setFont(font)
;
}
void draw(){
background(0, 0 , 0);
fill(0, 255, 0);
textFont(font);
text("Fab Academy", 80, 30);
}
void green(){
port.write('g');
}
void red(){
port.write('r');
}
void off(){
port.write('b');
The pictures show impressions of the interface and the wiring, which was built like in the assignments before. In the video you can see how the whole thing worked and how you can create the basis for an interface with little effort.
Processing FSR
For my final project I will use pressure sensors. Accordingly, I wanted to try the whole thing with an FSR sensor and customize the sketch for it. I looked at some finished sketches, like the one from Enzi from the processing forum. Based on this, I then rebuilt and adapted my own sketch. The result was as follows:
Arduino Sketch
#include <Wire.h>
int fsrPin = 39;
int fsrReading;
void setup(void) {
Serial.begin(115200);
}
void loop(void) {
fsrReading = analogRead(fsrPin);
sendFSR();
}
void sendFSR(void) {
byte data[1] =
{fsrReading,};
Serial.write(data,1);
delay(100);
}
Depending on the generated value scaled down by the map() function, circles are drawn in this diameter.
Processing Sketch
import controlP5.*;
import processing.serial.*;
Serial due;
byte[] fsrReading;
final int FORCE = 2;
final int NReading = 3;
ControlP5 cp5;
void setup() {
size (300,300);
due = new Serial(this,"CHOOSE_YOUR_PORT",115200);
fsrReading=new byte[NReading];
}
void draw() {
background(255,255,255);
readValues();
float x = map(getReading(FORCE),0,255,0,200);
circle(150,150,1);
circle(150,150,x);
smooth();
println(x);
}
void readValues() {
while (due.available() >= NReading) {
due.readBytes(fsrReading);
}
}
int getReading(int reading) {
return (int)fsrReading[reading] & 0xff;
}
And here are pictures of the generated interface:
The video shows, how the whole, unfortunately somewhat sluggishly, reacts:
Group assignemnt
Networking via Blynk
Many use Blynk to quickly generate an integration into an app. Especially for future workshops, where a prototype should be rapidly developed with an app, this can be helpful. “We make Internet of Things simple for you” is their slogan, so see what they promise. First I download the app from the App store - with 4.3 stars (May 2019). A list of supported hardware can be found at Blynk. The ESP32 is included, as well as countless other platforms.
In the Arduino IDE you can look for the Blynk library under “Sketch - Include Library - Library Manager”. After a short time the whole thing looks like this:
The first thing I did was to explore the interface. You can drag and drop the elements individually. Unfortunately there is only limited room for expansion, because the Blynk extension has to be bought expensive via app-in-purchases. That quickly brought you back to reality, because otherwise it was really good. I was able to customize the design for my needs, so that I can display buttons that control the LEDs. Here are some pictures of the surface:
In this time my Auth code has arrived, which I need for my Arduino code to authenticate me.
Arduino Sketch
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
char auth[] = "...";
char ssid[] = "DEZENTRALE";
char pass[] = "...";
void setup()
{
Serial.begin(9600);
Blynk.begin(auth, ssid, pass);
}
void loop()
{
Blynk.run();
}
And it worked directly. Here are a few pictures of the whole construction:
Last but not least a video of the workflow:
Here you can download the files mentioned above: