Interface and Application programming




Week Fourteen.

Group assignment

  • Compare many tools options as possible for you.

    • Individual assignment

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

    • Learning outcomes

  • To create a Graphic User Interface (GUI) you need to interpret and implement design and programming protocols .

    • programming:

  • This week I create an application that interfaces with the output or input that attached to a microcontroller.

    • Processing:

  • Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.
  • To know more about how to use processing I started to watch this tutorial .
  • To learn about the language for the programming environment processing >> add Controllers >> build a graphical user interface.
  • The processing sketch include Buttons, Sliders, swaps, Knobs, Text fields, Checkboxes and others that can be simply added to a processing sketch.

    • The Steps :

  • installed processing
  • installed controlP5 library go to sketches>>import library>>add library

    • Processing coding:

  • I create background by the size and background function 
       
         import controlP5.*;
ControlP5 cp5;
void setup(){

size(400, 500);}

void draw(){
background(255,255,0);
         
}
  • I add a title to my application window the text function is:
    • text("Mona LED Control",100,30);
  • Add the buttons
  • I will have two button to control the lighting of the RGB.
  • I use the this command:
    • 
 cp5 = new ControlP5(this);
 cp5.addButton("blue").setPosition(100,100).setSize(110,90);
 cp5.addButton("red").setPosition(100,250).setSize(110,90);

     void blue(){
port.write('r');
}

void red(){
port.write('b');
}
  • Now I can build the communication between the application and Attiny44.
  • When the button is pressed the exact task will be sent through the serial to the ATtiny44 then it will perform to the that task.
    • The full is the following: 
    
     
      import controlP5.*;
 import processing.serial.*;

 Serial port;
 ControlP5 cp5;

 void setup(){

   size(400,500);

   printArray(Serial.list());

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

   cp5 = new ControlP5(this);

   cp5.addButton("blue").setPosition(100,100).setSize(110,90);
   cp5.addButton("red").setPosition(100,250).setSize(110,90);
 }
 void draw(){

 background(255,255,0);

 text("Mona LED Control",100,30);
 }
 void blue(){
 port.write('r');
 }
 void red(){
 port.write('b');
 }

    Arduino code

  • For the Arduino code the led will light up when the character is detected.
  • The code is below:

    • Previous Next