Interface and application programming
Assignment
- Write an application that interfaces with an input and/or output device that you made, comparing as many tool options as possible.
Learning outcomes
- Interpret and implement design and programming protocols to create a Graphic User Interface (GUI).
Have you
- Described your process using words/images/screenshots.
- Explained the GUI that you made and how you did it.
- Outlined problems and how you fixed them.
- Included original code.
Modifying the input reading code
-
In the inputs assignment, I programmed a microcontroller to sense eight buttons, needed for my final project. The output was read from Arduino IDE serial monitor, so, for this week, I want to start interpreting the binary output, by converting it to characters, that is, map the buttons according to the Braille code, and translate the input to its corresponding character. For example, the reading "001000" corresponds to an "a".
The sencond step will be to display the typed characters on the computer screen, so the input reading and conversion to characters can be more easily evaluated.
The conversion from binary to a character is done with the "if" structure and the "AND" operation.
/*
Keyboard code (C)
Converts combinations of keys into characters.
Keys are pushbuttons attached to digital pins on the board.
created 2017
by Juan Carlos Miranda Castro
*/
int buttonArray[] = {2, 3, 4, 7, 8, 9, 5, 6}; // this array will hold the pin value for each button
String stringArray[] = {"a", "a", "a", "a", "a", "a", "a", "a", "a"}; // this array will hold the state of each button
// constants won't change. They're used here to
// set pin numbers:
const int ledPin = 13; // the number of the LED pin
// variables will change:
void setup()
{
Serial.begin(9600);
// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
for (int thisPin = 0; thisPin < 8; thisPin++)
{
pinMode(buttonArray[thisPin], INPUT);
}
}
void loop()
{
// read the state of the pushbuttons value:
// buttonState = digitalRead(buttonPin);
String mensaje = "";
for (int thisPin = 0; thisPin < 7 ; thisPin++)
{
stringArray[thisPin] = "0";
}
//Serial.println("*");
while ( digitalRead(buttonArray[0]) == HIGH &&
digitalRead(buttonArray[1]) == HIGH &&
digitalRead(buttonArray[2]) == HIGH &&
digitalRead(buttonArray[3]) == HIGH &&
digitalRead(buttonArray[4]) == HIGH &&
digitalRead(buttonArray[5]) == HIGH &&
digitalRead(buttonArray[6]) == HIGH &&
digitalRead(buttonArray[7]) == HIGH )
{
digitalWrite(ledPin, HIGH);
}
digitalWrite(ledPin, LOW);
while ( digitalRead(buttonArray[0]) == LOW ||
digitalRead(buttonArray[1]) == LOW ||
digitalRead(buttonArray[2]) == LOW ||
digitalRead(buttonArray[3]) == LOW ||
digitalRead(buttonArray[4]) == LOW ||
digitalRead(buttonArray[5]) == LOW ||
digitalRead(buttonArray[6]) == LOW ||
digitalRead(buttonArray[7]) == LOW )
{
if (digitalRead(buttonArray[0]) == LOW) {
stringArray[2] = "1";
}
if (digitalRead(buttonArray[1]) == LOW) {
stringArray[1] = "1";
}
if (digitalRead(buttonArray[2]) == LOW) {
stringArray[0] = "1";
}
if (digitalRead(buttonArray[3]) == LOW) {
stringArray[3] = "1";
}
if (digitalRead(buttonArray[4]) == LOW) {
stringArray[4] = "1";
}
if (digitalRead(buttonArray[5]) == LOW) {
stringArray[5] = "1";
}
if (digitalRead(buttonArray[6]) == LOW) {
stringArray[6] = "1";
}
if (digitalRead(buttonArray[7]) == LOW) {
stringArray[6] = "1";
}
}
if ( stringArray[6] == "1" )
{
Serial.println(" ");
}
if ( stringArray[2] == "0" &&
stringArray[5] == "0" ) //zeros on positions 2 and 5 mean the character is a thorugh j
{
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "0" &&
stringArray[3] == "0" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("a");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "0" &&
stringArray[3] == "0" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("b");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "0" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("c");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "0" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("d");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "0" &&
stringArray[3] == "0" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("e");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "0" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("f");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "0" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("g");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "0" &&
stringArray[3] == "0" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("h");
if ( stringArray[0] == "0" &&
stringArray[1] == "1" &&
stringArray[2] == "0" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("i");
if ( stringArray[0] == "0" &&
stringArray[1] == "1" &&
stringArray[2] == "0" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("j");
}
if ( stringArray[2] == "1" &&
stringArray[5] == "0" ) //one on position 2 and zero on position 5 mean the character is k thorugh t
{
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("k");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("l");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("m");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("n");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("o");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("p");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("q");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("r");
if ( stringArray[0] == "0" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("s");
if ( stringArray[0] == "0" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("t");
}
if ( stringArray[2] == "1" &&
stringArray[5] == "1" ) //ones on positions 2 and 5 mean the character is u thorugh z
{
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "0" &&
stringArray[5] == "1" )
Serial.println("u");
if ( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "0" &&
stringArray[5] == "1" )
Serial.println("v");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "1" )
Serial.println("x");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "1" )
Serial.println("y");
if ( stringArray[0] == "1" &&
stringArray[1] == "0" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "1" &&
stringArray[5] == "1" )
Serial.println("z");
/*if( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "1" )
Serial.println("p");
if( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("q");
if( stringArray[0] == "1" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "0" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("r");
if( stringArray[0] == "0" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "0" &&
stringArray[5] == "0" )
Serial.println("s");
if( stringArray[0] == "0" &&
stringArray[1] == "1" &&
stringArray[2] == "1" &&
stringArray[3] == "1" &&
stringArray[4] == "1" &&
stringArray[5] == "0" )
Serial.println("t");*/
} /* Serial.println(stringArray[0]+stringArray[3]);
Serial.println(stringArray[1]+stringArray[4]);
Serial.println(stringArray[2]+stringArray[5]);*/
}
With the microcontroller code ready, I went to Processing to create a window for characters displaying.
Creating a GUI
-
The code for displaying characters is very simple. First, the serial library must be imported. Then, the variables are declared, in this case, a serial port, a string variable and a font variable:
import processing.serial.*;
Serial myPort; // Create object from Serial class
String val; // Data received from the serial port
PFont f;
In the setup, the size of the window is set, then, the port from which data will be read is defined. Also, the font is defined and the port is set with the baudrate:
void setup()
{
size(640,640);
String portName = "/dev/ttyUSB1"; //change the 0 to a 1 or 2 etc. to match your port
f = createFont("Arial",16,true); // Arial, 16 point, anti-aliasing on
myPort = new Serial(this, portName, 9600);
}
Finally, the color of the background is defined, the string variable is set to the input value and the input is displayed on the window.
The program uses the change of line as a flag between characters, so, each time "\n" is found on the serial communication, the processing code displays the value read and waits for new data.
void draw()
{
fill(0,0,0);
textFont(f,300);
if ( myPort.available() > 0)
{ // If data is available,
val = myPort.readStringUntil('\n'); // read it and store it in val
if (val != null)
{
background(255,255,255);
text(val,250,350);
}
}
println(val); //print it out in the console
//delay(500);
}
Back