Custom UI: Tiles

[Romquenin]

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.

[anon43302295]

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

[Romquenin]

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

[Romquenin]

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.

[Romquenin]

I don’t know how or why but now it’s working:

Thanks.

[anon35356645]

Very cool, will try to implement this.

What I would like to achieve is this

• open the browser at xxx.duckdns.org and be presented with buttons/tiles
• clicking on a tile will open a group of cards (view:true) or a single card, preferably in full screen (or option to) with a button to go back to the main page/tiles

Is this possible, can you please give me a hint how to achieve the above

[tomoqv (Tomas)]

Custom UI tiles are really neat and make HA look much prettier and easier to use. I have set up UI tiles for my mediaplayers and it works great on my desktop and e.g. Android mobiles. However, I am running Ubuntu Touch with a browser with the following user agent string:
Mozilla/5.0 (Linux; Ubuntu 15.04 like Android 4.4) AppleWebKit/537.36 Chromium/55.0.2883.75 Mobile Safari/537.36

and the tiles render awfully.

My configuration.yaml has:

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

I have attached the screenshots from my desktop as well as mobile. Is there anything I can do to get it to render correctly on Ubuntu Touch?

Mobile:

Desktop:

[tomoqv (Tomas)]

Hm, not sure how to use that in Custom UI Tiles.

[Bobby_Nobble]

With thanks to @eddi89 for the component itself and @mviezzer for sharing his config for inspiration, I’ve replaced most of my home page with tiles.

One thing I’m having trouble with is, assuming it’s actually possible, creating a couple of climate tiles for heating and hot water. I’m hoping they can be set to pop up the climate panel that clicking on the normal state card does.

Any pointers?

[Bobby_Nobble]

Thanks, only slightly ahead of my time then

[anon35356645]

@Bobby_Nobble

most of my home page with tiles.

may I see a screenshot

[Rodolfo_Vieira]

can u share your all config please.

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