15. Interface & Application Programming¶
This week I worked with Processing, an integrated development environment, to create an application that interfaces with my final project LCD, and can address two specific lines in the interface. (May 5)
14-17 minutes
Processing & Serial¶
I began this week’s interfacing work with some intros and testing. To create my LCD interfacing application, I decided to use Processing, and IDE that I had used a bit before in my freshman engineering class taught by Mr. Will Rudolph, a 2019 Fab Academy graduate. We had a small processing unit in this class, where I made a simple two-player pong game, and this work gave me some prior insights into the IDE. Despite this, I really didn’t remember much from this unit starting this week, and decided to watch the Welcome to Processing 3 attached below.
This intro, along with some reading of a Learn Processing course, really knocked some of the rust off the processing interface for me, and helped me get started with my LCD application.
The basics of my LCD interfacing application require a serial connection between my final project mainboard, and my laptop. In the instance of code I wrote in last weeks Networking & Communications, I was able to read a serial input from any set receiving pin on this mainboard, parse the received serial, and print lines to my systems LCD. This parsing and LCD printing feature is what Ill be interfacing with this week, as with a serial connection, this LCD application will act as a transmitting node of my system. With this in mind, I will need to achieve a connection between my application and mainboard, which I did through the use of a USB interfacing FTDI chip attached to my mainboard and a USB from my computer, as well as the Processing Serial library, allowing me to call upon a USB port to transmit serial to, a function of my code that is discussed later.
Square ON/OFF Test¶
To establish a working serial connection between my mainboard and LCD system and my computer through FTDI, I altred a Serial Write test example included in the Processing IDE. This example makes use of the Processing Serial library, calling on it with the line…
import processing. serial.*;
to communicate via serial. The library begins serial communication in the processing sketch my first set up a serial port with the line below, where Port is my port name.
Serial Port;
Next, this setup port is connected to a hardware USB port, and the serial is started at a set baudrate in the Void Setup function of the code. This connection and start of serial through a hardware serial port are done in two steps, starting with beginning a string from a set hardware serial port. In my case, my FTDI chip was connected to COM9 on my machine, the third port on my serial list. This hardware serial port position on a serial port list correlates to the 2 in this string beginning line…
String portName = Serial.list()[2];
As when starting at 0, and counting up, my COM9 was port 2 on my serial list. There are many different ways in Windows to gain access to a list of these hardware serial connections, with a standard being Windows Device Manager, however, I ended up just using the port list give in the Arduino IDE, as I already had the software open. With this string reading my COM9 FTDI connection, I next connected my Processing Serial Port created previously, to a serial feed coming from hardware serial port COM9, with a baudrate of 9600, matching the rate of my mainboard code written in last week’s class, with the line below.
Port = new Serial(this, portName, 9600);
I implemented all of this Processing Serial port setup and connection in a simple example sketch that draws a square that when hovered over, outputs a “2ON” line to serial, and otherwise a “2OFF” line. These lines are transmitted from my computer to my mainboard and LCD setup via the setup hardware serial port and an FTDI ship, before being passed onto the proper line of the LCD interface with the code written in last week’s class. All of this together left me with the rectangle example code below.
When run in the Processing IDE, this code creates a simple 800 x 600 white window, with the color-changing, mouse detecting square in it. This square has two different phases, depending on the mouse’s position in the window. If the mouse is over the interface, but not the square, the square will be black in color, and output a 2OFF to serial. On the other hand, if the mouse is over the square, the square will turn gray in color, and output a 2ON to serial.
Depending on the mouse’s position in the interface, the receiving main board LCD system will display two different messages on the second line of the interface, shown below.
Text to LCD¶
My original square interface serial test was successful, and with this serial setup, I began the work on my actual LCD interfacing application for the week. Although the content of this interface is different, the serial setup and implementation of the Processing Serial library is the same, and I just stole my working setup code used in my square serial testing.
From this serial communicating base, I moved onto creating an actual user input field to interface with the first two lines of my LCD, as opposed to the ON/OFF square setup used for testing. Begining this, I read up on the use of Strings & Text in Processing, two features I needed to understand before using text or text inputs in my interface. Along with this, I also researched ways to include a user text input in Processing and stumbled across the ControlIP5 Processing library, a library allowing easy implementation of controllers in a Processing GUI. Among these included controllers is a text input field, that I decided to use in my interface.
I initialized this ControlIP5 library alongside the Processing Serial library at the start of my code and then included an instance of this library controllers with the lines
import controlP5.*;
ControlP5 cp5;
I implemented these in my sketch code, along with a variable for the font as well as a text storing textValue string that would later let me display and store text read my this internalized input field, leaving me with …
import controlP5.*;
import processing.serial.*;
ControlP5 cp5;
Serial Port;
PFont f;
String textValue = "";
The inclusion of all of these new functions and variables requires more in the Void Setup function of my code, where along with the same serial setup, I included the font that would be used in my application, as well as set up the interfaces two text inputs. The ControlIP5, includes some nice examples for each of the library’s included controllers, and I referenced a TextInput example from the library while writing the two text input fields into my Void Setup function. There are two included text input fields in my interface, one for each line that will be addressable in ly LCD interface. As described in the referenced ControlIP5 example, I first added each new text field and named them with the line
cp5.addTextfield("FirstLine")
and then followed that with a list of attributes for the feature …
.setPosition(20,500)
.setSize(200,40)
.setFont(f)
.setFocus(true)
.setColor(color(0,0,0))
;
setting its position in the interface, as well as the size of the input field, the font used, the text cursor, as well as the text color. Bringing all of this together, I was left with the Void Setup function below.
void setup() {
size(800,600);
String portName = Serial.list()[2];
Port = new Serial(this, portName, 9600);
f = createFont("Arial",18,true);
cp5 = new ControlP5(this);
cp5.addTextfield("FirstLine")
.setPosition(20,500)
.setSize(200,40)
.setFont(f)
.setFocus(true)
.setColor(color(0,0,0))
;
cp5.addTextfield("SecondLine")
.setPosition(600,500)
.setSize(200,40)
.setFont(f)
.setFocus(true)
.setColor(color(0,0,0))
;
}
From here, I next had to set up the usage of these text input fields, again referencing the text input example included with the ControlIP5 library. All of this remaining text input setup is done in the Void Draw function of my code, following the lines
background(255);
textFont(f,18);
fill(0);
which set up the interface’s background color, and also initialize the usage of my font included in my codes Void Setup feature. Then with the line
text(cp5.get(Textfield.class,"FirstLine").getText(), 780,315);
One of my interface text fields is read to a specific place in the interface, a feature I take advantage of later in the application creation process, after adding a background. Following the reading of this text to a location in the interface, there is another function in my code that, when text is entered into one of the text input fields, writes the inputted text to serial, and also transmits it via the hardware serial port with proper delay timings to align with those in the receiving code on my mainboard. Depending on the field in which text is inputted in the interface, this code adds a 1 or 2 in front of the text input, allowing my mainboard code to pars the received values to the right line on my LCD. All of this left me with the field reading and serial writing code shown below.
public void FirstLine(String theText) {
println("1"+theText);
delay(5000);
Port.write("1"+theText);
}
With all of these different functions completed, I ran the sketch in the Processing IDE, and was left with a working LCD interfacing application, shown in the video below!
Text to LCD - With Nice Interface¶
Although this LCD interfacing application was great and worked as intended, it wasn’t very pretty. I aimed to fix this through a different Background Image for the application, as well as some rearranging of the text inputs and text display. Embedding images in a processing sketch is one of the few processing skills that is still remembered from my short freshman year processing unit, discussed at the start of this page, and can be done with relative ease once you have an image.
For my LCD interfacing application, I thought it would be pretty cool to try to mimic the positioning of my LCD on the front of my final project fish tank, and started by taking a screenshot of the front angle of my Fusion 360 final project fish tank render.
From here, I used Microsoft’s Paint 3D to crop down the image to just the bottom half of the front of the tank, taking note of the final image dimensions in pixels as they would be needed later.
I saved this image into my Processing LCD interfacing application’s sketch folder, before moving onto including the image in the application’s code. This began with the inclusion of an image variable at the start of my code, leaving me with the final start of my code, shown below
From here, I attached this setup image to the background image I just created and saved in my sketch folder and also altered the size of my application window to match that of my background image. In this function, I also altered the positioning of my two text input features, to positions that fit nicely in this new background image. I changed each of these boxes’ positions while referencing my background image opened in Microsoft’s Paint, so I could find specific pixel coordinates based on my mouse position in the background image and position the boxes accordingly. These position alterations completed the final alterations on the Void Setup function of my code, shown below.
Finally, I began the alterations of the Void Draw function in my code, first with the inclusion of a background image. This line wasn’t much to change, as all I had to do was replace the previous color value, with my bg background image, I had set up in the previous function. The final change to be made in this function is the repositioning of the text display, showing whatever is being read from the two text input fields. Part of the reason I chose the front-facing angle of my fish tank render was to show a render of what text would be shown, so just as I repositioned the two textboxes previously, I repositioned their output to align in the LCD of my applications background image.
Pricing all these bits together left me with the final working LCD interfacing application code, shown below. :)
import controlP5.*;
import processing.serial.*;
ControlP5 cp5;
Serial Port;
PImage bg;
PFont f;
String textValue = "";
void setup() {
size(977,376);
String portName = Serial.list()[2];
Port = new Serial(this, portName, 9600);
bg = loadImage("tankbg.png");
f = createFont("Arial",18,true);
cp5 = new ControlP5(this);
cp5.addTextfield("FirstLine")
.setPosition(70,50)
.setSize(200,40)
.setFont(f)
.setFocus(true)
.setColor(color(255,255,255))
;
cp5.addTextfield("SecondLine")
.setPosition(70,130)
.setSize(200,40)
.setFont(f)
.setFocus(true)
.setColor(color(255,255,255))
;
}
void draw() {
background(bg);
textFont(f,18);
fill(255);
text(cp5.get(Textfield.class,"FirstLine").getText(), 780,315);
text(cp5.get(Textfield.class,"SecondLine").getText(), 780,315);
}
public void FirstLine(String theText) {
println("1"+theText);
delay(5000);
Port.write("1"+theText);
}
public void SecondLine(String theText) {
println("2"+theText);
delay(5000);
Port.write("2"+theText);
}
When ran, this interface was much prettier than its previous iteration …
A quick test of both of the interface boxes yielded the successful results shown in the video below.
Group Work¶
This week we worked as a group to compare as many tool options as possible. Click here to view our group documentation site, with this week’s assignment on it.
Downloads¶
- Click Here to access and download all of my files from this week