search

junalmeida / homeassistant-minimalistic-area-card

A minimalistic area card with sensors and buttons.
MIT License
119 stars 11 forks source link

Use solid color as background #4

Closed gfandrea closed 2 years ago

gfandrea commented 2 years ago

Describe the solution you'd like It could be intresting to use a solid color for the card background, maybe using the HEX code

junalmeida commented 2 years ago

I will take you suggestion into consideration, thanks :)

seraphx2 commented 2 years ago

Can it be more than a consideration? I find it weird you assume everyone wants an image as a background. Image sources are usually a secondary concern, not primary. They make it very hard to read the text and icons on the card. At minimum it should default to theme color for a card. Customization is good as well.

junalmeida commented 2 years ago

For me, the image is primary because it is meant to be a smaller version of the native area card, which also has image as a primary concern (https://www.home-assistant.io/dashboards/area/). Without an image probably an icon list card would be enough.

If the image you choose is making it hard to read, probably the image is too bright. Currently the card already darkens the image a bit. I am also considering providing an option to control the dark filter percentage.

seraphx2 commented 2 years ago

I would hardly call an optional item (that when not supplied defaults to a color, so gives you the option to choose) the primary concern of even the built-in card. And to further that point, the top 3 dashboard configurators (lovelace minimalist, Mushroom, and Dwains) all default to themed colors.

All you have to do is if a string with a URL isn't supplied, default to the theme color, at minimum. it's just an if statement. At worst, you add in elseif statement that checks to see if it's a hex color or a color word like 'red'.

And this would help out people like me who don't want images just theme color, and people like the OP who maybe wants different colors per room/area. I am heavily into mushroom and would 100% be using this card if you did this. Literally the only thing stopping me is the forced image property. It's the main reason I came to the repo and found this 'issue'.

And I suppose I could put a gray image somewhere. However, the fact you pre-dim the image would make it harder to color match.

kauelima commented 2 years ago

I wanted this and as an alternative I'm just using a colored pixel data as the image. I was at the same stage as @seraphx2

Example:

`type: custom:minimalistic-area-card title: Room Name

image: >- data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

tap_action: action: navigate navigation_path: room_name entities:

Got this code at: https://png-pixel.com/

binarypickle commented 2 years ago

Didn't know you could hard code a png like that. Nice. I was using https://singlecolorimage.com/ to just get a url.

seraphx2 commented 2 years ago

Yeah. I wish I had thought of that. I'm a web developer, but I don't usually put base64 data in an img tag. And that's all it really is. Anything that allows you to put a URI for an image would also 100% be likely to accept this because at the end of the day, that data string is just being inserted into the src property of an html img tag. And that accepts URI's or base64 data to render an image.

@kauelima Thanks for that...haha.