Lovelace: Bar Card


#1

bar-card

Description

Bar Card is a customizable animated card for the Home Assistant Lovelace front-end.

Features

  • Customizable bar, text and animation.
  • Automatic animation mode. Starts animating based on value increase or decrease.
  • Charge based animation mode. Will show increase based on custom entity state.

Options

Name Type Default Description
type string Required custom:bar-card
entity string Required Entity State
entities array none A list of entities. Cards will share config.
columns number none Defines the number of columns when using entities list.
attribute string none Defines the attribute to be displayed.
unit_of_measurement string none Defines the unit of measurement to be displayed.
title string none Title displayed next to the bar.
title_position string left Position of the title. left,right,top,bottom,inside
animation string auto Sets the mode of animation auto, charge, off.
indicator string auto Sets position off the indicator auto,auto-vertical,left,right,top,bottom,off
hue number 220 Changed the color hue of the bar 0-360.
saturation string 50% Scales saturation of the bar.
height string 40px Scales the height of the bar.
width string 70% Scales the width of the bar.
padding string 4px Sets padding amount around the card.
min number 0 The minimum entity value to be displayed. Accepts entity id as value.
max number 100 The maximum entity value to be displayed. Accepts entity id as value.
target number none Sets a target marker, must be a value between min and max value. Accepts entity id as value.
speed number 2500 The speed of the bar animation in milliseconds.
delay number 7500 The amout of time between the bar animation loop in milliseconds.
direction string right Direction of the bar. left,right,up,down
severity object none A list of severity values.
card_style object none A list of CSS styles applied to the card background.
bar_style object none A list of CSS styles applied to the bar.
title_style object none A list of CSS styles applied to the title.
indicator_style object none A list of CSS styles applied to the indicator.
charge_entity string none Charge enitity, required when using charge animation mode. States can be on/off, true/false, charging/discharging

Examples

Severity
Hue
Speed & Delay
Entities + Auto Entities

Credits

Inspired by Big Number Card by ciotlosm.


Components for Belgian public transport
#2

Thanks for this card.

I used it in combination with picture-elements.
This is how it looks on my iphone :slight_smile:


#3

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. :smile:


#4

Ok…
I feel like I should know this but… how did you get the count of automations, sensors, switches etc. etc.?


#5

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!


#6

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 -%}

#7

Of course! Thank you.


#8

Can you please share your config?


#9

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 -%}

#10

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)'}

#11

what do you have in this file based on your config above?
!include …/cards/compact_custom_header.yaml


#12

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


#13

great thank you.

Small thing how did you show the text Sysem overview using a sensor?
sensor.system_overview_message


#14

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.


#15

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

1


#16

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.


#17

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


#18

Huge thumbs up on this card! Love it!


#19

I’ve added support for custom CSS styles in the latest release 0.0.2


#20

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.