Any Card-mod gurus able to help me on this? I’m trying to target this state-switch <div> to set overflow: visible so that the background colour/image can ‘escape’.
I just can’t cope with the scrollbar.
I try to remove it by making it wider. I change the width in the inspector and it works. But I can’t figure out where my mistake is.
Inspector path:
What is now:
What I want to get:
I would be grateful for any help and / or any recommendations for improving the code.
Perhaps it would be more correct to change the width of the column of a horizontal stack, for example, in a ratio of 40/60%?
Why using hui-element?
The only case is “use horizontal stack inside Entities card”.
But in this case the left card will be not aligned with respect to other entity rows:
BUT - I gonna disappoint you - the image elements do not keep the same position with respect to the main image because the main image is scaled automatically dependingly on the card size! That means that the water will be in the tank only if the card’s size is constant.
Here is a case when the card’s size is changed:
And specifying positions & sizes in “%” does not help.
It works perfectly. The masks are made with the same width as the main image and I position them at full width, so they scale perfectly. My final solution ended up making the main image “full” and the masks look “empty”. I position the masks at some % from top of the main image and scale them down according to the depth sensor. It also works on my phone.
The sensor values have to be made to be a percentage either in the sensor integration (ESPHome in this case) or in the card.
I believe this is the best solution for showing tank levels and I can’t thank you enough for your help.
But in your example the top = 0.
IMHO the most tricky part is to calculate top position of the image…
The images must keep relative positions after resizing of the window.
The aerator and (animated) bubbles are simple SVGs elements. Mask1 overlays the bubbles, so the bubble level is always right. I have some other applications where the top levels will not be the same.
You are 100% correct in that the top position is the hardest, but if all your masks have the same width it becomes a lot easier.
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:
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.
(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)
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.
