Custom UI: Tiles

jarrah · March 11, 2018, 10:23pm

Useful update (thanks again eddi89).

My screenshot in the previous post has text either next to the icon or below, depending on text length.

To ensure text is below the icons, use label_sec:

jaburges · March 12, 2018, 2:46am

awesome, this def helped me- thanks for sharing!

did label_sec work (i cant seem to get the text under the icon)

jarrah · March 12, 2018, 8:05am

Yep, here is my code (just need to make sure tile size is large enough)

          - entity: group.lounge_lights
            label_sec: Lounge
            icon: mdi:ceiling-light
            column: 1
            row: 1
            row_span: 2

Bobby_Nobble · March 12, 2018, 10:32am

Just updated so I can use the label_sec and now having the same overlapping rubbish you were getting, guess we take it that row_span: 1 is broken and have to use the style_template: “return ‘min-height: XXpx;’;” bodge to fix it?

jarrah · March 12, 2018, 9:41pm

Yeah seems like it - by default the smallest tile size is 50x50 so have to use style_template to override it now.

Bobby_Nobble · March 13, 2018, 10:23am

Yay, finally got the device tracker I was really after…

Images go colour when home, fades to grey when not. Each person has code set up as below…

  - entity: device_tracker.dadsn5x
    row_span: 2
    column_span: 1
    style_template: "return 'background-image: url(\"/local/dad/' + state + '.png\");'"

…and their own named folder in www with a colour image called ‘home.png’ and a grey one called ‘not_home.png’.

Jer78 · March 13, 2018, 12:06pm

@Bobby_Nobble that’s really cool! Thanks for sharing.

Mariusthvdb · March 13, 2018, 2:23pm

not sure whats happening in the backend, but all of a sudden my Tiles lights setup has changed from:

into:

No matter what i try to change in the config…
anyone else experiencing this?

config:

    input_text.tiles_lights:
      state_card_custom_ui_secondary: state-card-tiles
      config:
        columns: 3
        row_height: 45px
        gap: 18 px
        text_size: 1em
        color: '#555B65'
        color_on: '#F0C209'
        color_off: '#555B65'
        entities:
          #Lights
          - entity: group.all_lights_only
#            label: All
            style_template: "return 'text-transform: none; min-height: 20px;';"
            icon_template: "if (state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"
            color_on: green
            color_off: red
            column: 3
            row: 1
            row_span: 1
          - entity: group.buffet_lights
            label: Buffet
            style_template: "return 'text-transform: none;';"
            icon: mdi:pine-tree
            column: 1
            row: 2
            row_span: 1
          - entity: group.dining_table_lights
            label: Dining
            style_template: "return 'text-transform: none;';"
            icon: mdi:silverware
            column: 2
            row: 2
            row_span: 1
          - entity: group.terrace_lights
            label: Terrace
            style_template: "return 'text-transform: none;';"
            icon: mdi:nature
            column: 3
            row: 2
            row_span: 1
          - entity: group.auditorium_lights
            label: Auditorium
            style_template: "return 'text-transform: none;';"
            icon: mdi:theater
            column: 1
            column_span: 2
            row: 3
            row_span: 1
          - entity: group.living_lights
            label: Living
            style_template: "return 'text-transform: none;';"
            icon: mdi:seat-recline-extra
            column: 3
            row: 3
            row_span: 1
          - entity: group.hallway_lights
            label: Hallway
            style_template: "return 'text-transform: none;';"
            icon: mdi:exit-to-app
            column: 1
            row: 4
            row_span: 1
          - entity: group.library_lights
            label: Library
            style_template: "return 'text-transform: none;';"
            icon: mdi:library
            column: 2
            row: 4
            row_span: 1
          - entity: group.corridor_lights
            label: Corridor
            style_template: "return 'text-transform: none;';"
            icon: mdi:exit-to-app
            column: 3
            row: 4
            row_span: 1
          - entity: group.master_bedroom_lights
            label: Bedroom
            style_template: "return 'text-transform: none;';"
            icon: mdi:hotel
            column: 1
            row: 5
            row_span: 1
          - entity: group.mobile_lights
            label: Mobile
            style_template: "return 'text-transform: none;';"
            icon: mdi:transfer
            column: 3
            row: 5
            row_span: 1
          - entity: light.inside
            label: Inside
            style_template: "return 'text-transform: none;';"
            icon: mdi:ceiling-light
            column: 1
            row: 6
            row_span: 1
          - entity: light.bureau
            label: Bureau
            style_template: "return 'text-transform: none;';"
            icon: mdi:lamp
            column: 2
            row: 6
            row_span: 1
          - entity: light.outside
            label: Outside
            style_template: "return 'text-transform: none;';"
            icon: mdi:ceiling-light
            column: 3
            row: 6
            row_span: 1

Bobby_Nobble · March 13, 2018, 5:09pm

Exactly the same problem as @jarrah and I had, answer is literally just 3 posts above yours

Mariusthvdb · March 13, 2018, 5:12pm

hmm, not sure, the thing is i had that, and took it out to see if it caused the issue.

Seems at least intermittent use of the min-height is not advisable …?

Bobby_Nobble · March 13, 2018, 5:14pm

Cheers, can’t believe how simple it ended up being thanks to the continuous updates by @eddi89.

Just got tons of code from all the far more complicated failed attempts to delete now, did finally learn how to use input_booleans even if I didn’t need them in the end

Bobby_Nobble · March 13, 2018, 5:24pm

You’ve set the default row height to less than 50 and then have all the other entities set to row_span: 1 so, like I said, you’ve got the same issue I had, add another 5px to the row height and they should sort themselves out.

The first one has min-height set but then just below says use row_span: 1, so it has and got the same issue the others have.

Mariusthvdb · March 13, 2018, 7:34pm

Ok thanks ! Will do.

Could I also take out the row_span? Not useful anyway since i don’t use any other span…?

taken out _span, changed to 50px. Only main button should be half size… doesnt work yet, though better. Any hints?

input_text.tiles_lights:
  state_card_custom_ui_secondary: state-card-tiles
  config:
    columns: 3
    row_height: 50px
#        gap: 18 px
    text_size: 1em
    color: '#555B65'
    color_on: '#F0C209'
    color_off: '#555B65'
    entities:
      #Lights
      - entity: group.all_lights_only
#            label: All
        style_template: "return 'text-transform: none; min-height: 20px;';"
        icon_template: "if (state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"
        color_on: green
        color_off: red
        column: 3
        row: 1
#            row_span: 1
      - entity: group.buffet_lights
        label: Buffet
        style_template: "return 'text-transform: none;';"
        icon: mdi:pine-tree
        column: 1
        row: 2
#            row_span: 1
      - entity: group.dining_table_lights
        label: Dining
        style_template: "return 'text-transform: none;';"
        icon: mdi:silverware
        column: 2
        row: 2
#            row_span: 1
      - entity: group.terrace_lights
        label: Terrace
        style_template: "return 'text-transform: none;';"
        icon: mdi:nature
        column: 3
        row: 2
#            row_span: 1
      - entity: group.auditorium_lights
        label: Auditorium
        style_template: "return 'text-transform: none;';"
        icon: mdi:theater
        column: 1
        column_span: 2
        row: 3
#            row_span: 1
      - entity: group.living_lights
        label: Living
        style_template: "return 'text-transform: none;';"
        icon: mdi:seat-recline-extra
        column: 3
        row: 3
#            row_span: 1
      - entity: group.hallway_lights
        label: Hallway
        style_template: "return 'text-transform: none;';"
        icon: mdi:exit-to-app
        column: 1
        row: 4
#            row_span: 1
      - entity: group.library_lights
        label: Library
        style_template: "return 'text-transform: none;';"
        icon: mdi:library
        column: 2
        row: 4
#            row_span: 1
      - entity: group.corridor_lights
        label: Corridor
        style_template: "return 'text-transform: none;';"
        icon: mdi:exit-to-app
        column: 3
        row: 4
#            row_span: 1
      - entity: group.master_bedroom_lights
        label: Bedroom
        style_template: "return 'text-transform: none;';"
        icon: mdi:hotel
        column: 1
        row: 5
#            row_span: 1
      - entity: group.mobile_lights
        label: Mobile
        style_template: "return 'text-transform: none;';"
        icon: mdi:transfer
        column: 3
        row: 5
#            row_span: 1
      - entity: light.inside
        label: Inside
        style_template: "return 'text-transform: none;';"
        icon: mdi:ceiling-light
        column: 1
        row: 6
#            row_span: 1
      - entity: light.bureau
        label: Bureau
        style_template: "return 'text-transform: none;';"
        icon: mdi:lamp
        column: 2
        row: 6
#            row_span: 1
      - entity: light.outside
        label: Outside
        style_template: "return 'text-transform: none;';"
        icon: mdi:ceiling-light
        column: 3
        row: 6
#            row_span: 1

Mariusthvdb · March 13, 2018, 11:10pm

finally made it…

set standard tile_height to the minimum you need in the main grid (and when that is smaller than the 50px, take care of the following for the entities):
for each row you want to be 1 row height (the minimum defined above): use the min-height: xxpx;
for each row you want to be higher use the row_span: And… (important) set the row: [number] accordingly, that is for a row_span: 2, skip 1 row extra…

Hadn’t realized the latter. so all got compressed.

Up and running now, thanks!

mcfrojd · March 14, 2018, 11:39am

Do you have your code on github?

Bobby_Nobble · March 14, 2018, 5:21pm

Nope, anything in particular you wanted to see?

mcfrojd · March 14, 2018, 5:30pm

Mostly for inspiration, and im lazy, cut and paste of awesome peoples code is always easier…

Bobby_Nobble · March 14, 2018, 6:00pm

That’s how I get started with most of mine

I can’t do blank sheet coding but am quite adept at tweaking and repurposing what others have done.

Jer78 · March 14, 2018, 7:07pm

That’s the way to do it! @Bobby_Nobble

Mariusthvdb · March 15, 2018, 11:10am

new version of Tiles makes default minimum smaller (could take out the need for min-height: xxpx;if that new default is small enough in your setup)

Also, text below icon (label_sec) now changes color accordingly. Nice!

All options listed now on : https://github.com/c727/home-assistant-tiles