OK the scaling sucks. It looks like the issue comes in with scaling being calculated using something other than the main image of the picture-elements card. If you put the card in a vertical-stack or something like that, then the levels fall apart.
Here is the original:
Two cards stacked horizontally. It looks like the scaling is based on the total width of the vertical-stack card containing the two picture-elements card:
It gets worse. Even using ordinary zooming in the browser breaks it:
It looks like the % styling in the elements themselves (ie width: 100%) scales correctly. It is therefore the scaling transform that breaks it. The only way seems to be to access the height % of the image elements. @thomasloven - can you please help? I really tried and @Ildar_Gabdullin has been amazing with his help (thank you again Ildar).
That was exactly what I was talking about - scaling kills the picture.
I guess that this is a nature of picture elements card - scaling breaks a relative position of elements respectively to the main image.
Do not think that card-mod may resolve it.
Once I made a floorplan: main image + âdark roomâ images, and every scaling broke the plan - each âdark roomâ image was placed to different positions when the page was resized. Finally, I made all âdark roomâ transparent images of the same size as the main image. That means that for every small object like a hardware sensor, a lamp etc I also need to use a large transparent image. Also, I cannot place an icon or a static text - these elements will be misplaced after resize! (this do not allow to have the same card on PC, tablet & mobile phone - they may have different viewports).
Well, there is a workaround for different viewports:
Create a decluttering card for a complex card like a floorplan; use variables for calibrating a relative position of elements.
Select values for these calibration variables for each viewport.
Call the decluttering card with a corresponding set of variables for each device (custom:state-switch may be used).
But this workaround anyway will not help in the âwindow is resizedâ case.
Assuming I can get the aspect_ratio to work (I am probably doing something wrong because I cant get it to work), is it possible to template aspect_ratio with card-mod? If it aspect_ratio scales correctly, it will solve the problem.
and i would like to have the app_name attribute with a font size 10px, but i have the font family and the font weight as expected but not the font size.
Iâm looking for a way to change the color of the icon depending on the value within a entity card.
I can change the icon color with the following code:
so far, so good, the icon turns red. But now I want to change the color depending on the value, so if the value is between 15% and 60% I want the icon to become green, everything else I want the icon to turn red.
Iâve tried several options and thought Iâd work with the following code, but no success yet.
type: entities
entities:
- entity: sensor.dracaena_bodemvocht
card_mod:
style: |
ha-card {
paper-item-icon-color:
{% if states('sensor.dracaena_bodemvocht') | float 15-60 %}
green
{% else %}
red
{% endif %}
;
}
and now like to add that to some very long auto-entities entities cardsâŚ
however, I can not find a way to do it, nor an example in the pages above. setting that to ha-card {} itself doesnt do a thing, and I guess it should be set to .div#states.card-content. However,
max-height in stead of height⌠scrolling nicely! could even be used in card-mod-theme, if not for interfering with some of my more complex cards with fold-entity-rows and header settings
Having a fixed max-height adds to the overall tidiness of the front-end though. so here goes:
Hi, is it possible to color this switch of the card entities?
I would like to color only that one, so possibly without changing the theme of all the switches.
Is that possible?
Thanks
problem with these fixed settings is the device isnt responsive anymore, and setting it too wide make mobile misbehave, and 100% doest seem to work either. CSS width property
It seems like the combination of picture-card and card-mod doesnât like scaling the vertical size of the masks up, but it is ok to scale it down. So using a 1px mask that is scaled up will break, but if you make a mask that is exactly the same height and width of the underlying image, then it works correctly when you reduce the height. The problem is you get ugly artifacts making it unusable.
My solution in the end was to use the full size masks and position them at -100%. I then template the top position with card-mod. Example:
It is an ugly solution and it means I have to cut all the tank images across the top so the mask can move down. It also means the tank tops have to be on the same level. It scales OK though and there are no artifacts.
Definitely a disappointment, but I will wait to see if there is any movement on this.
Hopefully this saves someone else some effort. Thanks again @Ildar_Gabdullin
given the current state of affairs of the fold-entity-row resource I find the header is positioned 8px too far to the rightâŚ
Ive edited the resource to use a
margin-left: -8px;
in the #head{} section, but now see that also moves the divider out of the card. Not goodâŚ
Now how could we move the header of the fold 8px to the left?
Well, only move the header of the fold 8px to the leftâŚ
I thought I had managed that by the edit of the resource but noticed I also moved the divider 8px outside of the card ;-(
