Lovelace with custom_ui tiles

Configuration Frontend
4

Did you figure out a solution?

5

You guys can emulate the tiles with an image and the picture-entities card. Other than that, you’ll probably have to wait until @eddi89 makes a version that works in lovelace. I don’t think the .css would change much but the .js would because the configuration is different in lovelace. I could attempt to do it, but it would take a while (couple of weeks) because I need to learn .js and .css.

6

yes, as @petro mentioned, i switched to use the picture-entities, actually it allows much more customization.

1 Like
7

Care do share a screenshot and maybe a code snippet?

8

check out the docs. You’ll have to make your own images, then place the elements on the image. The following link shows all sorts of example cards and the yaml with them.

https://home-assistant-lovelace-gallery.netlify.com/

9

@Steini1984, sure

image

- type: picture-elements
  image: /local/images/multimedia/bg.png
  elements:
   
    - type: image
      tap_action: call-service
      service: scene.turn_on
      entity: scene.kodi_switch
      image: /local/images/multimedia/kodi-logo.png
      state_image:
        "off": /local/images/multimedia/kodi-logo.png
      filter: saturate(0.1)
      state_filter:
        "on": brightness(120%) saturate(1.2)
      style:
         top: 25%
         left: 15%
         width: 15%

    - type: image
      tap_action: call-service
      service: scene.turn_on
      entity: scene.atv_switch
      image: /local/images/multimedia/airplay-logo.png
      state_image:
        "off": /local/images/multimedia/airplay-logo.png
      filter: brightness(70%)
      state_filter:
        "on": brightness(120%) saturate(1.2)
      style:
         top: 25%
         left: 40%
         width: 15%

    - type: image
      tap_action: call-service
      service: scene.turn_on
      entity: scene.chromecast_switch
      image: /local/images/multimedia/chromecast-logo.png
      state_image:
        "off": /local/images/multimedia/chromecast-logo.png
      filter: brightness(90%)
      state_filter:
        "on": brightness(120%) saturate(1.2)
      style:
         top: 25%
         left: 65%
         width: 15%

    - type: image
      tap_action: call-service
      service: scene.turn_on
      entity: scene.multimedia_force_off
      image: /local/images/multimedia/power.png
      state_image:
        "off": /local/images/multimedia/power.png
      filter: brightness(90%)
      state_filter:
        "on": brightness(120%) saturate(1.2)
      style:
         top: 25%
         left: 85%
         width: 15%
2 Likes
10

This is awsome!
Is it possible to add name under the icon?

11

Yes, but for now you have to use this custom element for it: https://github.com/custom-cards/text-element

1 Like
12

I could have icon and the text? Or do I have to choose between?

13

@INTEL, You can make your icons already with the text…

14

Thought about that, but adding text with state like @teachingbirds linked would be awsome

15

State as text you can get natively but not just whatever text you want, for that you use the custom element.

16

So, is it possible to get icon and text in the config like @radinsky posted?

17

What are you trying to do exactly? Just add a title?

18

I’m trying to add title under every icon if possible

19

Why don’t you just add the title to the image?

Or you can add a service call button with a dummy service.

20

That’s actualy a good idea, and place dummy service under the image!
Awsome, thanks!

21

@INTEL probably you can look on this one:

all

22

that still doesn’t get what he wants… he wants a title placed anywhere on an image

23

Actualy, i switched to button card, and it works awsome

1 Like