16. Interface and application programming¶
This week’s individual assignment was to write an application that interfaces a user with an input &/or output device that we made and the group assignment was to compare as many tool options as possible.
Individual assignment¶
I am a beginner at coding, so I decided to do Processing because I am partially familiar with using Arduino IDE.
From Maxine Tan’s site, I got this link to an hour of code to learn about processing.
My code for my first animation:
void setup() {
size(500, 400);
background(200, 30, 200);
}
void draw() {
stroke(200, 200, 200);
fill(200, 150, 90);
fill(200, 230, 210);
rect(mouseX, mouseY, 70, 70);
}
This tutorial answered some questions that I had about processing like: what is it?
Well, I learned that it incorporates visual arts and coding. Basically, it’s like drawing with code. At the beginning of the tutorial, he started out by showing some examples of art made with processing. They included statues, a digital aquarium, and more. I thought all of these were extremely cool, especially the example of creating dresses using processing.
My notes from the video:
Some key points of the tutorial were: - Order matters when coding! The computer will read the code as-is, and if something that you meant to appear after was written before another command, what is written first is what the computer will do first
-
Void is something that just needs to be written. Writing “void draw()” will loop whatever you make.
-
Need the curly brackets before and after a function
-
mouseX and mouseY makes the X and Y coordinates animated in Processing. They are variables.
-
functions: rect(), ellipse()
For this week, though, I had to create my own code that interfaced with one of my boards. After watching the video, I knew what I had to do, but, honestly, I had no idea where to start.
I was having a lot of trouble with my output device, so I decided to use my input device for this week. My input board involves a photoresistor which I thought would be helpful for my final project because it would make the LEDs only show up in the dark. I planned to create a code that would display readings on a serial monitor depending on if I covered the photoresistor with my hand. I wanted it to come up in the form of a wavy graph.
I found that Fab Academy alumna, Katie Chai had worked with displaying sensor values using processing, and had used this tutorial as a starting point, so I did the same.
On the site, he provides his own code and a video, so I watched the video.
His video:
I found this video which uses a photoresistor in the way that I imagined:
I replicated this before I made my own code, so I could see how the photoresistor was supposed to function.
void setup() {
Serial.begin(9600);
}
void loop() {
delay(10);
int input = analogRead (A0);
Serial.println (input);
}
Purely copying what I saw from the video, this was my set up:
I uploaded the code, and it came up with the error “board at null.”
After a quick google search, this arduino forum had my answer. I had not selected a COM port nor a board. I had just uploaded the code lol.
My board was “Attiny412” and there was no COM selected. I changed it to an Arduino Uno and COM3 because that was the only COM that appeared. I uploaded the code.
Again, I got an error, but this time it was different. It said “Problem uploading to board.” The mircochip on the Arduino was getting a bit warm/borderline hot – an issue, so I removed the chord from the Arduino.
I knew there was no problem with the code because I clearly saw it working for the guy in the video, so I concluded it had to be a hardware issue. I had copied his set up, but I think the angle and my poor eye sight prevented me from correctly setting up the wires correctly. After squinting at the screen and trying to see what I should have done differently for longer than necessary, I decided to go into Tinker Circuits to see what would work correctly.
I thought this was a good idea, but when I got into Tinker Circuits and replicated the set up. I realized there was no serial monitor for me to check, obviously, so I didn’t know what to do. I ended up taking the code created from there and tried to upload it. An error message again.
At this point, all I could think to do was to fiddle with the set up because there was something clearly wrong with it that was not so clear to me.
I found this site – a big thank you to whoever made it. It showed the set up and what they did.
My new set up:
I tried uploading the same code from the other person’s video, but it came up with the same error as before. I checked the wires and position of each component, but everything seemed to be fine.
I used this person’s (from the website I just mentioned) code
*/
int photoRPin = 0;
int minLight; //Used to calibrate the readings
int maxLight; //Used to calibrate the readings
int lightLevel;
int adjustedLightLevel;
void setup() {
Serial.begin(9600);
//Setup the starting light level limits
lightLevel=analogRead(photoRPin);
minLight=lightLevel-20;
maxLight=lightLevel;
}
void loop(){
//auto-adjust the minimum and maximum limits in real time
lightLevel=analogRead(photoRPin);
if(minLight>lightLevel){
minLight=lightLevel;
}
if(maxLight<lightLevel){
maxLight=lightLevel;
}
//Adjust the light level to produce a result between 0 and 100.
adjustedLightLevel = map(lightLevel, minLight, maxLight, 0, 100);
//Send the adjusted Light level result to Serial port (processing)
Serial.println(adjustedLightLevel);
//slow down the transmission for effective Serial communication.
delay(50);
}
and got an error that said to delete the “*/”. I did that, uploaded again, and got another error. This was getting very repetitive. The error message said to go to this website to learn how to fix the error.
I checked all of the things that Arduino said to, and they looked fine. Then, I think I found the issue. After scrolling through the error message, it repeatedly said that the “programmer was not responding.” I looked at the programmer that I had selected, and it was the Arduino Gemma. I didn’t know what that was, so I looked it up and it resembled a Flora. Whatever it was, I did not have it with me, so I figured I shouln’t have it selected.
I selected the AVR ISP as the programmer. It still did not work. I looked at this sparkfun tutorial about arduino and processing to attempt to troubleshoot.
Going from arduino to processing was not an issue. The issue was more in uploading anything to arduino.
Starting Over¶
Like many weeks, I left this week and started over. I redid my input week during the time I took a break from this week, so I decided to use my new input board. I am still doing Processing.
I had forgotten what processing even was, so I went back and did the tutorial that is shown at the very beginning of this page. Once I got a relative idea of it, I jumped right in to completing this week.
This is my Arduino code:
/*
* Robotics with the BOE Shield - PhototransistorVoltage
* Display voltage of phototransistor circuit output connected to A3 in
* the serial monitor.
*/
void setup() // Built-in initialization block
{
Serial.begin(9600); // Set data rate to 9600 bps
}
void loop() // Main loop auto-repeats
{
Serial.print("A3 = "); // Display "A3 = "
Serial.print(volts(A3)); // Display measured A3 volts
Serial.println(" volts"); // Display " volts" & newline
delay(1000); // Delay for 1 second
}
float volts(int adPin) // Measures volts at adPin
{ // Returns floating point voltage
return float(analogRead(adPin)) * 5.0 / 1024.0;
}
Processing¶
Because I was using my input board, I wanted to create something through Processing that showed the data from the phototransistor being interpreted. Elaine showed me this tutorial which was a extremely helpful because, once it was running with the Arduino hooked up to it, I finally made sense of what I would be doing and how I needed to set up the input board. Before, although I kind of understood the concept of this week, I did not get it fully. The tutorial provided a lot of clarity. Here’s a video of me running what I created from it:
From here, I decided to switch gears one final time (for practing purposes) and test out the first board I ever made - a basic button and LED board. When you click the button, a blue button on the screen would flash. To do this, I took my code from week 6:
#define F_CPU 20000000
#include <avr/delay.h>
#include <avr/io.h>
uint8_t counter;
void setup() {
PORTA.DIRCLR |= PIN7_bm; //Set PA7 to input
PORTA.PIN7CTRL |= PORT_PULLUPEN_bm; //Set pullup resistor on PA7
PORTA.DIRSET |= PIN6_bm; //Set PA6 as output
}
void loop() {
if(~PORTA.IN & PIN7_bm){ //check to see if PA7 is pulled low
while(~PORTA.IN & PIN7_bm){ //wait until PA7 returns high
_delay_ms(5);
counter++;
if(counter >= 5){
PORTA.OUT |= PIN6_bm; //set PA6 LOW
_delay_ms(1000);
PORTA.OUT &= ~PIN6_bm; //set PA6 HIGH
}
}
}
}
and added it to a button processing code that I found online. This code would blink the blue square if the button was clicked on screen using ControlP5. I attempted to alter it so that the button would blink if the button on the board was pressed.
I changed the line where it defined “ControlP5.RELEASE” as the way to trigger the button to buttonState. I connected the board and it worked kind of? I pressed the button, and it would come up with “Button Pressed” in the serial monitor, but I wasn’t sure if the actual animation itself was reacting on screen. I was too frustrated to figure out why, so I switched back to my input board and went from there. Looking back, I think it might have been because I had too many processing tabs open and I was looking at the wrong screen/running two things at once? I’m not sure.
I used processing.serial to create a rectangle that fills up depending on the amount of brightness or darkness in the room, like the tutorial I did. I rewatched the tutorial carefully and disected the code that I used originally for input week. However, it eventually worked! Every time there was less light, the rectangle went down and vice versa. I edited the code that the engineer made in the video and transformed it into this:
import processing.serial.*;
Serial myPort; // Create object from Serial class
String myString = null;
int maxIn = 1024;
int nl = 10;
float myVal;
void setup() {
size(200, 400); // size of the block
String portName = Serial.list()[1]; // one less than the port i was using bc it is read like an array
myPort = new Serial(this, portName, 9600);
}
void draw() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil(nl);
if (myString != null) {
background(255); // background black
fill(204); // rectangle white
myVal = float(myString);
myVal = myVal/maxIn *height;
rectMode(CENTER); // making the rectangle appear in the center of the sketch
rect(width/2, height - (myVal/2), width/2, myVal);
}
}
}
Group Assignment¶
Here is our group assignment!
My files:
Takeaways¶
I strongly disliked this week mostly because this concept, for me, was the hardest to understand. In the future, I would like to explore it more because while I think it is an interesting tool, I still have not fully grasped it. I would like to get the opportunity to explore more types of processing, not just serial and Control.P5.