Lovelace: Bar Card

[Ildar_Gabdullin]

Do you have the latest version of card-mod installed?

[Bezzaee (Mark B)]

@arnocl

card_mod:
  style: >
    {% set entity = { 
      "state": states('counter.regenwater_filter') | int(9999999999),
      "name": "Levensduur",
      "unit": " d"
      }
    %} {% set severity = { 
      "green": 0,
      "orange": 180,
      "red": 240
      }
    %} {% set colors = { 
      "green": "76,175,80",
      "orange": "255,152,0",
      "red": "244,67,54"
      }
    %}

    ha-card .card-content {
      padding: 12px!important;
      cursor: pointer;
    }

    ha-card {
      transition-duration: 0.05s;
    }

    ha-card:hover {
      {% if entity.state == 9999999999 %}
        background-color: rgba(200,200,200, 0.02);
      {% elif entity.state < severity.orange %}
        background-color: rgba({{colors.green}}, 0.02);
      {% elif entity.state < severity.red %}
        background-color: rgba({{colors.orange}}, 0.02);
      {%- else -%}
        background-color: rgba({{colors.red}}, 0.02);
      {%- endif %}
    }

    bar-card-background {
      margin-left: 13px !important;
    }

    bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar, 
    bar-card-targetbar {
      border-radius: 8px;
    }

    bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
    bar-card-targetbar, bar-card-animationbar {
      {% if entity.state == 9999999999 %}
        left: 1.5em !important;
        width: calc(100% - 1.5em);
      {% else %}
        {% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
        left: {{state_width}}em !important;
        width: calc(100% - {{state_width}}em);
      {%- endif %}
    } 

    bar-card-markerbar {
      display: none;
    } 

    bar-card-background::before {
      content: "{{ entity.name }}";
      display: flex;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 500;
      height: 20px;
      letter-spacing: 0.1px;
      line-height: 20px;
      margin-bottom: 6px;
    }

    bar-card-background::after {
      {% if entity.state == 9999999999 %}
        content: "N/A"
      {%- else %}
        content: "{{ entity.state }}{{ entity.unit}}";
      {%- endif %}
      font-family: Roboto, Noto, sans-serif;
      font-size: 12px;
      font-weight: 400;
      height: 16px;
      letter-spacing: 0.4px;
      line-height: 16px;
      display: inline-block;
      position: absolute;
      margin-top: -4px;
      width: fit-content;
    }

    bar-card-iconbar {
      {% if entity.state == 9999999999 %}
        color: rgba(200,200,200, 1);
        background-color: rgba(200,200,200, 0.2);
      {% elif entity.state < severity.orange %}
        color: rgba({{colors.green}}, 1);
        background-color: rgba({{colors.green}}, 0.2);
      {% elif entity.state < severity.red %}
        color: rgba({{colors.orange}}, 1);
        background-color: rgba({{colors.orange}}, 0.2);
      {%- else -%}
        color: rgba({{colors.red}}, 1);
        background-color: rgba({{colors.red}}, 0.2);
      {%- endif %}
      border-radius: 50%;
    }

Love these, they look fab.

[Sam-C-Dev]

Any way to fix the bottom alignment on these bars? Looks normal on desktop, but we only use mobile.

type: custom:config-template-card
variables:
  - - Mon
    - Tue
    - Wed
    - Thu
    - Fri
    - Sat
    - Sun
    - Mon
    - Tue
    - Wed
    - Thu
    - Fri
    - Sat
    - Sun
  - ((new Date()).getDay())
  - ((new Date()).getDate())
  - ((new Date(Date.now() + 1*60*60*24*1000)).getDate())
  - ((new Date(Date.now() + 2*60*60*24*1000)).getDate())
  - ((new Date(Date.now() + 3*60*60*24*1000)).getDate())
  - ((new Date(Date.now() + 4*60*60*24*1000)).getDate())
  - ((new Date(Date.now() + 5*60*60*24*1000)).getDate())
  - ((new Date(Date.now() + 6*60*60*24*1000)).getDate())
entities:
  - entity: sensor.lac_du_flambeau_snow_forecast_today
  - entity: sensor.lac_du_flambeau_snow_forecast_tomorrrow
  - entity: sensor.lac_du_flambeau_snow_forecast_day_2
  - entity: sensor.lac_du_flambeau_snow_forecast_day_3
  - entity: sensor.lac_du_flambeau_snow_forecast_day_4
  - entity: sensor.lac_du_flambeau_snow_forecast_day_5
card:
  type: custom:bar-card
  entities:
    - entity: sensor.lac_du_flambeau_snow_forecast_today
      name: ${vars[0][vars[1] +6 ] +" "+ [vars[2]] }
      unit_of_measurement: in
      decimal: 1
    - entity: sensor.lac_du_flambeau_snow_forecast_tomorrrow
      name: ${vars[0][vars[1]] +" "+ [vars[3]] }
      unit_of_measurement: in
      decimal: 1
    - entity: sensor.lac_du_flambeau_snow_forecast_day_2
      name: ${vars[0][vars[1] + 1]+" "+ [vars[4]]}
      unit_of_measurement: in
      decimal: 1
    - entity: sensor.lac_du_flambeau_snow_forecast_day_3
      name: ${vars[0][vars[1] + 2]+" "+ [vars[5]]}
      unit_of_measurement: in
      decimal: 1
    - entity: sensor.lac_du_flambeau_snow_forecast_day_4
      name: ${vars[0][vars[1] + 3]+" "+ [vars[6]]}
      unit_of_measurement: in
      decimal: 1
    - entity: sensor.lac_du_flambeau_snow_forecast_day_5
      name: ${vars[0][vars[1] + 4]+" "+ [vars[7]]}
      unit_of_measurement: in
      decimal: 1
  title: Lac Du Flambeau Snow Forecast
  direction: up
  height: 120
  stack: horizontal
  max: 15
  unit_of_measurement: " "
  positions:
    icon: "off"
    name: outside
  decimal: 1

[alexantao (Alex Carlos)]

HI all.
I have a vertical bar using this bar-card.
Is it possible to make the value aligned vertically along the bar ? Currently it’s on horizontal over the vertical bar.
I’ve tried the ‘text-orientation: mixed;’ option on various places, but nothing worked.

Thanks

[GrizzlY (Anton)]

I spent 8 hours but still couldn’t find a way to do this. Someone please help me.

I was looking for a better and easier way to make a second row with last modified information of a temperature sensor but couldn’t find it.
Then I was looking for how to add the last modified time to the name but couldn’t find it.
I can’t even make a line break.
What could be easier, I’m now ashamed why this card doesn’t allow me to do anything with the name.
I tried adding Jinja2 or other templates to the name but it doesn’t work.
I spent four hours studying config-template-card but it doesn’t work either.
Every time I change the name parameter but to something other than “some text” I get an error
The only thing I found was this Lovelace: Bar Card - #915 by Mariusthvdb, and yes, it all works for “type: entities”, but not for “type: custom:bar-card”

I tried:

type: custom:bar-card
entities:
  - entity: sensor.yandex_temperature
    name: "The only thing that works"
##    name: "doesn't work" + "doesn't work"
##    name: doesn't  {{ "\n" }} work, doesn't  {{ /n }} work
##    name: states['sensor.yandex_temperature'].state #doesn't work
##    name: {{ states['sensor.yandex_temperature'].state | string }} #doesn't work
##    name: "{{ states['sensor.yandex_temperature'].state | string }}" #doesn't work
##    name: '{{ states['sensor.yandex_temperature'].state | string }}' #doesn't work
##    name: {{ relative_time(states.sensor.yandex_temperature.last_reported) }} #etc
##    name: >
##      { return "sh*t"
##      }

then i tried:

type: custom:config-template-card
variables:
  TEST1: states['sensor.yandex_temperature'].last_reported
  TEST2: states['sun.sun'].state
  TEST3: "On"
entities:
  - entity: sensor.yandex_temperature
card:
  type: custom:bar-card
  entities:
    - entity: sensor.yandex_temperature
      name: "The only thing that works"
##      name: %{ TEST1 } #doesn't work
##      name: "${ TEST2 === 'below_horizon' ? 'doesn't work' : 'doesn't work too' }"
##      name: "${ TEST3 === 'On' ? 'doesn't ' : 'doesn't too' }"
##      name: states['sensor.yandex_temperature'].state
##      name: {{ relative_time(states.sensor.yandex_temperature.last_reported) }}

I would like to use and share with everyone the following great function:

[[[
  function timeDifference(current, previous) {
      var msPerMinute = 60 * 1000;
      var msPerHour = msPerMinute * 60;
      var msPerDay = msPerHour * 24;
      var msPerMonth = msPerDay * 30;
      var msPerYear = msPerDay * 365;
      var elapsed = current - previous;

      if (elapsed < msPerMinute) { return Math.round(elapsed/1000) + ' s'; }
      else if (elapsed < msPerHour) { return Math.round(elapsed/msPerMinute) + ' m'; }
      else if (elapsed < msPerDay ) { return Math.round(elapsed/msPerHour ) + ' h';  }
      else if (elapsed < msPerMonth) { return Math.round(elapsed/msPerDay) + ' d';  }
      else if (elapsed < msPerYear) { return Math.round(elapsed/msPerMonth) + ' m'; }
      else { return Math.round(elapsed/msPerYear ) + ' y'; }
  }
  var i = 'mdi:update'
  var s = timeDifference(new Date(), new Date(entity.last_changed));
  return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon> ${s}`
]]]

[jnsw]

is there any yaml you could provide?

[daistuckio]

It’s not very elegant, but I had the same issue when displaying on a tablet so changed the day descriptors to 2 characters…

Reducing font size possibly might work too, but I didn’t try that.

[Sam-C-Dev]

That’s exactly what I ended up doing as well. It’s better. Screenshot is from my smartphone.

[hobbyist99]

Have you found a way to pull the name from another entity?
When i try name: {{ }} the display shows [object Object] so there seem to be some information passing, but I can’t find the proper syntax either.

[hobbyist99]

I’m finally starting to tame this card, and getting results I like.
Updating to the latest fork (GitHub - mreysei/bar-card: Customizable Animated Bar card for Home Assistant Lovelace) made a difference:

[rekenaar]

that is a nice layout!

[BenAndo (Ben)]

Could you share your YAML?

[maeffjus]

I was reading around here for a while and also searched the whole thread up and down, but I can not find anything useful.

I really want to have some animation, showing if there is a charge or discharge ongoing. It is a solar battery.
But even while it is “on” acc. to the yaml, no animation is visible.
I also tried values between 2 and 10 for the speed.

Here is my code:

title: null
type: custom:bar-card
severity:
  - color: Red
    from: 0
    to: 25
  - color: Orange
    from: 26
    to: 50
  - color: Green
    from: 51
    to: 100
icon: mdi:battery
animation:
  - state: "on"
  - speed: 10
entities:
  - entity: sensor.solax_battery_capacity

[hobbyist99]

Sure. Here is a sampling of a few styles that can be used as a starting point. It should look like this:

type: entities
card_mod:
  style: |
    ha-card { border: 0px;}
    .card-content { padding: 8px;}
entities:
  - type: custom:bar-card
    entity_row: true
    entity: sensor.time_date
    name: Title
    icon: mdi:test-tube
    height: 25
    color: null
    positions:
      icon: inside
      value: "off"
    card_mod:
      style: |
        bar-card-backgroundbar, bar-card-currentbar {border-radius: 10px;} 
        ha-card { border: 0px}      
  - type: custom:bar-card
    entity_row: true
    columns: 1
    height: 25
    color: orange
    stack: horizontal
    positions:
      icon: inside
      indicator: "off"
    entities:
      - entity: sensor.home_assistant_core_cpu_percent
        name: one
    card_mod:
      style: |
        bar-card-backgroundbar, bar-card-currentbar {border-radius: 10px;} 
        ha-card { border: 0px}  
  - type: custom:bar-card
    entity_row: true
    columns: 2
    height: 25
    stack: horizontal
    positions:
      icon: inside
      indicator: "off"
    entities:
      - entity: sensor.time_date
        name: Time
        color: lightgrey
      - entity: sensor.home_assistant_core_memory_percent
        name: two
    card_mod:
      style: |
        bar-card-backgroundbar, bar-card-currentbar {border-radius: 10px;} 
        ha-card { border: 0px}          
  - type: custom:bar-card
    entity_row: true
    columns: 5
    height: 25
    color: pink
    stack: horizontal
    direction: up
    positions:
      icon: "off"
      indicator: "off"
      name: "off"
      value: inside
    entities:
      - entity: sensor.home_assistant_core_cpu_percent
        name: one
      - entity: sensor.home_assistant_core_memory_percent
        name: two
      - entity: sensor.home_assistant_core_cpu_percent
        name: one
      - entity: sensor.home_assistant_core_memory_percent
        name: two
      - entity: sensor.home_assistant_core_memory_percent
        name: one
    card_mod:
      style: |
        bar-card-backgroundbar, bar-card-currentbar {border-radius: 10px;} 
        ha-card { border: 0px}

Let me know if this helps or if you have any question.

[Ildar_Gabdullin]

@maeffjus

want to have some animation, showing if there is a charge or discharge ongoing

Main card-mod thread - 1st post - link at the bottom titled “fantastic” - bar-card

[maeffjus]

@Ildar_Gabdullin

fantastic

I appreciate your help to the fullest!
But I have now looked in the original post of the bar card, and in the post for the card mod. I can not find anything saying “fantastic”.
The only thing I found - but even earlier - is the link to the bar-cards Github, which does mention “animation”. But the options there are just the same as in my YAML.

Would you be kind enough to share a link?

[Ildar_Gabdullin]

Cannot share a link since answering from a mobile.
Are you sure that you followed a path provided by me properly?

[maeffjus]

Here is what the post has as links:

I, don’t see anything about “fantastic”.

[LiQuid_cOOled]

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post using standard vars for some domains font-size for Entities card …

[Ildar_Gabdullin]

check again the path - main CARDMOD thread, not bar-card