Crafting My Perfect Home Assistant Dashboard
Bruno Sabot
Posted on July 13, 2024
Inspired by the beautiful and functional dashboards I've seen online, I embarked on a journey to personalize my own Home Assistant experience. This post dives into the plugins I used, my customization choices, and a final glimpse of the finished product.
Introducing the Plugin Powerhouse
Several plugins played a pivotal role in building my dream dashboard, each offering unique functionalities that elevated the user experience.
I meticulously handpicked a select few from the vast plugin library, prioritizing consistency and cohesiveness around the versatile Bubble Card, to craft this personalized experience.
Bubble Card
I recently stumbled upon the Bubble Card plugin, and let me tell you, it was a game-changer!
This new plugin quickly became the star of my dashboard makeover. Its cool, rounded design elements totally revamped the whole look and feel, making everything smooth and visually appealing.
To take things to the next level, I also started using the Bubble theme, created by the same awesome creator.
Together, they work like magic, creating a consistent and stunning dashboard that's more than just the sum of its parts.
It's like my dashboard went from info central to an interactive and visually engaging masterpiece!
Card Mod
Anyone who's ever tinkered with their dashboard to make it look snazzy probably knows about Card Mod – it's kind of a no-brainer.
This awesome plugin lets you, well, mod your cards by taking styles from other cards. Need to change the background color, for example? Card Mod is your new best friend.
It helps if you know a little CSS, but even without it, you can do some pretty cool stuff and make your dashboard look way less, well, boring.
Decluttering Card
Card Mod is so cool, I went a little overboard and ended up customizing practically everything! But all those tweaks scattered throughout my config started to feel like a bit of a pain to manage.
That's when I discovered the magic of Decluttering Card. This plugin lets me create card templates that I can reuse everywhere, shrinking my configuration file down to a much more manageable size.
Now, I can make a change in one place, and it ripples through my entire dashboard – a total win!
Config Template Card
Decluttering Card definitely helps with the templating issue, but it can't handle everything, especially when things get a little more dynamic.
Thankfully, the Config Template Card swoops in to save the day! This plugin lets you use JavaScript to make pretty much any property of your card dynamic, putting the finishing touches on your template mastery.
It's like the final ingredient in the recipe for perfect dashboard customization.
Lovelace Layout Card
Now I have the power to create the perfect cards, I just needed the final touch: a stellar layout.
Thankfully, Lovelace Layout Card swoops in to save the day! This plugin allows me to craft a perfectly responsive dashboard that flawlessly adapts to both my desktop and mobile, ensuring a seamless Home Assistant experience no matter the device I'm using.
Bringing it to Life: My Customization Journey
In the following sections, I'll delve into the specifics of how I utilized these plugins to realize my desired dashboard functionalities.
I'll provide a detailed explanation for each, empowering you to replicate or adapt these approaches to craft your own personalized Home Assistant experience.
Alarm
Keeping tabs on my home alarm system's status is crucial. To achieve this, I needed a clear and immediate visual indicator right on my dashboard.
The ideal card would dynamically change its background color based on the alarm's state: green for disabled, orange for armed, and red for triggered. Luckily, the style customization of Bubble Card allowed me to create this functionality perfectly.
Now, with just a glance, I can see the alarm's status and take appropriate action if needed.
Here is the decluttering-card template:
default:
- name: ''
- columns: 2
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: '[[entity]]'
name: '[[name]]'
show_state: true
icon: mdi:alarm-light
columns: '[[columns]]'
card_layout: large
styles: |
.bubble-button-card-container {
background-color: ${state === 'disarmed' ? 'var(--success-color)' : state === 'triggered' ? 'var(--error-color)' : 'var(--warning-color)'};
}
.bubble-icon {
color: ${state === 'disarmed' ? 'var(--success-color)' : state === 'triggered' ? 'var(--error-color)' : 'var(--warning-color)'} !important;
opacity: 0.6 !important;
}
AQI
Monitoring air quality is a top priority for me, as I'm sensitive to pollution.
Having this data readily available on my dashboard helps me maintain my health, not only through automations with my air purifier but also by allowing me to check the current pollution level at a glance.
I envisioned a card that would display the Air Quality Index (AQI) using a color-coded system: green for good air quality (AQI below 50), orange for moderate air quality (AQI below 100), and red for poor air quality (AQI above 100).
This way, I could easily understand the air quality and take appropriate actions, if necessary.
Here is the decluttering-card template:
default:
- name: ''
card:
type: 'custom:bubble-card'
card_type: button
button_type: state
entity: '[[entity]]'
name: '[[name]]'
icon: mdi:leaf
show_state: true
columns: 2
card_layout: large
styles: |
.bubble-button-card-container {
background-color: ${state < 50 ? 'var(--success-color)' : state < 100 ? 'var(--warning-color)' : 'var(--error-color)'};
}
.bubble-icon {
color: ${state < 50 ? 'var(--success-color)' : state < 100 ? 'var(--warning-color)' : 'var(--error-color)'} !important;
opacity: 0.6 !important;
}
Covers
My cover cards demanded a presentation that was both information-rich and visually clear. To achieve this, I implemented a three-pronged approach:
- Condensed Icon Spacing & Favorite Position Integration: I tightened the spacing between the cover icons, fostering a sense of cohesion for the linked actions they represent. Additionally, I incorporated a sub-button displaying the favorite position (set at 15% in my case) directly within the card itself.
- Seamless Opening Percentage Display: The current opening percentage is crucial information, and I eliminated the need for a separate entity card by integrating it directly into the cover card.
- Color-Coded Status Recognition: Finally, I implemented a color-coding system to provide instant status recognition. Blue signifies a fully open cover, while purple highlights the preferred 15% position. This visual language allows for quick comprehension and informed decision-making when interacting with my covers.
This combined approach effectively streamlined the cover card format, enhancing both information accessibility and user experience.
Here is the decluttering-card template:
default:
- name: ''
card:
type: 'custom:bubble-card'
card_type: cover
entity: '[[entity]]'
name: '[[name]]'
icon_open: mdi:window-shutter-open
icon_close: mdi:window-shutter
show_state: true
columns: 2
card_layout: large
sub_button:
- name: My
icon: mdi:star
show_background: false
tap_action:
action: call-service
service: button.press
target:
entity_id:
- '[[my]]'
card_mod:
style: |
.bubble-cover-card-container {
background-color:
{% if state_attr(config.entity, 'current_position') == 15 %}
var(--state-cover-active-color)
{% elif state_attr(config.entity, 'current_position') > 0 %}
var(--accent-color)
{% else %}
var(--background-color-2, var(--secondary-background-color))
{% endif %}
!important;
}
.large .bubble-buttons {
gap: 8px;
}
.bubble-button {
background: transparent;
width: 40px;
height: 40px;
}
.bubble-icon {
justify-content: center;
align-items: center;
}
.large .bubble-sub-button-container {
margin-right: 8px;
}
.bubble-sub-button {
background: transparent;
width: 40px;
height: 40px;
}
.bubble-state::after {
content: " - {{ state_attr(config.entity, 'current_position') }}%";
margin-left: 4px;
}
.bubble-icon-container {
border-color: transparent;
background-color: transparent;
}
.bubble-icon-container::after {
content: "";
background-color:
{% if state_attr(config.entity, 'current_position') == 15 %}
var(--state-cover-active-color)
{% elif state_attr(config.entity, 'current_position') > 0 %}
var(--accent-color)
{% else %}
var(--background-color-2, var(--secondary-background-color))
{% endif %}
!important;
height: 25px;
width: 25px;
position: absolute;
left: 50px;
top: 25px;
-webkit-mask-image: radial-gradient(circle at top right, transparent 0, transparent 25px, black 25.5px);
}
Separator
To keep my dashboard organized, I grouped things into sections.
Bubble Card's separator mode was perfect for adding section titles, but I wanted to give them a little makeover.
So, I played around with some CSS to make the font lighter and bigger, and tweaked the line color so it stands out even when the cards aren't in a popup.
Now the section titles are easy to read and add a nice touch to the whole thing!
Here is the decluttering-card template:
default:
- icon: ''
- name: ''
card:
type: custom:bubble-card
card_type: separator
name: '[[name]]'
icon: '[[icon]]'
card_layout: large
styles: |
.bubble-name {
font-weight: 100;
font-size: 20px;
}
.bubble-line {
background-color: var(--background-color-2, var(--secondary-background-color));
opacity: 0.2;
}
Thermostat
Craving more from my smart thermostat display, I used custom-template-card to dynamically change the card's icon based on heating state.
Color cues joined the party: blue for off, green for achieved comfort, and orange for heating to reach temperature. I even incorporated the target temperature in this customized switch card.
Now, it's a one-stop shop for efficient and comfortable climate control!
default:
- name: ''
- offset: 1
card:
type: custom:config-template-card
variables:
MODE: "states['[[entity]]'].state"
entities:
- "[[entity]]"
card:
type: custom:bubble-card
card_type: button
button_type: switch
entity: '[[entity]]'
name: '[[name]]'
icon: "${MODE === 'heat' ? 'mdi:thermometer': 'mdi:thermometer-off'}"
show_state: true
columns: 2
card_layout: large
card_mod:
style: |
.bubble-button-card-container {
background-color: {% if is_state(config.entity, 'heat') %}{% if state_attr(config.entity, 'temperature') > state_attr(config.entity, 'current_temperature') %}var(--warning-color){% else %}var(--success-color){% endif %}{% else %}var(--info-color){% endif %} !important;
}
.bubble-icon {
color: {% if is_state(config.entity, 'heat') %}{% if state_attr(config.entity, 'temperature') > state_attr(config.entity, 'current_temperature') %}var(--warning-color){% else %}var(--success-color){% endif %}{% else %}var(--info-color){% endif %} !important;
opacity: 0.6 !important;
}
.bubble-state::after {
content: " - {{ state_attr(config.entity, 'temperature') }} °C";
margin-left: 4px;
}
Weather
While Bubble Card forms the foundation, the true magic lies in the customization of my weather display. It leverages the power of sub-buttons to showcase a range of essential information: current conditions, daily highs and lows, wind speed, and the anticipated rain forecast.
But the key is the intuitive color-coding system I implemented:
- Temperatures utilize a blue-to-red gradient, providing a quick glimpse of the expected highs and lows.
- Wind speed follows a similar approach, transitioning from neutral to red as intensity increases.
- Rain takes center stage with a prominent blue highlight whenever there's a chance of precipitation.
This visual language allows me to grasp the daily forecast at a glance, without getting bogged down in numbers. It's a testament to the power of visual communication and user experience design in action!
default:
- name: ''
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: '[[entity]]'
name: '[[name]]'
show_state: true
scrolling_effect: false
card_layout: large-2-rows
sub_button:
- name: Min
icon: mdi:thermometer-low
entity: '[[entity]]'
attribute: forecast[0].templow
show_background: false
show_attribute: true
- name: Wind
icon: mdi:weather-windy
entity: '[[entity]]'
attribute: wind_speed
show_background: false
show_attribute: true
show_icon: true
- name: Max
icon: mdi:thermometer-high
entity: '[[entity]]'
attribute: forecast[0].temperature
show_background: false
show_attribute: true
- name: Rain
icon: mdi:weather-pouring
entity: '[[entity]]'
show_background: false
show_attribute: true
attribute: forecast[0].precipitation
show_icon: true
card_mod:
style: |
.bubble-icon-container {
background: transparent;
}
.bubble-name {
border-radius: 20px;
background-color:
{% if state_attr(config.entity, 'temperature') < 10 %}
var(--info-color)
{% elif state_attr(config.entity, 'temperature') > 40 %}
var(--error-color)
{% elif state_attr(config.entity, 'temperature') > 30 %}
var(--warning-color)
{% endif %}
;
margin-left: -8px;
padding: 0 8px;
}
.bubble-name::after {
content: " - {{ state_attr(config.sub_button[0].entity, 'temperature') }}°C";
margin-left: 4px;
}
.bubble-sub-button-1 {
background-color:
{% if state_attr(config.sub_button[0].entity, 'forecast')[0].templow < 10 %}
var(--info-color)
{% elif state_attr(config.sub_button[0].entity, 'forecast')[0].templow > 40 %}
var(--error-color)
{% elif state_attr(config.sub_button[0].entity, 'forecast')[0].templow > 30 %}
var(--warning-color)
{% endif %}
;
}
.bubble-sub-button-1::before {
content: "°C";
}
.bubble-sub-button-2 {
background-color:
{% if state_attr(config.sub_button[0].entity, 'wind_speed') > 20 %}
var(--warning-color)
{% elif state_attr(config.sub_button[0].entity, 'wind_speed') > 50 %}
var(--error-color)
{% endif %}
;
}
.bubble-sub-button-2::before {
content: "km/h";
margin-left: 2px;
}
.bubble-sub-button-3 {
background-color:
{% if state_attr(config.sub_button[2].entity, 'forecast')[0].temperature < 10 %}
var(--info-color)
{% elif state_attr(config.sub_button[2].entity, 'forecast')[0].temperature > 40 %}
var(--error-color)
{% elif state_attr(config.sub_button[2].entity, 'forecast')[0].temperature > 30 %}
var(--warning-color)
{% endif %}
;
}
.bubble-sub-button-3::before {
content: "°C";
}
.bubble-sub-button-4 {
background-color:
{% if state_attr(config.sub_button[3].entity, 'forecast')[0].precipitation > 0 %}
var(--info-color)
{% endif %}
;
}
.bubble-sub-button-4::before {
content:" mm";
margin-left: 2px;
}
Weather forecast
While the current weather is important, I also crave a sneak peek at the next week's forecast.
To achieve this, I leveraged the same color-coded system from my weather card for a visually cohesive experience. Additionally, I cleverly formatted the current day using its attributes, while also extracting the high and low temperatures from the same source.
This way, I get a clear picture of the upcoming week's weather trends right on my dashboard.
default:
- name: ''
- offset: 1
card:
type: custom:config-template-card
variables:
FORECAST: "states['[[entity]]'].attributes.forecast[[[offset]]].condition"
entities:
- "[[entity]]"
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: '[[entity]]'
name: Forecast
icon: "${FORECAST === 'partlycloudy' ? 'mdi:weather-partly-cloudy': 'mdi:weather-'+FORECAST}"
columns: 2
card_layout: large
show_state: true
card_mod:
style:
.: |
.bubble-name {
color: transparent;
white-space: nowrap;
}
.bubble-name:before {
color: var(--primary-text-color);
content: "{{ strptime(state_attr(config.entity, 'forecast')[[[offset]]].datetime, '%Y-%m-%dT%H:%M:%S%z').strftime("%A") }}";
}
.bubble-state {
color: transparent;
white-space: nowrap;
}
.bubble-state:before {
color: var(--primary-text-color);
content: "{{ state_attr(config.entity, 'forecast')[[[offset]]].templow }} / {{ state_attr(config.entity, 'forecast')[[[offset]]].temperature }} {{ state_attr(config.entity, 'temperature_unit') }}";
}
.bubble-button-card {
background-color:
{% if state_attr(config.entity, 'forecast')[[[offset]]].temperature < 10 %}
var(--info-color)
{% elif state_attr(config.entity, 'forecast')[[[offset]]].temperature > 40 %}
var(--error-color)
{% elif state_attr(config.entity, 'forecast')[[[offset]]].temperature > 30 %}
var(--warning-color)
{% endif %}
!important;
}
.bubble-icon {
color:
{% if state_attr(config.entity, 'forecast')[[[offset]]].temperature < 10 %}
var(--info-color)
{% elif state_attr(config.entity, 'forecast')[[[offset]]].temperature > 40 %}
var(--error-color)
{% elif state_attr(config.entity, 'forecast')[[[offset]]].temperature > 30 %}
var(--warning-color)
{% endif %} !important;
opacity: 0.6 !important;
}
Is that it?
While I've highlighted some key customizations, there are additional tweaks throughout my dashboard that refine the presentation further. These refinements build upon the techniques described here. If you're curious to delve deeper, feel free to reach out – I'm always happy to chat about Home Assistant!
For a complete picture, here's a quick reference of the custom cards I've utilized:
-
Alarm Status:
bubble_alarm(presented earlier) -
Air Quality Index:
bubble_aqi(presented earlier) -
Cover Cards:
bubble_cover(presented earlier) -
Section Separators:
bubble_separator(presented earlier) -
Temperature Display:
bubble_temperature -
Thermostat Control:
bubble_thermostat(presented earlier) -
Trash Collection:
bubble_trash -
Vacuum Status:
bubble_vacuum -
Weather Display:
bubble_weather(presented earlier) -
Météo-France Alerts:
bubble_weather_alert -
Future Forecast:
bubble_weather_forcecast -
Website Status:
bubble_website
Posted on July 13, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related