Custom UI: Tiles

Thanks for reminding me to check the ‘states’ page. In my previous comment I even posted that it wasn’t showing up on that page. I should have realized that it had something to do with loading in the switch config file, since I’m using a split configuration.

This is literally what I posted before:

- platform: template
  switches:
    tv_template:
      friendly_name: TV power switch
      value_template: "{{ is_state('media_player.tv', 'on') }}"
      turn_on:
        service: media_player.turn_on
        data:
          entity_id: media_player.tv
      turn_off:
        service: media_player.turn_off
        data:
          entity_id: media_player.tv

This configuration is located in config/switches/tv.yaml and in my configuration.yaml I have the following:

switch: !include_dir_merge_named config/switches

So far, so good or at least I think it is.

Well, turns out it wasn’t ‘so far, so good’. I’m was using !include_dir_merge_named (as you can see in there), but the file (config/switches/tv.yaml) that I’m including has a list, so instead of using that, I actually should have used !include_dir_merge_list.

I just did and it finally showed up :).

Newbie question: how are colours defined? e.g. text_color: "#FFF"

I’m used to seeing three hexadecimal 0-255 values for red, green and blue components, e.g. #FF0080.

https://www.rapidtables.com/web/color/RGB_Color.html check here both 0-255 and text color

Sorry I probably wasn’t clear. I’m familiar with the usual RGB hex formal but the text colour in this panel is only defined using three hex digits, not the usual 6:

text_color: "#FFF"

What gives?

/edit, never mind. I’m guessing they are just place holders in the config not actual values.

Yes i have this too. I really would like to get rid of it.

I raised an issue on GitHub regarding the pop-up, and the fix is to use input_text for the domain. Using my previous example above, I changed script.remote_control to input_text.remote_control as seen below.

Another update and thanks to c727 for the tip is that groups now work as a tile, so a template switch isn’t required to control groups anymore.

homeassistant:
  customize:
    input_text.remote_control:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 7
        row_height: 75px
        column_width: 62px
        gap: 15px
        color: '#555B65'
        color_on: '#F0C209'
        color_off: '#555B65'
        entities:
          #Lights
          - entity: group.study_lamps
            label: Study
            icon: mdi:school
            column: 1
            row: 1

input_text:
  remote_control:
    name: remote_control

group:
  remote_control:
    name: Control Panel
    entities:
      - input_text.remote_control
  study_lamps:
    name: Study Lamps
    entities:
      - light.study_desk_lamp
      - switch.tplink_sw4

b.t.w. just in case anyone else finds this useful, to update to the latest version of tiles:

  1. cd to your originally cloned tile directory
    $ cd /home/pi/home-assistant-tiles/
  2. $ git fetch
  3. $ sudo cp www/custom_ui/state-card-tiles* /home/homeassistant/.homeassistant/www/custom_ui/
  4. Check permissions are still valid (i.e. owned by homeassistant)
pi@hassbian:~/home-assistant-tiles $ ls -al /home/homeassistant/.homeassistant/www/custom_ui/
total 44
drwxr-xr-x 3 homeassistant homeassistant 4096 Mar  6 18:06 .
drwxr-xr-x 5 homeassistant homeassistant 4096 Mar  2 15:56 ..
-rw-r--r-- 1 homeassistant homeassistant 9234 Mar  8 13:08 state-card-tiles_es5.html
-rw-r--r-- 1 homeassistant homeassistant 9231 Mar  8 13:08 state-card-tiles.html

That’s it - no need to restart Home Assistant.

Does anyone know how to have a flatter tile as shown in the example @simbesh gave (the room tile)?
2018-02-09_13-32-35

From what I can see, tile sizes are set within “config:”, but this size then applies to all tiles within that group.

config:
        columns: 3
        row_height: 75px
        column_width: 75px
        gap: 15px

None of the customisation keys shown here seem to have the option to change tile size: https://github.com/c727/home-assistant-tiles

edit the problem with my code below is due to a typo, it should be row_span not row-span

I’ve tried row_span but something went wrong… The row spans and row numbers look like they should work but there must be something I’m missing? (I’m trying to make kitchen with a bulb a half height strip)

homeassistant:
  customize:
    input_text.lights:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3
        # row_height: 75px
        row_height: 35px
        # column_width: 75px
        gap: 15px
        color: '#555B65'
        color_on: '#F0C209'
        color_off: '#555B65'
        entities:
          #Lights
          - entity: group.lounge_lights
            label: Lounge
            icon: mdi:ceiling-light
            column: 1
            row: 1
            row-span: 2
          - entity: group.lounge_lamps
            label: Lounge
            icon: mdi:lamp
            column: 2
            row: 1
            row-span: 2
          - entity: group.study_lamps
            label: Study
            icon: mdi:school
            column: 3
            row: 1
            row-span: 2
          - entity: group.kitchen_lights_all
            label: Kitchen
            icon: mdi:lightbulb
            column_span: 3
            row: 3
          - entity: light.kitchen
            label: Kitchen
            icon: mdi:door
            column: 1
            row: 4
            row-span: 2
          - entity: light.kitchen_main_led
            label: Kitchen
            icon: mdi:led-strip
            column: 2
            row: 4
            row-span: 2
          - entity: group.kitchen_spots
            label: Kitchen
            icon: mdi:spotlight-beam
            column: 3
            row: 4
            row-span: 2
          - entity: group.hall_lights
            label: Hall
            icon: mdi:ceiling-light
            column: 1
            row: 6
          - entity: group.landing_lights
            label: Landing
            icon: mdi:ceiling-light
            column: 2
            row: 6
            row-span: 2

Put row_span: 1 in.

Any way to hide a tile according to state?

I tried adding…

            templates:
              hidden: "return (state === 'off' );"

to the tile code itself and also the entity’s own customize entry but no joy, no errors, button still there regardless :frowning:

It was a good suggestion, but unfortunately it didn’t help. I did spot I was missing a row-span: 2 on group.hall_lights but still the same issue.

Just to check, did you mean row-span: 1 on group.kitchen_lights_all? If not I also tried setting exiting row_span: 2 to 1.

I did yes, that’s all I have different for my half height told. Have you tried removing the big gap by making it row 2 to see what happens?

To get rid of this, just clear your browser cache (on the iPhone - settings | safari | clear history and website data)

A typo got the better of me - I was using row-span instead of row_span! doh!

1 Like

Hi @simbesh

have read this thread for 3 times now, but just cant find the code to your Master group, and the Room switch you’re showing here.

Please would you care to share ?

Thanks,
Marius

I have this same problem. I cannot get row 2 and row 3, just row 1 appears. I have tried adding row_span, deleting cache, resetting the browser, creating a panel, nothing has worked.

The scripts for each of the button works in the script section when I press activate.

I have worked on this for 2 weeks with no solution. My install is latest hass.io and custom ui updated as well.

Here is my config:input_text.tiles_harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 50px
row_height: 50px
gap: 4px
color: ‘#555B65
color_on: ‘#D5D619
color_off: ‘#BBBEC2
entities:
- entity: script.tvmenu
icon: mdi:menu
column: 1
row: 1
row-span: 1
- entity: script.arrowup
icon: mdi:arrow-up-bold
column: 2
row: 1
- entity: script.tvvolumeup
icon: mdi:volume-plus
column: 3
row: 1
- entity: switch.arrowleft
icon: mdi:arrow-left-bold
column: 1
row: 2
row-span: 1
- entity: script.tvcheck
icon: mdi:check-circle
column: 2
row: 2
- entity: script.arrowright
icon: mdi:arrow-right-bold
column: 3
row: 2
- entity: switch.tvback
icon: mdi:backup-restore
column: 1
row: 3
row-span: 1
- entity: script.arrowdown
icon: mdi:arrow-down-bold
column: 2
row: 3
- entity: script.tvvolumedown
icon: mdi:volume-minus
column: 3
row: 3

No need to use a room template switch, just use a group. See my code example above. Custom UI: Tiles

The group would have all the entities required for a master switch, and other tiles would have those entities individually.

Sorry my fault, my code that you used had a typo, it should be row_span.

Also code pasting tip, use three back ticks above and below your code to properly format it in the post.

Sure, Thx. Know and use that;-) just liked the setup very much and would have hoped for a code-share… :+1:

Hello, they finally appear after many hassio reboot and empty cache. Hope you will solve it soon.