It does mention number but I only see example for a fixed value.
Or is there another way around this?
It does clearly say “number” in a table of properties - which is “123”.
Your workaround is either using a forked version of this card supporting entities for this property (if this fork exists) or using a custom card supporting templates like config-template-card etc.
Ok, I think I got it working now using config-card thanks to this post
Only issue I have now is the bar exceed the column it’s in
Anyway I can edit this so it stays inside?
Also how do I reduce the numbers (remove .0 or %) display so each bar width is smaller?
type: custom:config-template-card
variables:
- states['number.mmwave_g0_still_threshold_2']
- states['number.mmwave_g1_still_threshold_2']
- states['number.mmwave_g2_still_threshold_2']
- states['number.mmwave_g3_still_threshold_2']
- states['number.mmwave_g4_still_threshold_2']
- states['number.mmwave_g5_still_threshold_2']
- states['number.mmwave_g6_still_threshold_2']
- states['number.mmwave_g7_still_threshold_2']
- states['number.mmwave_g8_still_threshold_2']
entities:
- sensor.mmwave_g2_still_energy_2
card:
type: custom:bar-card
title: Still Energy
icon: "no"
height: 100px
width: 100%
direction: up
positions:
indicator: inside
name: inside
value: inside
columns: 9
entities:
- entity: sensor.mmwave_g0_still_energy_2
name: ${vars[0].state}
target: ${vars[0].state}
severity:
- color: Blue
from: 0
to: ${vars[0].state}
- color: Red
from: ${vars[0].state}
to: 100
- entity: sensor.mmwave_g1_still_energy_2
name: ${vars[1].state}
target: ${vars[1].state}
severity:
- color: Blue
from: 0
to: ${vars[1].state}
- color: Red
from: ${vars[1].state}
to: 100
- entity: sensor.mmwave_g2_still_energy_2
name: ${vars[2].state}
target: ${vars[2].state}
severity:
- color: Blue
from: 0
to: ${vars[2].state}
- color: Red
from: ${vars[2].state}
to: 100
- entity: sensor.mmwave_g3_still_energy_2
name: ${vars[3].state}
target: ${vars[3].state}
severity:
- color: Blue
from: 0
to: ${vars[3].state}
- color: Red
from: ${vars[3].state}
to: 100
- entity: sensor.mmwave_g4_still_energy_2
name: ${vars[4].state}
target: ${vars[4].state}
severity:
- color: Blue
from: 0
to: ${vars[4].state}
- color: Red
from: ${vars[4].state}
to: 100
- entity: sensor.mmwave_g5_still_energy_2
name: ${vars[5].state}
target: ${vars[5].state}
severity:
- color: Blue
from: 0
to: ${vars[5].state}
- color: Red
from: ${vars[5].state}
to: 100
- entity: sensor.mmwave_g6_still_energy_2
name: ${vars[6].state}
target: ${vars[6].state}
severity:
- color: Blue
from: 0
to: ${vars[6].state}
- color: Red
from: ${vars[6].state}
to: 100
- entity: sensor.mmwave_g7_still_energy_2
name: ${vars[7].state}
target: ${vars[7].state}
severity:
- color: Blue
from: 0
to: ${vars[7].state}
- color: Red
from: ${vars[7].state}
to: 100
- entity: sensor.mmwave_g8_still_energy_2
name: ${vars[8].state}
target: ${vars[8].state}
severity:
- color: Blue
from: 0
to: ${vars[8].state}
- color: Red
from: ${vars[8].state}
to: 100
- Never ever post an unformatted code. Place a code into triple backquotes.
- Your card-mod code missing a “card_mod” keyword. Check docs for card-mod.
I’m sorry. I’ve never posted on the forum. I can do it, my card is great. How do I post codes?
custom:bar-card
title: Produção Solar
entities:
- entity: sensor.sonoff_1000916c58_power
name: Produção Atual
color: rgba(33, 150, 243, 0.6)
max: 3450
show_state: true
show_icon: false
- entity: sensor.sonoff_1000916c58_energy
name: Produção Dia
color: rgba(33, 150, 243, 0.6)
max: 24
show_state: true
show_icon: false
- entity: input_number.producao_mensal_total
name: Produção Mês
color: rgba(33, 150, 243, 0.6)
max: 650
show_state: true
show_icon: false
direction: up
height: 200px
stack: horizontal
width: 100%
style: |
ha-card {
background: none;
border: none;
}
card_mod:
style: |
bar-card-backgroundbar {
background-image: url('/local/PainelHoy3.png'); /* Imagem do painel solar */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-radius: 0px; /* Sem bordas arredondadas */
}
bar-card-currentbar {
background: rgba(33, 150, 243, 0.6); /* Cor atual da barra */
border-radius: 0px; /* Sem bordas arredondadas */
clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent))); /* Ajusta o preenchimento da barra */
}
bar-card-name, bar-card-value {
text-shadow: 1px 1px black;
}