shouldn’t the colors be reversed? (with the green close to 100%)
@Gluwc would it be possible to have a sensor dictate the value in the “target” option? I mean have a dynamic value in there
I’m missing something fundamental when it comes to doing custom styles on the bars. I’m using something simple like the following
type: custom:bar-card
entities:
- entity: sensor.whatever
style: |-
bar-card-currentbar {
border-radius: 8px;
}
and it has no effect on the code. I’ve got the card_mod js listed in my configuration.yaml. Can someone help?
First, re-check docs for cardmod about a proper syntax, you got a keyword “card_mod” missing.
I’m using the documentation at GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
card-mod is a SEPARATE plugin
I get that, but I’m using the examples provided on the bar-card documentation.
I’ve also tried the documentation on the card-mod page.
I’m asking for help from someone as to the structure, not a critique of my process thus far 
All card-mod-related info on a bar-card readme may not reflect latest changes in card-mod. That is why I suggested to check docs on a card-mod github.
And as I already said -
I’ve tried various permutations. I think I’m going to give up for now, until bar-card’s documentation is updated to reflect the latest card-mod.
This may never happen.
Suggest to ask a question in the main card-mod thread.
Besides, the 1st post of that thread contains a link (in the end) which leads to a list of examples, find there examples for bar-card, might be useful.
In general, card-mod should be used as
type: custom:bar-card
...
card_mod:
style: ....
Not that it is defined on a card’s level, not per-entity; and also note that missing “card_mod” keyword.
The first post of that thread doesn’t actually instantiate card-mod, it just goes straight to style, which is what I worked from and then was corrected by you.
I’ve found the problem, now. The per-card card editor on Safari is randomly removing chunks of my config. It’s only when I go into the dashboard editor that I can actually see everything. I’d use Chrome, but that has its own issues.
I’ve got a starting point now, at least:
card_mod:
style: |
bar-card-currentbar {
border-radius: 20px;
}
and I can work out how to slot that in the right place for all the cards I want to tweak. Thanks for the help.
Do not understand you, but nevermind, good if you sorted it out.
i figured it out how to use target with the value from an entity with the suggested config-template-card:
here’s an example code with the Tesla Car Battery and target value from the Charging Limit that is currently set in the Tesla App (80% in the picture):
type: 'custom:config-template-card'
variables:
- states['sensor.tesla_charge_limit_soc']
entities:
- sensor.tesla_charge_limit_soc
card:
type: custom:bar-card
entities:
- entity: sensor.tesla_battery_level
name: Battery Charge
height: 40px
positions:
indicator: inside
name: outside
value: inside
width: 60%
columns: 1
target: '${vars[0].state}'
severity:
- value: null
from: 0
to: 10
color: red
icon: mdi:battery-alert
- value: null
from: 11
to: 20
color: darkred
icon: mdi:battery-10
- value: null
from: 21
to: 30
color: darkorange
icon: mdi:battery-20
- value: null
from: 31
to: 40
color: orange
icon: mdi:battery-30
- value: null
from: 41
to: 50
color: yellow
icon: mdi:battery-40
- value: null
from: 51
to: 60
color: yellowgreen
icon: mdi:battery-50
- value: null
from: 61
to: 70
color: lightgreen
icon: mdi:battery-60
- value: null
from: 71
to: 80
color: limegreen
icon: mdi:battery-70
- value: null
from: 81
to: 90
color: green
icon: mdi:battery-80
- value: null
from: 91
to: 100
color: darkgreen
icon: mdi:battery
card_mod:
style: |
bar-card-value {
color: white !important;
}
bar-card-name {
font-weight: normal;
}
ha-icon {
color: {{ states(entity) | int <= 10 ? 'red' :
states(entity) | int <= 20 ? 'darkred' :
states(entity) | int <= 30 ? 'darkorange' :
states(entity) | int <= 40 ? 'orange' :
states(entity) | int <= 50 ? 'yellow' :
states(entity) | int <= 60 ? 'yellowgreen' :
states(entity) | int <= 70 ? 'lightgreen' :
states(entity) | int <= 80 ? 'limegreen' :
states(entity) | int <= 90 ? 'green' :
'darkgreen' }} !important;
}
Suggest to define “sensor.tesla_charge_limit_soc” as monitored by config-template-card, i.e. add it into the “entities” section, otherwise the card will be not updated after changing this helper.
thanks, i corrected the code.
do you know what is need to have the indicator shown? do i understand it right: it should indicated if the battery is getting charged?
couldn’t find any information at the repo of the bar card mod
If by “indicator” you mean a small “triangle” (like an arrow) - it is shown when an entity is constantly changing (up, down). I do not know the exact algorithm - but probably the card tracks a value’s gradient within some fixed time period; if the gradient is not 0 → show an indicator. So the indicator sometimes is displayed, sometimes not.
I am not using the indicator myself; imho it is not very informative.
1 Like
ok that makes sense. thanks for your explanation.
if the algorythm is working like that, it may be a too long timespan for the big car battery to increase to the next percent. So maybe thats the reason it is never shown for me.
would be a nice feature to see if it is charging. so maybe i’ll replace the icon with cardmod to show if its plugged in in and acutal charging.
You may analyse a “binary_sensor.charging” (or whatever): if it is ON → colorize the icon by card-mod as you suggested yourself (ask in the main card-mod thread for details if needed).
Updated version with day and date.
type: custom:config-template-card
variables:
- - Mo
- Tu
- We
- Th
- Fr
- Sa
- Su
- Mo
- Tu
- We
- Th
- Fr
- Sa
- Su
- ((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.solcast_pv_forecast_forecast_today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
- entity: sensor.solcast_pv_forecast_forecast_day_4
- entity: sensor.solcast_pv_forecast_forecast_day_5
- entity: sensor.solcast_pv_forecast_forecast_day_6
- entity: sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: ${vars[0][vars[1] +6 ] +"-"+ [vars[2]] }
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: ${vars[0][vars[1]] +"-"+ [vars[3]] }
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${vars[0][vars[1] + 1]+"-"+ [vars[4]]}
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: ${vars[0][vars[1] + 2]+"-"+ [vars[5]]}
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: ${vars[0][vars[1] + 3]+"-"+ [vars[6]]}
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: ${vars[0][vars[1] + 4]+"-"+ [vars[7]]}
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: ${vars[0][vars[1] + 5]+"-"+ [vars[8]]}
title: PV Forecast
direction: up
height: 100
stack: horizontal
max: 40
unit_of_measurement: ' '
positions:
icon: 'off'
name: outside
decimal: 1
card_mod:
style: |-
ha-card {
--ha-card-header-font-size: 14px;
transform-origin: 0 0;
}
bar-card-backgroundbar {
background: linear-gradient(green 35%, gold 65%, orange 75%, red 85%);
border-radius: 8px
}
bar-card-currentbar {
background: linear-gradient(green 35%, gold 65%, orange 75%, red 85%);
clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
border-radius: 8px
}
bar-card-name {
text-shadow: 1px 1px black
}
bar-card-value {
text-shadow: 2px 2px black
}
}
