Seems back now
does anybody get some yaml examples of these great variants? please share your yaml codesā¦ 
one of my variants, two opposite sensors, for two solar modules (horseshoe on the right) made with three flex-horseshoe-cards lying one on top of the other in a custom stack-in-card. works well.
1 Like
Hello, please help with the animation settings. I would like to have some kind of power button icon with animation for on and off state. But Iām totally lost in setting animations and I canāt set it up.
type: custom:flex-horseshoe-card
entities:
- entity: sensor.hue_motion_sensor_1_teplota
decimals: 1
name: BazƩn
unit: CĀ°
tap_action:
action: more-info
- entity: light.bodovka_1
name: Manual
icon: mdi:toggle-switch-off-outline
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.bodovka_1
- entity: light.bodovka_2
name: Auto
icon: mdi:toggle-switch-off-outline
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.bodovka_2
- entity: sensor.bazen_napeti
decimals: 1
name: Volts
unit: V
tap_action:
action: more-info
- entity: sensor.bazen_proud
decimals: 1
name: Current
unit: A
tap_action:
action: more-info
- entity: sensor.bazen_vykon
decimals: 1
name: Power
unit: W
tap_action:
action: more-info
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 1
styles:
- fill: blue;
- state: 'off'
icons:
- animation_id: 1
styles:
- fill: black;
- opacity: 0.2;
entity.2:
- state: 'on'
icons:
- animation_id: 2
styles:
- fill: blue;
- state: 'off'
icons:
- animation_id: 2
styles:
- fill: black;
- opacity: 0.2;
show:
horseshoe_style: fixed
layout:
hlines:
- id: 0
xpos: 50
ypos: 36
length: 70
styles:
- opacity: 0.2;
- id: 1
xpos: 50
ypos: 56
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 67
length: 21
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
animation_id: 0
xpos: 50
ypos: 28
uom_font_size: 1.5
styles:
- font-size: 2.5em;
- opacity: 0.9;
- id: 1
entity_index: 3
animation_id: 0
xpos: 35
ypos: 48
uom_font_size: 1.5
styles:
- font-size: 1.2em;
- text-anchor: end;
- id: 2
entity_index: 4
animation_id: 0
xpos: 51
ypos: 48
uom_font_size: 1.5
styles:
- font-size: 1.2em;
- text-anchor: center;
- id: 3
entity_index: 5
animation_id: 0
xpos: 68
ypos: 48
uom_font_size: 1.5
styles:
- font-size: 1.2em;
- text-anchor: start;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-size: 1.2em;
- id: 1
animation_id: 1
entity_index: 1
xpos: 35
ypos: 78
styles:
- font-size: 0.9em;
- id: 2
animation_id: 2
entity_index: 2
xpos: 65
ypos: 78
styles:
- font-size: 0.9em;
icons:
- id: 1
animation_id: 1
xpos: 35
ypos: 70
entity_index: 1
icon_size: 3.5
styles:
- color: blue;
- id: 2
animation_id: 2
xpos: 65
ypos: 70
entity_index: 2
icon_size: 3.5
styles:
- color: blue;
horseshoe_scale:
min: 0
max: 100
color: var(--primary-background-color)
horseshoe_state:
color: '#FFDA8A'
color_stops:
'0': '#FFF6E3'
'10': '#FFE9B9'
'20': '#FFDA8A'
'30': '#FFCB5B'
'40': '#FFBF37'
'50': '#ffb414'
'60': '#FFAD12'
'70': '#FFA40E'
'80': '#FF9C0B'
'90': '#FF8C06'
style: |
@keyframes stroke { to { stroke-dashoffset: 0; } }
Please can someone help?
Hi, how did you do that you have two indicators in the right graph (Stream horse shoe) where one starts from the left and the other from the right? Can you sahre
I often play around with (vertical-)stack-in-card and card-mod styling to get some custom looking lovelace cards in dashboards.
Just rotate the first flex-horseshoe-card 180deg and only show the horseshoe of one entity without any other values or something.
Second card the same without rotate and the third with values or what you want to show.
The order of each card in the stack-in-card is relevant to the view and click actions, because the last card is the top one.
When copy-paste, you may need to fine-tune a few things, like scaling and the top and left pixel, etc. depending on your dashboard settings. And of course your entities.
type: custom:stack-in-card
title: null
card_mod:
style: |
ha-card {
scale: 1 !important;
height: 250px !important;
width: 250px !important;
top: -20px !important;
left: -35px !important;
Box-shadow: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 10px !important;
}
cards:
- square: false
type: grid
columns: 3
cards:
- type: custom:flex-horseshoe-card
card_mod:
style: |
ha-card {
scale: 0.6 !important;
height: 350px !important;
width: 390px !important;
top: -90px !important;
left: -90px !important;
Box-shadow: none !important;
background-color: transparent !important;
transform: rotateY(180deg);
}
entities:
- entity: sensor.powerstream_solar_2_watts
attribute: null
decimals: 0
name: ' '
unit: null
tap_action:
action: more-info
show:
horseshoe_style: lineargradient
scale_tickmarks: false
layout:
names: null
horseshoe_scale:
min: 0
max: 900
width: 3
color: null
horseshoe_state:
width: 0
card_filter: card--dropshadow-heavy
color_stops:
'0': '#FFF466'
'50': '#FFE94C'
'100': '#FFDE33'
'150': '#FFD319'
'200': '#FFC800'
'250': '#FFB500'
'300': '#FFA300'
'350': '#FF9000'
'400': '#FF7E00'
'450': '#FF6C00'
- type: custom:flex-horseshoe-card
card_mod:
style: |
ha-card {
scale: 0.6 !important;
height: 350px !important;
width: 390px !important;
top: -90px !important;
left: -176px !important;
Box-shadow: none !important;
background-color: transparent !important;
transform: rotateY(0deg);
}
entities:
- entity: sensor.powerstream_solar_1_watts
attribute: null
decimals: 0
name: ' '
unit: null
tap_action:
action: more-info
show:
horseshoe_style: lineargradient
scale_tickmarks: false
layout:
names: null
horseshoe_scale:
min: 0
max: 900
width: 0.01
color: null
horseshoe_state:
width: 0
card_filter: card--dropshadow-heavy
color_stops:
'0': '#FFF466'
'50': '#FFE94C'
'100': '#FFDE33'
'150': '#FFD319'
'200': '#FFC800'
'250': '#FFB500'
'300': '#FFA300'
'350': '#FF9000'
'400': '#FF7E00'
'450': '#FF6C00'
- type: custom:flex-horseshoe-card
card_mod:
style: |
ha-card {
scale: 0.6 !important;
height: 350px !important;
width: 390px !important;
top: -90px !important;
left: -260px !important;
Box-shadow: none !important;
background-color: transparent !important;
}
entities:
- entity: sensor.ecoflow_powerstream_solar_total_0
attribute: null
decimals: 0
name: Stream
unit: null
tap_action:
action: more-info
- entity: sensor.powerstream_solar_1_watts
attribute: null
decimals: 0
unit: null
icon: none
tap_action:
action: more-info
- entity: sensor.powerstream_solar_2_watts
attribute: null
decimals: 0
unit: null
icon: none
tap_action:
action: more-info
- entity: binary_sensor.firehd_interactive
attribute: power
decimals: 0
unit: null
area: battery
tap_action:
action: more-info
- entity: sensor.ef_modul_1_daily
attribute: null
decimals: 3
unit: null
tap_action:
action: more-info
- entity: sensor.ef_modul_2_daily
attribute: null
decimals: 3
unit: null
tap_action:
action: more-info
- entity: sensor.powerstream_inverter_frequency
attribute: null
decimals: 0
unit: null
tap_action:
action: more-info
- entity: sensor.linkpowerstream_temperature
attribute: null
decimals: 1
unit: null
tap_action:
action: more-info
show:
horseshoe_style: lineargradient
scale_tickmarks: false
layout:
hlines:
- id: 0
xpos: 50
ypos: 59
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 2;
- stroke-linecap: round;
- opacity: 0.7;
vlines:
- id: 0
xpos: 50
ypos: 77
length: 15
styles:
- stroke: var(--primary-text-color);
- stroke-width: 0.5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 36
styles:
- font-size: 3.5em;
- id: 1
entity_index: 1
xpos: 20
ypos: 75
styles:
- text-anchor: start;
- font-size: 2em;
- id: 2
entity_index: 2
xpos: 57
ypos: 75
styles:
- text-anchor: start;
- font-size: 2em;
- id: 3
entity_index: 3
xpos: 93
ypos: 99
styles:
- text-anchor: null
- font-size: 0em;
- font-weight: 900;
- id: 4
entity_index: 4
xpos: 34
ypos: 85
styles:
- text-anchor: null
- font-size: 1em;
- id: 5
entity_index: 5
xpos: 66
ypos: 85
styles:
- text-anchor: null
- font-size: 1em;
- id: 6
entity_index: 6
xpos: 30
ypos: 51
styles:
- font-size: 1.1em;
- id: 7
entity_index: 7
xpos: 70
ypos: 51
styles:
- font-size: 1.1em;
icons:
- id: 0
entity_index: 1
xpos: 29
ypos: 52
styles:
- text-anchor: start;
- font-size: 0.2em;
- id: 1
entity_index: 2
xpos: 34
ypos: 52
styles:
- text-anchor: start;
- font-size: 0.2em;
names:
- id: 0
entity_index: 0
xpos: 52
ypos: 99
styles:
- text-transform: none;
- text-anchor: center;
- font-size: 2em;
- font-weight: 800;
- font-family: Calibri
horseshoe_scale:
min: 0
max: 900
width: 0.003
color: null
horseshoe_state:
width: 0.001
card_filter: card--dropshadow-heavy
color_stops:
'0': '#FFF466'
'50': '#FFE94C'
'100': '#FFDE33'
'150': '#FFD319'
'200': '#FFC800'
'250': '#FFB500'
'300': '#FFA300'
'350': '#FF9000'
'400': '#FF7E00'
'450': '#FF6C00'
Hello
Iām having difficulties using the card.
Iāve installed it from hacks and I can find it in the resource section of the dashboards:
/hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js?hacstag=20729272512
Iāve added it to the tab I where I want to use it:
resources:
- url: /local/flex-horseshoe-card.js
type: module
title: FHS test
path: fhs-test
type: panel
And itās not available as a card. Tried to add it manually:
type: vertical-stack
cards:
- - type: custom:flex-horseshoe-card
entities:
- entity: climate.downstairs_2
attribute: temperature
decimals: 1
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.mustek_1_battery_charge
(...)
But I get the message: No card type configured.
Anyone knows how to fix this?
Thanks
1 Like
Start by removing the double hyphen for the first horseshoe card
I tried it, the interface shows marks it as an error
Got it, donāt know what I did different from yesterday, but Itās working.
thanks
Is it possible to display a needle or indicator on this card? Something like this - either a circle or a dash. Thanks!
Hello
Is it possible to change the color os the circles, the second and 3rd entities, according to the value?
For instance if the value of the second entity is between 0 and 50, paints the circle green, if itās 50-70 paint it yellow and over 70 paints red. the same for the 3rd.
Thanks
Hi Iām trying to achieve the following:
I want the orange colored icon to blink if we are spending more than 2800W. The issue Iām facing is that I donāt know how to put the condition can be set in the animations part. State only seems to accept on or of, but no numeric condition possibility:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.solaredge_current_power
decimals: 0
unit: W
area: Solar
icon: mdi:solar-power-variant
- entity: sensor.pv_daily
decimals: 0
unit: kWh
area: Yeild
icon: mdi:lightning-bolt-circle
- entity: sensor.sofar_grid_import
decimals: 0
unit: W
area: Feed In
icon: mdi:transmission-tower-export
- entity: sensor.sofar_grid_export
icon: mdi:home-lightning-bolt
- entity: sensor.power_usage
show:
horseshoe_style: lineargradient
animations:
entity.3:
- state: '>0'
icons:
- animation_id: 2
styles:
- color: orange;
- animation: flash infinite 3s ease-in-out both;
- state: "<0"
icons:
- animation_id: 2
styles:
- color: white;
layout:
hlines:
- id: 0
xpos: 50
ypos: 45
length: 80
styles:
- opacity: 0.5;
vlines:
- id: 0
xpos: 60
ypos: 60
length: 30
styles:
- opacity: 0.5;
states:
- id: 0
entity_index: 0
xpos: 58
ypos: 38
styles:
- font-size: 2em;
- id: 1
entity_index: 1
xpos: 75
ypos: 70
styles:
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 30
ypos: 70
styles:
- font-size: 1.5em;
- id: 3
entity_index: 4
xpos: 55
ypos: 90
styles:
- font-size: 1.3em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 20
align: centre
styles:
- font-size: 1.5em;
- id: 1
entity_index: 1
xpos: 75
ypos: 55
align: centre
styles:
- font-size: 1em;
- opacity: 0.8;
- id: 2
entity_index: 2
animation_id: 0
xpos: 35
ypos: 55
align: centre
styles:
- font-size: 1.2em;
- opacity: 0.8;
icons:
- id: 0
entity_index: 0
xpos: 35
ypos: 35
align: centre
size: 1
styles:
- color: orange;
- id: 1
entity_index: 2
animation_id: 0
xpos: 58
ypos: 70
align: centre
size: 1
- id: 2
entity_index: 3
xpos: 40
ypos: 89
align: centre
size: 1
styles:
- color: orange;
horseshoe_scale:
min: 0
max: 5000
color_stops:
'50': rgb(212,175,128)
'90': orange
card_mod:
style: |
ha-card {
border:none;
# background: linear-gradient(to top, rgb(0,0,0) ,rgb(64,64,64));
height: 240px;
width: 240px
}
Anyone can help please ??
Kr,
Bart
answer myself, fixed, the problem was I was copying example cards, and they all started with
- type
when they have to start with
type
1 Like
Can someone spot my error here? Iām trying to turn the word office blue when I am present in the room.
The state of sensor.r_office_occupancy is r_in_room under developer tools.
{% if states('sensor.r_office_occupancy') == 'r_in_room' %}
true
{% endif %}
The above returns true in developer tools>template
Here is my stripped down card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.r_office_occupancy
name: Office
layout:
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-size: 2em;
horseshoe_scale:
min: 10
max: 35
color_stops:
'16': '#7700FF'
animations:
sensor.r_office_occupancy:
- state: r_in_room
names:
- id: 0
styles:
- fill: blue;
I have tried:
- state: 'r_in_room'
and also
- state: "r_in_room"
Any help is appreciated. Thanks!
1 Like
I believe I have found the easy answer: circles, hlines, vlines and icons can be animated. Name cannot be animated.
Would anyone know why I cannot see the āflexible horseshoe cardā I have it installed via HACS but its not showing when I try to add a new card.
This is my setup
Home Assistant
- Core2024.10.0
- Supervisor2024.09.1
- Operating System13.1
- Frontend20241002.2
Were you able to get anywhere with this? Iād like to do something semi-similar with power management. Namely, I want to display one entity or another, depending on a value.
Iād like to show Full in {entity 1's value} if Battery Power > 0
or Empty in {entity 2's value} if Battery Power < 0
I just now set the up to work using a conditional card, but that requires two almost entirely duplicated horseshoe cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.battery_power
state_not: unavailable
- condition: numeric_state
entity: sensor.battery_power
above: 0
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.battery_average
area: Batteries
decimals: 1
- entity: sensor.batteries_last_updated
- entity: sensor.battery_estimated_full_time
area: Full in
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
- id: 1
entity_index: 1
xpos: 50
ypos: 70
styles:
- font-size: 1.2em;
- id: 2
entity_index: 2
xpos: 65
ypos: 80
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.8em;
- opacity: 0.8;
- id: 1
entity_index: 2
xpos: 35
ypos: 80
styles:
- font-size: 0.9em;
- opacity: 0.8;
horseshoe_scale:
min: 0
max: 100
color_stops:
"0": red
"30": yellow
"70": green
- type: conditional
conditions:
- entity: sensor.battery_power
state_not: unavailable
- condition: numeric_state
entity: sensor.battery_power
below: 0
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.battery_average
area: Batteries
decimals: 1
- entity: sensor.batteries_last_updated
- entity: sensor.battery_estimated_empty_time
area: Empty in
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
- id: 1
entity_index: 1
xpos: 50
ypos: 70
styles:
- font-size: 1.2em;
- id: 2
entity_index: 2
xpos: 65
ypos: 80
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.8em;
- opacity: 0.8;
- id: 1
entity_index: 2
xpos: 35
ypos: 80
styles:
- font-size: 0.9em;
- opacity: 0.8;
horseshoe_scale:
min: 0
max: 100
color_stops:
"0": red
"30": yellow
"70": green
- type: gauge
entity: sensor.battery_power
min: -1500
max: 1500
needle: true
severity:
green: 0
yellow: 9999
red: -9999
This is broken with the upgraded of HACS I believe. Cannot install.
Same here.
- Core 2024.10.4
- Supervisor 2024.10.3
- Operating System 13.2
- Frontend 20241002.4