Custom UI: Tiles

That’s EXACTLY why I suggested it :slight_smile:

Tks @Bobby_Nobble, @arsaboo and @Jer78. I’d like to not use images, but we’ll expect support for this soon.

Slowly progress is being made @kuuji just released a custom button card for lovelace

my first setup:

4 Likes

@simbesh Would you mind to share ur configuration of this view?

1 Like

Finally, what I’ve been hoping for. Thanks smart people.

continuing from Custom-ui Tiles template not working,

HI,

Been discussing with @vladosam, who helped me turn the paradigm in my templates.

I am trying to get my Tiles to follow the state of my device_tracker Life360 and have it show images depending on the zones it is in. The thing is these Life360 zones are capitalized combinations of words without _ as in ‘Multiple Words’ while my images cant be like that and need to be m_multiple_words.png.

So, ive tried this but it doesnt work:

background-image: url(\"/local/tiles/family/m_' + state|lower|replace(" ", "_") + '.png\")';

this background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
works beautifully for m_home and m_not_home, so I know its down to the filter to get it right.

I don’t mind if it had to be like m_multiplewords.png and not use the underscore, but even then the filter needs to be something like state|lower|replace(" ", "").

What could I change and try, please have a look with me?

on Multiple conditions in Tiles Javascript:

answering myself here, because I’ve finally found a way, and it might be of use to anyone on this thread, never read a real answer to it. If it is too obvious, sorry.

this works fine now!

        style_template: >
          if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          return 'background-color: #643aac;background-image: url(\"/local/tiles/family/m_' + 'zoning' + '.png\")';

@vladosam please see this, it makes the other templates we’re checking somewhat easier too!

Nice. I’ll test it in my test env. Is else return 'background... required on zoning or you can just use return 'background... ?

indeed, I never use 'else'
suppose the && operator would work too :wink:

You nailed it with

if (state === 'home' || state === 'not_home')

:slight_smile:

I was not liking the results using other cards to simulate tiles, so I started to migrate tiles to lovelace. I never created lovelace cards so I’m having some difficulties but I’m liking the initial results.

hassio

6 Likes

Oh yes! You’re the best :muscle::ok_hand::+1:

1 Like

Can you share your code with us? Even in alpha state it seems to be usable :wink: And there are also lots of talented people here who can help you!

Ok, I will organize the code and share it.

2 Likes

Any updates? :slight_smile: (sorry for being impatient)

Yes, I just sent github a version that is working for me. In readme there are instructions about how to configure using your current tiles settings, test to check if it works for you. (Sorry my bad english).

7 Likes

@rodrigodf Great work!

1 Like

Hello and congrats on the great job!

I have installed it and almost got it working.

There are three things that I ran into trouble with:

  1. The mdi icons are always black. I managed to change some of them using text_color: white, but that did not work for switches.

  2. Is there any way to add entities to the same card? I really prefer mixing tiles and entities :slight_smile: I tried using vertical-stack-in-card but that does not appear work with your custom card

  3. How can I add a title to the card? vertical-stack-in-card is a workaround, but I wanted to ask if there was a better way?

Here is the code I used:

  • type: custom:tiles-card
    title: Sjónvarpshol
    legacy_config:
    columns: 5
    row_height: 72px
    color: grey
    color_off: grey
    entities:
    • entity: switch.sjonvarp_stofan
      icon: mdi:television-box
    • entity: switch.magnari_stofan
      icon: mdi:speaker
    • entity: script.magnari_stofan_mute
      icon: mdi:volume-off
    • entity: script.magnari_stofan_down
      icon: mdi:volume-minus
    • entity: script.magnari_stofan_up
      icon: mdi:volume-plus
    • entity: script.tv_select_kodi
      icon: mdi:kodi
    • entity: script.tv_select_ruvhd
      style_template: ‘return ‘‘background-image: url(/local/Images/RUV.png); background-size:
      contain;’’’
    • entity: script.tv_select_stod2
      style_template: ‘return ‘‘background-image: url(/local/Images/Stod2.png); background-size:
      contain;’’’
    • entity: script.tv_select_sjonvarpsimans
      style_template: ‘return ‘‘background-image: url(/local/Images/Sjonvarp_Simans.png);
      background-size: contain;’’’
    • entity: switch.ps4
      icon: mdi:playstation

Thank you so much for this and for making it so easy to move it to lovelace. But in the old version I was able to use image: to access background-image so I could use gradients instead of solid colors. But that doesn’t seem to work. However it might be something that I changed in the old .html file, I know it was a lot of trial and error before I got it working. Could you help pointing me in the right direction to get it working with the .js?

Thanks @Steini1984,

I updated the .js to have the white color as default again. It’s still not possible to have entities on the same card, but I will try to implement this in the new version. To add a title to the card place the title: attribute inside legacy_config: this way:

  - type: custom:tiles-card
    legacy_config:
      title: Sjónvarpshol