Group work - Interface & application

This week's assignment was to compare as many tools as possible to make an interface.

For this week's assignment we used 3 tools
1. Processing
2. LabView
3. MIT App Inventor

Processing

Processing is an open-source computer programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context. The Processing language builds on the Java language, but uses a simplified syntax and a graphics user interface.

After discussing with our instructor, we decided to use Processing. It’s very Arduino like. After going through a couple of tutorials & got the hang of it and within sometime we were able to design the GUI.

Image

Download Processing

Here is a simple tutorial on Processing which we followed : LINK

We wrote a program which has two buttons, an On and a OFF button to control and LED. The LED code is written in Arduino.Processing and the code in the Microcontroller communicate through serial communication.

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

Serial port;

ControlP5 cp5; //create cp5 object
PFont font;

void setup(){

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

printArray(Serial.list());   //prints all available serial ports

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

//lets add buton to empty window

cp5 = new ControlP5(this);
font = createFont("calibri light bold", 20);


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

cp5.addButton("Off")     //"off" is the name of button
.setPosition(100, 200)  //x and y coordinates of upper left corner of button
.setSize(120, 120)      //(width, height)
.setFont(font);

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

}

void draw(){  //same as loop in arduino ide

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

//lets give title to our window
fill(25,115,235);               //text color (r, g, b)

text("Namaskar", 110, 30);textSize(20);  // ("text", x coordinate, y coordinat)
}


//so when you press any button on the GUI, it sends perticular char over serial port

void On(){
port.write('c');
}

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

void blink(){
port.write('b');
}
GUI

Image

week14

week13

NI LabView

Before starting with NI LabVeiw its very important to understand its working environment..... as it not a traditional prrogramming language.... Its graphical programming langauge.... we were a bit familier with this environment so we directly jumped into making an interface for this week's assignment....... before doing that we need to understand that LabView does not interfaces directly with any other party hardwares such as Arduino, Raspberry Pi etc ....... but since its a modular programming language..... it is able to program and read data from external party hardwares through VISA Modules..... now we were not very much familier with the VISA ...... So before that we have to study the VISA Module.

Image Image

We have to follow a standard procedure to start a serial communication with the hardware we have connected on any COM Port .....

1. We have to select the port on to which the serial hardware is connected

2. Input the number of bytes which we are expecting would be comming

3. Type of data output

4. A control over the program i.e the stop button, this ensures that the program does not consumes all the CPU

5. A delay in the loop, this also ensures proper sync with the incomming data and makes sure that whole CPU is not consumed

6. After all this we need to open the VISA port

After following all the steps we decided to make first interface which would be showing which button was pressed either button 1 or button 2

The VI for the same is as shown below :

Image

After the VI here is the front panel, where all the data would be shown :

Image

MIT App Inventor

A fellow student had used App Inventor to make an android app. The interface seemed easy and the workflow too. After a week, we decided to make an app also. We wanted to control the LED from the APP via Bluetooth just like We did in processing. we started with Basic Videos from YouTube and in an hour we got the hang of it. App Inventor has been very easy to use, just pick and place components and your done. For the icons in the app, we found an amazing website with tons of icons to choose from - icons8.com

Here is the application Window

App Inventor Design Window with icons & layout.

App Inventor Blocks Window, were you connect certain buttons, images with one another and also command them to do something.

In my app, a person first clicks the Bluetooth icon which opens a list of Nearby Bluetooth device, After connecting with the required Bluetooth device, You can press the ON/OFF button to control the LED’s of Board.

Top