14. Interface and Application Programming¶
This week I learned about MATLAB for group work. I also learned how to use the app Processing to interface a user with a PCB board I made.
Group Work¶
This week I learned about MATLAB by MathWorks. You can see my work along with works of CLS students on the Charlotte Latin Fab Lab site. From this assignment I learned that MATLAB has support for many hardware platforms, including some popular microcontrollers, microprocessors, and FPGA (field-programmale gate array) boards which allows a more expansive use of MATLAB and it can create user interfaces. Furthermore, MATLAB is a numeric computing environment where a user can visualize data through ploting and more and can rapidly prototype. MATLAB alse uses a matrix-based approach which makes code more concise and easier to use for math applications. There are some drawbacks to using MATLAB though, because it takes up a lot of memory, can be slow to execute (which can hamper user expirence if it is needed on demand), and also is not open source software and instead requires a paid license.
Using Processing¶
I used the app Processing because a few of my teachers recommended I check it out for this week. I began by downloading the app from here. After downloading I went online and searched for how to use processing with an LED as an output. I found a helpful website that explained how to do just that I started with what they instructed. I began by opening my Arduino IDE and configuring my board. I plugged in an Arduino Uno to my computer and then could select “Arduino Uno” from the boards list and COM10 as the COM port. After selecting those I added the following code from the website into my Arduino IDE. I did however change the pin numbers from 2 to 5 as that was what pin I planned to wire my LED to.
/*LED on and off using the processing IDE.
created by the SriTu Tech team.
Read the code below and use it for any of your creation
*/
// Adapted by Ginny Foster during Fab Academy 2023
// Code from this website: https://srituhobby.com/processing-ide-with-led-on-and-off/
void setup() {
Serial.begin(9600);//enable serial communication
pinMode(2, OUTPUT);//define arduino pin, I changed mine to 5
}
void loop() {
if (Serial.available() > 0) {//check serial value
char led = Serial.read();//read serial value
if (led == '1') {//check serial read
digitalWrite(2, HIGH);//LED on, I changed mine to 5
} else if (led == '0') {//check serial read
digitalWrite(2, LOW);//LED off, I changed mine to 5
}
}
}
With that code uploaded I decided to wire together my Arduino. I grabbed a gumdrop LED, a 383 ohm resistor, and two male to male wires. I connected the long leg (positive end) of the LED to pin 5 of the Arduino and the negative end to the resistor and then to a ground pin on the Arduino. With that wired I moved onto Processing. Inside the Processing interface I began by copying the base code to ensure that it worked before I played around with some of the customization in Processing. Below is the base code.
/*LED on and off using the processing IDE.
The second time uploads this code.
created by the SriTu Tech team.
Read the code below and use it for any of your creation
*/
// Used by Ginny Foster during Fab Academy 2023
// Code from this website: https://srituhobby.com/processing-ide-with-led-on-and-off/
import processing.serial.*;//import serial communicate library
Serial myPort;//create serial object
int circleOneX, circleOneY; // Position of button one
int circleX, circleY; // Position of button two
int circleOnesize = 90; // Diameter button one
int circleSize = 90; // Diameter of button two
color currentColor, baseColor;//color variable
color circleOnecolor, circleColor;//color variable
color circleOneHighlight, circleHighlight;//color variable
boolean circleOneOver = false;
boolean circleOver = false;
PFont f;//font type
void setup() {
size(300, 200);//screen size
circleOnecolor = color(0);//set colors to variable
circleOneHighlight = color(51);//set colors to variable
circleColor = color(255);//set colors to variable
circleHighlight = color(204);//set colors to variable
baseColor = color(102);//set colors to variable
currentColor = baseColor;
circleX = width/2+circleSize/2+25;
circleY = height/2;
circleOneX = width/2-circleOnesize+15;
circleOneY = height/2;
printArray(PFont.list());//print fonts list your computer
f = createFont("Ebrima Bold", 20);//Enter your font name
textFont(f);
String portName = "COM4";//Enter your COM port
myPort = new Serial(this, portName, 9600);//select first port
print(portName);
}
void draw() {
update(mouseX, mouseY);//main method
background(currentColor);//background color
if (circleOneOver) {
fill(circleOneHighlight);
} else {
fill(circleOnecolor);
}
stroke(255);
ellipse(circleOneX, circleOneY, circleOnesize, circleOnesize);//drow circle one
if (circleOver) {
fill(circleHighlight);
} else {
fill(circleColor);
}
stroke(0);
ellipse(circleX, circleY, circleSize, circleSize);//drow circle two
textAlign(LEFT);
fill(255);//black color
text("LED OFF", 37, 110);//display text
textAlign(RIGHT);
fill(0);//white color
text("LED ON", 255, 110);//display text
}
void update(int x, int y) {
if ( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
circleOneOver = false;
} else if (circleOneOver(circleOneX, circleOneY, circleOnesize) ) {
circleOneOver = true;
circleOver = false;
} else {
circleOver = circleOneOver = false;
}
}
void mousePressed() {
if (circleOver) {
currentColor = circleColor;
myPort.write('1');//send value one
print("LED on");
}
if (circleOneOver) {
currentColor = circleOnecolor;
myPort.write('0');//send value ziro
print("LED off");
}
}
boolean circleOneOver(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
boolean overCircle(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
After uploading the Arduino code to my board first by clicking the upload button in the Arduino IDE, I then hit the run/play button in the Processing interface to run the Processing code. Initially the Processing code would not work because I forgot that this code was in Java, a language with which I am unfamiliar. The problem came from where I entered the COM port in the Processing code. The original line looks like this: String portName = "COM4";//Enter your COM port and I needed to change it to COM10, so I proceeded to delete the quote marks around COM4 and enterd COM10 resulting in something that looked like this: String portName = COM10 ;//Enter your COM port. I did this because I was thinking in my C++ brain and thought that the quotes were some form of code comments and needed to be deleted. This caused the Processing window to say that it did not recognize the varible and then Dariyah Strachan pointed out that I did still need the quote marks because the code was JavaScript. I corrected my code and it looked like this String portName = "COM10";//Enter your COM port. After fixing that the Processing code uploaded fine and opened the window where I could toggle the LED on and off from my computer.
Next, I decided to take a look at some of Processing’s tutorials on how to change color of things you make in their software. By looking at their explanation of how they use color in Processing, I applied that to the code I found. I decided to change the colors of the window box that opened up. I wanted the “on” side to be green and the “off” side to be red. I learned from Processing’s tutorial that if you want a greyscale color then you only have to type one value from 0 to 255 so: baseColor = color(255) would make the background black. For colors you can type RGB values from 0 to 255 so: baseColor = color(255, 0, 0) would make the background red. One helpful thing the tutorial showed was that there was a color pallet in Processing which could be found by clicking on tools in the top bar, and then by clicking on “Color selector.” This opened a color pallet where I could use the slider and my cursor to find the RGB values of any color I wanted. I could also type those values into the varibles without having to close the color pallet. I began by changing the background color to blue, the button colors to red and green, and the color while highlighted to a lighter red and green. My code looked like the following:
/*LED on and off using the processing IDE.
The second time uploads this code.
created by the SriTu Tech team.
Read the code below and use it for any of your creation
*/
// Adapted by Ginny Foster during Fab Academy 2023
// Code from this website: https://srituhobby.com/processing-ide-with-led-on-and-off/
import processing.serial.*;//import serial communicate library
Serial myPort;//create serial object
int circleOneX, circleOneY; // Position of button one
int circleX, circleY; // Position of button two
int circleOnesize = 90; // Diameter button one
int circleSize = 90; // Diameter of button two
color currentColor, baseColor;//color variable
color circleOnecolor, circleColor;//color variable
color circleOneHighlight, circleHighlight;//color variable
boolean circleOneOver = false;
boolean circleOver = false;
PFont f;//font type
void setup() {
size(300, 200);//screen size
circleOnecolor = color(229, 49, 49);//set colors to variable
circleOneHighlight = color(229, 0, 0);//set colors to variable
circleColor = color(41, 227, 70);//set colors to variable
circleHighlight = color(10, 227, 10);//set colors to variable
baseColor = color(0, 0, 255);//set colors to variable
currentColor = baseColor;
circleX = width/2+circleSize/2+25;
circleY = height/2;
circleOneX = width/2-circleOnesize+15;
circleOneY = height/2;
printArray(PFont.list());//print fonts list your computer
f = createFont("Ebrima Bold", 20);//Enter your font name
textFont(f);
String portName = "COM10";//Enter your COM port
myPort = new Serial(this, portName, 9600);//select first port
print(portName);
}
void draw() {
update(mouseX, mouseY);//main method
background(currentColor);//background color
if (circleOneOver) {
fill(circleOneHighlight);
} else {
fill(circleOnecolor);
}
stroke(255);
ellipse(circleOneX, circleOneY, circleOnesize, circleOnesize);//drow circle one
if (circleOver) {
fill(circleHighlight);
} else {
fill(circleColor);
}
stroke(0);
ellipse(circleX, circleY, circleSize, circleSize);//drow circle two
textAlign(LEFT);
fill(255);//black color
text("LED OFF", 37, 110);//display text
textAlign(RIGHT);
fill(0);//white color
text("LED ON", 255, 110);//display text
}
void update(int x, int y) {
if ( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
circleOneOver = false;
} else if (circleOneOver(circleOneX, circleOneY, circleOnesize) ) {
circleOneOver = true;
circleOver = false;
} else {
circleOver = circleOneOver = false;
}
}
void mousePressed() {
if (circleOver) {
currentColor = circleColor;
myPort.write('1');//send value one
print("LED on");
}
if (circleOneOver) {
currentColor = circleOnecolor;
myPort.write('0');//send value ziro
print("LED off");
}
}
boolean circleOneOver(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
boolean overCircle(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
From there I also realized that in the serial monitor all of my avaiable font options were printed each time I uploaded my code. I looked through the code and found that this line: printArray(PFont.list());//print fonts list your computer would print them all in my serial monitor. I then realized that I could pick a font from the array and swap out the font by typing it in in this line f = createFont("Ebrima Bold", 20);//Enter your font name. I browsed though the font array and picked “Yu Gothic UI Regular” for a new font and then swaped out “Ebrima Bold” for the gothic font to get a line looking like this f = createFont("Yu Gothic UI Regular", 20);//Enter your font name. I then slighly adjusted the colors of the window by changing the RGB values. This resulted in a code that looked like the following:
/*LED on and off using the processing IDE.
The second time uploads this code.
created by the SriTu Tech team.
Read the code below and use it for any of your creation
*/
// Adapted by Ginny Foster during Fab Academy 2023
// Code from this website: https://srituhobby.com/processing-ide-with-led-on-and-off/
import processing.serial.*;//import serial communicate library
Serial myPort;//create serial object
int circleOneX, circleOneY; // Position of button one
int circleX, circleY; // Position of button two
int circleOnesize = 90; // Diameter button one
int circleSize = 90; // Diameter of button two
color currentColor, baseColor;//color variable
color circleOnecolor, circleColor;//color variable
color circleOneHighlight, circleHighlight;//color variable
boolean circleOneOver = false;
boolean circleOver = false;
PFont f;//font type
void setup() {
size(300, 200);//screen size
circleOnecolor = color(229, 49, 49);//set colors to variable
circleOneHighlight = color(255, 214, 214);//set colors to variable
circleColor = color(41, 227, 70);//set colors to variable
circleHighlight = color(194, 252, 194);//set colors to variable
baseColor = color(207, 206, 255);//set colors to variable
currentColor = baseColor;
circleX = width/2+circleSize/2+25;
circleY = height/2;
circleOneX = width/2-circleOnesize+15;
circleOneY = height/2;
printArray(PFont.list());//print fonts list your computer
f = createFont("Yu Gothic UI Regular", 20);//Enter your font name
textFont(f);
String portName = "COM10";//Enter your COM port
myPort = new Serial(this, portName, 9600);//select first port
print(portName);
}
void draw() {
update(mouseX, mouseY);//main method
background(currentColor);//background color
if (circleOneOver) {
fill(circleOneHighlight);
} else {
fill(circleOnecolor);
}
stroke(255);
ellipse(circleOneX, circleOneY, circleOnesize, circleOnesize);//drow circle one
if (circleOver) {
fill(circleHighlight);
} else {
fill(circleColor);
}
stroke(0);
ellipse(circleX, circleY, circleSize, circleSize);//drow circle two
textAlign(LEFT);
fill(255);//black color
text("LED OFF", 37, 110);//display text
textAlign(RIGHT);
fill(0);//white color
text("LED ON", 255, 110);//display text
}
void update(int x, int y) {
if ( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
circleOneOver = false;
} else if (circleOneOver(circleOneX, circleOneY, circleOnesize) ) {
circleOneOver = true;
circleOver = false;
} else {
circleOver = circleOneOver = false;
}
}
void mousePressed() {
if (circleOver) {
currentColor = circleColor;
myPort.write('1');//send value one
print("LED on");
}
if (circleOneOver) {
currentColor = circleOnecolor;
myPort.write('0');//send value ziro
print("LED off");
}
}
boolean circleOneOver(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
boolean overCircle(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
On A Board¶
Finally, I tried this on my week 6 board which had a SMD LED with a resistor and a SEEED Xiao RP2040 on it. I had to change the pin numbers on this Arduino code to pin 26, the pin of the LED on my board. I also had to change the COM port from the code above, but that is just a one number change from COM4 to COM3. I was left with the following Arduino code:
/*LED on and off using the processing IDE.
created by the SriTu Tech team.
Read the code below and use it for any of your creation
*/
// Adapted by Ginny Foster during Fab Academy 2023
// Code from this website: https://srituhobby.com/processing-ide-with-led-on-and-off/
void setup() {
Serial.begin(9600);//enable serial communication
pinMode(26, OUTPUT);//define Arduino pin, I changed mine to 5
}
void loop() {
if (Serial.available() > 0) {//check serial value
char led = Serial.read();//read serial value
if (led == '1') {//check serial read
digitalWrite(26, HIGH);//LED on
} else if (led == '0') {//check serial read
digitalWrite(26, LOW);//LED off
}
}
}
Below is the video of it working on my board.
Reflection¶
This week I learned how to use the interfacing app Processing. I learned how to change the font and color of the output changer and data visualizer window. I also learned a little bit about Java code which I was previously a little scared to deal with because I thought it would be hard to learn, but I now think it looks remarkably simmilar to C++ as I intially thought the Processing code I found was C++.