Week 15

Interface and application programming

Objectives

Individual Assignment

Write an application that interfaces a user with an input and/or output device that you made

Group Assignment

Compare as many tool options as possible.
view page

Learning Outcomes

Interpret and implement design and programming protocols to create a Graphic User Interface (GUI).

Individual Assignment

This weeks assignment is to create interfaces to my boards using serial communication. I decided to use Processing to create the interface.
I first downloaded the application from this link https://processing.org/download/ and followed the instruction from https://processing.org/tutorials/gettingstarted/ for installing the application.

Interfacing with Processing

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.
First I tried learning the basics of the application by trying out a simple program. So for this purpose I used my Hello Eco Board I made during the ELECTRONICS DESIGN week.

Using Arduino I made a program to print '1', '2', '3' & '4'
Arduino Code

                            #include <SoftwareSerial.h>
                            #define RX 1
                            #define TX 0
                            
                            SoftwareSerial window(RX, TX);
                            
                            void setup() 
                            {
                              window.begin(9600);
                            }
                            
                            void loop() 
                            {
                              window.print(1);
                              delay(1000);
                              window.print(2);
                              delay(1000);
                              window.print(3);
                              delay(1000);
                              window.print(4);
                              delay(1000);
                            }

I got the output as follows

My next step is to set up a serial communication to connect the Hello Echo Board, which sends out '1', '2', '3' & '4' to an example serial code in Processing.
To find the example codes go to File > Examples. In the folder libraries you’ll find a Serial Library. I first used the SimpleRead library.

Then the simple read code will appear on the screen.

I changed the portname to the corresponding port where I have connected the board to the PC, and aso the baud rate.

After the seting up the right port. The program checks, reads, if there’s data coming from the serial port. It read the data and stores it in val, which is a integer defined on top of the program. In this part I also added a print line. This time I added println(val); to double check what my code is receiving

I connected my Hello Eco Board and run the code.

As you can see the result gave numbers 49, 50, 51, 52, these are the ASCII values corresponding to 1, 2, 3, 4 respectively.
To create a visual representation of the communication between my board and processing. I edited the given code in a very simple way.

                            import processing.serial.*;
                            
                            Serial myPort;  // Create object from Serial class
                            int val;      // Data received from the serial port
                            
                            void setup() 
                            {
                              size(200, 200);
                              myPort = new Serial(this, "/dev/ttyUSB0", 9600);
                            }
                            
                            void draw()
                            {
                              if ( myPort.available() > 0) {  // If data is available
                                val = myPort.read();         // read it and store it in val
                                println(val);
                              }
                              background(255);             // Set background to white
                              if (val == 0) {              // If the serial value is 0,
                                fill(0);                   // set fill to black
                              } 
                              if (val == 49) {              // If the serial value is 49,
                              fill(255, 200, 200);          // set fill to pink
                              } 
                              
                              else if (val == 50) {          // If the serial value is 50,
                              fill(0, 200, 200);             // set fill to turquoise
                              } 
                              
                              else if (val == 51) {          // If the serial value is 51,
                              fill(127, 0, 0);               // set fill to red
                              } 
                              
                              else if (val == 52) {          // If the serial value is 52,
                              fill(0, 200, 0);               // set fill to green
                              } 
                              else {                       // If the serial value is not 0,
                                fill(204);                 // set fill to light gray
                              }
                              rect(50, 50, 100, 100);
                            }

I connected my Hello Eco Board and ran the code.

Setting up serial communication with my Presence Board

I wanted to make an interface that display the readings from the ultrasonic sensor on the presence board I made during the INPUT DEVICES week.

I used the processing code made by Nadine Tuhaimer for creating the interface.
I made small modifications in the code to make the interface size bigger, and I also added colours to the interface.
Processing code

                            import processing.serial.*;
                            
                            Serial commPort;        // The serial por       // horizontal position of the graph
                            float distance = 0;
                            String distance_measured;
                            
                            void setup () {
                                // set the window size:
                                size(800, 400);
                                //set the port to 4 cause that's the arduino port
                                //set the baud rate to 9600
                                commPort = new Serial(this, "/dev/ttyUSB0", 9600);
                            
                                // don't generate a serialEvent() unless you get a newline character:
                                commPort.bufferUntil('\n');
                            }
                            
                            void draw () {
                               background(0);   //color the backgound to black
                               stroke(204, 100, 0);      //set the outline of the rectagle 
                               fill(127,0,0);            //set the color red
                               rect (50,150,700, 80);    //draw a rectangle with these dimensions and x,y coordinates 
                              
                                
                                //draw triangle pointer
                                stroke(204, 102, 0);    //set the outline of the rectagle
                                fill(0,200,0);          //set the color green
                                rect(50,150,distance,80);  // draw another rectangle but with height differing depending on the distance measured
                              
                                textAlign(CENTER);
                                text("Distance="+ distance_measured, 380, 100);  // write the distance measured   
                            }
                            
                            void serialEvent (Serial commPort) {
                                // get the ASCII string:
                                distance_measured = commPort.readStringUntil('\n');
                            
                                if (distance_measured != null) {
                                  // trim off any whitespace:
                                  distance_measured = trim(distance_measured);
                                  // convert to an int and map to the screen height:
                                  distance = float(distance_measured);
                                  println(distance);
                                  distance = map(distance, 0, 500, 15, 2000); // map the distance measured depending on the size of the rectangle I drew 
                                }
                            }

Arduino Code

                            #include <SoftwareSerial.h>
                            
                            #define trigPin 3
                            #define echoPin 2
                            #define RX 1
                            #define TX 0
                            
                            SoftwareSerial window(RX, TX);
                            
                            void setup()
                            {
                              pinMode(trigPin, OUTPUT);
                              pinMode(echoPin, INPUT);
                            
                              window.begin(9600);
                            
                            }
                            
                            void loop()
                            {
                              long duration, distance;
                            
                              digitalWrite(trigPin, LOW);
                              delayMicroseconds(2);
                              digitalWrite(trigPin, HIGH);
                              delayMicroseconds(10);
                              duration = pulseIn(echoPin, HIGH);
                              distance = (duration/2) / 29.1;
                              
                              window.write(distance);
                              window.println(distance);
                            
                              delay(500);
                            }

I connected my Presence Board and ran the code.