Custom UI: Tiles

You only need set the image: /local/x.png and have the file in the www folder. Check the chorme inspector to see any hint (like file not found).

My question was about getting the tiles to auto expand on the width when there is a .png inside.
(@jamesdawson3 sollution)
Somehow that won’t work for me.

Maybe someone can explain what I’m doing wrong - I’ve been trying to get the default code to display properly, but the “Tiles Showcase” box is empty, and I have separate boxes for Script, Input Text, and Input Boolean. I’ve tried substituting in a valid entity into the config to no change.

I thought I’d followed the config to the letter, so I’m pretty confused…?

eddi89
Any errors in development console of your browser?

Hi - many thanks for the assistance! I see these:

My Home Assistant UI is HTTP only - is that relevant? It’s running on a Synology NAS (Ubuntu)

I replaced the config file with the config file from Github (below). Added some bare basics. And this is what I see:

I can browse to http://host:port/local/custom_ui/state-card-tiles.html, so the files are all in correct place.

I would so love to get this working - what am I doing wrong arrrgh :smiley:

homeassistant:
  # Name of the location where Home Assistant is running
  name: Home
  # Location required to calculate the time the sun rises and sets
  latitude: -36.8
  longitude: 174.7
  # Impacts weather/sunrise data (altitude above sea level in meters)
  elevation: 40
  # metric for Metric, imperial for Imperial
  unit_system: metric
  # Pick yours from here: http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
  time_zone: Pacific/Auckland
  customize:
    input_text.dummy_tiles:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3
        column_width: 75px
        row_height: 75px
        entities:
          - entity: input_boolean.switch1
            label: S1
          - entity: input_boolean.switch2
            label: S2
            column: 3
            row_span: 3
          - entity: script.switches_off
            icon: mdi:power
            column_span: 2
            row_span: 2
          - entity: script.press_button
            label: ^
            column: 2
            row: 4
            data: {value: top}
          - entity: script.press_button
            label: <
            column: 1
            row: 5
            data: {value: left}
          - entity: script.press_button
            image: /local/ok.png
            column: 2
            row: 5
            data: {value: ok}
          - entity: script.press_button
            label: ">"
            column: 3
            row: 5
            data: {value: right}
          - entity: script.press_button
            label: v
            column: 2
            row: 6
            data: {value: value}

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-tiles.html
    
input_boolean:
  switch1:
  switch2:

script:
  switches_off:
    sequence:
      service: input_boolean.turn_off
  press_button:
    sequence:
      service: input_text.set_value
      data:
        entity_id: input_text.command
      data_template:
        value: "{{ value }}"
input_text:
  command:
    name: Button
  dummy_tiles:
    name: dummy
group:
  g1:
    name: Tiles showcase
    entities:
      - input_text.dummy_tiles
http:
  # Secrets are defined in the file secrets.yaml
  # api_password: !secret http_password
  # Uncomment this if you are using SSL/TLS, running in Docker container, etc.
  # base_url: example.duckdns.org:8123
  api_password: ########

That worked!! Thanks so much!
Maybe that should be added to the default git?

Edit: I just searched for “extra_html_url_es5” and I see that when I downloaded the git as zip, the docs directory was missing the extra instructions… wonder why? Strange… the info I needed was in there.

Edit2:

I see now - https://github.com/c727/home-assistant-tiles/tree/master/docs only has the png, and that is linked at the top of this thread.

https://github.com/andrey-git/home-assistant-custom-ui/tree/master/docs has the extra info needed for success.

Thanks again…!

1 Like
- entity: script.script_lq_living_voldown
  icon: mdi:volume-minus
  color: '#FF6633'
  background-color: '#FF6633'
  column: 2
  row: 2

In my above entity code, the individual tile icon takes on the color attribute, but the background of the tile does not take the background-color attribute. What am I doing wrong?

background-color is not a valid parameter for the config. I’ve been trying to change the script to have it update the background instead of the icon. I’ve had no luck. My problem is I can’t see any updates after a cache clear. I wish there was a dev environment for this so we could adjust a buttons interactions in real time then just release it when it works. Very frustrating the way it is currently. Maybe that’s just the way html works.

I did read, and followed the thread. Clearing cache and refreshing the page did nothing when I was implementing my changes to the background color. I got it working, I had an character ( / ) at the end of a config setting. This didn’t cause any errors or warnings in HA, it just caused the config beyond that character to be ignored. So my statement stands, I wish there was a dev environment to implement changes to the HTML without having to deal with everything on the home assistant side. Thanks for your helpful comments though.

I also have everything aligned to left ,did you figure this out ?

The latest Chrome

Thanks for creating this epic state-card.
Is it possible to toggle the state of a group?
I tried using a group as the entity_id, but it did not work.
I think it has to do with the fact that the service group.toggle does not exist.
However, I believe that you can change the state of a group with light.toggle or homeassistant.toggle.
Would there be an easy fix to this?

Hi,
I just copy and past all config etc. from git other then
panel_custom:
- name: tiles
sidebar_title: Tiles
sidebar_icon: mdi:view-dashboard
url_path: tiles
config:
entities:
- entity: input_boolean.switch1
label: Switch 1
but tiles are not showing.

Please help me to get it working.

Thanks, I got it working, issue was on my end.

Thanks again

Hello, thank you very much eddi89 and all the people involved in the evolution of this great feature.

I have finally understood how to add button in my config, the buttons are showing fine in the dedicated card.

But when i add the group in an existing group/card the buttons are broken.

Do someone now where the problem is coming from?

Here is my code:

  customize:
    script.tv_remote:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3
        row_height: 30px
        column_width: 40px
        gap: 15px
        color: '#555B65'
        color_on: '#D5D619'
        color_off: '#BBBEC2'
        entities:
          - entity: script.tvmute
            icon: mdi:volume-mute
            column: 1
            row: 1
          - entity: script.tvvolumedown
            icon: mdi:volume-medium
            column: 2
            row: 1            
          - entity: script.tvvolumeup
            icon: mdi:volume-high
            column: 3
            row: 1        

I don’t use this code in my config.yaml

  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui

Thank you very much for the amazing work, this feature is the cherry on the cake.

Ok solved it. I was Dumb to use the group instead of the script. This code was wrong:

group:
  tv_remote:
    name: UHD TV
    control: hidden
    entities:
      - input_boolean.tv_power_switch
      - input_select.tv_input_select
      - group.tv_remote

This code is good:

  tv_remote:
    name: UHD TV
    control: hidden
    entities:
      - input_boolean.tv_power_switch
      - input_select.tv_input_select
      - script.tv_remote

Thank you.

I would like to display more than one ‘row’ but it doesn’t seems to work for me. Do someone know what i’m doing wrong?

  customize:
    script.harmony_remote:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3
        row_height: 75px
        column_width: 62px
        gap: 15px
        color: '#555B65'
        color_on: '#D5D619'
        color_off: '#BBBEC2'
        entities:
          # Favorites
          - entity: script.tvvolumeup
            icon: mdi:menu
            column: 1
            row: 1
          - entity: script.tvvolumeup
            icon: mdi:arrow-up-bold
            column: 2
            row: 1
          - entity: script.tvvolumeup
            icon: mdi:volume-plus
            column: 3
            row: 1
          - entity: switch.tvvolumeup
            icon: mdi:arrow-left-bold
            column: 1
            row: 2
          - entity: script.tvvolumeup
            icon: mdi:check-circle
            column: 2
            row: 2
          - entity: script.tvvolumeup
            icon: mdi:arrow-right-bold
            column: 3
            row: 2
          - entity: switch.tvvolumedown
            icon: mdi:backup-restore
            column: 1
            row: 3
          - entity: script.tvvolumeup
            icon: mdi:arrow-down-bold
            color: '#FF6633'
            column: 2
            row: 3
          - entity: script.tvvolumeup
            icon: mdi:volume-minus
            column: 3
            row: 3

group:
  harmony_remote_button:
    name: Harmony Remote button
    entities:
      - script.harmony_remote

script:
harmony_remote:
  sequence:

I really don’t understand what i’m missing.

That looks right, have you done Ctrl+f5 since adding the new config?

Yes, I did. I’m using the same script for each buttons, otherwise my config is suppose to be fine. It’s strange.

I reverted the ‘colum:1/row:1’ button with the ‘column:3/row:3’ and look what is happening:

The other buttons are all blank.