Interface and application programming

Objectives

About languages

In this week i am going to cover following languages

1. Processing

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

2. MIT App Inventor

MIT App Inventor is an intuitive, visual programming environment that allows everyone – even children – to build fully functional apps for smartphones and tablets.

3. Python

Python is powerful... and fast; plays well with others; runs everywhere; is friendly & easy to learn; is Open.Python is a programming language that lets you work more quickly and integrate your systems more effectively.

GUI in Processing App

Using this processing app i am going to design one graphical user interface like metar which shows read sensor data continously.Its look more visible for end user to check the sensor data on graphical user interface.

Introduction of Processing IDE

Processing is an open-source graphical library 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.
Processing uses the Java language, with additional simplifications such as additional classes and aliased mathematical functions and operations. It also provides a graphical user interface for simplifying the compilation and execution stage. The Processing language and IDE have been the precursor to other projects including Arduino, Wiring and P5.js.

Features

Download processing software:

Visit Official website here to download processing software.After downloading extract the file.You will find processing 3.5.4 folder which contain the processing appliction file.Click on it to run processing application.

After running the processing application we can see processing IDE window which is shown below.

Create GUI in processing

Before i go for programming part first i went to official website of processing website.It covers Video Tutorials. Links to videos. to check few tutorials by Daniel Shiffman, Andrew Glassner, Jose Sanchez, and Abe Pazos.
Processing IDE editor window contain the three imporatnt things which is import libraries like processing.serial,void setup( ),void draw( ).You should ensure these three things before you start programming.

Editing Steps in processing IDE

void setup() {
  size(500, 350);
  background(0, 0, 0);
  
  myPort = new Serial(this, "COM7", 9600);
 fill(120, 50, 0);
  m = new Meter(this, 25, 100);
  m.setTitleFontSize(20);
  m.setTitleFontName("Arial bold");
  m.setTitle("BODY TEMPRATURE (%)");
    
  String[] scaleLabelsT = {"0", "10", "20", "30", "40",
"50", "60", "70", "80", "90", "100" };
  m.setScaleLabels(scaleLabelsT);
  m.setScaleFontSize(18);
  m.setScaleFontName("Arial");
  m.setScaleFontColor(color(200, 30, 70));
  m.setNeedleThickness(3);
  m.setMinInputSignal(0);
  m.setMaxInputSignal(100);
  
  int mx = m.getMeterX();
  int my = m.getMeterY();
  int mw = m.getMeterWidth();
}

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw() is called automatically and should never be called explicitly. All Processing programs update the screen at the end of draw(), never earlier.

void draw(){
  textSize(30);
  fill(0, 255, 0);
  text("BODY TEMPRATURE", 100, 40);
  
  if (myPort.available() > 0) {
    String val = myPort.readString();
    String[] list = split (val, ',');
    float tem = float(list[0]);

  m.updateMeter(int(tem));
  
  
  println("BODY TEMPRATURE: ");
  }
}

Need of Hardware & software

• Atmega 328p board
• LM 35 Sensor
• FTDI cable/Arduino uno acts as FTDI
• Connecting wires
• Arduino IDE
• Processing IDE

Step by step Procedure to display sensor data on GUI

Step 1.Set up the H/W

Connection pin out

Connect FTDI cable to FTDI pin header of ATmmega 328p

If you dont have the FTDI cable then connect Arduino pins to Atmega 328p board as follows

Step 2.Run arduino sensor code in IDE

#include <SoftwareSerial.h>
//initializes/defines the output pin of the LM34 temperature sensor
//this sets the ground pin to LOW and the input voltage pin to high
int temp;
int tempPin = PC2;
const int RX = PD0;
const int TX = PD1;
SoftwareSerial mySerial(TX, RX);

void setup()
{
  Serial.begin(9600);
}

void loop()
{
  temp = analogRead(tempPin);
  temp = temp * 0.48828125;
  Serial.println(temp);
  delay(1000);
}

Step 3.Check the serial monitor

Step 4.Open & Run the processing IDE

STEP 5.Testing the design

Note:In the above video i tried to demonstrates you how sensor data is being displayed on processing.But the temperature reading which is displayed on processing meter window is an ambient one not the body temperature so to see how LM 35 sense body temperature hold LM 35 by your finger's tight.So that it can warm up and show your body temeprature as well.

Learning outcomes

MIT inventor app

MIT App Inventor is an intuitive, visual programming environment that allows everyone – even children – to build fully functional apps for smartphones and tablets. Those new to MIT App Inventor can have a simple first app up and running in less than 30 minutes. And what's more, our blocks-based tool facilitates the creation of complex, high-impact apps in significantly less time than traditional programming environments. The MIT App Inventor project seeks to democratize software development by empowering all people, especially young people, to move from technology consumption to technology creation More detailed visit MIT app inventor.

Procedure to develop MIT app to display the sensor data through bluetooth.

( Image taken from https://appinventor.mit.edu/explore/ai2/share )

Then go to My projects

Click on start new project

Write the project name

This project window has two sections

So first we will see both sections one by one

1.Designer button:-For creating GUI:

Step 1.3

Then i decided to add the logo of my project made in inkscpae in week 2

Go to user interface -> Drag the image menu on screen and then upload the png image

Step 1.4

After uploading the image, go to properties & change the width and height according to phone size

Step 1.5

Add the button named as connected

You can click on button to connect with your bluetooth

Go to layout palette & click on horizantal arrangement

This part shows the LIVE sensor data value

Add the non-visible clock from sensor menu

Clcok indicate the time interval value to display the value

Once you finished UI then switch from Design to block for programming

Go to Screen1 menu and click on list picker and drag the block code

Similarly drag the control structure from another item and do the same accordingly

Step 2.1

Step 2.2

Write a when - do block i.e.before picking

Set listpicker1 elements to bluetoothclient with addrees name

When we click on label2 show connected

Give text color

Step 2.3

Drag when block for after picking

In Do block connect bluetooth with

Step 2.4

Finally when bluetooth connected start receiving text

Step 2.5

Once i finished above code again switch from block to design

Go to Build -> clcik on app (provide QR code for.apk)

Step 2.6

Scan the QR code

Cick Ok

Step 2.7

Check your personal mobile screen to find app

Need of hardware & software

Step by step procedure to display the sensor data on MIT app inventor(Mobile app)

STEP 1.SET UP THE H/W

STEP 2.RUN ARDUINO SENSOR CODE IN IDE

#include <SoftwareSerial.h>
//initializes/defines the output pin of the LM34 temperature sensor
//this sets the ground pin to LOW and the input voltage pin to high
int temp;
int tempPin = PC2;
const int RX = PD0;
const int TX = PD1;
SoftwareSerial mySerial(TX, RX);

void setup()
{
  Serial.begin(9600);
}

void loop()
{
  temp = analogRead(tempPin);
  temp = temp * 0.48828125;
  Serial.println(temp);
  delay(1000);
}

STEP 3.CHECK THE SERIAL MONITOR

STEP 4.Open and run the MIT APP

STEP 5.Testing the design

Group assignment

As a part of group assignment i studied the process IDE and try to explore it.Also i figure out some imporatnt point while doing this stuff.

Processing: -

• To make application in processing we need install processing software to our operating window.
• Programming language of processing is C++.
• In processing we need to write two codes. One is for creating graphical interface in the programming window of processing and other is for programming our hardware in “Arduino IDE“.
• Here programming window of “Arduino IDE” and “Processing” are independent on each other.
• Programming in processing is quite difficult than MIT App Inventor.
• To create a particular graphical interface in processing ,
  Example: - To create an analog or digital meter We need to install its library in the processing and then we can run the code.
  This is the simple program of drawing vertical rectangle and inclined line.
  Code: -
  size (640,360);
  line(100,50,600,250);
  rect(100,50,20,250);

For more detailed about group assignment click Group Assignment

Downloads: