Interface and application programming

Interface & Application

In this week i got following Assignments

Write an application that interfaces with an input &/or output device
Compare as many tool options as possible

This week our assignment is to write an application that can interface with an input or output device. Previously I have send data to computer and visualized using arduino serial Monitor and serial ploter . But creating a program that can intract with a board that i made in something different

I have done some projects with MIT app inventor. So I decided to try JAVASCRIPT, Android Studio, this time . I do a voice interface usig alexa in Networking and communications Week. So in this time i would like to add two interfaces into it. So in this week my device may have following iterfaces.

Alexa Voice interface
Android app interface
Javascript web interface

i dont know, wether i can complete this. Because im 1st time to Ui/UX. I only Know electronice. So my Backup plan is processing based UI interface. But i didnt interested in this because almse all are done this kind of things before. So at this time lets do somthing different. I selece web and android interface because Alexa voice interface is alredy done in previous week. I think i can use GOOGLE Firebase for realtime oprations and host it in cloud without server.

So lets start coding

Google firebase

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. This is very nice platform, easy to integrate to any projects and database configration is very easy. Thats why i choose this platform

Hear i interface 2 devices, one bulb and one neopixel LED bar. so i made the database shown below.

Firebase use JSON structure, The javascript object notation is very easy to parse data structure, and can use in any language. This is the json structure of my database.

//Firebase Json
{
  "ESPStat" : 1,
  "FABLight" : 1,
  "NeoPixel" : {
    "Brig" : 255,
   "pixel1" : {
      "blue" : 255,
      "green" : 255,
      "red" : 255
    }
  }
}

Android App Development

I do one app before, To control my room applinces using my mobile. There is a crazzy story behind it. When i was an Engineering student, My mother comes to my room early mornig and turnOFF FAN. Actually i am very sensitive to HOT enviornment. But cold is ok for me. When ever my mother turnoff FAN, i weakup that moment. weakeup from bed and trun on fan again is a task for me. So i invented a system which, i can turn on fan using my mobile. After few months i add all equipment in my room into it. This system is still Working in my room. So i have some previous experiece in Android. I think, it will help me in this week.

Android Studio

Android Studio is the official integrated development environment for Google's Android operating system, built on JetBrains' IntelliJ IDEA software and designed specifically for Android development. It is available for download on Windows, macOS and Linux based operating systems

Android studio have many features .Write better code, work faster, and be more productive with an intelligent code editor that provides code completion for Kotlin, Java, and C/C++ languages. Powered by Gradle, Android Studio's build system allows you to customize your build to generate multiple build variants for different devices from a single project.

Ui creation

Ui creation in android studio is simple. to do this we can use inbuild palettes.In this there is there are many palettes Switches, Buttons, testviews, Edit text...etc. We can use any of them by just drag and drop.

Adding Firebase to android app is very easy beccause the firebase and android is owned by google so they add special option in android studio to integrate with firebase. The 1st time, when i use firebase for an autmation in my home, there very difficault to integrate firebase to android because there is no option in studio itself.

so 1st goto Firebase console and add new project

fllow these tutorial to know how to integrate frebase to android

Then Follow this tutroial to to integrate realtime databaase integration

Download android studio project

Web App Development

In this time i m very new to JAVASCRIPT development. So i think this is a chalanging task for me. I learn HTML and GIT in prevoius weeks, So in this time i use bothof them to create my web app. My idea is to add 2 buttons one is to turn ON and other is to turn off light. And i think if there is feedbak to know the current status of lamp, its cool.

i follow this w3schools javascript tutorial to integrate javascript in my HLTML page

To integrate our app to firebase, we need to authenticate our app with frerbase. So that we take api keys from firebase console. then add it to our javascript page.

Then Add this to our script.js file

then add this to your page as shown below

this is the js code

      var config = {
      apiKey: "Your api key",
      authDomain: "your domain",
      databaseURL: "your db url",
      projectId: "your project id",
      storageBucket: "your firebase link",
      messagingSenderId: "yur clint id",
      appId: "api id"
      };
      firebase.initializeApp(config);
      
      var database = firebase.database();
      var usersRef  = database.ref("FABLight");
      
      firebase.database().ref().child("ESPStat").on('value', function(snapshot) {
        var actual = 1;
        var teswe = snapshot.val();
        if (parseInt(teswe) == parseInt(actual)) {
          // console.log(teswe);
          document.getElementById('myImage').src = 'imgw/items/week16/onbulb.png'
        }
        else
        {
          // console.log(teswe);
          document.getElementById('myImage').src = 'imgw/items/week16/offbulb.png'
      
        }
      });
      function TurnONLight() {
        usersRef.set(1);
        alert("Sorry device not connected");
      }
      function TurnOFFLight() {
        usersRef.set(0);
        alert("Sorry device not connected");
      }
      
      
      var pixeldb = firebase.database();
      var colorRef  = pixeldb.ref("NeoPixel");
      
      var slider1 = document.getElementById("SliderRed");
      var slider2 = document.getElementById("SliderBlue");
      var slider3 = document.getElementById("SliderGreen");
      
      var red = Math.floor(slider1.value);
      var green = Math.floor(slider2.value);
      var blue = Math.floor(slider3.value);
      var colr = "rgb(" + red + "," + green + "," + blue + ")";
      document.getElementById("myH2").style.color = colr;
      colorRef.child("pixel1").child("red").set(red);
      colorRef.child("pixel1").child("blue").set(blue);
      colorRef.child("pixel1").child("green").set(green);
      
      slider1.oninput = function() {
        alert("Sorry device not connected");
        red = Math.floor(slider1.value);
        var col = "rgb(" + red + "," + green + "," + blue + ")";
        document.getElementById("myH2").style.color = col;
        colorRef.child("pixel1").child("red").set(red);
      }
      
      slider2.oninput = function() {
        alert("Sorry device not connected");
        green = Math.floor(slider2.value);
        var col = "rgb(" + red + "," + green + "," + blue + ")";
        document.getElementById("myH2").style.color = col;
        colorRef.child("pixel1").child("green").set(green);
      }
      
      slider3.oninput = function() {
        alert("Sorry device not connected");
        blue = Math.floor(slider3.value);
        var col = "rgb(" + red + "," + green + "," + blue + ")";
        document.getElementById("myH2").style.color = col;
        colorRef.child("pixel1").child("blue").set(blue);
      }

then add this to our HTML ppage for buttons.

PCB designs

I use my friend a joel's board to connect lamp to my app. full design files are avaialable on his page

To learn, how to make a PCB, please refer my Electronics Production week

Embeddad programing

Neopixel bar

Heare i use some librarys to integrate my device to firebase

Reffer this arduino library README.md file to know more about functions in it. also reffer my Embedded programing week to know more about programing.

#include <FirebaseArduino.h>
#include <ESP8266WiFi.h>
int pixel[3][3];
int brig = 50;
#include <Adafruit_NeoPixel.h>

#define FIREBASE_HOST "your host"
#define FIREBASE_AUTH "your db scret"
#define WIFI_SSID "your wifi SSID"
#define WIFI_PASSWORD "Your wifi password"

const int pixelPin = 5;
#define LED_COUNT  5
Adafruit_NeoPixel strip = Adafruit_NeoPixel(LED_COUNT, pixelPin, NEO_GRB + NEO_KHZ800);

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

  strip.begin();
  strip.setBrightness(brig); // 0 ... 255
  strip.show(); // Initialize all pixels to 'off'

  // connect to wifi.
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("connecting");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  Serial.print("connected: ");
  Serial.println(WiFi.localIP());

  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
}


void loop() {
  FirebaseObject pixels = Firebase.get("NeoPixel");
  if (Firebase.failed()) {
    Serial.println("Firebase get failed");
    Serial.println(Firebase.error());
    return;
  }
  ////////////////////////////////////////////////////////////////////////////////
  brig = pixels.getInt(String("Brig"));
  pixel[0][1] = pixels.getInt(String("pixel1/blue"));
  pixel[0][2] = pixels.getInt(String("pixel1/green"));
  pixel[0][3] = pixels.getInt(String("pixel1/red"));

  Serial.println(pixel[0][1]);
  Serial.println(pixel[0][2]);
  Serial.println(pixel[0][3]);

  strip.setBrightness(brig);
  strip.setPixelColor(0, strip.Color(pixel[0][3], pixel[0][2], pixel[0][1]));
  strip.setPixelColor(1, strip.Color(pixel[0][3], pixel[0][2], pixel[0][1]));
  strip.setPixelColor(2, strip.Color(pixel[0][3], pixel[0][2], pixel[0][1]));
  strip.setPixelColor(3, strip.Color(pixel[0][3], pixel[0][2], pixel[0][1]));
  strip.setPixelColor(4, strip.Color(pixel[0][3], pixel[0][2], pixel[0][1]));
  strip.show();

  delay(200);
}

Download Arduino project

Light controler

Heare also i use some librarys to integrate my device to firebase

Reffer this arduino library README.md file to know more about functions in it. also reffer my Embedded programing week to know more about programing.

#include <ESP8266WiFi.h>
#include <FirebaseArduino.h>


#include "WemoSwitch.h"
#include "WemoManager.h"
#include "CallbackFunction.h"

#define FIREBASE_HOST "your host"
#define FIREBASE_AUTH "your db scret"
#define WIFI_SSID "your wifi SSID"
#define WIFI_PASSWORD "Your wifi password"

const int ledPin = LED_BUILTIN;

WemoManager wemoManager;
WemoSwitch *light = NULL;

void lightOn();
void lightOff();

void setup() {
   WiFi.mode(WIFI_STA);
  WiFi.disconnect();
  delay(100);
  
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin,HIGH);
  
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("connecting");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  Serial.print("connected: ");
  Serial.println(WiFi.localIP());
  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
  
  wemoManager.begin();
  light = new WemoSwitch("Light", 80, lightOn, lightOff);
  wemoManager.addDevice(*light);
}

void loop() {
  
   wemoManager.serverLoop();
   
  if(Firebase.getInt("FABLight")==1)
  {
    Firebase.setInt("ESPStat", 1);
    digitalWrite(ledPin, LOW);
  }
  else
  {
    Firebase.setInt("ESPStat", 0);
    digitalWrite(ledPin, HIGH);
  }
  Serial.println(Firebase.getInt("FABLight"));
  delay(100);
}

void lightOn() {
    Serial.print("Switch 1 turn on ...");
    digitalWrite(ledPin, LOW);
    Firebase.setInt("ESPStat", 1);
    Firebase.setInt("FABLight", 1);
}

void lightOff() {
    Serial.print("Switch 1 turn off ...");
    digitalWrite(ledPin, HIGH);
    Firebase.setInt("ESPStat", 0);
     Firebase.setInt("FABLight",0);
}

Download Arduino project

PCB Designing

I use ESp 01 and a relay to interface 230V LIGHT. The controlers works in 5v but the lamp works in 230v To control 230v AC we must use relay or triac.

Hear i select relay and i use a mosfet to drive relay from 5v signal, because the relay coil is 12v

I use proteus to Create PCB.

Download proteus files

please refer my Electronic productionweek to learn how to mill a PCB by using milling machine

After milling i solder it.

NEOPIXEL color Piker

Selected color

Neopixel bar Working

Working video

Hear 3 slide bars, one for red, one for blue and one for green. each bare varry from 0 to 255. we can slide it to select desiered colours which will show on both LEDs and color privew in website

Akhil

Akhil Joseph