Lovelace: Bar Card

bar-card

Examples

Description

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

39 Likes

Thanks for this card.

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

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

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

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 -%}
5 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)'}
6 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

1

2 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

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

2 Likes

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.