Home
This is a redacted version of the dashboard configuration for my personal instance of Home Assistant.
Home Assistant is an open source home automation server that integrates nearly 2000 existing IoT services into one powerful, private, and unified user interface.
The design is based on the principle that data is beautiful. The dashboard is information dense - it is designed to maximize the amount of information displayed without additional user interactions. Information is not hidden or tucked away from view, but is shown in its full glory for those who like to read data.
It uses my own Metrology theme, based on Metro design system, to reduce visual clutter, create a sense of visual hierarchy, and focus on the data.
Data is beautiful! Data in HA is used to render some unique, eye-catching, and informative graphs as the visual focus of each page.
| Axonometric Floor Plan | Network Rail Map | Energy Use Sankey Diagram |
| Psychrometry Chart | Weather History + Forecast Chart | Last.fm Music Charts |
Additional visualizations are embedded from third-party sources.
| The Weekendest Subway Map | Bing Traffic Static Map | Weather Underground Radar Map |
| jsOrrery Solar System Map | Astropheric Weather Chart |
Grid reflows depending on screen width and device type.
| Perfect square grid with tiles in all sizes | Rotating cube animation to subtly catch the right amount of attention |
| Variations based on states | Layouts for cameras, pictures, media players, etc. |
Intelligible sentences are composed using a ton of templates by aggregating data from multiple sources. Great for page summaries and voice assistants.
The code is not meant to be installed as sensitive information had been redacted from the configuration. It is meant to be used as a reference to do some pretty wonderful things using lots of clever or ugly codes, tips, tricks, and hacks. Copy and paste stuff to your own dashboard config as you see fit.
A few requisities will help you use these codes:
- button-card
- card-mod
- layout-mod
- mini-graph-card
- apexcharts-card
- View the full list
Include these lines in your dashboard YAML to use most of the templates defined in the config:
decluttering_templates: !include cards/decluttering_templates.yaml
button_card_templates: !include cards/button_card_templates.yaml
apexcharts_card_templates: !include cards/apexcharts_card_templates.yaml- Code Server Add-On for HA
- Visual Studio Code
- Bookmarks extension
- Inkscape / Adobe Illustrator
- SketchUp
- Psychometry Chart by Dr. Andrew J. Marsh
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Additionally, I would appreciate proper credits back to me if redistributed or modified. That would help my livelihood since design is my career.