Week 18

About Me Assignments Final Project Fab Lab 2017 ☰
About Me Assignments Final Project Fab lab 2017
×

INTERFACE AND
APPLICATION DESIGNING

This week is about designing applications and interfaces. The assignment task is to:

Individual Assignment

As for this week, as my project has a bluetooth module attached, I thought of making an application for that

The idea: is to design a small mobile app which can communicate with a micro-controller over blue-tooth interface and move the motor with the signals received.

MC Pin Structure

Mobile to Micro-Controller Communication Diagram

Well before even the start of this week's task I already had planned on working "Android Studio" to make a mobile application for my main board, but during the Neil's lecture, I learnt a special way. Instead of coding for the whole app, I can directly make an application for the required functionality with the MIT App Inventor 2.

This thing literally changed my whole vision of mobile apps, now I had a better tool to work for my project.

To start working on MIT App Inventor 2, we had to first register ourselves using google account.

MC Pin Structure

Connect with google to proceed further

Once I was registered, I was sent to MIT App Inventor 2's main page where I created a new project and started working.

As I already had experience of working on Android Studio, this app inventor 2, an application of MIT wasn't difficult to use. I got familiar very easily as most of the functionalities were similar and documented really easy to understand.

MC Pin Structure

App Inventor 2 Interface

There are variety of functionalities which are really important before you start to make an application. A few of them are below

This is a tool pallet which contains majority of components and tools which can be used to develop and design our application like buttons, labels even sensors like wifi, bluetooth etc.

MC Pin Structure

Tool Pallet

After tool pallet we have components hierarchy and properties, these both things are also imporant. As component hierarchy shows us which component is placed where under which parent child relation. And the properties tab shows us the properties of the selected component from hierarchy. Properties like text, value, color, height, width etc.

MC Pin Structure

Components and Properties Tabs

Once the design is completed, now it was time for the coding. But app inventor also provides an easy mechanism for that. There are blocks button on the right side of page

MC Pin Structure

Blocks

Blocks is also an interesting functionality, as instead of code yourself, you just have to drag and drop the functionality you want and place it. It is like a puzzle where you can combine functionalites with the values.

When you click any option from the blocks menu, its subsequent draggaple and droppable functionalities will be available. You can just select according to your choice and need

It also contains the components which are inserted in the Components hierarchy and their related functions. For example a button is inserted in hierarchy, the blocks menu will contain the button and its subsequent functionality like onClick, OnHover etc etc

MC Pin Structure

Blocks Menu

Well for this assignment I added a bluetooth client in the hierarchy along with the listpicker. As the listpicker will be the component which will show the list of all available bluetooth devices in the nearby vicinity.

After that, there are only 2 important functions which are must to be remembered when using listpicker:

  1. BeforePicking: Means before selecting the components, what should the list do. Here we select all the available devices and show them in list
  2. BeforePicking: Once you have selected a device then what should we do
MC Pin Structure

Bluetooth Functionality

I added a few buttons to move left and right side of motors.

MC Pin Structure

Sending Data on Click

To test the application if it is working on Mobile or not, there are two ways. One, you can directly build it for the mobile, 2nd you can directly run it using the AI2Companion app. It is easily available on PlayStore and GooglePlay.

I used the AI2Companion app, so for that we have to start it from connect menu, and then click on AI Companion.

MC Pin Structure

Sending Data on Click

Once the AI Companion is clicked it will launch the barcode screen

MC Pin Structure

Sending Data on Click

After this, you have to launch the AI Companion app on mobile and scan the QR code and then connect with code, and your application will be launched. But there is one condition, your mobile as well as the computer must be on same network otherwise this function wont work.

MM board checking

AI Companion App Interface

MM board checking

After connected with AI Companioin of online App Inventor

Micro-Controller Coding

For this assignment I used my main circuit boards, I have milled two boards one is the main circuit board which I already explained in networking assignment and one motor driving circuit which is already explained in final project

Code

#define MPIN1 4
#define MPIN2 12
#define READ_RATE 100 // How often the serial link is read, in milliseconds
#define FLASH_RATE 100 // The on/off period in milliseconds, for the LED Flash status feedback

byte cmd = 0; // Stores the next byte of incoming data, which is a "command" to do something

void setup()
{
pinMode(LEDPIN, OUTPUT); // pin 48 (on-board LED) as OUTPUT
digitalWrite(LEDPIN, LOW);
Serial.begin(38400); // start serial communication at 9600bps
Serial1.begin(38400); // start serial communication at 9600bps
}

void loop()
{
if ( Serial1.available() ) // if data is available to read
{

cmd = Serial1.read(); // read it and store it in 'cmd'
Serial.println(cmd);

};

if(cmd == 1){

digitalWrite(MPIN1, HIGH);
digitalWrite(MPIN2, LOW);

}

else{

digitalWrite(MPIN1, LOW);
digitalWrite(MPIN2, LOW);

}

}

Demo

Finally its demo time

App Inventor to connect with my board using bluetooth module

File available for download

This is all for this week

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.