Custom UI: Tiles

pplucky · February 9, 2018, 1:36pm

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 · February 11, 2018, 6:08pm

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 · February 11, 2018, 6:58pm

I’m still stuck on that screen too.

nmparmar · February 12, 2018, 12:03am

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 · February 12, 2018, 12:53am

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 · February 12, 2018, 6:36am

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 · February 12, 2018, 7:51pm

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 · February 12, 2018, 9:55pm

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:

Dafang

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 · February 12, 2018, 10:53pm

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 · February 13, 2018, 1:52am

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

pplucky · February 13, 2018, 11:25am

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

Cezex · February 13, 2018, 1:38pm

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.

nmparmar · February 14, 2018, 8:44pm

Just updated, and problem persists. Could you link the forum where you saw this chat?

Thank you.

anon43302295 · February 14, 2018, 10:21pm

pplucky · February 15, 2018, 11:47am

After changing the css attributes as suggested by @Cezex, it worked well:

with the following config:

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.jpg
      column: 2
      row: 1
    - entity: script.dafang_home_move_left
      image: /local/images/arrows/left.jpg
      column: 1
      row: 2
    - entity: script.dafang_home_move_right
      image: /local/images/arrows/right.jpg
      column: 3
      row: 2
    - entity: script.dafang_home_move_down
      image: /local/images/arrows/down.jpg
      column: 2
      row: 3

Thanks to everyone who helped (or at least tried), to solve my matter.

Mattya802 · February 18, 2018, 2:54am

Is there a way to have the text of a tile be a variable? Specifically, the current set temp for a climate entity?

mconway · February 18, 2018, 3:56am

I’ve got my tile showing the current temp from the thermostat using label_state. I’m sure if you made a template sensor for your set temp, it wouldn’t be hard.

Mattya802 · February 18, 2018, 4:08am

Yup, this ended up working. Thanks for confirming.

Andrew_Lozoya · February 18, 2018, 4:43am

guys i just updated to home assistant 63.3 and the tiles do not show up on my mobile device… anyone else have this issue? please help

input_text.tiles:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 1
    column_width: 75px
    row_height: 75px
    gap: 15px
    color: '#36454F'
    color_on: '#0F9D58'
    color_off: '#36454F'
    entities:
      - entity: switch.ceiling
        icon: mdi:ceiling-light

Log Details (ERROR)

Sat Feb 17 2018 22:38:59 GMT-0600 (Central Standard Time)

undefined:1:11 TypeError: Cannot call a class constructor without |new|

Clifford_Foster · February 18, 2018, 6:14am

Thanks, this is excellent.