An entity which is a “zone” on a picture, defined by the top left and bottom right corners in terms of position %age, just like the position of the text. The entity can be given a colour by an automation… either a matching colour to the background, or a stark, contrasting colour in case of an event that needs attention.
This would be an immediate visual alert that there is an issue in a particular part of the building.
I’ve just been playing with that. Thanks for the heads up. However, it is a bit heavy in requiring another image. It could be a lot lighter if it just defined an area and a colour, rather than requiring another image be uploaded to the system.
Also, I’m not understanding how the CSS is supposed to work. Here, I’ve got a small 25x27 pixel block of colour and I’ve tried to use CSS to expand and position it, and it’s not what I expected at these percentages.
This is not a WTH but an average “how to?” question which is supposed to be asked here.
Suggest to close.
The feature of specifying a block of colour, addressable by top left and bottom right co-ordinates doesn’t exist.
The earlier suggestion was a work-around based on placing another image and controlling it, which, while sort-of having a method, also has its flaws, as I’ve illustrated by the % positioning and width not working properly. Hence all the more reason not to close this request and address the feature as I’ve requested it.
I see, you are requesting adding a new type of element - “block”, right?
This block is:
- Supposed to have a customizable color, width/height;
- (may be) supposed to have a label.
Currently pt.1 is possible with a standard “image” element with added background-color, width/height.
Correct. I don’t see the need for a label, however.
It is not really possible with the standard image element, as you suggest, because there is a flaw with the implementation… the positioning and width/height are not working correctly, as I demonstrated.
In addition, the image element is, “heavy,” in requiring another image for every desired colour whereas the block implementation would only need its own code in specifying the position and the colour of the block. It would be, “lighter,” and a more “certain” or “reliable” implementation of the effect.
A difference would be only in one nested “img” element.
A few simple CSS properties may be used for both cases - here a short example (do not bother about card-mod, same could be done for an element in picture-elements card by using a native “style” option):
As for your issues with size/position - I doubt that a special “block” element will solve them. These are not “issues” - these are “I do not know how to deal with it”.
Possibly you can find some answers here. (not comprehensive but could be useful)
You use “card_mod” which I believe is from the HACS. I’m trying to keep away from the HACS, at least until I’m more confident. I did try that card_mod style change to try and alter the colours of cards based on conditions, and it did’t work… which is what led me to the conclusion it was an add-on.
As for the % positioning problem… that’s more than a “I don’t know how to solve it” issue. The % positioning and width are just not working, but I’ll happily follow the link you’ve very kindly provided and see if it offers a solution
Also, you still need a separate image for each colour. So I still hold my request as being valid for consideration by the team.
Already said earlier:
They are working - but not like you think.
You mean “a separate image element of picture-elements card” I hope.
Yes - otherwise you will need a “separate 95% similar not-yet-created color block element”.
I have changed from % which I used from people’s examples and gone to px definitions. I’ll play with this but I’m getting more positive results. Thank you for the tip.
If those formatting definitions are working without card-mod, then I’ll revisit the code and see if I can determine what I’m getting wrong. Of particular interest to me, personally, would be the ability to change the colour of the block on condition… which at present would need knowledge of the images stored on my HA instance, rather than defining a colour in the style.
I’ve got a lot more learning to do.
I do not think I ever suggested to use absolute units like “px”.
Using them causes “malforming” on any resize.
Try to resize a window - you will see it was broken(((.
With my all due respect - once again I think that the whole thread was caused by insufficient experience & should be posted in “Configuration / Frontend”, not in WTH.
That’s one reason why I requested what I did, with separate references for top left and bottom right corners.
What is currently happening seems to be a “stretch from centre” approach which is proving difficult to handle.
I am also encountering difficulties in portability as I have to ensure that each image contains the same folder name on each instance. With my suggestion, it would then become a matter of copy and paste the code.
With all due respect, I believe that the reference to images makes the picture code less portable and a more straightforward absolute reference lowers the effect of “malforming” and thus this request remains valid and should be considered.