Skip to content

Applications and Interfaces

This week I created an interface for my input device. It reads the value of my microphone sensor that I made and then display an image and some text depending on the value.

Creating my code

The first thing that I did this week was figure out which software I wanted to use. Since I started working on this prior to the week, I asked drew what I should use and he said use processing. I went to there offical website and used the windows download link to install it on my PC. I was suprised to see the similarities it shared with arduino and upon some basic research I saw that Arduino came from the original version of processing. I started to mess around with it by using the example codes that are provided on the website. I then started to plan out my project. I wanted to make something that when the value of my sensor was a certain integer, It would display an image or some text. I found a tutorial that I will embed below that will helped me understand the processing serial library.

After I watched this video, I started to work on my code. The first thing that I made my code do was setup the serial. I referenced the video for where I struggled but mostly I remembered it. After I had the serial setup, I tested it by running serial on another arduino. I could see that the values were printing in the console so now I just had to make them into variables. I already know how to do this and how to make if statements so the rest was easy. I made the serial value into Myval and then set the values I would compare to as myVal2. After I did this, I was able to compile my code and sort through a few errors.

Video of testing

Originally I ran an arduino that was printing serial values since I had forgotten my microphone board at home. I could use this however to show that It was working and that it should work with my microphone board. The final code that I made is below. I started with defining everything and then in the setup, I made the size of the window and started to read the serail values. You also have to load the images into the code in the setup. In the draw, I started to read and compare the data that I was getting from Serial. If it got a value above 500, It would display the value and a special image I made. If it didnt get a value about 500, It would display a different image that I made.

Final Code

import processing.serial.*; 
PImage img;
PImage img1;
Serial port;  
float myVal; 
String myString = null; 
float myVal2;


void setup() {
  size(1000, 1000); 
  String portName = Serial.list()[0]; 
  port = new Serial(this, portName, 9600); 
  stroke(255);
  myVal2 = 500;

  img = loadImage("on.png");
  img1 = loadImage("off.png");

}

void draw() {
  while (port.available() > 0) { //if there is data coming in from the serial monity
    myString = port.readStringUntil(10); //strips data of serial port

    if (myString != null) {
      background(0); // makes background white
      myVal = float(myString); // takes data from serial and turns it into a number
      println(myVal);

    }
    if (myVal2 < myVal) { 
     image(img, 0, 0);
     textSize(50);
     fill(#ffffff);
     text("The Value Is:",200,300);
     text(myVal, 500, 300);


    } 
    else {
      image(img1, 0, 0);
      textSize(50);
      fill(#ffffff);
      text("The Value Is:",200,300);
      text(myVal,500,300);
    }

  }
}

Testing with Mic

What I learned and Where I struggled

This week I learned alot about the process of how to use data from a sensor to display something other than a serial monitor on a computer. I wasnt planning on making an interface for my final project, but now after doign it, I realize that it would be possible and could help. I struggled this week with reading the values in from Serial. before I could get it working, I created the fram work for the rest of the code. I needed to talk to other people in my lab to figure out how I could do it. Teddy Warner helped me out since he had figured out how it would work before I could. After I got this working, the rest of the week when very smooth for me.

Group Work

This week assignment was to compare different platforms used to create interfaces. Since I used proccessing, I along with my peirs, wrote down some of the pros and cons of the software. Group site


Last update: June 13, 2021