Lovelace: Bar Card

Share your Projects! Dashboards & Frontend
838

I am using card-mod already with this card (to round corners etc.)
I juts cannot find a solution for keeping the changing background color a consistant gray while using severity …

        severity:
          - color: "#FF2529"
            from: 0
            to: 25
          - color: orange
            from: 26
            to: 50
          - color: "#66B750"
            from: 51
            to: 100
        card_mod:
          style: |-
            bar-card-value {
              margin-right: auto;
              font-size: 13px;
              font-weight: bold;
            }
            bar-card-backgroundbar, bar-card-currentbar {
              border-radius: 12px;
              margin-top: 9px;
            }
            bar-card-contentbar {
              margin-top: 9px;
              margin-left: 8px;
            }
839

I am not 100% what you are looking for, but your severity code has nothing to do with the background color of the bar.

card_mod:
          style: |-
            bar-card-value {
              margin-right: auto;
              font-size: 13px;
              font-weight: bold;
             }
            bar-card-backgroundbar { 
             border-radius: 12px;
             margin-top: 9px;
             background: grey !important;
             opacity: 50%;
            } 
            bar-card-currentbar { 
            border-radius: 12px;
            margin-top: 9px;
            }
            bar-card-contentbar {
              margin-top: 9px;
              margin-left: 8px;
            }

Ildar_Gabdullin’s advice is sound!

2 Likes
840

You’re both right about the learning! Always will do.
I was looking for this:

            bar-card-backgroundbar { 
             background: grey !important;
             opacity: 50%;

i missed (the knowedge about) the !important - override :slight_smile:
Without this, the background-color ist still changing according to the severity colors.

Thank you very much, this is the solution.

841

Would you mind sharing the full code for that card? I cant seem to get it to work

842

I’m trying to combine config-template-card with bar-card so that I can add the actual day of the week to my card. I’m not sure what I’m doing wrong, but I can’t get the day to show up properly. When I post the day code into the template editor in Developer tools it works properly. When I put it in this card, it just shows [object Object].

2024-03-29 12_56_37-Overview – Home Assistant

type: custom:config-template-card
entities:
  - sensor.tree_pollen_0d
  - sensor.tree_pollen_1d
  - sensor.tree_pollen_2d
  - sensor.tree_pollen_3d
  - sensor.tree_pollen_4d
card:
  type: custom:bar-card
  entities:
    - entity: sensor.tree_pollen_0d
      name: ${ (now()+timedelta(days=0)).strftime('%A') }
      unit_of_measurement: []
    - entity: sensor.tree_pollen_1d
      name: Tomorrow
      unit_of_measurement: []
    - entity: sensor.tree_pollen_2d
      name: Day 3
      unit_of_measurement: []
    - entity: sensor.tree_pollen_3d
      name: Day 4
      unit_of_measurement: []
    - entity: sensor.tree_pollen_4d
      name: Day 5
      unit_of_measurement: []
  title: Tree
  direction: up
  height: 100px
  stack: horizontal
  severity:
    - color: Green
      from: 0
      to: 14
    - color: Yellow
      from: 15
      to: 89
    - color: Orange
      from: 90
      to: 1499
    - color: Red
      from: 1500
      to: 1000000
  min: 0
  max: 3000
  animation:
    state: 'on'
    speed: 5
843

You cannot use jinjia inside JS code.
Rewrite code using JS.

1 Like
844

Well, needless to say my script-kiddy JS skills are failing me. This won’t even give me an attempt at rendering the card. What am I missing?

type: custom:config-template-card
variables:
  - states['sensor.date'].state
  - dayoftheweek0:
      value_template: >-
        {{
        ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][new Date().getDay()]
        }}
  - dayoftheweek1:
      value_template: >-
        {{
        ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][new Date().getDay()+1)
        % 7] }}
entities:
  - sensor.tree_pollen_0d
  - sensor.tree_pollen_1d
  - sensor.tree_pollen_2d
  - sensor.tree_pollen_3d
  - sensor.tree_pollen_4d
card:
  type: custom:bar-card
  entities:
    - entity: sensor.tree_pollen_0d
      name: ${dayoftheweek0}
      unit_of_measurement: []
    - entity: sensor.tree_pollen_1d
      name: Tomorrow
      unit_of_measurement: []
    - entity: sensor.tree_pollen_2d
      name: Day 3
      unit_of_measurement: []
    - entity: sensor.tree_pollen_3d
      name: Day 4
      unit_of_measurement: []
    - entity: sensor.tree_pollen_4d
      name: Day 5
      unit_of_measurement: []
  title: Tree4
  direction: up
  height: 100px
  stack: horizontal
  severity:
    - color: Green
      from: 0
      to: 14
    - color: Yellow
      from: 15
      to: 89
    - color: Orange
      from: 90
      to: 1499
    - color: Red
      from: 1500
      to: 1000000
  min: 0
  max: 3000
  animation:
    state: 'on'
    speed: 5
845

Nevermind, I figured it out. Skip making the array a variable and just plug it into the name. I’m sure there’s some fancy way to increment the day of the week with a calculation, but honestly it was easier to just adjust the order in the array for each subsequent day. I also ended up shortening the days to three letters since Wednesday and Saturday spilled outside of their respective bars.

Posting the code for posterity.

type: custom:config-template-card
variables:
  - states['sensor.date'].state
entities:
  - sensor.tree_pollen_0d
  - sensor.tree_pollen_1d
  - sensor.tree_pollen_2d
  - sensor.tree_pollen_3d
  - sensor.tree_pollen_4d
card:
  type: custom:bar-card
  entities:
    - entity: sensor.tree_pollen_0d
      name: ${
        ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()]
        }
      unit_of_measurement: []
    - entity: sensor.tree_pollen_1d
      name: ${
        ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][new Date().getDay()]
        }
      unit_of_measurement: []
    - entity: sensor.tree_pollen_2d
      name: ${
        ['Tue','Wed','Thu','Fri','Sat','Sun','Mon'][new Date().getDay()]
        }
      unit_of_measurement: []
    - entity: sensor.tree_pollen_3d
      name: ${
        ['Wed','Thu','Fri','Sat','Sun','Mon','Tue'][new Date().getDay()]
        }
      unit_of_measurement: []
    - entity: sensor.tree_pollen_4d
      name: ${
        ['Thu','Fri','Sat','Sun','Mon','Tue','Wed'][new Date().getDay()]
        }
      unit_of_measurement: []
  title: Tree
  direction: up
  height: 100px
  stack: horizontal
  severity:
    - color: Green
      from: 0
      to: 14
    - color: Yellow
      from: 15
      to: 89
    - color: Orange
      from: 90
      to: 1499
    - color: Red
      from: 1500
      to: 1000000
  min: 0
  max: 3000
  animation:
    state: 'on'
    speed: 5

2024-03-30 15_51_07-

846

I have the same challenge to get the day name as entity name in the bar card. How can this be done easily with JS code? I dont get it work with config-template-card. Want to have the solcast_forcast_day_{3-7} reverted into normal day name simular to your solution.

847

Did you try copying the relevant code that I posted above? You’ll need to have the bar card installed as well as config template card.

848

Yes have installed them both. And used your same code name example.
But with a normal name, its shows the bar-card, but when I put the code instead of a name, the bar-card is not shown, so it process the code wrong. Running 2024.3.2 (but a test pi with 2024.4.0 it is also not working).
The resources and correctly added by HACS, and also tried to restart HA. Any ideas?

849

Post your code and a screenshot of the card. I’m literally just a script kiddy, but maybe we can figure something out.

850

Can anyone give an example of making rounded corners? After 2024.4.0 all my cards seem to need to be manually adjusted or the rounded corners are missing.

851 
type: custom:config-template-card
variables:
  - states['sensor.date'].state
entities:
  - sensor.solcast_pv_forecast_forecast_today
  - sensor.solcast_pv_forecast_forecast_tomorrow
  - sensor.solcast_pv_forecast_forecast_day_3
  - sensor.solcast_pv_forecast_forecast_day_4
  - sensor.solcast_pv_forecast_forecast_day_5
  - sensor.solcast_pv_forecast_forecast_day_6
  - sensor.solcast_pv_forecast_forecast_day_7
card:
  type: custom:bar-card
  decimal: 0
  column: 7
  max: 40
  min: 0
  severity:
    - color: rgb(44,153,234)
      from: 0
      to: 1
   #...skipped output for coloring
  direction: up
  height: 150px
  width: 24px
  positions:
    indicator: 'off'
    value: inside
    title: 'off'
    name: inside
    icon: 'off'
  animation:
    state: 'on'
  card_mod:
    style: |-
      .card-header {
        font-size: 18px;
      }
      bar-card-value, bar-card-name {
        font-size: 12px;
        transform-origin: 0 0;
        transform: rotate(270deg);
        text-shadow: 1px 1px #0008;
        white-space: nowrap;
      }
      bar-card-value {
        margin-right: auto;
        margin-left: 6px;
        margin-bottom: auto;
        margin-top: auto;
      }
      bar-card-name {
        margin-right: auto;
        margin-left: 0px;
        margin-bottom: -130px;
        margin-top: 130px;
        right: 20px;
      }
      bar-card-currentbar, bar-card-backgroundbar {
        border-radius: 12px;
        border: 1px solid #DDD9;    
      }
  stack: horizontal
  title: Forecast
  entities:
    - entity: sensor.solcast_pv_forecast_forecast_today
      name: Today
    - entity: sensor.solcast_pv_forecast_forecast_tomorrow
      name: Tomorrow
    - entity: sensor.solcast_pv_forecast_forecast_day_3
      name: ${ ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()] }
    - entity: sensor.solcast_pv_forecast_forecast_day_4
      name: Day 4
    - entity: sensor.solcast_pv_forecast_forecast_day_5
      name: Day 5
    - entity: sensor.solcast_pv_forecast_forecast_day_6
      name: Day 6
    - entity: sensor.solcast_pv_forecast_forecast_day_7
      name: Day 7
852

Just trying one thing at a time here (plus I’m on mobile right now so I can’t test myself). Try this first.

type: custom:config-template-card
variables:
  - states['sensor.date'].state
entities:
  - sensor.solcast_pv_forecast_forecast_today
  - sensor.solcast_pv_forecast_forecast_tomorrow
  - sensor.solcast_pv_forecast_forecast_day_3
  - sensor.solcast_pv_forecast_forecast_day_4
  - sensor.solcast_pv_forecast_forecast_day_5
  - sensor.solcast_pv_forecast_forecast_day_6
  - sensor.solcast_pv_forecast_forecast_day_7
card:
  type: custom:bar-card
  decimal: 0
  column: 7
  max: 40
  min: 0
  severity:
    - color: rgb(44,153,234)
      from: 0
      to: 1
   #...skipped output for coloring
  direction: up
  height: 150px
  width: 24px
  positions:
    indicator: 'off'
    value: inside
    title: 'off'
    name: inside
    icon: 'off'
  animation:
    state: 'on'
  card_mod:
    style: |-
      .card-header {
        font-size: 18px;
      }
      bar-card-value, bar-card-name {
        font-size: 12px;
        transform-origin: 0 0;
        transform: rotate(270deg);
        text-shadow: 1px 1px #0008;
        white-space: nowrap;
      }
      bar-card-value {
        margin-right: auto;
        margin-left: 6px;
        margin-bottom: auto;
        margin-top: auto;
      }
      bar-card-name {
        margin-right: auto;
        margin-left: 0px;
        margin-bottom: -130px;
        margin-top: 130px;
        right: 20px;
      }
      bar-card-currentbar, bar-card-backgroundbar {
        border-radius: 12px;
        border: 1px solid #DDD9;    
      }
  stack: horizontal
  title: Forecast
  entities:
    - entity: sensor.solcast_pv_forecast_forecast_today
      name: Today
    - entity: sensor.solcast_pv_forecast_forecast_tomorrow
      name: Tomorrow
    - entity: sensor.solcast_pv_forecast_forecast_day_3
      name: ${ 
        ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()] 
        }
    - entity: sensor.solcast_pv_forecast_forecast_day_4
      name: Day 4
    - entity: sensor.solcast_pv_forecast_forecast_day_5
      name: Day 5
    - entity: sensor.solcast_pv_forecast_forecast_day_6
      name: Day 6
    - entity: sensor.solcast_pv_forecast_forecast_day_7
      name: Day 7
853

Same result and afterwards the code will me presented back in one line.

854

Alright. Nuclear option it is. Try this.

type: custom:config-template-card
variables:
  - states['sensor.date'].state
entities:
  - sensor.solcast_pv_forecast_forecast_today
  - sensor.solcast_pv_forecast_forecast_tomorrow
  - sensor.solcast_pv_forecast_forecast_day_3
  - sensor.solcast_pv_forecast_forecast_day_4
  - sensor.solcast_pv_forecast_forecast_day_5
  - sensor.solcast_pv_forecast_forecast_day_6
  - sensor.solcast_pv_forecast_forecast_day_7
card:
  type: custom:bar-card
  entities:
    - entity: sensor.solcast_pv_forecast_forecast_today
      name: Today
    - entity: sensor.solcast_pv_forecast_forecast_tomorrow
      name: Tomorrow
    - entity: sensor.solcast_pv_forecast_forecast_day_3
      name: ${ ['Tue','Wed','Thu','Fri','Sat','Sun','Mon'][new Date().getDay()] }
    - entity: sensor.solcast_pv_forecast_forecast_day_4
      name: Day 4
    - entity: sensor.solcast_pv_forecast_forecast_day_5
      name: Day 5
    - entity: sensor.solcast_pv_forecast_forecast_day_6
      name: Day 6
    - entity: sensor.solcast_pv_forecast_forecast_day_7
      name: Day 7
855

Hello, I tried to install bar card today and the UI config is totally broken, I can not configure anything, add entities, etc… What is wrong?
Thanks.

856

That I was trying before. Not working. Seems really something wrong in this line. It will cause the hole graph is not shown. Really weird.

857

I’m sorry, I wasn’t clear. Make a card using just the code that I posted above (the nuclear option). This is just a bare bones test card to figure out where the trouble is. It’s not intended to be your final pretty card. If it works, then the problem is somewhere in the rest of your code. If it doesn’t, then there’s something wrong behind the scenes.