16. Interface and application programming¶

Learning outcomes

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

Like the previous weeks , student are expected to complete two (2) categories of weekly assignment.

Group assignment:

Compare as many tool options as possible.

Individual assignment

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

Group Assignment¶

For our Group assignment we had to compare as many tool options as possible.

The Group Assignment page is as follows  Link:

Group Members:

Nervene Bhagwandass
Christopher Proute
Terrence Carew
James Khan
Ravi Baldeo
Marvin Holloway

Individual assignment¶

For my individual assignment I wrote an application that would interface with the output led on my Embedded programming board follow the instruction given by this very useful youtuber Link.

Firstly I HC-05 Bluetooth module was connected to my PCB board

For connection I required four female to female jumper wires.

Connecting my PCB board FTDI port (male pins) to HC-05 Bluetooth module (male pins):

PCB FTDI VCC to HC-05 VCC
PCB FTDI GND to HC-05 GND
PCB FTDI TXD to HC- 05 RXD
PCB FTDI RXD to HC-05 TXD

Programming¶

I replicated the code in the youtube video wrote a piece off Arduino code to control the LED on my PCB board using Mobile App and upload to PCB board and then modified the code change pinmode 13 to pinmode 4 with respect to led being connected to pin 4 on my board

char Incoming_value = 0;

void setup() 
{
  Serial.begin(9600);         
  pinMode(4, OUTPUT);       
}

void loop()
{
  if(Serial.available() > 0)  
  {
    Incoming_value = Serial.read();      
    Serial.print(Incoming_value);        
    Serial.print("\n");        
    if(Incoming_value == '1')             
      digitalWrite(4, HIGH);  
    else if(Incoming_value == '0')       
      digitalWrite(4, LOW);   
  }                            
}

Creating a Mobile App¶

To create a mobile app I used MIT App Inventor

Click on create app

I had to log in with my google account to start working . Clicked on new project and name it Bluetooth

The interface environment for app building

First I selected Listpicker and dragged it on the phone and modified the text to say “LED Bluetooth”and change width to “Fill parent”

Then on the layout on the left side of the screen I dragged the “HorizontalArrangement” on the phone screen. Again changing the width to “Fill parent”.

Then on the User interface on the left side of the screen I dragged two buttons and place it in the Horizontal Arrangements bar.

I then modified each button by changing their text to say on / off and their width by selecting the fill parent .

I then clicked on Connectivity and dragged Bluetoothclient on the screen

I then selected the Bock tab in top right corner of screen.

I selected the commands needed the completed code on the screen from” listpicker1 and Bluetoothclient1” on the left panel

Text block is also there, This command changes the LED Bluetooth to connected on the app display

I then selected the block required to complete the set of block code

Completed the last set of Block code

Downloading/Installing and Running App¶

Before I can download the app to my phone I needed to install MIT AI2 Companion app and once open

I went back to MIT Inventor to create a QR code to download apk file

By click build and android app(.apk)

Preparing QR code and apk load file

Scan or download

Successful Installed

Bluetooth1.apk

Connecting¶

I was able to connect via Bluetooth

Password

ISSUE¶

App saying it is connected but Error 515: Not connected to a Bluetooth device

After run a few test i believe im have a faulty hardware issue with the bluetooth unfortuntely dont have another HC-05 bluetooth to test with.

Second Attempt to Individual Assignment¶

I had to change my approach to this assignment due to issues with the only Bluetooth module and no access to our Lab i had to made do with the resources i had onhand. So I had to change to a serial connection using Processing to create a graphical user interface for a simple on/off switch display to control a LED connected to my Final Project PCB board.

Processing Programming ¶

I first had to download and install Processing. In Processing needed to add ControlP5 to the library I had to go in Sketch > Import Library> Add Library and search and installed ContolP5 library.This is key to build a graphical user interface on top of my processing sketch to be able to use buttons.

I had to look at some Tutorial and also looked at Ivan Matasovic to assist in the developing the on off interface.I replicated and modified his code to suit my board and changed some varibles.

import controlP5.*; //contolP5 GUI libaray
import processing.serial.*; // serial library

Serial port; //serial object
String myText="";  
ControlP5 cp5;
PFont font;

void setup(){ //same as Ardunio

  size(400, 550);   //window size, (width, height)
  printArray(Serial.list());  //prints all available serial ports
  port = new Serial(this, "COM5", 9600); // i have connected arduino to com5 
  port.bufferUntil('\1');

  cp5 = new ControlP5(this);
  font = createFont("calibri light bold", 25);  // custom fonts for buttons 

  cp5.addButton("LED_ON")
     .setPosition(100, 50)
     .setSize(120, 70)
     .setFont(font)
     .setColorBackground(color(0, 25, 51))
     .setColorForeground(color(0, 51, 103))
  ;

    cp5.addButton("LED_OFF")
     .setPosition(100, 140)
     .setSize(120, 70)
     .setFont(font)
     .setColorBackground(color(0, 25, 51))
     .setColorForeground(color(0, 51, 103))
  ;

}

void serialEvent (Serial port){
  myText = port.readStringUntil('\1');
}

void draw(){ //same as loop in ardunio

  background(102, 178 , 255); //

  fill(0, 0, 0);
  textFont(font);
  text("Final Board Contol", 70, 30);
}

void LED_ON(){
  port.write('1');
}


void LED_OFF(){
  port.write('0');
}

Ardunio Programming ¶

I replicated and modified Ivan Matasovic code to suit my board and changed some varibles .

#include <SoftwareSerial.h>
#define MOUSE_LEFT 1
#define MOUSE_RIGHT 2
#define MOUSE_MIDDLE 4
#define MOUSE_ALL (MOUSE_LEFT | MOUSE_RIGHT | MOUSE_MIDDLE)

class Mouse_
{
private:
  uint8_t _buttons;
  void buttons(uint8_t b);
public:
  Mouse_(void);
  void begin(void);
  void end(void);
  void click(uint8_t b = MOUSE_LEFT);
  void move(signed char x, signed char y, signed char wheel = 0); 
  void press(uint8_t b = MOUSE_LEFT);   // press LEFT by default
  void release(uint8_t b = MOUSE_LEFT); // release LEFT by default
  bool isPressed(uint8_t b = MOUSE_LEFT); // check LEFT by default
};
extern Mouse_ Mouse;

SoftwareSerial mySerial(4, 5); // RX, TX

int ledPin =  9;

void setup()
{
  mySerial.begin(9600);
  pinMode(ledPin, OUTPUT);
}
void loop()
{
  if(mySerial.available() > 0) {
    char ledState = mySerial.read();
    if(ledState == '1'){
      digitalWrite(ledPin, 1);
    }
    if(ledState == '0'){
      digitalWrite(ledPin, 0);
    }

  }

}

Note:

Then i connected my PCB board FTDI port (male pins) to serial cable (female pins) i had to make sure :