GUI framework for homeautomation…

When I started to play with IOT sensors (DS18B20 for temperature reading) the wish to find a nice representation layer started quickly. At that point in time I settled with a php/highcharts javascript combination running on my raspberry.

Later on I had a look at a couple of frameworks (node.js, iobroker, grafana, ..) and their respective GUI implementations. While it was possible to get something up and running all frameworks made me struggle for specific ideas quickly. E.g. in iobroker I was just unable to quickly provide a ‘log like’ output of alarm notification. I tend to say its my fault, not the frameworks, but you have to pick what’s fun for playprojects.

Bootstrap / flask was fun (almost) from the beginning. It took more than the typicall 2-3 hours in an evening to get into the concept - xmas vacation was perfect. Once the base framework was up I felt like home, as:

  • python code is similar to languages i used in ancient history
  • there are a lot of samples that are easy to adept
  • it ‘easily’ allows to integrate MQTT, Tables, HighCharts, MYSQL, ..
  • responsive layout - works on my mobile as well as on the laptop
  • Admin LTE - GUI frameworks evolved a lot since i looked at something graphical last time (I’m just not good when it comes to graphics).

Some sample pages

Image Image Image Image

The code

I’m not a coder and this was a journey to learn bootstrap & python. If its readable content that is due to all the experts out there posting code and giving explanations. I’m sharing my code here - not because its great but because I’m hoping somebody can pick & reuse some of it :-)
https://gitlab.com/itsmee/iot-samples/tree/master/bootstrap

You’d start it as follows - after changing config.ini content according to your environment.

CONFIGFILE=../config.ini
./run.py

Thanks to Miguel for a nice starter!
https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

Admin LTE - nice!
https://adminlte.io/themes/AdminLTE/index2.html