Lovelace: Bar Card

bynight · January 30, 2024, 10:33pm

Hello,

I look for a history possibility…
On each day I check some sets of sensors, but I cannot see the values from the day before or 2 days before or 1 week before (like in the Energy Dashboard)…
I need this for 16 or 32 or 48 Sensors or for the whole page… please see the picture:

Is there a possibility to solve this? With some Buttons for example similar this:

type: vertical-stack
cards:
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      title: Individual
      width: 10
      icon: mdi:lightning-bolt
      align: split
      columns: 1
      decimal: 2
      height: 40
      unit_of-measurement: kWh
      max: 50
      severity:
        - color: red
          to: '50'
          from: '30'
        - color: orange
          to: '30'
          from: '10'
        - color: green
          to: '10'
          from: '5'
        - color: blue
          to: '5'
          from: '0'
      entity_row: true
    entities: []
    sort:
      method: state
      numeric: true
      reverse: true
    filter:
      include:
        - entity_id: sensor.stube_1_1d
        - entity_id: sensor.kuche_oben_2_1d
        - entity_id: sensor.bad_oben_3_1d
        - entity_id: sensor.kulock_4_1d
        - entity_id: sensor.hauslicht_oben_5_1d
        - entity_id: sensor.boden_6_1d
        - entity_id: sensor.waschhaus_7_1d
        - entity_id: sensor.heizung_therme_8_1d
        - entity_id: sensor.kuche_unten_9_1d
        - entity_id: sensor.stalllicht_10_1d
        - entity_id: sensor.keller1_11_1d
        - entity_id: sensor.keller2_12_1d
        - entity_id: sensor.keller3_13_1d
        - entity_id: sensor.herd1_14_1d
        - entity_id: sensor.herd2_15_1d
        - entity_id: sensor.herd3_16_1d
        - entity_id: sensor.emporia_123_1d

Ronald

caro · February 2, 2024, 11:00am

Hi all
thx for this helpfull discussions here!
i’m searching for an approach to have a bar starting 0 in the middle.
Specifically, it’s about my electricity consumption from the grid. As I have a solar system, this can be positive (power supply - red) and negative (feed-in - green).Or the battery - charging/discharging…
Bar starting from zero in the centre.
thx
c.

kajmaj · February 5, 2024, 11:02am

Hi guys, it might be somewhere here in the thread but I am not able to find it
Is it possible to change a bar color based on the state of sensor differs to the displayed one?
It is closely related to the @caro question. I would like to change bar’s color (current - sensor 1) if battery is charging/discharging (sensor 2)

tried

              style: |
                    bar-card-currentbar {
                      color:
                        {% if states('sensor.battery_current')| int(0)  > 0  %}
                          rgba(153, 31, 47, 0.5);
                        {% else %}
                          rgba(38, 92, 39, 0.5);
                        {% endif %}

But no way

Ildar_Gabdullin · February 5, 2024, 11:34am

Start with fixing the card-mod code in accordance to card-mod 3.4.0 requirements.

kajmaj · February 5, 2024, 12:36pm

I am a bit confused,
card_mod documentation:

card_mod:
  style: |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }

and my try

card_mod:
  style: |
    bar-card-currentbar {
      color:   
        {% if states('sensor.battery_current')| int(0)  > 0  %}
          rgba(153, 31, 47, 0.5);
        {% else %}
          rgba(38, 92, 39, 0.5);
         {% endif %}
       }

I do not see any difference, well, in the format at least

Ildar_Gabdullin · February 5, 2024, 12:44pm

What you posted here was w/o “card_mod” keyword.

As for style itself: a card-mod code must be written based on Code Inspector (not “taken from somewhere” etc).

kajmaj · February 5, 2024, 12:48pm

I see, my negligence.
Anyhow, card_mod is installed and used.
Template itself works in dev tools.
So morelikely it is due to part of code between
style: | and first {% if and seems to be my weakest point

This is a selector for the related bar:

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>layout-card$grid-layout$#root>hui-horizontal-stack-card:nth-child(10)$#root>bar-card$#states>bar-card-row:nth-child(3)>bar-card-card:nth-child(2)>bar-card-background>bar-card-currentbar"

dimitri.landerloos · February 7, 2024, 12:28am

Should be quite simple, look at this example:

type: custom:bar-card
entities:
  - entity: sensor.bedroom_temperature_humidity_battery
card_mod:
  style: |
    bar-card-currentbar, bar-card-backgroundbar { 
      {% if states('sensor.office_temperature_humidity_battery') | int > 100 %}
        --bar-color: #0033ff !important;
      {% else %}
        --bar-color: black !important;
      {% endif %}
    }

kajmaj · February 7, 2024, 11:03am

Thanks. I found the culprit (me) >> Wrong alignment

edwardtich · February 12, 2024, 7:44am

I have a card:

how to add a dotted line to a bar?

my card code

type: custom:stack-in-card
title: []
cards:
  - type: custom:bar-card
    entities:
      - entity: sensor.iphone_fill_battery_level
        name: Battery iPhone
    align: split
    columns: 1
    height: 4px
    width: 70%
    icon: mdi:lightning-bolt
    animation:
      state: 'on'
      speed: 2
    attribute: null
    color: white
    decimal: 0
    direction: right
    positions:
      icon: 'off'
      indicator: inside
      name: inside
      minmax: 'off'
      value: inside
    unit_of_measurement: null
    max: 100
    min: 0
    severity:
      - color: '#abd25f'
        from: '0'
        to: '20'
      - color: '#ffd646'
        from: '20'
        to: '50'
      - color: '#bf9540'
        from: '50'
        to: '80'
      - color: '#f79c56'
        from: '80'
        to: '100'
    card_mod:
      style: |
        ha-card { 
          --paper-item-icon-color: rgb(47,186,229);
          border-radius: 2.5px;
          border-width: 0px !important;
          background: none;
          border: none;
          height: 38px;
          
           }
        ha-icon { 
          margin-top: -40px;
          padding-right: 25px; 
           }  
        bar-card-indicator { 
          margin-top: -10px;
          padding-right: 0px; 
          
           }  
        bar-card-name { 
          margin-top: 0px; 
          padding-left: 0px; 
           }  
        bar-card-backgroundbar { 
          margin-top: 12px;
          border-radius: 2.5px; 
           } 
        bar-card-currentbar { 
          margin-top: 12px; 
          border-radius: 2.5px; 
          
           } 
        bar-card-targetbar { 
          margin-top: 12px; 
          border-radius: 2.5px; 
          
           } 
        bar-card-animationbar { 
          margin-top: 12px;  
          padding-right: 0px; 
          
           } 
        bar-card-targetmarker { 
          margin-top: 40px; 
          border-radius: 2.5px; 
          
           } 
        bar-card-value { 
          margin-top: 0px; 
          padding-left: 5px; 
          
           } 
        bar-card-row {
          margin-bottom: 0px !important; 
          margin-top: -10px !important;
          
           }  
        bar-card-backgroundbar { 
          background: linear-gradient(to right, green 5%, orange 50%, red 75%); 
          border-radius: 25px; 
          
           } 
        bar-card-currentbar { 
          background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); 
          clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); 
          border-radius: 25px; 
          
           } 
        bar-card-contentbar { 
          font-size: 14px; color: white; 
          
           } 
        bar-card-value  { 
          font-size: 14px; color: white; 
          
           }        
card_mod:
  style: |
    ha-card {
      height: 30px;    
      border: 0px;
      background: transparent;
      
    }

Ildar_Gabdullin · February 12, 2024, 12:37pm

If you are an experienced card-mod user - add a striped mask to the background.

edwardtich · February 12, 2024, 7:24pm

Thank you!
everything worked out

bar-card-currentbar { 
  background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%); 
  clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%); 
  border-radius: 25px; 
  mask-image: repeating-linear-gradient( 90deg, transparent 0px, black 4px, transparent 0px, black 4px);        
   }

Cheppetto · February 13, 2024, 3:57pm

Is there a way to reference limits from an sensor (sensor.daily_min, sensor.daily_max, sensor.daily_target …), either there attribute or a sensor directly?
I was not able to get it working with template syntax or any other way.

Reason why i would love to see it, is that i am using it for PV purposes, and i have different min max and target values per day.
Furthermore same for grid import and export.

Bar 2 and 3 are with numeric values bar one is the one where I am again and again trying to use a specific sensor or a sensores attributes to be used as the numeric values

Thanks in advance

ckha · February 13, 2024, 11:17pm

Hi. Have you sorted this out?

DM-AU · February 27, 2024, 1:46am

Hi,
I am having issues with the decimal values.

bar card

Though I have set the decimals to 2:

  - type: custom:auto-entities
    card:
      type: custom:bar-card
      title: Excess Power
      positions:
        name: null
        value: outside
        indicator: 'off'
        icon: 'off'
      max: 5
      severity:
        - color: '#ffff00'
          from: 0
          to: 0.99
        - color: '#0066ff'
          from: 1
          to: 2.49
        - color: '#00ff00'
          from: 2.5
          to: 100
        - color: '#ff0000'
          from: 0
          to: 0
      height: 30px
      style: "\n#states { padding: 0 } \nbar-card-name,\nbar-card-value {\n  \n  color: #ffffff;\n  }\nbar-card-value\t{\n  font-weight: bold;\n}\nbar-card-indicator {\n transform: scaleY(-1);\n}\n"
      stack: vertical
      direction: right
      decimals: 2
    entities: []
    sort:
      method: state
    filter:
      include:
        - entity_id: sensor.grid_export
      exclude:
        - state: unavailable
        - state: unknown

Thankyou

Ildar_Gabdullin · February 27, 2024, 2:18am

I wonder why to show a simple issue you need to post a tons of unrelated things like auto-entities & wrong card-mod? Like “here is my code, now sort it out”.
The right option is “decimal”.

DM-AU · February 27, 2024, 3:45am

Wow, sorry for trying to provide context to the issue and question. I bet if i didnt add the whole code you would have complained I didnt include enough. Really sorry I included too much…
Thankyou. This was all I needed and has fixed the issue.

Ildar_Gabdullin · February 27, 2024, 3:52am

Very funny. Keep on.

Cheppetto · March 5, 2024, 10:22am

if you ask, me sorry no

craigmcfly · March 7, 2024, 9:36am

Is there a way to get curved edges on the bars? I’ve gone through past comments explaining what needs to be changed and I can’t figure it out.