Interface & Application Programming

Group Assignment

Group assignment can be found HERE which about making simple interfacing with internal device like mouse or keyboard.

Introduction

In this weekly task, I start learning making apps (desktop and mobile phone) that can support my final project. As in my final project, I will make robot that can send informations filled with data measurements via wireless communication.

Processing.org

What is this?

According to Processing.org website, Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Basically, it is based on Java and used for prototyping equipped with ability to visualize the process or events. Interesting right?

The software we use for programming is free. It looks like the Arduino IDE that many people has familiar with. The difference between IDE with Processing is IDE has two functions automatically provided when opening it which are SETUP and LOOP, meanwhile, Processing has SETUP and DRAW as can be seen in figure below. The file extension for processing is PDE. In this task, I use processing version 4.0b2.

The board that I am using is ATTiny3216 breakout board that I made days ago. It already has socket pins that can be connected directly to any other external pheriperal. I use LM35 linear temperature sensor that gives analog value to microcontroller and three leds (Green, Yellow, and Red) as temperature level indicator. The reason I use LM35 in this project is because it has analog out so I can put formula to convert the read out from sensor to voltage then real temperature. LM35 as default will output temperature in celcius, ofcourse by dividing it with 10 mV first. The pin connection between the ATTiny3216, LM35, and LEDs is

The codes

PROCESSING

Declare serial libary to have wired communication between processing and microcontroller.
import processing.serial.*; // lib for serial communication
Serial ser; // create object for serial

Create objects, here I want to use an image as background, use specific font-style.
PImage img; // create object for image
int dt; // buffer variable
PFont f; // set font object

In SETUP, add serial port object to initialize serial communication.
ser = new Serial(this, "COM20", 9600); // Get com from device manager or arduino IDE

in DRAW, read serial value anytime it is available.
if (0 < ser.available()){
dt = ser.read();
}

ARDUINO IDE

Variables declaration
const int tp_pin = 5; // sensor pin
const int stay = 16; // led pin always on
const int red = 9; // red pin
const int yellow = 11; // yellow pin
const int green = 10; // green pin
#define vref 4000 // voltage ref according to vcc, default is 5v, but my VCC when measured is only 4V. I prefer to use real value, but to be safe, you can use default value.
#define adcres 1024.0 // adc resolution
#define mv 10 // 1oc = 10 mv

In SETUP, start serial
Serial.begin(9600);

In LOOP, transmitting data will be
Serial.write((int)suhu);

The user interface on processing is used as indicator of 2 things, the temperature value captured by LM35 and the LED indicator when it reaches some value. What I show in this demo is real temperature value measured by the sensor in my town, Yogyakarta. It is like the sun ray burnt the skin. You would see people wearing jacket in my town, funny, but true. The logic for later statement is coded as below:
if (tmp >= 35){
digitalWrite(red, HIGH);
digitalWrite(yellow, LOW);
digitalWrite(green, LOW);
}

else if (tmp >= 30){
digitalWrite(red, LOW);
digitalWrite(yellow, HIGH);
digitalWrite(green, LOW);
}

else {
digitalWrite(red, LOW);
digitalWrite(yellow, LOW);
digitalWrite(green, HIGH);
}

Complete codes are attached beneath the video. Below is the demo video.

All files involved can be found on below link, I put enough explanation in them (I belive):

[ARDUINO] [PROCESSING]

Mobile Phone Application

Here, I use two different communication which are Serial Bluetooth and WiFi (Cloud). I develop 2 different mobile application that can be used to read sensors and control the motor from simple car that I build using 3D printer. I use KODULAR to build the apps.

Kodular

Simply put, I consider this to old platform that I used to use which is App Inventor. Below images shown 2 apps that I built to accomodate two different wireless communications. The left image is used for serial bluetooth, the right image is for cloud communication. Cloud database that I used is Firebase from google.

     

Hardware

In this task, I use ATTiny1614 board that I used for machine bulding task connect to ESP32 board as the helper for wireless communication. The sensor that I use is one ultrasonic sensor to estimate distance between car and obstacles. Added to that, for switching I use one magnetic relay connected to 4 small dc motors. This dc motors used to use for quadcopter, hence the RPM is so big.

     

Serial Bluetooth Application

Bluetooth serial is accomodated in Kodular. Simply using Bluetooth Client. Following steps are how to connect with bluetooth and sending/receiving data.

1. Use list picker to list available bluetooth connection around

   

2. Then connect them using selected address

   

3. Then send text (string/char) to ESP, let say to control device

   

4. Or can receive data from ESP, let say reading sensor data

   

The Codes

ESP32

To connect to bluetooth serial, use directive and create an object
#include "BluetoothSerial.h"
BluetoothSerial SerialBT; // create an object

In SETUP, to start serial bluetooth, use below code, with "ESP32 - Jans" is the name you put as identity of your ESP
SerialBT.begin("ESP32 - Jans"); //Bluetooth device name

In LOOP, if bluetooth is available (serial transmitting data) then read the data
sign = (char)SerialBT.read();

If you want to send data via serial bluetooth, simply Use
SerialBT.write(dist); // send via serial

There is no special instruction in ATTiny1614 for this case. I designed it to be that way so the main tasks will be handled by the ESP32. Complete codes are attached beneath this video. The demo video is shown below, left video shows the LED and sensor check, while the right video shows controlling demo.

     

All files involved can be found on below link, I put enough explanation in them (I belive):

[KODULAR] [ATTINY1614] [ESP32]

WiFi Application

As I mentioned before that I use cloud storage/database for this type of connection. It means that I can ask my robot and my app to write and read data to cloud database. I use google firebase to do this. Kodular has made this simple to access this database. We can directly access the database by using Firebase_Database and fill the Firebase Token and Firebase URL. You can leave the Project Bucket empty if you do not want to make parent key for all the incoming or outgoing data. Following steps are simplified version of how to connect kodular to firebase realtime database.

1. After you setup the realtime database, you can set the connection to online.

   

2. Or you can set them to offline.

   

3. If you want to get value(s) from realtime database do this.

   

   the continue with this step

   

4. If you want to store data to database so the robot can read them, do this

   

   just remember that even if you send numeric value from kodular, it will be a string/character in firebase. So, you should adjust your microcontroller code to read that data type.

The Codes

ESP32

To connect to firebase database and wifi, use directive and create an object
#include // for wifi
#include
FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;

Insert your credentials
#define API_KEY "AIzaSyA_VZO6Hsgxxxxxxxxxxx"
#define DATABASE_URL "https://demoaxxxxxxxxxx.firebasedatabase.app"

In SETUP, do not forget to initialize
config.api_key = API_KEY;
config.database_url = DATABASE_URL;
config.token_status_callback = tokenStatusCallback;
Firebase.begin(&config, &auth);

In LOOP, if you want to write value (float/int or string), use SET
Firebase.RTDB.setFloat(&fbdo, "dist", dist);
Firebase.RTDB.setString(&fbdo, "rd_sen", "0");

If you want to read from database, you can specifically write their data type. But to be safe, you can just use GET
Firebase.RTDB.get(&fbdo, "m_up"); then continue with
String val1 = fbdo.stringData();

There is no special instruction in ATTiny1614 for this case. I designed it to be that way so the main tasks will be handled by the ESP32. Complete codes are attached beneath this video. The demo video is shown below, left video shows the LED and sensor check, while the right video shows controlling demo.

     

All files involved can be found on below link, I put enough explanation in them (I belive):

[KODULAR] [ATTINY1614] [ESP32]

Apps Installation on Android

To install your app in mobile apps if you use android is pretty easy by following this link. I rewrite them here:

1. Go to the "Settings" of your mobile phone and find the security option from the menu.
2. Scroll and find App and Notification option. Tap on Install Unknown Apps or Install other Apps or Special access.

   

3. Now select the particular browser you often use to download APK files.
4. Further, enable "Allow from this source" option.
5. A dialog box will appear in front of you press OK to confirm.

   

   Now you can install your app from any application you just allowed to send the app. Yay!!!

I also want to check web serial to read sensors and control the small car robot. But I am not sure I have enough time for now. Hence, I will do that later when I have leisure time.

Table of Contents

• Interface & Application Programming
• Recaps and Task Outlines
• Learning Outcomes
• Group Assignment
• Introduction
• Processing.org
• The codes
• Mobile Phone Application
• Kodular
• Hardware
• Serial Bluetooth Application
• The Codes
• WiFi Application
• The Codes
• Apps Installation on Android