# 15. Interface and Application Programming¶

## Objective¶

As group assignment we have to compare as many tool options as possible this week.
As individual assignment I have to write an application that interfaces a user with an input and/or output device that I made.

## Files, Tools and Planning¶

Files
Arduino file: Cat face
Processing file: Cat face
Tools
Arduino IDE
Processing
Planning

## Group Assignment¶

Find it here in our group page

## Individual Assignment¶

As part of this week’s assignment is to create interfaces to my boards using serial communication. So for this purpose I decided to use my ShooBot Board made for my final project.

### Processing¶

Step 1. My instructor Joel suggested that I try using Processing as an interface.

I followed the instruction from the tutorials to install and start working on it.
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 the first program given in the tutorial. It is just one line of code and I entered it into the editor and pressed the RUN symbol(The Play Button).

Then I got the output on another pop up screen and I decided to check the Parameters of the ellipse function and found it here

ELLIPSE
Syntax: ellipse(a, b, c, d)
Parameters:
a float: x-coordinate of the ellipse
b float: y-coordinate of the ellipse
c float: width of the ellipse by default
d float: height of the ellipse by default
Next I tried another simple program given in the tutorial. “This program creates a window that is 480 pixels wide and 120 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black.”-Tutorial Explanation

I moved my mouse and created a beautiful pattern.

I decided to edit this program. First I changed the output window size to 720 by 360. I wanted to change the colour to the green colour that I use as a theme colour for my documentation. I knew its Hex Code as #145D53. So I googled it and found its RGB as 20, 93, 83. I gave this input to the function fill and pressed run.

On moving the mouse I got this beautiful pattern.

Next I changed the second colour to a lighter green

This beautiful pattern was the output.

By now I was comfortable with the program and wanted to try out something fun.
Step 2. I decided to draw a cat face using simple geometric shapes.
Here are the Parameters for the shapes I used.
ARC
Syntax:arc(a, b, c, d, start, stop)
arc(a, b, c, d, start, stop, mode)
Parameters:
a float: x-coordinate of the arc’s ellipse
b float: y-coordinate of the arc’s ellipse
c float: width of the arc’s ellipse by default
d float: height of the arc’s ellipse by default
start float: angle to start the arc, specified in radians
stop float: angle to stop the arc, specified in radians

LINE
To color a line, use the stroke() function. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function.
Syntax:line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2)
Parameters:
x1 float: x-coordinate of the first point
y1 float: y-coordinate of the first point
x2 float: x-coordinate of the second point
y2 float: y-coordinate of the second point
z1 float: z-coordinate of the first point
z2 float: z-coordinate of the second point

TRIANGLE
Syntax:triangle(x1, y1, x2, y2, x3, y3)
Parameters:
x1 float: x-coordinate of the first point
y1 float: y-coordinate of the first point
x2 float: x-coordinate of the second point
y2 float: y-coordinate of the second point
x3 float: x-coordinate of the third point
y3 float: y-coordinate of the third point

### Setting up Serial Communication with my Board and Processing.¶

I wanted to make an interface that display the readings from the ultrasonic sensor on the ShooBot board I made for my final project.

This is the ShooBot board I designed for my final project. Step 3:First I opened the Arduino app and found the example code from File > Example, In the folder libraries under Serial Library. I first used the SimpleRead library. Then the simple read code appeared on the screen.

As I’m using ATmega328 microcontroller, I added the following as given here
“https://mcudude.github.io/MiniCore/package_MCUdude_MiniCore_index.json”
on Additional Boards Manager URLs: in settings of preferences under Files in main menu.
Now I clicked the Boards Manager… in Boards: “Arduino Uno” under Tools in the main menu.
I searched for mega and I got MiniCore by MCUdude listed underneath.
I installed this and got the list of mega microcontrollers in Boards under Tools in the main menu.

Next I changed the portname to the corresponding port where I will connect the board to the PC through FTDI Cable, and also the baud rate.
Next I took the original program I wrote for my Final Project and took parts from it and the parts from the Example program for serial communication to make this program.
I connected the Fab Tiny ISP Programmer to the ShooBot Board. I compiled the program and uploaded it to the ShooBot. Then I removed the Fab Tiny ISP Programmer and connected the board to the computer using FTDI cable, gave 12v, 5A power and I pressed the serial monitor on the arduino program to get this error message.
I realised there is no FTDI driver in this computer and installed it.
Again I connected the board to the computer using FTDI cable and pressed the serial monitor on the arduino program to get no output at all.
I thought there was something wrong with my program. So I uploaded the original ShooBot program again and connected this with the

## 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.println(distance);
if(distance<50)
{
window.write(1);
}
else
{
window.write(2);
}

delay(500);
}

```

## Processing Code¶

```import processing.serial.*;

Serial myPort;  // Create object from Serial class
int val;      // Data received from the serial port
void setup()
{
size(530, 530);
myPort = new Serial(this, "/dev/ttyUSB0", 9600);
}
void draw() {

if (myPort.available() > 0)
{
println(val);
}
if (val==2)
{
fill(255);
}
if(val==1)
{
fill(20,93,83);
}
rect(0,0,530,530); //outer rectangle
ellipse(260, 260, 480, 480);//face
ellipse(200, 200, 80, 80);//left eye
ellipse(340, 200, 80, 80);//right eye
fill(0);
line(80, 310, 237, 300);//WHISKER TOP LEFT
line(300, 300, 450, 310);//WHISKER TOP RIGHT
line(145, 380, 237, 320);//WHISKER BOTTOM LEFT
line(380, 380, 295, 320);//WHISKER BOTTOM RIGHT
line(45,150,35,35);//left ear left line
line(35,35,150,45);//left ear right line
triangle(55, 115, 55, 55, 115, 55);//left ear inner triangle
line(465,135,460,35);//right ear right line
line(460,35,365,45);//right ear left line
triangle(460, 115, 400, 55, 450, 55);//ear inner triangle
arc(269, 365, 40, 40, -TWO_PI,-PI); //smile
ellipse(215,220,20,20);//Left eye center
ellipse(325,220,20,20);//right eye center
ellipse(270, 300, 40, 40);//nose
noFill();
arc(320, 325, 100, 100, HALF_PI, PI); //MOUTH RIGHT
arc(220, 325, 100, 100, 0, HALF_PI);//MOUTH lEFT
arc(240, 510, 400, 400, PI+QUARTER_PI,PI+HALF_PI);//WHISKER LEFT
arc(300, 510, 400, 400, PI+HALF_PI,PI+HALF_PI+QUARTER_PI);//WHISKER RIGHT
}
```

### Working¶

I connected the ShooBot board to the USB tiny and uploaded the program, next I connected the FTDI cable on to the board with other end on the computer.

### Mistakes and Learnings¶

I lost a lot of time thinking there was some problem with my board or the program, all the while the problem was with my computer. On hind sight, if I had made a simple test program and run it I would have understood that the seriol communication problem with my computer early on.