Please post a sample code for calculating âtopâ.
OK I made a new example. Remember the top does not change because the masks show âemptinessâ. So the masks starts at the top of each tank (which stays the same) and stretch down. I made the tank background in such a way that the three mask tops start at 20%, 50% and 0%. In the 569px high main background graphic, that was around 119px (20%), 285px (50%) and of course, 0.
So letâs start with a sensor. I use ESPHome (or Tasmota) for PC boards I made for the ESP-07. The ultrasonic sensor for Tank 1 in ESPHome is defined like this:
sensor:
- name: "tank1"
id: ads1115_49_0
ads1115_id: ads1115_49
multiplexer: 'A0_GND'
update_interval: 1s
gain: 2.048
platform: ads1115
unit_of_measurement: "m"
icon: "mdi:gauge"
accuracy_decimals: 0
filters:
- calibrate_linear:
- 0.100 -> 0.0
- 1.000 -> 270
- median:
window_size: 10
send_every: 1
send_first_at: 1
This gives me a calibrated and filtered output of the distance between the sensor and the liquid. 10cm is full (0) and 1m is empty (270) for a range of 90cm.
The three values go into the cardâs CSS variables.
- type: picture-elements
image: /local/graphics/test/tankbackground.png
card_mod:
style: |
ha-card {
--mask1-height: {{states('sensor.tank1')|int}};
--mask2-height: {{states('sensor.tank2')|int}};
--mask3-height: {{states('sensor.tank3')|int}};
}
elements:
- type: image
image: /local/graphics/test/mask1.png
style:
transform-origin: left top
top: 20%
width: 100%
height: 1px
transform: scale(1,var(--mask1-height))
- type: image
image: /local/graphics/test/mask2.png
style:
transform-origin: left top
top: 50%
width: 100%
height: 1px
transform: scale(1,var(--mask2-height))
- type: image
image: /local/graphics/test/mask3.png
style:
transform-origin: left top
top: 0%
width: 100%
height: 1px
transform: scale(1,var(--mask3-height))
The result looks like this for 75% full (25% empty):
Here is the background image (note it shows all tanks full):
Mask 1
Mask 2
Mask 3
I hope this helps someone else. [Update - the scaling breaks. Not sure where to look next]
because I had not seen it before, and I only just discovered it 
Add a scrollbar to you markdown card:
card_mod:
style: |
ha-card.type-markdown {
box-shadow: none;
margin: 0px -16px -16px -16px;
overflow-y: scroll;
height: 300px;
}
(the .type-markdown trick is to make sure this card_mod is only applied to the markdown card itself, and not to an enveloping entities card if you happen to embed the markdown card, like I do in my config. This can also be used for other cards ofc, and is useful when an embedded cards card_mod causes the whole (embedding) card to go beyond the regular Lovelace default card width)
Thanks a lot, will look at the code with attention.
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).
1 Like
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-switchmay 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.
I have this conditional card:
- type: conditional
conditions:
- entity: media_player.cast_camera_letto
state: playing
card:
type: entity
entity: media_player.cast_camera_letto
attribute: app_name
name: ' '
icon: ' '
style: |
ha-card {
height: 40px;
width: auto;
color: green;
font-family: 'Georgia';
font-weight: normal;
font-size: {{ '10px' if is_state_attr('media_player.cast_camera_letto', 'app_name', 'Netflix') else '12px' }};
}
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.
What is wrong in this?
Hi,
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:
type: entities
entities:
- entity: sensor.dracaena_bodemvocht
card_mod:
style: |
:host {
--paper-item-icon-color: #e7363e;
}
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 %}
;
}
Can someone point me in the right direction?
sure, why dont you use the same config form your first example?
- entity: input_number.power_threshold
card_mod:
style: |
:host {
--paper-item-icon-color: {{'red' if is_state('input_boolean.test','on') else 'green' }};
}
or the new iif template which is perfect for these shorter needs:
{{is_state('input_boolean.test','on')|iif('red','green')}}
Thanks that worked! Last question, is possible to define a range (from 15-60%) within
{{is_state('input_boolean.test','on')|iif('red','green')}}
Or is that only possible with a input_boolean and a automation?
sure, just replace the templates condition with the one you need. test it in the dev tools template
like:
{{(15 < states('sensor.dracaena_bodemvocht') | float < 60)|iif('red','green') }}recently found the scrollbar on a markdown card:
card_mod:
style: |
ha-card.type-markdown {
overflow-y: scroll;
height: 300px;
}
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,
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
.div#states.card-content {
overflow-y: scroll;
height: 300px;
}
or
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
.card-content {
overflow-y: scroll;
height: 300px;
}
doesnt work either. please have a look what I should try? thanks!
edit
details, details, its always in the details:
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
.card-content {
max-height: 600px;
overflow-y: scroll;
}
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:
card-mod-card: |
.card-header {
font-weight: 300;
letter-spacing: 0px;
/*background: radial-gradient(var(--primary-color),var(--card-background-color));*/
}
.card-content {
max-height: 600px;
overflow-y: scroll;
}
1 Like
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
1st post â link at the bottom â link for toggles
having these entities
- input_select.intercom_message
- entity: input_text.message
card_mod:
style:
hui-generic-entity-row:
$: |
.info {
display: none;
}
paper-input:
$: |
paper-input-container iron-input {
--paper-input-container-shared-input-style_-_width: 400px;
}
results in:
and Id love to align the 2 lines on the left, and on right side of the card. Can we do that, without hardcoding the pixels somehow.
without the mod, the 2 lines are at least aligned on the right side:
thereâs no effective âautoâ setting afaik, but we can replace
--paper-input-container-shared-input-style_-_width: 300px with width: 300px;
btw, we can also set the name to an empty string like this and only style the width (which still wont be adaptive):
- entity: input_text.message
name: ' '
card_mod:
style:
hui-generic-entity-row:
paper-input:
$: |
paper-input-container iron-input {
--paper-input-container-shared-input-style_-_width: 340px;
}
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
found this old card: GitHub - gadgetchnnel/lovelace-text-input-row: A custom Lovelace text input row for use in entities cards which does rather nicely stillâŚ:
Update on the scaling issue.
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:
elements:
- type: image
image: /local/mask1.png
style:
position: absolute
transform-origin: top center
transform: translate(0,-100%)
left: 0%
width: 100%
card_mod:
style: |
:host {
top: {{(states('sensor.some_sensor_value_templated_in_config_yaml'))}}%;
}
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
1 Like
Thanks a lot for efforts.
For temporarily I decided to fix scales & positions for PC, iPhone & iPad as I described here:
It will only work on fixed screen sizes, will not support real-time resize.
Hi,
is it possible to make a light card a little bit smaller?
Thanks
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?