Hello, I’m looking for a way to display this chart as in the example. In addition to the actual values, the aim is to show the upper and lower limits. So far I have only found the possibility to change the colors via severity or to specify a target value with “target”. But I don’t know how to implement several different ranges.
Good morning all,
I am trying to change the color of the icon of my sensor (not binary.sensor) for example to blue. I have tried a lot of things, but I can’t find a solution. Do you have an idea ?
Hi guys,
In a disk %age usage bar card, I would like to display the actual value of the free disk space.
Something like: Free space: 62GB/212,0G (Usage: 69%)
Is that doable?
(Sorry if the question is not clear)
No comments? Ideas?
Some tricks with the card - displaying TWO text lines:
This is implemented by the decl_bar_additional_info decluttering card with the aid of card-mod.
How to use:
- type: custom:decluttering-card
template: decl_bar_additional_info
variables:
- SENSOR_USAGE: sensor.iiyama_ohm_ssd_corsair_load_used_space
- VALUE_TEXT_1: 968 GB
- VALUE_TEXT_2: Samsung HD204UI
decl_bar_additional_info:
default:
- VALUE_TEXT_2: ''
card:
type: custom:mod-card
card:
type: custom:decluttering-card
template: decl_bar_usage
variables:
- SENSOR_USAGE: '[[SENSOR_USAGE]]'
- VALUE_NAME: '[[VALUE_TEXT_1]]'
card_mod:
style:
decluttering-card $ bar-card $: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{% set CONTENT = '\A ' + '[[VALUE_TEXT_2]]' -%}
{{ CONTENT }}";
white-space: pre;
font-size: 0.8rem;
}
Internally using the decl_bar_usage template:
decl_bar_usage:
default: &ref_default
- VALUE_NAME: ''
- VALUE_SHOW_NAME: inside
- VALUE_SHOW_STATE: inside
- VALUE_COLOR_1: green
- VALUE_COLOR_2: orange
- VALUE_COLOR_3: red
- VALUE_LIMIT_1: 33
- VALUE_LIMIT_1_1: 34
- VALUE_LIMIT_2: 66
- VALUE_LIMIT_2_1: 67
card:
type: custom:bar-card
entity: '[[SENSOR_USAGE]]'
name: '[[VALUE_NAME]]'
icon: ''
unit_of_measurement: ''
direction: right
entity_row: true
height: 40px
width: 100%
color: ''
complementary: false
decimal: 0
target: 0
limit_value: false
min: '0'
max: '100'
severity:
- color: '[[VALUE_COLOR_1]]'
from: 0
to: '[[VALUE_LIMIT_1]]'
icon: ''
hide: false
- color: '[[VALUE_COLOR_2]]'
from: '[[VALUE_LIMIT_1_1]]'
to: '[[VALUE_LIMIT_2]]'
icon: ''
hide: false
- color: '[[VALUE_COLOR_3]]'
from: '[[VALUE_LIMIT_2_1]]'
to: 100
icon: ''
hide: false
positions:
icon: 'off'
indicator: 'off'
name: '[[VALUE_SHOW_NAME]]'
minmax: 'off'
value: '[[VALUE_SHOW_STATE]]'
animation:
state: 'off'
speed: 3
Surely the same technics may be used to display last-changed for the sensor:
decl_bar_additional_info__last_changed:
card:
type: custom:mod-card
card:
type: custom:decluttering-card
template: decl_bar_usage
variables:
- SENSOR_USAGE: '[[SENSOR_USAGE]]'
- VALUE_NAME: '[[VALUE_TEXT_1]]'
card_mod:
style:
decluttering-card $ bar-card $: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{% set SENSOR_NAME = '[[SENSOR_USAGE]]' -%}
{%- if not states(SENSOR_NAME) in ['unavailable','unknown'] -%}
{%- set DOMAIN = SENSOR_NAME.split('.')[0] -%}
{%- set SENSOR_NAME = SENSOR_NAME.split('.')[1] -%}
{%- set LAST_CHANGED = states[DOMAIN][SENSOR_NAME].last_changed -%}
{%- set LAST_CHANGED_FORMATTED = relative_time(LAST_CHANGED) -%}
{%- set LAST_CHANGED_FORMATTED = '\A '+LAST_CHANGED_FORMATTED+' ago' -%}
{%- else -%}
{%- set LAST_CHANGED_FORMATTED = '' -%}
{%- endif -%}
{{ LAST_CHANGED_FORMATTED }}";
white-space: pre;
font-size: 0.8rem;
}
Update 26.05.22: changed a code for decl_bar_usage - removed mod-card.
After searching and searching I can’t find it: How can the bar-card be installed manually?
That is, installing it without HACS.
I wanted to put entities and bar-enties into the same card. I tried using the example from the readme, by using an entities type card and set the type of one of my entities to custom:bar-card. which does properly add the bar, but results in a different styling (padding around the whole row + different distance between text and icon)
The readme’s example looks like this though: https://github.com/custom-cards/bar-card/raw/master/images/entity_row.gif?raw=true
Before filing an actual issue, I’d like to know if there’s a different way to combine normal antities and bars into one card.
Try using entity_row: true option
Good tip, thanks! I missed that property.
Unfortunately, it doesn’t seem to fix it completely yet. There’s still a misalignment when using width. As you can see, the lower “storage used” has a different distance to the name/label.
One of my bars (Pollution) are of numeric value.
Is it possible to use CSS Elements to change the value to text depending on the numeric values ,and if so, how?
style: |
:card {
--card-value:
{% set temp = state_attr('air_quality.nmi_outside','air_quality_index')|float %}
{% if temp > 0 %} Low
{% elif temp > 3 %} Medium
{% elif temp > 6 %} High
{% elif temp > 9 %} Severer
{% endif %}
;
}
My usage of this card is rudimentry…
type: custom:bar-card
entities:
- entity: sensor.baby_room_window_sensor_power
- entity: sensor.cadenza_motion_sensor_power
- entity: sensor.deck_back_door_sensor_power
- entity: sensor.dresser_motion_sensor_738d0b01_power
...
Is there a way to auto populate the entities… example:
{% for state in states.sensor | selectattr('attributes.device_class', '==', 'battery') %}
{% if 0 <= state.state | int(-1) %}
{{ state.entity_id }}
{% endif %}
{% endfor %}
Yes, your code works in my setup:
type: custom:auto-entities
card:
type: custom:bar-card
show_empty: false
filter:
template: >-
{% for state in states.sensor | selectattr('attributes.device_class', '==', 'battery') %}
{% if 90 <= state.state | int(-1) %}
{{ state.entity_id }}
{% endif %}
{% endfor %}
Gives a list of batteries >= 90% (if “90” is specified).
Thank you so much. This is definitely one of the things I find tricky to do on HA as a noob. I didn’t identify that type in auto entities could be bar-card.
So this
type: custom:auto-entities
card:
type: custom:bar-card
icon: mdi:battery
positions:
icon: 'off'
indicator: inside
name: inside
severity:
- color: Red
from: 0
to: 25
- color: Orange
from: 26
to: 50
- color: Green
from: 51
to: 100
columns: 1
show_empty: false
filter:
template: >-
{% for state in states.sensor | selectattr('attributes.device_class', '==',
'battery') %}
{{ state.entity_id }}
{% endfor %}
yields the following
which mostly meets my needs.
Does someone know how to significantly reduce font size to fit the long names… I’m maybe hoping for 2 columns OR, is there a way to select the entities friendly_name which would remove "Hash Power " from each of the entities listed
I am pretty sure I am being stupid, but I can’t for the life of me get the text in the individual bars to change style. Can anyone help? Tried the code below and a whole pile of variations on a theme including putting styles against the various entities but nothing seems to change the font. Would like to centralise the text too.
Card-mod is installed
If anyone is interested it is linked to the excellent sensors for zwift and is a power meter for my home cycling setup.
Thanks!
type: custom:bar-card
color: rgba(117,189,111,1.0)
stack: horizontal
style: |-
bar-card-name{
margin-right: auto;
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
positions:
icon: 'off'
title: 'off'
name: inside
value: 'off'
indicator: 'off'
entities:
- entity: sensor.zwift_power_215592
color: rgb(127, 127, 127)
name: Active Recovery
min: 56
max: 125
- entity: sensor.zwift_power_215592
color: rgb(55, 138, 245)
name: Endurance
min: 125
max: 171
- entity: sensor.zwift_power_215592
color: rgb(89, 189, 89)
name: Tempo
min: 171
max: 206
bar_style:
font-size: 50%
- entity: sensor.zwift_power_215592
color: rgb(248, 204, 68)
name: Threshold
min: 206
max: 240
- entity: sensor.zwift_power_215592
color: rgb(237, 99, 52)
name: VO2 Max
min: 240
max: 275
- entity: sensor.zwift_power_215592
color: rgb(236, 49, 35)
name: Anaerobic
min: 275
max: 338
- entity: sensor.zwift_power_215592
color: rgb(236, 49, 35)
name: Neuromuscular
min: 338
max: 1500
Any ideas how to use templates in bar-card? I want the target to show the max entity. Is it at all possible to use templates in this card?
type: custom:bar-card
entities:
- name: Badet
target: "{{ 'states('sensor.badet_gulvvarme_electric_consumption_max' ) }}"
unit_of_measurement: w
entity: sensor.badet_gulvvarme_electric_consumption_w
icon: mdi:shower
Put the card into config-template-card
Brilliant! That did the trick. Thanks
I’m looking to have a graph (0-100%) showing the current progress of my washing machine, but with a little twist.
Instead of a static name I would like to show time remaining, something I get from a template.
Would it be possible todo this?