Smart Home Control Panel
I've been using Home Assistant to control my home IoT devices for a while. Although it fullfills all my needs, I wanted to make my own system so as to get a fully customized smart home control panel and learn how to build such an application in the process.
In the back-end, the app handles MQTT messages using the MQTT.js module. The front end consists of a Vue.js app with the layout of my apartment and icons at the respective location of the IoT devices. Devices can be clicked and the subsequent action depends on their type. For example, clicking a light will toggle its state while clicking a sensor opens a modal for measurement vizualisation. The information regarding the devices (MQTT topics, position on the layout etc.) is stored in a MongoDB collection, which allows new devices to be added or current devices to be edited directly through the web interface.
Additionally to MQTT devices, the app can also show video streams of IP cameras. This is achieved by proxying the stream served by the cameras.
Thanks to the last will feature of MQTT, the app can be made aware of the devices that no longer have connection to the MQTT broker. Those can then be highlighted in the user interface.
Currently, the app supports the following type of devices:
- MQTT lights
- MQTT air conditioner
- MQTT heater
- MQTT fan
- IP cameras
- MQTT sensors
As usual, this project is open-source and its code can be found on GitHub.