Week 15: Interface and application programming

In this week we got acquainted with the interface and application programming languages. We also learned about device interfaces and user interfaces. The class was followed by introducing suitable programs for doing graphics, web application, multimedia and math applications in this regard. For this week assignment we were supposed to write an application that interfaces with an output device, an input device or both.

For this exercise I will try processing. I will try to read the data from the input device and visualize it on the screen. I will also take a look at Tkinter.

Processing

Processing can be downloaded and installed easily. It is environment is similar to Arduino environment. In fact Arduino environment is based on Processing.

Writing the code in Processing

The processing is communicating with the serial port. The serial Library is not in the processing sketch as a default. At the beginning of the Processing sketch, the serial library should be imported. The command for importing the serial library is import processing.serial.* and after that there is a need to create an object of the serial, using serial objectName .

Another crucial fact to be aware of is the port which Processing is expecting the data from. When the controller is sending some data on the serial port to the computer, this port is going to be the one that processing should be aware of. This port should be set in Processing program with the command new Serial (this, Serial.list[i], 9600) and it should be saved in the instance we created before from port. Here objectName. The number i in the brackets serial.list[i] indicates the serial port Processing is expecting data from.

It is very important to set this value right, otherwise there won't be any communications. We already learned how to find the serial ports that the input device is connected to by typing ls /dev/tty.usb* . In the processing code the command prinln(Serial.list()) lists all the ports for you. Looking for the same port that shows the connection of the input device and starting from 0 you can assign a the right number to this port. For me it was 7.

I used a phototransistor input board, tried to read the values from that and visualise that. One thing that I noticed when I compared the Tkinter program that was written by Neil and the processing code that I wrote was, apparently the Tkinter is receiving and showing 10 bits on the screen. Because the values are changing from 0 to 1023. But in processing the values were between 0 to 255 which indicates 8 bits.

Processing is communicating with the serial port with the baudrate of 9600. It is important to set the same baudrate for the serial communication between the microcontroller and the computer otherwise some junks might be received.

Processing code

   
  /**
 * Phototransistor Input Visualizer
 * Read data from the serial port and changes the 3 RGB 
 * circles that you see at first to one circle with randomly  
 * changing colors.
 */

//import serial library
import processing.serial.*;

Serial serialPort; // Create object from Serial class
int diameter= 500; // initialize the diameter of the circle

void setup() {
  size(500, 500);  // size of the convas
  background(0); 
  stroke(255);
  smooth();

  /* Here I set the serial port. My serial port to which the 
     input device is connected is Serial.list()[7] */
  println(Serial.list());
 
 /* The baudrate of the serial communication is 9600.*/ 
     serialPort = new Serial(this, Serial.list()[7], 9600); 

void draw() {
  
  while (serialPort.available () > 0) {
    int lightIn = serialPort.read();
    if ((lightIn>90) && (lightIn<255)){    
    
      println(lightIn);
      diameter= 200;
      fill((int)random(255), (int)random(255), (int)random(255));
      background(0);
      ellipse(250,250, diameter, diameter);
    }
    else if ((lightIn>4)&&(lightIn<90)){
    
      println(lightIn);
      diameter=200;
      fill(255,0,0);
      background(0);
      ellipse(175, 150, diameter, diameter);
      fill (0, 255, 0);
      ellipse (325, 150, diameter,diameter);
      fill (0,0,255);
      ellipse(250, 300, diameter,diameter);
    
    }
    //If the sensor value is greater than 90 you will see the change.  
    // If it did not work this number should be tweaked.  
    //   
   
   }}
 
  

Tkinter

I opened the hello.light.45.py from Neils keynote on input devices in Xcode and started to play with that, because I was curious to understand what each part of the code is doing.