Custom UI: Tiles

Tiles custom state card for Home Assistant
preview

Download and more info at GitHub: https://github.com/c727/home-assistant-tiles

Known issues:
-remove/disable more-info-dialog in state and header card
-if the original entity is it the same view the browser scrolls to it after clicking a button

29 Likes

This is pretty cool! Thanks!
Now working in a long time desire: grouping scripts/switches in tile style, mimicing a true universal remote for the home.
Greate for mobile use, lot for actions in a small space, I really enjoy this physical keypad kinda feelingā€¦

9 Likes

Can you share your code to the above? Iā€™d like to do something similar for my home. Thanks

Also when you click on a tile, does the tile change color with state (ex. off=grey, on=red)?

primary color for scripts
green if current state is on
red if current state is off

I have my configuration split in several filesā€¦ so I think itā€™s easier follow eddi89 example.
Anyway Iā€™m working on my config right now and when itā€™s done Iā€™ll put on github.
If your interest is about control the devices/scripts, there is great examples searching for the topic home-assistant-config on github: https://github.com/search?q=topic%3Ahome-assistant-config&type=Repositories

Thanks. Have you tried this on a mobile phone? When I click on a tile, the browser scrolls all the way to the bottom. I think itā€™s because the panel causes the linked entities to display in their own groups. Any way to hide them?

I didnā€™t have this problem because I setup a view with just a remote control layout, no other entities, no scroll.
But I did a quick test and I can confirm this issue: When I click the tile (switch) and the original switch is in the same tab/view, the focus go to original switch. IDK how to prevent this (other them moving the original entities to other view or creating a new view just for the remote).

I think the issue is that HA is scrolling into view the entity that is being changed. So as long as you only show the panel and not the entities, you should be good. Iā€™m going to test and confirm. This is pretty awesome! Thank you.

I also noticed this on my desktop browser. Added to the list of issues

Wow, this is pretty cool, thanks!
One thing though: any idea where the large gap at the bottom comes from?

script.yamaha_buttons:
  custom_ui_state_card: state-card-button-panel
  config:
    columns: 4
    cell_height: 75px
    cell_width: 75px
    entities:
      - entity: script.ya_volup
        icon: mdi:volume-plus
        column_span: 2
      - entity: script.ya_poweron
        icon: mdi:power
        column_span: 2
      - entity: script.ya_voldown
        icon: mdi:volume-minus
        column_span: 2
      - entity: script.ya_poweroff
        icon: mdi:radiobox-blank
        column_span: 2
      - entity: script.ya_a
        icon: mdi:format-annotation-plus
      - entity: script.ya_b
        icon: mdi:format-bold
      - entity: script.ya_cddvd
        icon: mdi:music
      - entity: script.ya_aux
        icon: mdi:television-classic
2 Likes

I also see the large gap (and also think this UI is awesome - Iā€™m switching my entire setup over to it).

@eddi89 - How can I change this to simply show an icon in the middle of the button, entity state (not caption) below the button), and change the behavior to not be a button? Iā€™m basically trying to make custom badges.

This is awesome and I can see a lot of potential for customisation. Perhaps this will even replace my HaDash setup.

I will start a project to create a custom panel that you can configure like this. I will need help to add more widget types. A widget to display svg-files (similar to floorplan) is wip.

1 Like

Looking good so far - just want to change that ā€œATVā€ to the the appropriate activity icon (in this case, the Apple logo).

3 Likes

you can set cell_width to 1fr to get same size for each btw

1 Like

@JesseWebDotCom I have put it on github :grinning:
I modified the state-card-button-panel.html to accept pictures, so I did the ā€œVibesā€ panel.
@eddi89 there will be a official repo?:thinking:

11 Likes

Thanks I added image support and moved to GitHub. I also changed name and some config parameters.
Current plan is to add ā€˜show more-info-card on longpressā€™-feature and make a dashboard as custom panel (early wip): https://imgur.com/a/lXuOp <-- If anybody wants to help contact me

1 Like

This looks awesome!
Would it be possible to explain/comment the sample configuration.yaml file, please? Iā€™m a bit confused about what itā€™s doing.