bar-card
Examples
Description
Bar Card is a customizable animated card for the Home Assistant Lovelace front-end.
43 Likes
Thanks for this card.
I used it in combination with picture-elements.
This is how it looks on my iphone 
15 Likes
Awesome! I’ll probably work on exposing more elements to accept custom styles soon. Anyway it’s always nice to see other people making use of this card. 
Ok…
I feel like I should know this but… how did you get the count of automations, sensors, switches etc. etc.?
1 Like
This is great! I like this more than the gauge card. Seems like it would take up a lot less space. I feel like there’s a lot that could be done with this by allowing customization. Thanks for your contribution!
1 Like
try this
- platform: template
sensors:
sensor_count:
friendly_name: 'Number of Sensors'
value_template: >
{%- set domains = ['sensor'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
2 Likes
Of course! Thank you.
Can you please share your config?
I use template sensors for this:
- platform: template
sensors:
#----- Count Automations
count_automations:
entity_id: sensor.date
value_template: >
{%- set domains = ['automation'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
#----- Count Device Trackers
count_device_trackers:
entity_id: sensor.date
value_template: >
{%- set domains = ['device_tracker'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
#----- Count Lights
count_lights:
entity_id: sensor.date
value_template: >
{%- set domains = ['light'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
#----- Count Binary Sensors
count_binary_sensors:
entity_id: sensor.date
value_template: >
{%- set domains = ['binary_sensor'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
#----- Count Sensors
count_sensors:
entity_id: sensor.date
value_template: >
{%- set domains = ['sensor'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
#----- Count Switches
count_switches:
entity_id: sensor.date
value_template: >
{%- set domains = ['switch'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
#----- Count Zones
count_zones:
entity_id: sensor.date
value_template: >
{%- set domains = ['zone'] -%}
{%- for domain in domains -%}
{%- for item in states[domain] -%}
{% if loop.first %}
{{loop.length}}
{% endif %}
{%- endfor -%}
{%- endfor -%}
7 Likes
This is the config for the picture i showed:
title: System
path: system
icon: mdi:server-network
cards:
- !include ../cards/compact_custom_header.yaml
- type: custom:card-modder
style: {overflow: hidden, border-radius: "20px", border: "solid 1px rgba(100,100,100,0.3)"}
card:
type: picture-elements
image: /local/lovelace/backgrounds/placeholders/empty_long_placeholder750x1075.png
elements:
- type: image
image: /local/lovelace/backgrounds/cards/system_overview_card.jpg
tap_action: none
style: {transform: none, pointer-events: none, top: 0%, left: 0%, width: 100%, height: 100%, z-index: '0'}
#############
# Last Boot #
#############
- type: custom:state-element
entity: sensor.ha_uptime
prefix: "HA Uptime: "
style: {top: 1%, left: 1%, transform: none, color: 'rgb(249, 251, 255)', white-space: normal, -webkit-text-stroke: '0.1px rgb(47, 49, 49, 0.6)', font-size: 90%, text-shadow: '0.09px 0.14px 1.5px rgb(47, 49, 49)'}
- type: custom:state-element
entity: sensor.nuc_uptime
prefix: "Uptime: "
style: {top: 5%, left: 1%, transform: none, color: 'rgb(249, 251, 255)', white-space: normal, -webkit-text-stroke: '0.1px rgb(47, 49, 49, 0.6)', font-size: 90%, text-shadow: '0.09px 0.14px 1.5px rgb(47, 49, 49)'}
- type: icon
icon: mdi:certificate
tap_action: none
style: {top: 1%, right: 15%, transform: none, --paper-item-icon-color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.lets_encrypt_expiration_hass
prefix: "Days: "
style: {top: 1%, right: 1%, transform: none, white-space: normal, color: 'rgb(249, 251, 255)', -webkit-text-stroke: '0.1px rgb(47, 49, 49, 0.6)', font-size: 90%, text-shadow: '0.09px 0.14px 1.5px rgb(47, 49, 49)'}
##########################
# System message #
##########################
- type: state-label
entity: sensor.system_overview_message
style: {top: 15%, left: 50%, color: 'rgb(249, 251, 255)', font-size: 400%, pointer-events: none, text-shadow: 2px 2px DarkSlateGrey, font-family: Clicker Script, font-style: oblique, font-weight: '400', text-rendering: optimizeLegibility, -moz-osx-font-smoothing: grayscale, font-smoothing: antialiased, -webkit-font-smoothing: antialiased}
##################
# Intel NUC #
##################
- type: custom:useful-markdown-card
padding: 5px
style: {top: 25%, left: 50%, width: 98%, text-align: justify, text-align-last: center, z-index: "1", white-space: normal, overflow: hidden, border-radius: 8px, font-size: 90%, --paper-card-background-color: 'rgba(0, 0, 0, 0.4)', color: 'rgb(249, 251, 255)'}
content: >
<center> Intel NUC </center>
- type: custom:bar-card
title: cpu
entity: sensor.processor_use
rounding: 5px
height: 30px
style: {top: 29%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: hdd
entity: sensor.disk_use_percent_
rounding: 5px
height: 30px
style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: postgresql
entity: sensor.postgrehassdb_size
rounding: 5px
height: 30px
style: {top: 46%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 98%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 10240
saturation: 50%
severity:
- value: 5120
hue: '120'
- value: 7168
hue: '40'
- value: 9216
hue: '0'
- type: custom:bar-card
title: ram
entity: sensor.memory_use_percent
rounding: 5px
height: 30px
style: {top: 29%, right: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 60
hue: '120'
- value: 80
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: cpu
entity: sensor.cpu_temp
rounding: 5px
height: 30px
style: {top: 37.5%, right: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 65
hue: '40'
- value: 85
hue: '0'
####################
# Synology #
####################
- type: custom:useful-markdown-card
padding: 5px
style: {top: 58%, left: 50%, width: 98%, text-align: justify, text-align-last: center, z-index: "1", white-space: normal, overflow: hidden, border-radius: 8px, font-size: 90%, --paper-card-background-color: 'rgba(0, 0, 0, 0.4)', color: 'rgb(249, 251, 255)'}
content: >
<center> Synology </center>
- type: custom:bar-card
title: cpu
entity: sensor.cpu_load_total
rounding: 5px
height: 30px
style: {top: 62%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: vol1
entity: sensor.volume_used_volume_1
rounding: 5px
height: 30px
style: {top: 70.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 80
hue: '120'
- value: 90
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: vol2
entity: sensor.volume_used_volume_2
rounding: 5px
height: 30px
style: {top: 79%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 80
hue: '120'
- value: 90
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: ram
entity: sensor.memory_usage_real
rounding: 5px
height: 30px
style: {top: 62%, right: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: hdd1
entity: sensor.temperature_sda
rounding: 5px
height: 30px
style: {top: 70.5%, right: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
- type: custom:bar-card
title: hdd2
entity: sensor.temperature_sdb
rounding: 5px
height: 30px
style: {top: 79%, right: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
- type: custom:state-element
entity: sensor.count_automations
prefix: "Automations: "
style: {top: 88%, left: 1%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.count_sensors
prefix: "Sensors: "
style: {top: 92%, left: 1%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.count_switches
prefix: "Switches: "
style: {top: 96%, left: 1%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.count_device_trackers
prefix: "Device Trackers: "
style: {top: 88%, left: 36%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.count_binary_sensors
prefix: "Binary Sensors: "
style: {top: 92%, left: 36%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.count_lights
prefix: "Lights: "
style: {top: 96%, left: 36%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
- type: custom:state-element
entity: sensor.count_zones
prefix: "Zones: "
style: {top: 88%, left: 75%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
###############
# Last Backup #
###############
- type: custom:state-element
entity: sensor.hass_last_backup
prefix: "Backup: "
style: {top: 96%, left: 75%, transform: none, font-size: 90%, color: 'rgb(249, 251, 255)'}
7 Likes
what do you have in this file based on your config above?
!include …/cards/compact_custom_header.yaml
Its the Compact Custom Header card.
This card works best when added to all the views with the same settings.
So i created the card in a separate yaml file and add the file to all the views.
these are the settings:
---
type: custom:compact-custom-header
header: true, true
menu: true, true
notification: true, true
voice: false, false
options: true, true
tabs: true, true
clock: notification, false
clock_format: 24, 24
clock_am_pm: false, false
user_agent: Mobile
user_agent_views:
- 1,2,3,4,5,6,7,8,9,10 # Default view.
- 1,2,3,4
disable: false, false
dir: /www/lovelace/
background_image: true, false
1 Like
great thank you.
Small thing how did you show the text Sysem overview using a sensor?
sensor.system_overview_message
create a template sensor like:
- platform: template
sensors:
system_overview_message:
value_template: >
System Overview
Use the template sensor in a useful-markdown-card as shown in my earlier post.
1 Like
Thanks this is my favorite card now, love the animations it makes it look alive
modified it slightly to fit 4 bars in a row and it also looks good on mobile
3 Likes
Awesome! I definately want to add an option for the title inside the bar like you have now. Just need to find some time in between finishing up my own lovelace config.
I can’t get the relative path include to work with Lovelace I’m on version 82.0. Lovelace just won’t load when i do this (!include …/cards/compact_custom_header.yaml) even though the cards directory exists off my root.
example:
[Config SMB directory]
cards/
ui-lovelace.yaml
Where should the cards folder actually be?
I appreciate the help
Huge thumbs up on this card! Love it!
1 Like
Thank you for this awsome card.
Could you please share your config, i would like to have the title name in the bar like you have.
Thanks.