Skip to content

15. Interface and application programming

Group work

I followed this MIT tutorial to help with this basic button and clicker sound response :

Put 2 fonctions into the block editor :

Then connect the app to your phone and now it works !

When you click on the Animal N Tech logo, the sound of a clicker is emitted !!

I also tried to make a different version that communicates with my bluetooth board and switch on the light when the button is clicked inspired by this tutorial

Unfortunately, It didn’t work because I couln’t connect my board to my phone…

So I tried another method :

I create an app to communicate with a board I did in the 5th week composed of a SAMD11C and a led. It switch on the light when I press a button and I switch it off when I press another one.

I followed the example of Theo Gautier ! I started by downloaded Processing and get inspired by this tutorial.

After downloaded it, open it and then import this library called “ControlP5” by clicking on “sketch”, “import library”, “manage library” :

Here is the Processing code from the tutorial for one led :

import controlP5.*; //import ControlP5 library
import processing.serial.*;

Serial port;

ControlP5 cp5; //create ControlP5 object
PFont font;

void setup(){

  size(300, 450);    //window size, (width, height)

  printArray(Serial.list()); //it connect my board to COM4

  port = new Serial(this, "COM4", 9600);

  //lets add buton to empty window

  cp5 = new ControlP5(this);
  font = createFont("PFont", 20);    // custom fonts for buttons and title

  cp5.addButton("red")     //"red" is the name of button
    .setPosition(100, 50)  //x and y coordinates of upper left corner of button
    .setSize(120, 70)      //(width, height)
    .setFont(font)
  ;   
 cp5.addButton("alloff")     //"alloff" is the name of button
    .setPosition(100, 350)  //x and y coordinates of upper left corner of button
    .setSize(120, 70)      //(width, height)
    .setFont(font)
  ;
}

void draw(){

  background(0, 150 , 150); // background color of window (r, g, b) or (0 to 255)

  //lets give title to our window
  fill(0, 255, 0);               //text color (r, g, b)
  textFont(font);
  text("LED CONTROL", 80, 30);  // ("text", x coordinate, y coordinat)
}
//when you press the button, it sends perticular char over serial port

void red(){
  port.write('r');
}
void alloff(){
  port.write('f');
}

Here is the Arduino code :

void setup() {

  pinMode(4, OUTPUT);   //set pin as output

  Serial.begin(9600);    //start serial communication @9600 bps
  }

void loop(){

  if(Serial.available()){  //id data is available to read

    char val = Serial.read();

    if(val == 'r'){       //if r received
      digitalWrite(4, HIGH); //turn on led
      }
    if(val == 'f'){       //if f received
      digitalWrite(4, LOW); //turn off all led
      }      
    }
  }

And now it works !!

When you press the button the light is on !!

Files