Lovelace: Bar Card

hi how do you add variables to the theme?

can you post full code please?

Using any code editor open your theme file located inside the folder “theme” inside the “config” volume of your Home Assistant installation. and simply paste the variables at the end of the file.

hey did you ever get this working?

Have you tried smth like

    type: custom:bar-card
    entity: ...
    card_mod:
      style: |
        bar-card-card {
          border-radius: ...;
        }

???

How to apply a gradient to only one card? This is what’ve got now but it applies to all cards.

image

type: custom:bar-card
title: Printer
entities:
  - entity: sensor.hp_officejet_5252_color_ink_cartridge_level
    color: Cyan
    name: Color
  - entity: sensor.hp_officejet_5252_black_ink_cartridge_level
    color: Black
    name: Black
  - entity: sensor.hp_printer_cartridge_moisture
    name: Moisture
    icon: mdi:water-percent
direction: up
height: 200
stack: horizontal
positions:
  icon: inside
  name: inside
  indicator: 'off'
card_mod:
  style: |-
    ha-card {
      bar-card-backgroundbar { 
        background: linear-gradient(green 5%, orange 50%, red 75%); 
        border-radius: 25px;      
       } 
      bar-card-currentbar { 
        background: linear-gradient(green 5%, yellow 25%, orange 50%, red 75%);       
        clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
        border-radius: 12px;
       }
      bar-card-name {
        text-shadow: 1px 1px black
      }
      bar-card-value {
        text-shadow: 1px 1px black
      }
    } 

Almost there. As a workaround split the bars in a horizontal stack. Now only have to see why the Ink Moisture name gets justified left when the card renders to fit the screen.

image

type: horizontal-stack
title: Printer
cards:
  - type: custom:bar-card
    entities:
      - entity: sensor.hp_officejet_5252_color_ink_cartridge_level
        name: Color
    direction: up
    decimal: 0
    height: 200
    stack: horizontal
    positions:
      icon: inside
      name: 'off'
      indicator: 'off'
    card_mod:
      style: |-
        ha-card {
          bar-card-backgroundbar { 
            border-radius: 5px;      
           } 
          bar-card-currentbar { 
            background: linear-gradient(to right, cyan 33%, magenta 33% 66%, yellow 66%); 
            clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
            border-radius: 5px;
           }
          bar-card-name {
            text-shadow: 1px 1px black
          }
          bar-card-value {
            text-shadow: 1px 1px black
          }
        } 
  - type: custom:bar-card
    entities:
      - entity: sensor.hp_officejet_5252_black_ink_cartridge_level
        color: Black
        name: Black
    direction: up
    decimal: 0
    height: 200
    stack: horizontal
    positions:
      icon: inside
      name: 'off'
      indicator: 'off'
    card_mod:
      style: |-
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 12px;
        }
        bar-card-name {
          text-shadow: 1px 1px black
        }
        bar-card-value {
          text-shadow: 1px 1px black
        }    
  - type: custom:bar-card
    entities:
      - entity: sensor.hp_printer_cartridge_moisture
        name: Ink Moisture
        icon: mdi:water-percent
    direction: up
    height: 200
    stack: horizontal
    positions:
      icon: inside
      name: inside
      indicator: 'off'
    card_mod:
      style: |-
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 12px;
        }
        bar-card-name {
          text-shadow: 1px 1px black
        }
        bar-card-value {
          text-shadow: 1px 1px black
        }
1 Like

Unable to Animate (infinitely)

I have card-mod installed and working (using for other cards) but for some reason I’m not able to get the animation.

I can get the built in animation to work for when the value changes by adding:

animation:
  state: 'on'
  speed: 5

Any ideas jwelvaert or Ildar_Gabdullin?

Current YAML

type: custom:bar-card
entities:
  - entity: sensor.heat_pump_water_heater_available_hot_water
    name: Hot Water Available
columns: '0'
positions:
  icon: inside
  indicator: 'off'
severity:
  - color: Blue
    from: 0
    to: 10
  - color: Orange
    from: 11
    to: 40
  - color: Red
    from: 41
    to: 100
visibility:
  - condition: numeric_state
    entity: sensor.heat_pump_water_heater_available_hot_water
    below: 100
  - condition: or
    conditions:
      - condition: state
        entity: sensor.heat_pump_water_heater_available_hot_water
        state_not: unavailable
      - condition: state
        entity: sensor.heat_pump_water_heater_available_hot_water
        state_not: unknown
  - condition: state
    entity: binary_sensor.heat_pump_water_heater_running
    state: 'on'
card_mod:
  style: |
    bar-card-row bar-card-card bar-card-background bar-card-targetbar {
      {% if is_state('binary_sensor.heat_pump_water_heater_running','on') %}
      animation: filling 5s linear infinite;
      {% endif %}
      --bar-percent: 0 !important;
    }
    @keyframes filling {
      0% {
        --bar-target-percent: 0;
      }
      10% {
        --bar-target-percent: 10%;
      }
      20% {
        --bar-target-percent: 20%;
      }
      30% {
        --bar-target-percent: 30%;
      }
      40% {
        --bar-target-percent: 40%;
      }
      50% {
        --bar-target-percent: 50%;
      }
      60% {
        --bar-target-percent: 60%;
      }
      70% {
        --bar-target-percent: 70%;
      }
      80% {
        --bar-target-percent: 80%;
      }
      90% {
        --bar-target-percent: 90%;
      }
      100% {
        --bar-target-percent: 100%;
      }
    }
    bar-card-row bar-card-card bar-card-background bar-card-markerbar {
    display: none;
    }

My code is STILL working.
Get rid of anything you added and then add it one by one to find a possible culprit.