Real-Time Energy Dashboard

Find it here (currently in the process of migrating servers, data is down)

The sitch

My parents got solar panels on the roof and a battery pack. The provided dashboard, however, is not that good. The system does offer an api, though, so I made my own.

Objectives

The primary objective is to offer a centralized platform that can:

  • Display real-time updates of key energy metrics at a glance
  • Visualize environmental data like grid emissions and emissions avoided.
  • Show all indicators in understandable units
  • Display a ROI graph
  • Display a return on CO2 graph

Technology Stack

HTML/CSS/JS

The frontend of the application is built using HTML and CSS. It is structured as a series of “cards” to display various energy metrics.

Firebase Realtime Database

Firebase Realtime Database is used as the backend to store and manage real-time data. JavaScript listens for changes in the database and updates the frontend accordingly.

Global Data Flow

  1. Initialization: On page load, the application begins listening for changes in the Realtime Database.

  2. Data Fetch and Update: The application continuously fetches the latest data snapshots from Firebase, updates the DOM to reflect these changes, and performs necessary calculations like emissions estimation.

  3. User Interface: The frontend, updated in real-time, displays the current state of energy metrics and environmental data.