Custom UI: Tiles

[eddi89]

Tiles custom state card for Home Assistant

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

[mviezzer (Markus)]

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…

[JesseWebDotCom]

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

[JesseWebDotCom]

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

[eddi89]

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

[mviezzer (Markus)]

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

[JesseWebDotCom]

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?

[mviezzer (Markus)]

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).

[JesseWebDotCom]

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.

[eddi89]

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

[maedium (Randy Lemaire)]

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

[JesseWebDotCom]

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

[JesseWebDotCom]

@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.

[gazoscalvertos]

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

[eddi89]

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.

[JesseWebDotCom]

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

[eddi89]

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

[mviezzer (Markus)]

@JesseWebDotCom I have put it on github
I modified the state-card-button-panel.html to accept pictures, so I did the “Vibes” panel.
@eddi89 there will be a official repo?

[eddi89]

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

[sentinel]

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.