Looks great…
I follow the examples and the results
Ah! Thanks for reminding me to remove theme dependencies!
You now have white text on an white background 
Will fix that after dinner!
@vipk31 I have uploaded a new view. I replaced specific extended theme colors with fixed values. If you can check once again if this is really fixed?
1 Like
I am also experiencing the white text on the white background. Did you update the HACS version number ?
@AmoebeLabs - Can I just say that I LOVE your layout implementation? It took me a while to understand how to use it, but once I understood I found myself wishing ALL cards worked this way. Any chance we can get a version of this card without the horseshoe? I’d LOVE to be able to simply lay out attributes on a card using only YAML and X/Y coordinates. (I hate CSS with a passion.) You could call it flex-card. 
Great work! This some inspirational stuff here!
Oh yes, I thought that it was only a problem with the examples, but some css in the card itself was also causing this problem. Should be fixed now. Have tested with 5 themes, including the default hass theme.
New version 0.8.1 is seen by HACS as you can see.
You must download a new examples view also!
That is great to hear. I wonder what you are creating with this card!
When I started this card - with the horseshoe - I couldn’t decide which layout I preferred, so I decided to make it flexible, ie a configurable layout with all sorts of entities, attributes and some graphics (lines, circles). Then someone in the System monitoring - How does your look? thread asked for the possibility to create actions, ie switch lights or an appliance.
And while making those work, the animations where added too, including pre-defined animations.
In the beginning I could indeed disable the horseshoe, but what is a horseshoe card without a horseshoe I thought 
That would look silly 
I can release this version of course by changing two lines of code. But then you still have to fill in the requirements for the horseshoe (scale, colors) but it is invisible and you could ‘abuse’ the card for you own goals.
Releasing just a flex card might be a nice idea…
Thanx! It was fun making this card. And I truly wonder what kind of layouts others will create.
1 Like
I think the easiest way to describe the usefulness of Flex card without the horseshoe is to use an example from the excellent button-card.
When @RomRider took over development of button-card, an amazing thing occurred quite organically. A card that was originally meant to serve as a button was also being used to display at-a-glance information using several attributes.
An example from button-card’s github page.
For anyone who was familiar with CSS Layout Grids, this was a godsend. For those of us who are less CSS inclined, however, it has been a serious learning curve.
This is where your coordinates-based layout method comes in. It enables those of us who are less inclined to working with CSS Grids to tweak layouts to our hearts content using concepts that everyone with an understanding of basic algebra can understand.
I implemented this card for my humidity management area. I was wondering what are you thoughts on the icon automation. For example, I have a switch with a tap-action which can toggle the switch. But this would change the state of the switch. The icon automation only sees what the state was with the card was initially displayed. After I have toggled the switch the icon automation does not get toggled. Was this the plan?
If I refresh the page the card works great since it relooks at the state of the switch in my case.
Nevermind. Mystery solved and it had nothing to do with this card.
Thanx for the explanation! I understand it now 
As I said, I can release a version of the horseshoe where you can disable displaying the horseshoe. You still have to define the colorstops and scale. But if you do that in a decluttering template, your view won’t notice those dummy requirements.
In a later stadium I could release a card without the horseshoe.
As you can see in the light button examples (11 and 12), the icons change color according to the state of the light. So I think you have a mismatch with the animation_id’s or entity index of some kind.
The animation_id in the layout should match the one in the animations section for that icon state. AND the entity in the animations section (entity.1 in example 11) should match the index in your entity list.
From example 11:
The state second entity (index 1), the light, is used for animation triggers
entities:
- entity: sensor.memory_use_percent
- entity: light.1st_floor_hall_light // is entity.1 in the animations section
In the animations section, you see the processing of a state change for entity.1.
What you also see is that it is linked to animation_id: 0. This should match the id in the layout.
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 0
styles:
- fill: white;
- state: 'off'
icons:
- animation_id: 0
styles:
- fill: var(--primary-text-color);
The layout of this icon refers to animation_id: 0
layout:
icons:
- id: 0
animation_id: 0
Hope this helps!
Maybe you can see my error. I have reduced the card to base and still cannot get it to work. I only have one animation.
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 1
styles:
- fill: red;
- state: 'off'
icons:
- animation_id: 1
styles:
- fill: black;
- opacity: 0.2;
color_stops:
'10': green
'45': orange
'50': red
entities:
- attribute: current_humidity
entity: climate.south_main
unit: '%'
- entity: switch.south_dehumidifier
icon: 'mdi:cup-water'
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.south_dehumidifier
horseshoe_scale:
max: 60
min: 30
layout:
icons:
- animation_id: 1
entity_index: 1
icon_size: 3.5
id: 0
xpos: 30
ypos: 55
states:
- entity_index: 0
id: 0
styles:
- font-size: 2.5em;
- opacity: 0.9;
uom_font_size: 1.5
xpos: 50
ypos: 28
show:
horseshoe_style: colorstop
type: 'custom:flex-horseshoe-card'
Any help would be great and I love this card.
That is weird. I can’t see anything wrong looking at it. It looks very much the same as the light example.
Some assumptions & questions:
- I assume you can switch your dehumidifier while clicking the icon?
- The states of the switch are indeed ‘on’ and ‘off’?
- If you hit F5, the icon shows the expected state?
Update:
I can’t reproduce the problem with your example.
I replaced the switch with my light:
‘off’ state:
‘on’ state:
I used this definition:
- animations:
entity.1:
- state: 'on'
icons:
- animation_id: 1
styles:
- fill: red;
- state: 'off'
icons:
- animation_id: 1
styles:
- fill: black;
- opacity: 0.2;
color_stops:
'10': green
'45': orange
'50': red
entities:
- entity: sensor.disk_use
decimals: 1
icon: mdi:harddisk
- entity: light.1st_floor_hall_light
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.toggle
service_data: { "entity_id" : "light.1st_floor_hall_light" }
horseshoe_scale:
max: 60
min: 30
layout:
icons:
- animation_id: 1
entity_index: 1
icon_size: 3.5
id: 0
xpos: 30
ypos: 55
states:
- entity_index: 1
id: 0
styles:
- font-size: 2.5em;
- opacity: 0.9;
xpos: 50
ypos: 28
show:
horseshoe_style: colorstop
type: 'custom:flex-horseshoe-card'
Thanks for your quick response.
Yes you can switch the dehumidifier on/off by clicking the icon
Yes the states for the swtich are on/off
Yes, when I hit F5 it updates
When I changed the line in the code, from false to true it did not make any difference. It still is not working.
I did update my previous answer. I made a mistake with your example (wrong entity_index). I posted the defininition I have used now including screenshots. I can switch my light and it updates immediately.
Question 1:
Does the state displayed change from on to off? As this reacts to the same update as the icon should…
Question 2:
Is you icon the same as the primary text color (probably white or black)? Or does it display the expected color, but not real-time, but only after hitting F5?
What browser are you using?
Question 3:
Do you have any error in the hass log? Or if you are using Chrome and check the inspector (right mouse button, → Inspector, or ctrl-shift-I), do you see errors?
Mars,
Yes the state is changing when the icon is clicked. I confirmed with Developer/States
Yes the icon displays correctly when using F5. Yes the icon is black and white. Since I am not using a theme, these should be my primary text colors.
I am using Chrome but also have the same issue on the IOS app
I do not see any errors in the logs or inspector.
Not sure it is matters but the switch is a value template created switch. I don’t have any lights defined.
Dennis
Template sensors have a history of not updating, it’s even a breaking change.
And the breaking architectural change:
I have no idea of course if your template falls into this category, but I wonder if you manually call the homeassistant.update_entity_service if the icon does change!
I checked and the icon does not update after calling the homeassistant.entity_update service.
Ok. And the state you display, ie ‘on’ or ‘off’, does that change or not, just as the icon?
The state is changing when I click the icon.
Ok, so data is coming in.
I think it has to do with how the animation and entity state are compared in the card.
In the set hass(hass) function, you will find the following line of code:
// if animation state not equals sensor state, return... Nothing to animate for this state...
if (!(this.entities[entityIndex].state === item.state)) return;
Can you replace the triple ‘===’ with ‘==’ ??
so:
if (!(this.entities[entityIndex].state == item.state)) return;
Then save, and ctrl-F5 in the browser to force reloading the card.