16. Interface and application programming

This weeks design
arduino code	ino
Processing	pde

For this weeks assignment i first wanted to know more about interface and application programming. When googling the term and explanation the first article popping up explained that the short term for this is Api. Somehow i did not lay the connection yet. I realized i have to make use of api for my initial idea for the final assignment but did not lay the connection to this weeks coarse. Good to know. I found this article a good start in understanding the principle of api.

A api is used when multiple system work together in order to achieve something they can not do by not working together.

It provide a good example by something we are all doing these days. Ordering stuff online. When you see the product you need or in most cases don’t need at all, you select the product and go to the section to buy your product. When writing your creditcard number a api is responsible to validating your account with the bank. This is one of many functions of api.

An API is used when two or more systems work together in order to achieve something they can’t achieve individually. The API itself can be viewed as a promise one program makes to another to perform certain services when asked in specific ways.

My Global instructor pointed me on a different link with a better explanation of api. In the explanation i found it seems that api is the same as as application. A api is a set of subroutine definitions, communication protocols and tools for building software. Wikipedia explanation of api

Languages

In Neil’s Lectures he shows a large amount of programming languages which enable you to write the code for applications and interfaces. There are many different high or low end languages available. Two languages he put more attention to. Python and Javas-cript. Two of the most known programming languages available.

• Python: This a high level programming language which is known for its Code readability. It make use of object -oriented programming. It is based on object which contain data. This approuch helps developers to write clear and logical code. More information on Python Python is on server side programming or backend

• Javascript: This high level programming language is withly used for web applications. The programs in this language are called scripts. Javascript can run on frontend while python iis more backend.

• Java: Since my lack of knowlegde when it comes to coding i went with the envirement proccesing to write a interface application for my board. The standard language that comes with proccessing is Java. Where Java-script is mostly used for web pages and interactivity. Java is used for all server side development. Java code needs to be compiled while java-script is all text. Source of information

Programming languages. How to talk to a device. How to handle data. How to build a user interface. How to show graphics, make sounds, do maths etc. How to handle performance.

Tool of choice

This is a whole new world for me using software to interact with devices. I decided to put my focus on learning processing. This is a program with a simular interface as arduino. I like the interface of arduino and i like that the workflow is simulair to arduino. It is a free open source program which enaibles you to create visuals by writing code. In My case writing code to interact with my input device and use the incoming data to generate a visual representation of the data.

Advantages of processing

First step is to download the program.

To get started i did a tutorial on Sparkfun tutorial This tutorial is useful to get communication between the arduino and processing software using the rx and tx pin. My board i want to use for creating graphics is the two sonar board i made for my final assignment.

The first action you take is importing the serial library to be able to establish contact between two devices.

importing the correct library

With this tutorial i established a serial communication between my board and the processing software. The following code i used for this.

import processing.serial.*;
Serial myPort;  // Create object from Serial class
String val;     // Data received from the serial port

First line the the library used to make serial communication possible. In order to listen to serial communication u use the Serial myport. This is the standard name which you can change to whatever you like. The String Val recieve the data from the serial port. The string is a sequence of characters.

void setup()
{
  // I know that the first port in the serial list on my mac
  // is Serial.list()[0].
  // On Windows machines, this generally opens COM1.
  // Open whatever port is the one you're using.
  String portName = Serial.list()[0]; //change the 0 to a 1 or 2 etc. to match your port
  myPort = new Serial(this, portName, 9600);
}

In the setup you set the Sting portname equal to Serial.list. This are all available ports for serial communication. On my windows copouter i could leave it on default 0. The second part sets up the rules for communication. The baud rate should be equal to the arduino setting. Most cases this is 9600 but it is possible to change this according you needs.

void draw()
{
  if ( myPort.available() > 0) 
  {  // If data is available,
  val = myPort.readStringUntil('\n');         // read it and store it in val
  } 
println(val); //print it out in the console
}

Where arduino uses loop, proccessing uses draw. Which basicly does the same. It repeats this information here over and over till conditions are met. The if statement in this code indicates if information comes in with serial it result in.. The 0 is confusing here but it means that any data has to come in. The Val (value) is the data coming in. It closes of with (‘\n’). This is used for as long there is data coming in. It Finnish with the known println. The data coming in can be shown in the monitor.

Here the first communication was established. I could read data from both my sonar on the display. Unfortunately i have not a picture of the successful first step. When i took my board home to continue i was only able to read 1 sonar anymore.

Data coming in from one sonar

I did some debugging on the board but i have not been able to recieve data from the other sonar. I did found a loose connection which i resoldered and double check all connections. So i focuses on using the data of 1 sonar to create a visual depending on the distance.

Getting familair with proccessing

 nice information

Processing variable types

Int = Integer whole number
FLoat = Decimal number example: 16.879
Boolean = True or False
Char = A single karakter
String = A string of karakters
Object =  Custom data and behaviors

fill = Fills box (random (255), 0 0) <-- Random colors

Was happy to recieve information. The next step is to use the dat and create a visual out of it. I watched a serie of tutorials to understand how i can play with the variables in creating something appear on the monitor.

Usefull youtube tutorials

size <-- function (800,600);// Dimensions of screen in pixels

rect(200, 200, 200, 400);  

With the function size you can decide the size of the screen in pixels. In this example i made the size 800 pixels by 600 pixel. The rect is also a function to create a rectangle. First two values are the beginning point of the rectangle in the screen. last two values are the size of rectangle.

code results in rectangleon screen

void setup() // The rules of the code.  Runs only once
{
size(800,600);
}
void draw() //void get called everytime
{
rect(mouseX, mouseY, 100, 100);

}

This code results that you able to move the rectangle with the mouse. The mouseX and Y are also functions stored in the library which enable you to use the mouse to move the object.

with the mouse i now can move the rectangle

void draw() //void get called everytime
{
background(0);// Delete the remaining rectangles with black (0)
rect(mouseX, mouseY, 100, 100);

The background color you can change background(0) = black background(255) = white or rgb colors background(255,255,100). This results in that you don’t see duplicated of the rectangle anymore. It is covered straight away by the background. After doing this tutorial i assumed it would be very easy to create a visual out of the incoming data. All i needed to do in my mind was replace the mouseX by the Val of data coming in. Turned out it was more complicated then that to use the serial data.

youtube tutorial for communication between arduino and processing

I watched this tutorial and wrote down the line of coding to get familair in how proccessing code works. The code is intended to change the color by turning a potentiometer.

Arduino coding for serial.

while(Serial.available)()==0); <-- wait for response from computer. if it had not recieved anything it keeps looking in a loop.
int val = Serial.read()-0; <-- read input:-0 convert to char. Otherwise in ascii code
Serial.println(val);  <-- echo input back

else if <-- on does if when previous event did not happen.


if (val == 1) serial.println("led is on")
Events
If (val ==1) <--light on for example
if (val == 1) 
serial.println("led is on")
digitalWrite (ledpin, high);

else if (val == 0) <--light on for example. Only when if doesnot accure
serial.println("led is off")
digitalWrite (ledpin, low);

else
serial.println("invalid")

Serial.Flush(); <-- when using lots of characters in the serial port with invalid it appears all on screen. When using flush it removes addition information

Void setup(){

}
Void loop()
{
int potpint = 0;  <--potentiometer he use in the example
int val = map(anologread(potpint), 0, 1023, 0, 255); <-- convert it in to rgb colors. this way possibile to work with colors.
Serial.Println(val);
delay (50);
}

Processing code

import processing.serial.*; <-- with processing you have to inport library
Serial Port;
float brightness = 0 <-- initializing the brightness on the screen. Use this to ave a varible to react on a input

size(500,500);
 myPort = new Serial(this, portName, 9600);
 myPort.bufferUntil('\n'); <-- does same as while statement in arduino

 Void draw() <-- Same as void loop in arduino
 background (0,0,brightness); Sets background in rgb

 void Serial event (serial Port) <-- when initialized this before in the code

 brightness = float(myPort.bufferUntil('\n'); Sets brightness same as equation

Serial processing allows only one object at a time to be processed, whereas parallel processing assumes that various objects are processed simultaneously. … The same model can explain both serial and parallel processing by adopting different parameter regimes

Here i tried so other coding.

x = x + 30;
if(x > width)
x =0;

This line of code let the x move to the right by + 30. When it reach the end of the screen (width) it start again at 0.

When you want to use a variable everywhere in the code you need to place it before the setup and draw. This way you are able to use the variable wherever you feel like. When you ad a varaible btetween the braces you are only able to use it in the braces.This is called scope.

Failed try:

if (val == 0) {
  fill(0, 0, 0);
}
if (val > 0, <10) {
  fill(0, 0, 255);
}
if (val > 10, < 20) {
  fill(0, 255, 0);
}
if (val > 20, < 30 {
  fill(255, 0, 0);
}
Else {
fill  (255, 255, 255);

Here i wrote a line of code to make the background change according the distance of the sonar. Apart that the code is wrongly written. Ths woudl have been the coorect way. `if (val >= 0 || cm <= 10) The real issue here is that in the code the data comes in as string. A string is a sequence of characters and can not used as a variable.

Changed my arduino code. First ting i wanted to do in my arduino code was to cancel out my second sonar since it was not functioning accordantly. I placed all the information i did not need as a comment. In Processing i want only to recieve the actual data and no comments. With comments i have to use the string function and i can not transfer this in visual. My sonar sometimes gives weird results. It can measure up to a distance of 300 cm. When the distance is longer it results in unreliable data. To counter this i used a if statement. When distance is longer print out ‘out of range’. The data is in this case not send a such to the serial of processing.

#include <SoftwareSerial.h> // import another program, a library, to communicate
#define rxpin 1 
#define txpin 0

SoftwareSerial serial(rxpin,txpin);

int rxPin = 1; // this is simular to the int = setting, however this is linked to the library
int txPin = 0;
int trig = 3; 
int echo = 2; 
int trig1 = 8; 
int echo1 = 7; 
long lecture_echo; 
long cm;
int timeout = 1000;

void setup() 
{ 
//  pinMode(trig, OUTPUT); 
 // digitalWrite(trig, LOW); 
 // pinMode(echo, INPUT);  

  pinMode(trig1, OUTPUT); 
  digitalWrite(trig1, LOW); 
  pinMode(echo1, INPUT); 

  serial.begin(9600);   
}
void loop() 
{ 
// digitalWrite(trig, HIGH); 
// delayMicroseconds(10); 
// digitalWrite(trig, LOW); 
// lecture_echo = pulseIn(echo, HIGH,  timeout*1000); 
// cm = lecture_echo / 58; 

 // if (cm >= 400 || cm <= 0){
 //   serial.println("Out of range");
 // }
 // else {
 //   serial.print(cm); 
 //   serial.println(" cm");

 // }


digitalWrite(trig1, HIGH); 
delayMicroseconds(10); 
digitalWrite(trig1, LOW); 
lecture_echo = pulseIn(echo1, HIGH, timeout*1000); //timeout in micro seconden
cm = lecture_echo / 58; 

  if (cm >= 400 || cm <= 0){
 //   serial.println("Out of range");
  }
  else {
    serial.print(cm); 
  //  serial.println(" cm");

  }

  delay(timeout); 
}

Setup in arduino

The cm and “out of range” i made a comment so that this data would not be seen on the screen. Now i only recieve the actual distance in cm between 0 and 400. Other data is left out.

In processing i was able to recieve and use the data for visual with the following code.

import processing.serial.*;
Serial myPort;  // Create object from Serial class
int val;     // Data received from the serial port
float X;
void setup()
{

The thing i changed in the code was changing the string of the value to a int. This way it does not read the data as characters but as whole numbers i can use to alter the visuals. Declaring the float X i use to change the visual of the rectangle accordanly to the data coming in.

  myPort = new Serial(this, portName, 9600);
  size (600, 400);
}

void draw()
{
  if ( myPort.available() > 0) 
  {  // If data is available,
  val = myPort.read()-'0';         // read it and store it in val
 X =float(val);

In this part is changed myPort.readStringUntil('\n') to val = myPort.read()-'0';. Read is used for reading the data from 0 to 255. The readString returns all the data as string or null. The ‘0’ here convert the incoming data from asccie code to actual data.

datatype ascii table, the real charakter is called char

When using serial the data is send in binairi language. Ascii code convert the bit to actual data. Every symbol has it own code written.

  }
  background(255);
   rect(300, 200,30*X, 30*X);
   fill(255/X);
println(val); //print it out in the console
}

Here i set up the visuals reacting on the data. The blackground is set to white. I use a rectangle that changes sizes accordingly to the distance of the sonar. The rectangle also change color by the fill function.

code coming in ascie

At first i received weird data in my monitor. The number were not like expected. from 0 to around 250. Instead the numbers started with 52. Then i realized it was sending the data in ascii code. val = myPort.read()-'0'; I a tutorial i watched he used the 0 to tranfer it to the real data. When adding the 0 the data was more reliable. Distance is coming in ascii code

sonar in processing from Rutger Oomkes on Vimeo.

Video of visual using processing

How to deal with larger numbers coming from the sonar. In Processing 3 you can set a max distance in when it will be visualized. You can set a int max distance=400;``if (cm>max distance){ cm =max distance; } Using this method prevent the processing code to visualize of peaks while the data still comes in the serial port.

setting max distance

Another way of dealing with this is to set a max string. ‘Serial.readStringUntil(terminator)’. This way the data stops coming to the serial monitor when it reach the nnumber that terminates the string coming in.

Source

What i learned and what went wrong.

It was interesting to see the possibilities in API. It is a big world to discover. It is interresting how you can use these tool and i am keen on learning more about the possibilities. I do realize i still have a long way to go. I struggled much more then anticipated in getting a visual in processing. I found myself trapped in the coding and trying to grasp the issues. Programming still seems abstract to me. Even do i can see the logic more and more. But in practice i get frustrated by having error after error.