Custom UI: Tiles

Hey guys, any progress to get Custom UI working in combo with Lovelace?

1 Like

Is it just me or has the Tiles Repo on Github gone?

https://github.com/c727/home-assistant-tiles

He is also working on the lovelace project. Probably did not want to keep both projects up.

1 Like

Ah ok. I have my config pointing directly to his repo for the html files required. So my Tiles are not showing up now. Where else can I find these files ?

Can someone please share their Tiles files?

Here you go. These are from 21.05.2018.

https://we.tl/OIs9Tt2JlS

1 Like

Cheers :+1:

Is custom-ui-tiles being Implemented in Lovelace?

I hope so, because the tiles have way more options than lovelace atm.
but lovelace has a lot of potential

1 Like

Thanks! Repo gone! Will give this a try.

@eddi89
I donā€™t get why this repo is gone. I get itā€™s not being updated anymore because of work on Lovelace, but since thereā€™s no tiles like functionality working in Lovelace, not to mention itā€™s still experimental, is there any reason why it canā€™t be used? I was looking for the instructions to add some more tiles and since itā€™s gone I have to rely on my memory which isnā€™t very good at times. Any chance we can have the repo back, or at least the last instructions? It would be much appreciated.

2 Likes

You can get almost exactly the same functionality with picture templates in Lovelace. Itā€™s not really more complicated, just another way of doing it and really you get more control.
Third picture down in this link is my first go at Tileā€™ish in Lovelace. Config is in this file.

2 Likes

@teachingbirds
Thanks. Iā€™ve been playing with Lovelace but canā€™t get a button or icon to change to a colour based on on/off state. May just be something Iā€™ve missed in the documentation but for scenes itā€™s nice to know which one is currently on. For some reason, only the picture-glance seems to change the colour based on the state. Canā€™t replicate the tiles like functionality. Ideas?

Iā€™m guessing you need state image

Thanks for sharing your example, Iā€™ll definitely be taking some time to explore your config :slight_smile:

For your tile implementation - doesnā€™t the click only work on the icon itself (vs the entire tile/button)? Iā€™m trying to think of how I could have the tile change, including the background color. Iā€™m trying to replicate the homekit UI to a certain degreeā€¦ Maybe itā€™s just a full size button image over a button template imageā€¦Iā€™ll have a go, but would be interested if you have any ideas/experiences!

Can you pass data value to script with lovelace?
This is from tiles:

      - entity: script.press_button
        icon: mdi:arrow-left-thick
        column: 1
        row: 5
        data:
          value: left

I recreated my device tracker tiles as previously posted above in Lovelaceā€¦

25

ā€¦as you can see they are identical to those I posted previously and now use only one colour image as the state is handled by CSS now rather than image replacement, example of one tile belowā€¦

  - type: image
    entity: device_tracker.huawei_p10_lite
    tap_action: more-info
    image: /local/images/tracker/sam.png
    state_filter:
      'not_home': saturate(0.0) opacity(50%)
    style:
      top: 50%
      left: 86%
      width: 22%
      # padding: 50px 50px 100px 50px
      border-radius: 5%

I made a white background image to force the card to be the proportions I wanted.

5 Likes

I did spend the weekend experimenting with Lovelace and itā€™s true, pretty much everything can be replicated with one exception, thereā€™s no current way of changing the background of a non-image based on the theme thatā€™s being used. For instance If Iā€™m using an icon on a background that changes color depending on the state, it turns grey or yellow. I can partially replicate the on/off state by making a two pictures, one totally transparent and the other a solid color of the on state, but thatā€™s a workaround vs having something that changes with the themes.

There is also an issue with picture-elements and state-icon where the icon doesnā€™t actually reflect the different on/off state. I raised that issue on github.

https://github.com/home-assistant/ui-schema/issues/153

I am using customize to change the icon colors. See here.

2 Likes

Awesome!! That does the trick! Thanks