Welcome to my week 13

Interface And Application Programming

Learning Outcomes:

Learnt how to use MIT App Inventor.

Learnt how to Interfacing

Learnt programming my board.

Brief

In computer programming, an application programming interface (API) is a set of subroutine definitions, protocols, and tools for building application software. In general terms, it is a set of clearly defined methods of communication between various software components. A good API makes it easier to develop a computer program by providing all the building blocks, which are then put together by the programmer. An API may be for a web-based system, operating system, database system, computer hardware or software library. An API specification can take many forms, but often includes specifications for routines, data structures, object classes, variables or remote calls. POSIX, Windows API and ASPI are examples of different forms of APIs. Documentation for the API is usually provided to facilitate usage and reimplementation.

Purpose

Just as a graphical user interface makes it easier for people to use programs, application programming interfaces make it easier for developers to use certain technologies in building applications. By abstracting the underlying implementation and only exposing objects or actions the developer needs, an API simplifies programming. While a graphical interface for an email client might provide a user with a button that performs all the steps for fetching and highlighting new emails, an API for file input/output might give the developer a function that copies a file from one location to another without requiring that the developer understand the file system operations occurring behind the scenes.

Getting started with Input devices

My Assignment:-

In this week literly I dont know what to interface in the board so I got help from youtube and then I started understanding and then I created a app .

My idea is to interface my mobile to a pcb and the program it and use it.

I started exploring the MIT App Inventor by using youtube and google

so I started making basic app so that I can explore more.

Steps :

First when you open MIT App Inventorb To use one needs to sign in using the "google account", once we are inside we will be asked to take a survey, we can skip it if we want and move to creating a new project. click on the connect option so you will notice all this options so click on the AI Companion and the window will open which contains a barcode so that you can use this on your mobile.

Before using that barcode you have to instal MIT App Inventor 2 Application on your mobile and then you can scan the barcode.

And then i started creating app by getting refference from youtube.

So left side on the screen you will see Palette you can find alot of options like User Interface, Layout, Media, Drawing And Animation and etc.

After slecting the options you can go to blocks so that you can program the options to work.

I was really exited what I was doing so I my first app is just to check its working or not so its a small app

If I shake my mobile then it sounds as "HEY BODDY DO NOT DISTURB ME" and if you click on "its me vynatheya" it sounds as "HELLO WORLD" so you can watch below.

Download App

My second app is just to pratice.

So 2nd App its works as a notepad or a skecthbook i named as Digital Doodle. So you can watch below.

Download App

And then I started Using GUI for Processing of my board.

Requirements

As I want to control my board, Arduino IDE is first need. And to create GUI all i need is Processing IDE (or I can call it Processing sketchbook).

What is Processing?

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Processing is very useful platform for hobbyists, researchers, students for learning and prototyping. Some of the features are:

Free and open source

For all platforms (GNU/Linux, Mac OS X, Windows, Android, and ARM)

Well documented

Many libraries

Good community

First download Software. I have alreddy downloaded ....

So if you want to download Arduino IDE go here : Arduino IDE Download

So if you want to download Processing go here : Processing Download page

Running Processing

When I clicked on download Processing, it downloads one zip file. Unzip that file and inside the unzipped folder I found Processing application (see the following image). And to run Processing, double click on that icon.

There are many libraries for different applications. You can also install some extra libraries manually or directly from the menu.

To install new library from menu, go to: Sketch -> Import Library... -> Add Library

But at the moment Iam interested only in GUI design. And there is a very nice library called ControlP5 is available to create our project. To add ControlP5 library to Processing just follow the add library process and search for ControlP5 and then click on install. Now Iam ready to create your GUI application.

I have installed ControlP5, start with creating simple window. See the video down below to get basic idea how to create window and add buttons to the window.

Video Example.........

After installing the software open it you will see this type of window

Processing window will be look like following if you use code provided below.

import controlP5.*; 
import processing.serial.*;

Serial port;

ControlP5 cp5;  
PFont font;

void setup(){ 

  size(300, 300);   
  
  printArray(Serial.list());    
  
  port = new Serial(this, "COM13", 9600); 
  
  //lets add buton to empty window
  
  cp5 = new ControlP5(this);
font = createFont("calibri light bold", 20);
 
  
  cp5.addButton("On")      
    .setPosition(100, 80)   
    .setSize(120, 60)       
    .setFont(font)
  ;   

  cp5.addButton("Off")     
    .setPosition(100, 150)   
    .setSize(120, 60)       
     .setFont(font);

 cp5.addButton("blink")     
    .setPosition(100, 220)   
    .setSize(120, 60)       
     .setFont(font);

}

void draw(){  

  background(8, 243, 231);  

  fill(25,115,235);               
  
  text("HELLO", 120, 30);textSize(20);   
  text("SWITCH ON LED", 70, 60);textSize(20);   
}
 void On(){
  port.write('c');
}

void Off(){
  port.write('g');
}
 

Download the GUI and ARDUINO IDE CODE

Arduino code will be look like following if you use code provided below.

#include 
 const byte rxPin = 2;
 const byte txPin= 1;
 SoftwareSerial mySerial =  SoftwareSerial(rxPin, txPin);

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin 13 as an output.
  pinMode(3, OUTPUT);
  //pinMode(4,INPUT);
  digitalWrite(7,HIGH);
    // define pin modes for tx, rx:
  pinMode(rxPin, INPUT);
  pinMode(txPin, OUTPUT);
  // set the data rate for the SoftwareSerial port
  mySerial.begin(9600);
}

// the loop function runs over and over again forever
void loop() {

//listen to serial port
if (mySerial.read()=='c')
{
  digitalWrite(3,HIGH);
  
  }

if (mySerial.read()=='g')
{
  digitalWrite(3,LOW);
  
  }

   
if (mySerial.read()=='b')
{
  
digitalWrite(3,HIGH);
delay(1000);
digitalWrite(3,LOW);
delay(1000);
  

 }  
} 

I complied this code to my board.

u can watch the following video........