Skip to content

A simple Node.js backend and Vue frontend to pull in temperature and humidity data from a MQTT broker, as well as the current power consumption, production, and charge percentage and state of a Tesla Powerwall 2 battery, and display it on a screen in a dashboard fashion.

License

VirtualWolf/pi-home-dashboard

Repository files navigation

pi-home-dashboard

This is a simple Node.js backend and Vue frontend written to display temperature and humidity data as well as the current power consumption, production, and charge percentage and state of a Tesla Powerwall 2 battery, and display it on a screen in a dashboard fashion at /index.html. There's also a clock at /clock.html. These have been sized for viewing on a Pimoroni HyperPixel 4 display.

It subscribes to three different types of topics on an MQTT broker, one for temperature and humidity (and optionally dew point and atmospheric pressure), one for the Powerwall data, and one for an air quality sensor. In my setup, the weather and air quality data comes from my esp32-sensor-reader-mqtt attached to a variety of sensors, and the Powerwall data from powerwall-to-pvoutput-uploader.

The air quality data is available at /api but isn't shown on the main index.html view due to lack of space.

It requires a file called config.json in the root level of the repository with the following contents:

{
    "brokerAddress": "localhost",
    "topics": {
        "weather": [
            "home/outdoor/weather",
            "home/indoor/weather"
        ],
        "airquality": [
            "home/outdoor/airquality"
        ],
        "power": [
            "home/power"
        ]
    }
}

On the main dashboard page at /index.html, the upper and lower temperature/humidity locations default to outdoor and indoor respectively, but can be changed by optionally setting the upper and/or lower query parameters, e.g. http://localhost/index.html?upper=office&lower=outdoor.

Changing colour for night time

Because none of the night time colour-changing applications work on Raspberry Pi (xflux, Redshift), you can optionally set a location object in config.json to have the body text colour change to a more yellow colour after sunset and before sunrise based on the time in your latitude and longitude:

{
    "brokerAddress": "localhost",
    [...]
    "location": {
        "latitude": -33.872761,
        "longitude": 151.205338
    }
}

This uses Suncalc to do the time calculations.

ESP32 management

This repository also includes an admin UI to manage the ESP32s that are running the esp32-sensor-reader-mqtt code, it lives at /admin.html and requires some extra configuration in the config.json file, which is an array of the client IDs of all the ESP32s you want to manage:

{
    "brokerAddress": "localhost",
    [...]
    "clientIds": [
        "outdoor", "backroom", "indoor", "office"
    ]
}

Each one specified here will show as a button in the UI and allow you to configure it.

For over-the-air firmware updates, the board must initially be flashed with the "Support for OTA" firmware from the MicroPython download page for your specific board.

About

A simple Node.js backend and Vue frontend to pull in temperature and humidity data from a MQTT broker, as well as the current power consumption, production, and charge percentage and state of a Tesla Powerwall 2 battery, and display it on a screen in a dashboard fashion.

Topics

Resources

License

Stars

Watchers

Forks