Custom UI: Tiles

[willpar]

After looking at this project I decided to build an X1 xfinity remote for my Harmony Hub with Tiles.

Get the activity and device numbers from harmony_family_room.conf

Here is what it looks like:

Here is the configuration:

groups

groups:
  family_room_xfinity:
    name: Family Room X1 Remote
    entities:
      - input_text.tiles_fr_xfinity

input_text

input_text:
  tiles_fr_xfinity:
    name: Tiles FR X1

scripts

scripts:
  fr_watch_tv:
    alias: 'Watch TV'
    sequence:
      - service: remote.turn_on
        entity_id: remote.family_room
        data:
          activity: '31460757'

  fr_power_off:
    alias: 'Power Off'
    sequence:
      - service: remote.turn_off
        entity_id: remote.family_room

  fr_av_press_button:
    alias: 'FR RX-A830 Button Press'
    sequence:
      - service: remote.send_command
        data:
          entity_id: remote.family_room
          device: '51772834'
        data_template:
             command: "{{ command }}"           

  fr_tv_press_button:
    alias: 'FR LG TV Button Press'
    sequence:
      - service: remote.send_command
         data:
          entity_id: remote.family_room
          device: '51712832'
        data_template:
            command: "{{ command }}"           

  fr_x1_press_button:
    alias: 'FR X1 Button Press'
    sequence:
      - service: remote.send_command
        data:
          entity_id: remote.family_room
          device: '51772913'
        data_template:
            command: "{{ command }}"

customize

customize:

  input_text.tiles_fr_xfinity:
    custom_ui_state_card: state-card-tiles
    config:
      columns: 3
      column_width: 100px
      row_height: 24px
      entities:

        - entity: script.fr_watch_tv
          label: "Watch TV"
          icon: mdi:power
          color: green
          row_span: 2
          column_span: 2
        - entity: script.fr_power_off
          label: "OFF"
          icon: mdi:power
          color: tomato
          row_span: 2
          column_span: 1

        - entity: script.fr_x1_press_button
          label: Guide
          row_span: 2
          data: {command: Guide}
        - entity: script.fr_x1_press_button
          label: Menu
          row_span: 2
          data: {command: Xfinity}
        - entity: script.fr_x1_press_button
          label: Info
          row_span: 2
          data: {command: Info}

        - entity: script.fr_av_press_button
          icon: mdi:volume-plus
          row_span: 2
          data: {command: VolumeUp}
        - entity: script.fr_x1_press_button
          icon: mdi:arrow-up
          row_span: 2
          color: silver
          data: {command: DirectionUp}
        - entity: script.fr_x1_press_button
          icon: mdi:arrow-up-drop-circle
          row_span: 2
          data: {command: ChannelUp}

        - entity: script.fr_x1_press_button
          icon: mdi:arrow-left
          column: 1
          row_span: 2
          color: silver
          data: {command: DirectionLeft}
        - entity: script.fr_x1_press_button
          label: OK
          row_span: 2
          color: grey
          data: {command: Select}
        - entity: script.fr_x1_press_button
           icon: mdi:arrow-right
           row_span: 2
           color: silver
           data: {command: DirectionRight}

        - entity: script.fr_av_press_button
          icon: mdi:volume-minus
          row_span: 2
          data: {command: VolumeDown}
        - entity: script.fr_x1_press_button
          icon: mdi:arrow-down
          row_span: 2
          color: silver
          data: {command: DirectionDown}
        - entity: script.fr_x1_press_button
          icon: mdi:arrow-down-drop-circle
          row_span: 2
          data: {command: ChannelDown}

        - entity: script.fr_x1_press_button
          icon: mdi:arrow-up-bold-box
          row_span: 2
          data: {command: PageUp}
        - entity: script.fr_x1_press_button
          label: Exit
          row_span: 2
          color: grey
          data: {command: Exit}
        - entity: script.fr_x1_press_button
          icon: mdi:arrow-down-bold-box
          row_span: 2
          data: {command: PageDown}

        - entity: script.fr_x1_press_button
          icon: mdi:rewind
          data: {command: Rewind}
        - entity: script.fr_x1_press_button
          icon: mdi:play
          data: {command: Play}
        - entity: script.fr_x1_press_button
          icon: mdi:fast-forward
          data: {command: FastForward}

        - entity: script.fr_x1_press_button
          icon: mdi:stop
          data: {command: Stop}
        - entity: script.fr_x1_press_button
          icon: mdi:pause
          data: {command: Pause}
        - entity: script.fr_x1_press_button
          icon: mdi:record
          data: {command: Record}


        - entity: script.fr_x1_press_button
          label: A - help
          column: 1
          color: gold
          data: {command: A}
        - entity: script.fr_x1_press_button
          label: B - CC
          color: dodgerblue
          data: {command: B}
        - entity: script.fr_x1_press_button
          label: C - sports
          color: tomato
          data: {command: C}

        - entity: script.fr_x1_press_button
          label: 1
          data: {command: 1}
        - entity: script.fr_x1_press_button
          label: 2
          data: {command: 2}
        - entity: script.fr_x1_press_button
          label: 3
          data: {command: 3}

        - entity: script.fr_x1_press_button
          label: 4
          data: {command: 4}
        - entity: script.fr_x1_press_button
          label: 5
          data: {command: 5}
        - entity: script.fr_x1_press_button
          label: 6
          data: {command: 6}

        - entity: script.fr_x1_press_button
          label: 7
          data: {command: 7}
        - entity: script.fr_x1_press_button
          label: 8
          data: {command: 8}
        - entity: script.fr_x1_press_button
          label: 9
          data: {command: 9}

        - entity: script.fr_av_press_button
          icon: mdi:volume-off
          data: {command: Mute}
        - entity: script.fr_x1_press_button
          label: 0
          column: 2
          data: {command: 0}
        - entity: script.fr_x1_press_button
          label: E
          data: {command: E}

[Brad_Gehring]

Is anyone else having this problem? No matter how I tweak it the buttons always appear blue and only the icons take on the correct color. Any ideas on how to get the correct color to show up?

[anon43302295]

Fine here…

[simbesh]

Does anyone have a more elegant solution to regain the control of the entire card like regular groups?
my workaround is a tile (labelled all) linked to a group with all the same entities as the tiles:

[nmparmar]

This is awesome, just tried to implement it as it is, but whenever i click on the panel, i get a blank black frame, with no tiles. This happens on Chrome, Edge, and Internet Explorer as below. Anyone see this before?

thanks

[simbesh]

turns out using group.xxxx doesnt work (must be a limitation where only switch.turn_on/light.turn_on are called, whereas groups need homeassistant.turn_on)

had to make a switch template and use that for the master “room” switch

[gizhola]

I’m getting the exact same thing.

Did you find the solution?

[Bobby_Nobble]

That one had me going for a while, it’s because there’s no such thing as group.toggle. Fixed the same way as you following a suggestion further up the thread.

[pplucky]

Hello everyone.

I’m trying to use this custom component and I cannot seem to get it to work properly. Here’s my config:

input_text:
  dafang_home_ptz:
    name: Dafang Home PTZ
group:
  dafang_home_ptz:
    name: "Dafang (Home) PTZ"
    control: hidden
    view: false
    entities:
    - input_text.dafang_home_ptz
homeassistant:
  customize:
    input_text.dafang_home_ptz:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3
        column_width: 50px
        row_height: 50px
        color: white
        entities:
        - entity: script.dafang_home_move_up
          image: /local/images/arrows/up.png
          column: 2
          row: 1
        - entity: script.dafang_home_move_left
          image: /local/images/arrows/left.png
          column: 1
          row: 2
        - entity: script.dafang_home_move_right
          image: /local/images/arrows/right.png
          column: 3
          row: 2
        - entity: script.dafang_home_move_down
          image: /local/images/arrows/down.png
          column: 2
          row: 3

All my images are exactly 50x50, but this is all I can see in the frontend:

Here’s my image for up arrow, for reference:

I inspected the element and it seems these images are being rendered as 71.95x50 rather than 50x50.

I’m running the last HA build in Hassbian and my browser tests included Chrome (in Windows and macOS) and also Chrome (in iOS). Already tried force refreshing multiple times (Ctrl+F5 in Windows and Cmd+R in macOS), but nothing seems to appear.

Any ideas?

Thanks in advance for any help.

[willpar]

pplucky,

Because of Home Assistant’s responsive HTML theme, tile items do not like to be “told” what column size they should be. column_width is looked at more as a recommendation rather than an absolute value.

I took out color: to see what the button layout really looked like.

If you take out the column_width, it looks good. If you leave the column_width: 50px the buttons overlap and look bad. My recommendation is to leave the column_width out and let the theme determine the column_width.

input_text.dafang_home_ptz:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3
        #column_width: 50px
        row_height: 50px
        #color: white
        entities:
        ...

[mistrovly (Marc-Edouard Louis)]

I’m still stuck on that screen too.

[nmparmar]

I haven’t had a chance to get this fully working, but had better luck, ignoring the instructions on the front page, I get the feeling they are out dated, or perhaps just light. Perhaps @eddi89 can confirm. Instead, download the source, and work it into your own setup, for a better understanding. In spite of doing this, I’m still getting some strange behaviour. Notably neither panel seem to work on the IOS app. Is this a known issue? I get a blank screen and the pop up:

“service system_log/write called”

and no tiles are rendered.

edit: It renders fine on desktop browsers.

anyone have any suggestions as to why that is the case?

[anon43302295]

I had some issues on mobile prior to updating to 0.63 today. There was some buzz over on github about the “service system_log/write called” thing but it was completely over my head. Needless to say that what I did understand about the conversation was that it was related to Polymer and was fixed in a recent PR, which is included in the latest version.

If you’re still having issues on 0.63+ then a further bug report would be in order, but it’s working fine here now I’ve upgraded.

[jaburges (jamieB)]

is it possible to use rest_commands under entities:

input_text.remote_down:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 4
    cell_height: 75px
    cell_width: 75px
    entities:
      - entity: rest_command.lr_tvvolumeup
        icon: mdi:volume-plus
        column_span: 2
      - entity: script.lr_poweron
        icon: mdi:power

or do you have to use scripts?

[pplucky]

Hello.

Thanks for checking it out, but it still doesn’t look good to me:

Config is as follows:

input_text.dafang_home_ptz:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 3
    row_height: 50px
    entities:
    ...

Tried removing both row and column_height and it didn’t got better…

Any other ideas?

Thanks in advance.

[willpar]

pplucky,

Maybe try converting your images from png to jpg. I downloaded your example up arrow image and it was a jpg. Here is what I got:

input_text.dafang_home_ptz:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 3
    row_height: 50px
    entities:
      - entity: script.press_button
        image: /local/up.jpg
        column: 2
        row: 1
      - entity: script.press_button
        image: /local/up.jpg
        column: 1
        row: 2
      - entity: script.press_button
        image: /local/up.jpg
        column: 3
        row: 2
      - entity: script.press_button
        image: /local/up.jpg
        column: 2
        row: 3

[pplucky]

I did convert the image from png to jpeg and it still shows up weird.

Would you mind share your up.jpg with me, for me to test?

Thanks in advance.

[willpar]

Sure. jpg can not be transparent. So I think your image is still a png, which can be transparent.

[pplucky]

Honestly no idea why, but it still appears the same after using your image…

[Cezex]

It seems that <paper-button> lacks background-repeat: no-repeat and background-position: center css properties. Add them to both state-card-tiles.html and state-card-tiles_es5.html and you’re good.