14.Interface and application programming¶
This week’s assignment was to write a program that ran with an interface. I chose to use Processing to turn on and off an LED. I also tested interfacing tools as a group, which can be read about on my group site
Research¶
To begin this week, I look over Mrs.Morrow’s interfacing documentation to see how I should go about this week. I also took Dr.Taylor’s advice and checked out the program Processing to see if I wanted to use that to complete this week. Ginny Foster found this website that walks through programming with an interface.
Arduino code¶
For wiring, I set up an LED to ground and Pin 13 using a resistor (image 1). I then uploaded the following code to the Arduino after changing the pin number to align with the one I had chosen.
/*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
*/
void setup() {
Serial.begin(9600);//enable serial communication
pinMode(5, OUTPUT);//define arduino pin
}
void loop() {
if (Serial.available() > 0) {//check serial value
char led = Serial.read();//read serial value
if (led == '1') {//check serial read
digitalWrite(5, HIGH);//LED on
} else if (led == '0') {//check serial read
digitalWrite(5, LOW);//LED off
}
}
}
Once this code uploaded, I moved onto the Processing portion.
Processing 4¶
After installing the Processing 4 application, I ran this code after changing the port number to 14.
/*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
*/
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 = "COM14";//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;
}
}
this resulted in the following:
From there, I decided to change different aspects of the interfacing code. I first wanted to change the colors of the ‘On’ and ‘Off’ circles. I looked through the code and found where the RGB values were for the circles. I then when to tools and selected the RGB values tool to show me what color the values I placed would be. After I changed the ‘On’ and ‘Off’ circles to different shades of purple as well as changing the ‘On’ button’s outline to white and the ‘Off’ button’s outline to black I was left with this 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
*/
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(93, 43, 147);//set colors to variable
circleOneHighlight = color(0, 0, 0);//set colors to variable
circleColor = color(236, 39, 240);//set colors to variable
circleHighlight = color(255, 255, 255);//set colors to variable
baseColor = color(255, 185, 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 = "COM14";//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;
}
}
this resulted in the following:
I also wanted to test out changing the text. I changed the text to binary and set ‘On’ to 1 and ‘Off’ to 0. that left me with the following 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
*/
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(93, 43, 147);//set colors to variable
circleOneHighlight = color(0, 0, 0);//set colors to variable
circleColor = color(236, 39, 240);//set colors to variable
circleHighlight = color(255, 255, 255);//set colors to variable
baseColor = color(255, 185, 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(CENTER);
fill(255);//black color
text("0", 37, 110);//display text
textAlign(CENTER);
fill(0);//white color
text("1", 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;
}
}
That looked like this:
PCB Board¶
For this week I made a very simple board that consisted on a blue LED conencted to pin. D6 of a Xiop PR2040, and 440Ω resistor connected to ground.
I designed it in Fusion 360 and here is the general file zip and trace PNG as well as the outline PNG. I then soldered the resistor and led, then I took insolated tape and taped the bottom of the Xiao and soldered it to the board.
I uploaded the arduino code and changed the pin to D6 and here is the final 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
*/
void setup() {
Serial.begin(9600);//enable serial communication
pinMode(D6, OUTPUT);//define arduino pin
}
void loop() {
if (Serial.available() > 0) {//check serial value
char led = Serial.read();//read serial value
if (led == '1') {//check serial read
digitalWrite(D6, HIGH);//LED on
} else if (led == '0') {//check serial read
digitalWrite(D6, LOW);//LED off
}
}
}
and from there I saw the board was connected to com port 17, so I uploaded the privious code and changed the com port and uploaded it.
/*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
*/
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 = "COM17";//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;
}
}
Reflection¶
I learned how to use the Processing application. As well as how to access the RBG values in the tools tab of the application. This week will be helpful to my final project because I might create an app to work with my butterfly so I can use this skill to work with my butterfly.
Last update:
December 2, 2024