Skip to content

My Dashboards for Home Assistant - Advanced data visualizations, responsive design, a neat maximalist Metro Live Tile layout, and an ultraminimal tablet layout!

Notifications You must be signed in to change notification settings

dcassese/hass-config-public

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

My Home Assistant Config

Maximalist Dashboard

This is a redacted version of my personal dashboard configuration for Home Assistant, an open source home automation server that integrates nearly 2000 existing IoT services into one powerful, private, and unified user interface.

ko-fi

✨ Thank you @legovaer and @pbohannon for your generous support! ✨

Table of Contents

Design Principles

The design is based on the principle that data is beautiful.

Contrary to conventional UX design, the dashboard is intentionally dense with information and not minimalist, because it is designed for only one power user: me.

My goal is to create a sense of awareness of my surroundings and my resources through information, while my second priority is to be able to control and fine-tune all aspects of my living space. This is not designed for convenience since I already have physical buttons and switches for such purpose.

HA Config - Summary

The dashboard is designed to maximize the amount of information displayed without additional user interactions, acting as an ambient display in the background. Information is not hidden or tucked away from view but is instead shown in its full glory for those who love to look at real-time data visualizations.

Animation is toned down so that it still feels responsive but not distracting. Colors are used to draw attention to things that I need to attend to, and the monochromatic color scheme keeps the visual priority clear. The wireframe aesthetic for illustrations and flat icons keeps visual noise to the minimum.

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.

Features

Data Visualizations - Make it Beautiful

Data is beautiful! Data in HA is used to render some unique, eye-catching, and informative graphs as the visual focus of each page.

HA Dataviz - Axonometric Floor Plan
Axonometric Floor Plan
HA Dataviz - Network Map
Network Rail Map
HA Dataviz - Energy Sankey
Energy Use Sankey Diagram
HA Dataviz - Psychrometry Chart
Psychrometry Chart
HA Dataviz - Weather History
Weather History + Forecast Chart
Music Chart
Last.fm Music Charts

All visualizations adhere to theme colors and light/dark modes.

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

Responsive Design - Make it Versatile

Grid columns reflow depending on screen width and device type. Since I use the dashboard in multiple form factors, the design needs to fit everything.

The dashboard in many different sizes on many different screens.

Screenshots

View all the dashboards in detail here.

Summary view
Network view
Energy view
Light view
Maintenance view
Environment view
Neighborhood view
Me view
Astrometrics view (TBD)

How to install

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:

Major HACS frontend mods

Template libraries

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

Tools Used

Credits

Creative Commons License

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.

About

My Dashboards for Home Assistant - Advanced data visualizations, responsive design, a neat maximalist Metro Live Tile layout, and an ultraminimal tablet layout!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 100.0%