Skip to content

13. Interface and application programming

Reguirements

individual assignment:

​ write an application that interfaces a user with an ​ input &/or output device that you made

group assignment:

​ compare as many tool options as possible

The members of the group:

  • Achille
  • Anssi
  • Jari
  • Hannu

Group assigment in Jari page

Individual project

The main idea of this assigment was connect Interface application in PC to Output device. I used in this week project my Echo hello board, which included LED. I wrote the interface application in which the Turn on button clicking turn led on and the Turn off button clicking turn led off.

The Turn on button clicking write value 1 to serial port and the Turn off button clicking write value 0 to serial port. After that Echo board read value from serial port. If value is 1 then LED turn on in Echo hello board and if value is 0 then LED turn off in Echo hello board

The connections between board and PC I used Serial connetion - Universal asynchronous receiver-transmitter (UART) cabel. Port number was COM7 and Baundrate 9600.

EchoBoard-01.jpg

EchoBoard-01.jpg

UART was familiar me in Electronics design week. I used same UART cabel such as in Electronics design week. But I lost it. Luckily I got UART board. It worked like normal UART Cabel.

UARTpins-01.jpg

UART_Board-01.jpg

EchoBoard+UartBoard+PC-01jpg.jpg

First I wrote code to Echo Board and then interface application to PC.

I have wrote some applications in Visual Basic and Java. But I desided to use same applications like some others Fab Academy students. That applications was Processing software. https://processing.org/

Echo board programming with Arduino

I copied example code from Noora Nyber page

I edited only line 2: SoftwareSerial mySerial =SoftwareSerial(rx, tx); I checked and edited rx and tx pins values (on Echo board: rx=3 and tx=2). I checked also LED pin on line 5 (on Echo board: LED pin=1)

SoftwareSerial SoftwareSerialConnections-01.jpg

Then I uploaded code to Echo board

#include <SoftwareSerial.h>
SoftwareSerial mySerial =SoftwareSerial(3, 2);

char val; // Data received from the serial port
int ledPin =1; // Set the pin to digital I/O 
void setup() 
{
pinMode(ledPin, OUTPUT); // Set pin as OUTPUT
mySerial.begin(9600);// Start serial communication at 9600 bps
}
void loop() 
{

if (mySerial.available()) 
{ 
// If data is available to read,
val = mySerial.read(); // read it and store it in val
}
if (val == '1')
{ 
// If 1 was received
digitalWrite(ledPin, HIGH); // turn the LED on
} 
else 
{
digitalWrite(ledPin, LOW); // otherwise turn it off
}
delay(10); // Wait 10 milliseconds for next reading
}

Interface application programming with Processing

Processing was very easy to use. First I uploaded zip file and then I decompressed it. After that application was ready to use.

Processing-01.jpg

Processing-02.jpg

I copied example code from also from Noora Nyberg page and pasted it to Prosessing.

Before I ran code, I checked port numeber and Baundrate. In my case port number was COM7 and Baundrate 9600 . And then I ran code. Then tiny windows popped up with On button and Off button.

Processing-03.jpg

import processing.serial.*; 
Serial myPort; // Create object from Serial class
Button on_button; //Button to on
Button off_button; //Button to off
void setup() 
{
  size (300, 100);
  smooth(); //Draws with smooth edges
on_button = new Button("Turn on", 20, 20, 100, 50); //Button descriptions
off_button = new Button("Turn off", 170, 20, 100, 50);
myPort = new Serial(this, "COM7", 9600); //setting up and defining serial communications
}
void draw()
{
  on_button.Draw();
  off_button.Draw();
}
void mousePressed()
{
if (on_button.MouseIsOver()) //if on button pressed led turns on and "LED on" is displayed
{
//if we clicked in the window
myPort.write('1'); //send a 1
println("LED On"); 
} else if(off_button.MouseIsOver())
{ 
//if off button pressed led turns off and "LED off" is displayed
myPort.write('0'); //send a 0 
println("Led Off");
} 
}
// the Button class definition
class Button {
  String label; // button label
  float x;      // top left corner x position
  float y;      // top left corner y position
  float w;      // width of button
  float h;      // height of button

  // constructor
  Button(String labelB, float xpos, float ypos, float widthB, float heightB) {
    label = labelB;
    x = xpos;
    y = ypos;
    w = widthB;
    h = heightB;
  }

  void Draw() {
    fill(218);
    stroke(141);
    rect(x, y, w, h, 10);
    textAlign(CENTER, CENTER);
    fill(0);
    text(label, x + (w / 2), y + (h / 2));
  }

 boolean MouseIsOver() {
    if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
      return true;
    }
    return false;
}
}

Testing

When I clicked Button “Turn on” LED was on and when I clicked Button “Turn off” LED was off.

My test worked very fine.

Hero Video

Reflection

It was very intresting to made User interface of output device. It was surprise to me how simply way it is control devices.

In Group assignment it was usefull to familiarize many different way to make Interface application.