Custom UI: Tiles

@Bobby_Nobble

Yeah I was hoping that would too. I think a PR is necessary to add an image_template.

Ah thanks, I knew I’d be missing something daft!

I am stuck here too. Here is my customize. I use google chrome.

input_text.tiles_harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 75px
row_height: 75px
entities:
- entity: script.tvmenu
icon: mdi:menu
column: 1
row: 1

With the latest home assistant update I’m getting these pop ups whenever I click on any tile. Anyone know how to get rid of them?

1 Like

Same here, only on the iphone app i am not getting it on Firefox.

So, first of all… I really like this project.

I’ve seen a lot of configurations and examples and I currently have an issue with adding a switch as a tile. Now, I’ve read on the forums that this exact example works for someone else (see other topic where @azgooon ‘finally got it to work’ as he says), it just doesn’t work for me.

This is the configuration for the switch that I want to use. Before this I haven’t used any switches, so this is the first one. Not sure if this is correct, but the config is valid.

- 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. Now the following is the configuration for the UI tiles:

input_text.remote_control:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 4
    row_height: 50px
    column_width: 50px
    gap: 4px
    entities:
      - entity: switch.tv_template
        icon: mdi:power
        column: 1
        row: 1
      - entity: script.tv_mute
        icon: mdi:volume-off
        column: 2
        row: 1
      - entity: script.tv_volume_down
        icon: mdi:volume-medium
        column: 3
        row: 1
      - entity: script.tv_volume_up
        icon: mdi:volume-high
        column: 4
        row: 1

input_text:
  remote_control:
    name: Control panel

The above does not work, but when I remove the switch.tv_template entity (below) from the above list, the other tiles immediately show up in the frontend:

  - entity: switch.tv_template
    icon: mdi:power
    column: 1
    row: 1

I noticed in the web developer console that I got a JS error:

Uncaught TypeError: Cannot read property 'state' of undefined
    at HTMLElement.computeClass (state-card-tiles.html:162)
    at f (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at Function._evaluateBinding (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at Object.d [as fn] (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at a (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at e (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at a._propagatePropertyChanges (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at a._propertiesChanged (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at a._flushProperties (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
    at a.ready (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)

Line 162 of state-card-tiles.html:

return window.hassUtil.OFF_STATES.includes(hass.states[entity.entity].state) ? 'off' : 'on';

So, it seems that hass.states[entity.entity] is undefined. I’m guessing that entity.entity refers to switch.tv_template. I tried looking up the entity on the /dev-state page, but it isn’t listed in the table of entities. I’m not sure whether it should be there or not, since I haven’t used a switch before.

Can anyone help me out here? Why isn’t this working?

Is it me or have a load of @eddi89 posts gone missing in this thread? There are replies to his posts that are no longer there that sound like they were useful to help understand Tiles better…

Yeah, all his replies from another thread have disappeared too, not sure what’s happening.

I have Tiles working but I’m trying to configure it so that a single tile can turn off all lights in a room, and in particular have the tile colour change at the same time based on it’s on/off state. Trouble is the lights are made up of switch and light entities - switches for floor standing lamps with non-standard bulbs, and Philips Hue light bulbs.

At the moment it works by combining the items into script.study_lights as seen below, but the problem is the tile just stays the same colour.

homeassistant:
  customize:
    script.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: script.study_lights
            label: Study
            icon: mdi:school
            column: 1
            row: 1

script:
  study_lights:
    sequence:
      - service: switch.toggle
        entity_id: switch.tplink_sw4
      - service: light.toggle
        entity_id: light.study_desk_lamp
  remote_control:
    sequence:

group:
  remote_control:
    name: Control Panel
    entities:
      - script.remote_control

42

Looking through this thread I see some suggestions on using a switch template, but I don’t think you can combine light and switch entities at the same time (or at least my attempts have been failing for one reason or another).

@simbesh your solution here seems to be what I need (but with just the single Room on/off button), but I guess your switch template only has light entities? Could you share your yaml anyway, both the switch template and tile layout please as I’d like to see how it’s been implemented.

Thanks.

Scripts just run, they don’t have an on and off state. Simplest would probably be put everything into a group and then create a switch template to turn it on and off as you can’t toggle groups directly, then make the template your tile. Using homeassistant.turn_on and homeassistant.turn_off should get around mixing lights and switches.

I cannot get more than 1 row in the custom tiles. The scripts are present and activate when I click on activate in the scripts section. I have updated to the latest files from yesterday.

Here is my config:
input_text.tiles_harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 75px
row_height: 75px
entities:

  • entity: script.tvmenu
    icon: mdi:menu
    column: 1
    row: 1
  • entity: script.tvvolumedown
    icon: mdi:volume-minus
    column: 3
    row: 3

Great suggestion putting a group into a switch template, thank you!

Any one else getting this strange behavior?

Did it end up working for you as @Bobby_Nobble suggested? I was actually trying to do somewhat of the same thing, except I’m try to use my TV as the source, see my previous post.

For some reason I can’t get the template switch to show up in the frontend. It even gives an error.

Yeah, it works a treat, here is my initial test controlpanel.yaml file in /home/homeassistant/.homeassistant/packages/

homeassistant:
  customize:
    script.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: switch.study_lights
            label: Study
            icon: mdi:school
            column: 1
            row: 1

script:
  remote_control:
    sequence:

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

switch:
  - platform: template
    switches:
      study_lights:
        value_template: "{{ is_state('group.study_lamps', 'on') }}"
        turn_on:
          service: homeassistant.turn_on
          data:
            entity_id: group.study_lamps
        turn_off:
          service: homeassistant.turn_off
          data:
            entity_id: group.study_lamps

My configuration.yaml has the following:

homeassistant:
  name: Home
  latitude: !secret homeassistant_latitude
  longitude: !secret homeassistant_longitude
  elevation: !secret homeassistant_elevation
  unit_system: metric
  time_zone: !secret homeassistant_timezone
  customize: !include customize.yaml
  packages: !include_dir_named packages/

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-tiles.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-tiles_es5.html

I also make - group.remote_control visible to show the tile card (configured within groups.yaml)

@thmry your switch template looks ok. Check to see if media_player.tv and switch.tv_template appears on the “states” page within developer tools.

1 Like

Yes that’s happening on mine too (Safari) - this pops up on each button press:

25

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.