How to make a "button" with and image background

Hi there!

Yesterday i discovered AppDaemon, it’s really awesome, it brings a lots of opportunities.

After reading documentation i’m stuck in one “easy” thing. I’m trying to make a button (switch) with an image background instead of color, without titles, icons… Just and image you can press and turn on/off the switch.

Well i can use iframe for an image, but i’m not able to add a tap action.
And i can make a switch but i can’t use and image as a background. (widget_style: “background-image: http:linktoimage/image.png” does not work).

Maybe it is impossible right now and i must need to create a custom app or widget.

There is a way to do that without doing custom things?

Thanks!

Ok, i have managed to do it with: widget_style: “background-image: url(http:linktoimage.org/image.png);”

Thats works but the image its bigger than the widget so only a part of the image is seen. Let’s see how to solve that, i think this is CSS and it’s not familiar to me… xD

EDIT1: Got it with: widget_style: “background-image: url(http:linktoimage.org/image.png); background-size: cover;”

Next step, how to remove title and icon.

EDIT2: Title solved just deleting the title line.
For the icon is use this setup:
icon_on: mdi-loading mdi-spin
icon_off: mdi-blank
icon_style_active: “top:60px; font-size: 1200%; color: red;”
When device is off the icon is “transparent”, when device is on the chosen icon spins (cool!!) and the style settings for the icon.

Really cool, working and it’s aesthetically pretty !

1 Like