Internet of Things

Dashboard Using Firebase, Plotly and Flask

IoT Team, BFCAI
Firebase

▪ Firebase is Google’s mobile and web application development platform

that includes many services to manage data from iOS, Android, or web
applications.
▪ This includes things like analytics, authentication, databases,
configuration, file storage, push messaging, and the list goes on.
▪ The services are hosted in the cloud and scale with little to no effort on the
part of the developer.
Firebase: Sending Temperature Values
Firebase: Controlling an LED from Anywhere
Firebase Admin SDK

▪ The Firebase Admin SDK provides a powerful set of tools for interacting
with Firebase services, including the Realtime Database.
▪ In Python, you can use the Firebase Admin SDK to access and manipulate
data in the Firebase Realtime Database.
▪ To use Admin Database API in Python, we need to install the following.
pip install firebase-admin
Firebase Admin SDK

▪ Open your Firebase project.

Firebase Admin SDK

▪ Expand Build tap, and go to Realtime Database.

Firebase Admin SDK

▪ Copy the database URL.

Firebase Admin SDK

▪ Create the following nodes in the database.

Firebase Admin SDK

▪ Goto Project settings.

Firebase Admin SDK

▪ Click on Service accounts.

Firebase Admin SDK

▪ Choose Python and copy the code.

Firebase Admin SDK

▪ Click on Generate new private key.

Firebase Admin SDK

▪ Click on Generate key.

Firebase Admin SDK

▪ This will download a JSON file that contains the private key.
▪ For simplicity, rename the file as key.json.
Firebase Admin SDK: Imports

▪ The firebase_admin module provides functionality for working with

Firebase services.
import firebase_admin

▪ The credentials submodule contains functions for managing credentials.

from firebase_admin import credentials

▪ The db submodule from provides access to the Firebase Realtime Database.

from firebase_admin import db
Firebase Admin SDK: Connecting to the Realtime Database

▪ The following initializes a credentials object using a service account key

file (key.json) for authentication.
cred = credentials.Certificate("key.json")

▪ Initialize the Firebase Admin SDK with the provided credentials and
database URL.
firebase_admin.initialize_app(cred,
{'databaseURL':
'https://smart-home-6f8b2-default-rtdb.firebaseio.com/'})
Firebase Admin SDK: Getting Data from the Realtime Database

▪ This following creates a reference to the root of the Firebase Realtime

Database, which allows you to read, write, and manipulate data at the root
level of the database.
ref = db.reference('/')

▪ This following retrieves the current data stored at the root.

ref.get()

Out: {'office': {'fan': 'off', 'led': 'off', 'temp': 28},

'room': {'fan': 'on', 'led': 'on', 'temp': 25, 'tv': 'on'}}
Firebase Admin SDK: Getting Data from the Realtime Database

▪ This code retrieves the current data stored at the office child node.
ref.child('office').get()

Out: {'fan': 'off', 'led': 'off', 'temp': 28}

▪ This code retrieves the current data stored at the room child node.
ref.child('room').get()
Out: {'fan': 'on', 'led': 'on', 'temp': 25, 'tv': 'on'}
Firebase Admin SDK: Getting Data from the Realtime Database

▪ This code retrieves the current data stored at the tv child node under the
room child node.
ref.child('room').child('tv').get()

Out: 'on'

▪ The following does exactly the same.

ref.child('room/tv').get()

Out: 'on'
Firebase Admin SDK: Sending Data to the Realtime Database

▪ This code sets the value of the led child node under the office child node
to “on” in the Firebase Realtime Database.
ref.child('office/led').set("on")
Firebase Admin SDK: Sending Data to the Realtime Database

▪ These lines of code add and set the values of the gas_level and oven
child nodes under the kitchen node to “low” and “off ”, respectively.
ref.child('kitchen/gas_level').set("low")
ref.child('kitchen/oven').set("off")
Firebase Admin SDK: Sending Data to the Realtime Database

▪ If the data does not exist, calling set() will add a new node with the data.
▪ If data already exists, calling set() will overwrite it with the new data.

ref.child('temp_sensor').set(25)

ref.child('temp_sensor').set(27)
Firebase Admin SDK: Sending Data to the Realtime Database

▪ This code deletes the temp_sensor node from the Realtime Database.
{
"kitchen": {
"gas_level": "low",
"oven": "off"
},
"office": {
"fan": "off",
"led": "on",
"temp": 28
},
"room": {
"fan": "on",
"led": "on",
"temp": 25,
"tv": "on"
}
}
Firebase Admin SDK: Sending Data to the Realtime Database

▪ The push() function is used to generate a unique key for a new child node
and then set data at that location.
▪ The following will add five child nodes to the temp_sensor ensures
uniqueness of keys.

ref.child('temp_sensor').push({'timestamp': 1, 'temp': 26})

ref.child('temp_sensor').push({'timestamp': 2, 'temp': 27})
ref.child('temp_sensor').push({'timestamp': 3, 'temp': 28})
ref.child('temp_sensor').push({'timestamp': 4, 'temp': 26})
ref.child('temp_sensor').push({'timestamp': 5, 'temp': 25})
Firebase Admin SDK: Sending Data to the Realtime Database

▪ The push() is used when you want to add data in a way that ensures
uniqueness of keys and preserves order.
Firebase Admin SDK: Getting and Preprocessing Data

▪ This will get the data stored at the temp_sensor node.

temp_sensor = ref.child('temp_sensor').get()

Out:
{'-NwSfZyWwTj6enKMsg_J': {'temp': 26, 'timestamp': 1},
'-NwSf_2SHOxEjoh3SV_S': {'temp': 27, 'timestamp': 2},
'-NwSf_7I6WQMgDa57Fje': {'temp': 28, 'timestamp': 3},
'-NwSf_C0rNmz2wSOnXDh': {'temp': 26, 'timestamp': 4},
'-NwSf_GmdxwhQlYD0IZN': {'temp': 25, 'timestamp': 5}}
Firebase Admin SDK: Getting and Preprocessing Data

▪ This code iterates over the items in the temp_sensor dictionary retrieved
from the Firebase Realtime Database.
▪ For each child node under temp_sensor, it extracts the temp and
timestamp values and appends them to separate lists.

timestamp = []
temp = []

for key, val in temp_sensor.items():

temp.append(val['temp'])
timestamp.append(val['timestamp'])
Firebase Admin SDK: Getting and Preprocessing Data

In: timestamp
Out: [1, 2, 3, 4, 5]

In: temp
Out: [26, 27, 28, 26, 25]
Plotly Python

▪ The plotly.py is an interactive, open-source, and browser-based

graphing library for Python.
▪ Built on top of plotly.js which is a high-level charting library.
▪ plotly.js ships with over 30 chart types, including scientific charts, 3D
graphs, statistical charts, SVG maps, financial charts, and more.
▪ Plotly graphs can be viewed in Jupyter notebooks, standalone HTML files,
or integrated into Dash applications.
▪ Plotly Python may be installed using pip.
pip install plotly
Plotly Python
Plotly Python
Plotly Python
Plotly Python

▪ By importing plotly.graph_objects, you gain access to a powerful set

of tools for creating interactive graphs in Python.
import plotly.graph_objects as go
▪ This creates a scatter plot using Plotly’s graph_objects module.
data = go.Scatter(x=timestamp, y=temp)
▪ The following creates a figure object and assigns it to the variable fig.
fig = go.Figure(data=data)
▪ The following lines of code update the layout properties of the figure.
fig.layout.title = 'Temprature Over Day'
fig.layout.xaxis.title = 'Timestamp'
fig.layout.yaxis.title = 'Temprature'
Plotly Python
Plotly Python

▪ Converting the figure to JSON format is useful while rendering the figure
in HTML pages.
fig_json = fig.to_json()
Flask Web Application Framework

▪ Flask is a lightweight web application framework.

▪ It is one of the most popular Python web application frameworks.
▪ It is designed to make getting started quick and easy.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
return "Hello, World!"

if __name__ == "__main__":
app.run()
Simple Dashboard Using Plotly and Flask

▪ This function retrieves temperature data from a Firebase and returns the
timestamps and temperature values as lists.
def get_temp_values():
ref = db.reference('/')
temp_sensor = ref.child('temp_sensor').get()

timestamp = []
temp = []

for key, val in temp_sensor.items():

temp.append(val['temp'])
timestamp.append(val['timestamp'])

return timestamp, temp

Simple Dashboard Using Plotly and Flask

▪ The function encapsulates the process of creating a Plotly figure

representing temperature data over time.

def viz_temp(timestamp, temp):

data = go.Scatter(x=timestamp, y=temp)
fig = go.Figure(data=data)

fig.layout.title = 'Temprature Over Day'

fig.layout.xaxis.title = 'Timestamp'
fig.layout.yaxis.title = 'Temprature'

return fig
Simple Dashboard Using Plotly and Flask
from flask import Flask, render_template

# Create a Flask application object

app = Flask(__name__)

# Define a route for the root URL ('/')

@app.route('/')
def index():
# Get timestamp and temperature values
timestamp, temp = get_temp_values()

# Visualize temperature data and get a Plotly figure

fig = viz_temp(timestamp, temp)

# Convert the Plotly figure to JSON format

fig_json = fig.to_json()

# Render the HTML template 'index.html', passing the Plotly figure JSON data
return render_template('index.html', fig_json=fig_json)

# Check if the script is being run directly

if __name__ == '__main__':
# Start the Flask server
app.run()
Simple Dashboard Using Plotly and Flask
<!DOCTYPE html>
<html>

<head>
<title>IoT Dashboard</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<div id="temp_fig"></div>

<script>
var fig_json = {{ fig_json | safe }};
Plotly.newPlot('temp_fig', fig_json.data, fig_json.layout);
</script>
</body>

</html>
Simple Dashboard Using Plotly and Flask

The Flask Server Running on

http://127.0.0.1:5000
Flask Tutorial
References and Tutorials

▪ How to Get Started with Firebase Using Python

▪ Introduction to the Admin Database API
▪ plotly.py
▪ Plotly Open-Source Graphing Library for Python
▪ Plotly JavaScript Open-Source Graphing Library
▪ Plotly - Getting Started in JavaScript
▪ Flask Tutorial - Elzero Web School