Custom UI: Tiles

Thanks for keeping on with it - I’ve just rebuilt my whole UI using mostly your tiles now! One small ‘bug’ I’ve come across, when text overflows to a second row, it seems to lose its alignment. For example:

Normal display, note the centred text:
image

When text becomes too long for the line it turns to right aligned, i.e. when my weather description becomes longer (ignore the overlapping time, I had to squash things to reproduce it):
image

It was really happening this bug, I sent a correction to github. Your interface seems to be getting really cool!

Thanks for the fix, works perfectly in Chrome and Firefox, but I seem to be getting the same behaviour in Opera 57 on Windows.

Yeah I’m getting there, got a bit of a menu system going to display different cards on a wall mounted tablet. I’ll put up a demo once it’s finished. Just having some performance issues at the moment, after a few hours my tablet browser freezes up or crashes. I need to narrow down the cause, but don’t suspect it’s tiles doing it at this stage, and it may just be a Lovelace thing in general.

Another feature request I’ve come across that would be handy, is a separate service call for long-presses on tiles. Similar to this.

@rodrigodf - I would just like to say thank you very much for making a really great Tiles UI card for Lovelace. Both the built-in Entity Button card and the Custom Button card massively pale in comparison to the amazing work you are doing here. Thanks!

1 Like

@rodrigodf I’ve started to transition my non-lovelace Tiles config to your new one and I think I’ve found a bug with background colours.

It looks like the “background” colour section within “entities” doesn’t work when the entity is a group (on or off), as it defaults to a green/red colour.

title: Home
views:
  - title: Summary
    icon: mdi:home
    panel: false
    id: home
    cards:
      - type: custom:tiles-card
        card_settings:
          title: Summary
          columns: 3
          row_height: 50px
        entities:
          - entity: group.all_lights_main
            row: 1
            column: 1
            column_span: 3
            backgroud:
              value_on: yellow
              value_off: gray
            templates:
              label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"

image

However, if I set the “background” section within “global_settings”, it works as expected:

      - type: custom:tiles-card
        card_settings:
          title: Summary
          columns: 3
          row_height: 50px
        global_settings:
          background:
            value_on: yellow
            value_off: gray
        entities:
          - entity: group.all_lights_main
            row: 1
            column: 1
            column_span: 3
            templates:
              label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"

image
image

It all seems to work fine when I use an “input_boolean” entity:

        entities:
          - entity: group.all_lights_main
            row: 1
            column: 1
            column_span: 3
            backgroud:
              value: yellow
              value_on: yellow
              value_off: gray
            templates:
              label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
          - entity: input_boolean.window_is_open
            row: 2
            column: 1
            background:
              value_on: red
              value_off: '#00cc00' #light green
            templates:
              label: "return 'Windows: ' + entities['sensor.windows_open'].state;"
              icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
          - entity: input_boolean.door_is_open
            row: 2
            column: 2
            background:
              value_on: red
              value_off: '#00cc00' #light green
            templates:
              label: "return 'Doors: ' + entities['sensor.doors_open'].state;"
              icon: "if (state === 'on') return 'mdi:door-open'; else return 'mdi:door-closed'"

image


On another note, how would I make the text and icon appear on the same line please? It seemed to default to being on the same line in the original Tiles version:
image

Another example is as follows; original version:
image

new version:

image

Original Yaml:

          - entity: sensor.netatmo_outdoor1_temperature
            label: Outdoor
            label_sec_template: "return entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
            icon: mdi:thermometer
            # more_info: history_graph.gr1
            color: 'hsla(0, 0%, 98%, 0)'    #whitetransparent

New Yaml:

          - entity: sensor.netatmo_outdoor1_temperature
            row: 3
            column: 1
            background:
              value: 'hsla(0, 0%, 98%, 0)'
            label:
              color: black
              value: Outdoor
            templates:
              label_sec: "return entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
            icon:
              value: 'mdi:thermometer'
              color: black

Sorry, one more question, is there a way to make the text bold? I guess I need to use CSS styles, but not quite sure how. My lame attempt was to try the following, but it didn’t work.

style: "return '--tiles-font-weight: bold;'"

Thanks!

though I don’t use the latest version, (since it broke too many dedicated settings of my legacy tiles… reverted to version 1) my groups are colored like this: config wide settings under the config, entity overrides in the entity setting:

type: custom:tiles-card
legacy_config:
  row_height: 25px
  text_uppercase: false
  text_size: 1em
  text_color_on: '#555B65'
  text_color_off: '#F0C209'
  text_sec_color_on: '#555B65'
  color_on: '#F0C209'
  color_off: '#555B65'
#  icon_size: 25px works but is not necessary
  entities:
    - entity: group.all_lights_only
      label_template: >
        if (entities['sensor.lights_badge'].state !== 0) return 'Total lights on: ' + entities['sensor.lights_badge'].state;
        return 'No lights on';
      icon_template: >
        if (state === 'on') return 'mdi:power-plug';
        return 'mdi:power-plug-off';
      style_template: >
        if (state == 'on') return 'min-height: 25px;--tiles-icon-color: #555B65';
        return 'min-height: 25px;--tiles-icon-color:#5daf35';
      color_on: '#5daf35'
      text_color_off: 'green'
      column: 1
      column_span: 3
      row: 1
      row_span: 1

    - entity: group.all_hallway_lights
      label: All hallway and ambient lights
      icon_template: >
        if (state === 'on') return 'mdi:power-plug';
        return 'mdi:power-plug-off';
      style_template: >
        if (state == 'on') return 'min-height: 25px;--tiles-icon-color: #F0C209';
        return 'min-height: 25px;--tiles-icon-color:#5daf35';
      color_on: '#cf2525'
      text_color_on: '#f0c209'
      text_color_off: '#5daf35'
      column: 1
      column_span: 3
      row: 2
      row_span: 1

have a look here:

- entity: sensor.active_badge
#            label: Active
  icon_template: >
    if (state > 0 ) return 'mdi:checkbox-multiple-marked-circle-outline';
    return 'mdi:circle-outline';
  label_sec_template: >
    return 'Active: ' + state;
  style_template: >
    if (state > 0) return 'background-color: #f0c209;--tiles-icon-color:#555B65;--tiles-label-sec-color: #555B65;color: #555B65';
    return 'background-color: #555B65;--tiles-icon-color:#f0c209;--tiles-label-sec-color: #f0c209;color: #f0c209;text-decoration: line-through';
  more_info: sensor.active_badge

- entity: sensor.alarms_badge
  label_sec_template: return attributes.friendly_name;
  style_template: >
    if (attributes.unit_of_measurement === 'On') return 'background-color: #e20000;background-image: url(\"' + attributes.entity_picture + '\");--tiles-label-sec-color: #333;font-weight: bold';
    return 'background-color: #555B65;background-image: url(\"' + attributes.entity_picture + '\");--tiles-label-sec-color: #fff;font-weight: bold';
  more_info: sensor.alarms_badge

you mean like this:

see the code for the first question. using label and icon, or in my setting _template for both seems to do the trick. Unless of course the tile isn’t large enough (both wide or tall) to have them fit both.

other example:

- entity: light.laundry_ceiling
  label: Laundry
  label_sec_template: >
    if (state === 'unavailable') return 'n/a';
    if (state === 'off') return ' ';
    return Math.round(attributes.brightness / 2.55) + ' %';
  icon: mdi:ceiling-light
  style_template: >
    if (state === 'unavailable') return 
    'border: 1px dotted #D3D3D3;color:#D3D3D3;--tiles-icon-color:#D3D3D3;--tiles-label-sec-color: #D3D3D3;background-color:var(--paper-card-background-color)';
    return '--tiles-icon-color:#F0C209';
  color_on: '#1675C9'
#            color_off: '#c7c4bb'
  text_color_on: '#f0C209'
  text_sec_color_on: '#f0C209'
#            text_color_off: '#1675C9'
  column: 1
  row: 4
  row_span: 2

showing as:

see the issue with the Garden terrace in my configuration…

This is a feature I had previously thought of adding, but will probably require many modifications. I am currently involved in other projects and have no time at the moment, but I intend to add this feature in the future.

Thank you @jarrah , I’m glad you liked it!

I believe the mistake is happening because you wrote backgroud instead of background. Note that whenever any setting is entered incorrectly, it is ignored.

For the text and icon to appear on the same line you must use the orientation: attribute that accepts the vertical (default) and horizontal values. Note that when the orientation is vertical label will be in the top and label_sec will be in the bottom, when the orientation is horizontal label will be on the left and label_sec on the right, the icon will always be in the middle (if it exists).

Vertical (default):

- entity: light.light_1
  label: label
  label_sec: label_sec
  icon: mdi:power
  #orientation: vertical

orienta%C3%A7%C3%A3o1

Horizontal:

- entity: light.light_1
  label: label
  label_sec: label_sec
  icon: mdi:power
  orientation: horizontal

orienta%C3%A7%C3%A3o2

Another setting that can help you is align: that aligns all the content within the tile and accepts left, center and right values ​​for horizontal alignment and top, middle and bottom values for vertical alignment. You can use only one type of alignment or combine the two by separating them with a space, the default is align: ‘center middle’:

Orientation: horizontal - Align: ‘bottom center’

- entity: light.light_1
  label: label
  label_sec: label_sec
  icon: mdi:power
  orientation: horizontal
  align: 'bottom center'

align_bottm_center_h

Orientation: horizontal - Align: ‘top left’

- entity: light.light_1
  label: label
  label_sec: label_sec
  icon: mdi:power
  orientation: horizontal
  align: 'top left'

align_top_left_h

Orientation: vertical - Align: ‘top left’

- entity: light.light_1
  label: label
  label_sec: label_sec
  icon: mdi:power
  align: 'top left'

align_top_left_v

You can also use the padding attribute (for label, label_sec and icon) to place them in a specific position, as in the example below that I have aligned in “bottom center” and raised label_sec 130px:

Orientation: horizontal - Align: ‘bottom center’ - label_sec padding

- entity: light.light_1
  label: label
  label_sec: 
    value: label_sec
    padding: 0px 0px 130px 0px
  icon: mdi:power
  orientation: horizontal
  align: 'bottom center'

align_bottm_center_h_padding_60px

To make the text bold, you can use the style template in this way:

- entity: light.light_1
  label: label
  label_sec: label_sec
  icon: mdi:power
  templates:
    style: "return 'font-weight: bold;'"

Thank you @Mariusthvdb and @rodrigodf for your incredibly useful replies, I will be trying them out this evening.

oh dear, what a fool I am for missing the obvious spelling mistake, thank you for pointing that out. :blush:

@rodrigodf the screenshots and example yaml you’ve given in your reply to me and on previous posts have been very useful. If you have chance, would you mind including these on your GitHub page, perhaps in a “Question & Answer Examples” wiki page please? I’m the sort of person who is much better able to understand code if I can see the visual example alongside it, as you have done here. :slight_smile:

Just to help anyone new to this thread, here are the links to @rodrigodf’s excellent work!

1 Like

EDIT - found a simple solution using <br>: :slight_smile:

          - entity: sensor.netatmo_outdoor1_temperature
            row: 3
            column: 1
            orientation: horizontal
            background:
              value: 'hsla(0, 0%, 98%, 0)' #whitetransparent
            templates:
              label_sec: "return 'Outdoor:<br>' + entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
            icon:
              value: 'mdi:thermometer'

image


Having had a good read through your alignment examples, I suspect the following isn’t possible.

My old tiles config had the following layout:
image
using:

            label: Kitchen
            label_sec_template: "return entities['sensor.temperature_158d0001dfc938'].state + 'ºC'"
            icon: mdi:thermometer

You mentioned above that the icon will always be in the middle, which means label_sec is required to have the icon to the left, resulting in no options to have text below. I suspect this could be done using padding, but I’ll be viewing this on desktop and small screen so don’t want to have fixed positions.

Now to be honest, this is purely an aesthetics issue as I have no qualms using the following layout if it’ll be a pain to make the above example work. :slight_smile:
image
Thanks!

Thanks for your help, I’ve now been able to transition my summary page to LoveLace thanks to your excellent custom card @rodrigodf

In case it helps others, here is my summary page along with the yaml code:
image

resources:
  - url: /local/kiosk.js?v=1.1
    type: js

title: Home
views:
  - title: Summary
    icon: mdi:home
    panel: false
    path: kiosk
    cards:
      - type: custom:tiles-card
        card_settings:
          # title: Summary
          columns: 3
          row_height: 45px
        global_settings:
          align: 'center middle'
          orientation: horizontal
          label:
            color:
              value: white
          label_sec:
            color:
              value: white
          icon:
            color:
              value: white
        entities:
          - entity: group.all_lights_main
            row: 1
            column: 1
            column_span: 3
            background:
              value: yellow
              value_on: '#F0C209'
              value_off: '#555B65'
            templates:
              label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
              style: "return 'font-weight: bold;'"
          - entity: input_boolean.window_is_open
            row: 2
            column: 1
            background:
              value_on: red
              value_off: '#00cc00' #light green
            templates:
              label_sec: "return 'Windows: ' + entities['sensor.windows_open'].state;"
              style: "return 'font-weight: bold;'"
              icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
          - entity: input_boolean.door_is_open
            row: 2
            column: 2
            background:
              value_on: red
              value_off: '#00cc00' #light green
            templates:
              label_sec: "return 'Doors: ' + entities['sensor.doors_open'].state;"
              icon: "if (state === 'on') return 'mdi:door-open'; else return 'mdi:door-closed'"
              style: "return 'font-weight: bold;'"
          - entity: input_boolean.curtain_is_open #I don't have auto curtains yet, it's on my to-buy list!
            row: 2
            column: 3
            background:
              value_on: red
              value_off: '#00cc00' #light green
            label_sec:
              value: "Curtains: 0"
            templates:
              icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
              style: "return 'font-weight: bold;'"
          - entity: sensor.netatmo_outdoor1_temperature
            row: 3
            column: 1
            orientation: horizontal
            background:
              value: 'hsla(0, 0%, 98%, 0)'
            label_sec:
              color: black
            templates:
              label_sec: "return 'Outdoor<br>' + entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
            icon:
              value: 'mdi:thermometer'
              color: black
          - entity: sensor.dark_sky_apparent_temperature
            row: 3
            column: 2
            orientation: horizontal
            background:
              value: 'hsla(0, 0%, 98%, 0)'
            label_sec:
              color: black
            templates:
              label_sec: "return 'Feels Like<br>' + entities['sensor.dark_sky_apparent_temperature'].state + 'ºC'"
            icon:
              value: 'mdi:thermometer'
              color: black
          - entity: sensor.dark_sky_wind_speed
            row: 3
            column: 3
            orientation: horizontal
            background:
              value: 'hsla(0, 0%, 98%, 0)'
            label_sec:
              color: black
            templates:
              label_sec: "return 'Wind Speed<br>' + entities['sensor.dark_sky_wind_speed'].state + 'mph'"
            icon:
              value: 'mdi:thermometer'
              color: black
          - entity: sensor.dark_sky_minutely_summary
            row: 4
            column: 1
            column_span: 3
            background:
              value: 'hsla(0, 0%, 98%, 0)'
            label:
              color: black
            templates:
              label: "return entities['sensor.dark_sky_minutely_summary'].state"
          - entity: input_boolean.wearehome
            row: 5
            column: 1
            column_span: 2
            background:
              value_off: red
              value_on: '#00cc00' #light green
            templates:
              label: "if (state === 'on') return 'Home Mode'; else return 'Away Mode'"
              style: "return 'font-weight: bold;'"
              icon: "if (state === 'on') return 'mdi:home-account'; else return 'mdi:home'"
          - entity: input_boolean.doginout
            row: 5
            column: 3
            background:
              value_on: red
              value_off: '#00cc00' #light green
            icon:
              value: mdi:dog
            templates:
              label: "if (state === 'off') return 'Dog In'; else return 'Dog Out'"
              style: "return 'font-weight: bold;'"

Kiosk mode helps display this summary on my HyperPixel display which is next to the door, so that I can see the house status at a quick glance, as well as the weather outside.

Thanks!

1 Like

Is there any way to do lovelace page navigation with this card?

Agreed, it would be great if Tiles could utilise tap_action (along with action, navigation_path, etc), as documented in the built-in button card here: https://www.home-assistant.io/lovelace/entity-button/#configuration-variables

@rodrigodf how feasible would this be to implement out of interest please?

Anyone know if there is a way to make the text closer together on 2 lines of text?
Look at the bottom row of my radion player, I made the text smaller, but it still doesn’t look right to me, and if there was a way to make the 2 rows of text (ie. Kitchen & Portable) closer together.
I’ve tried using just label: and using label: and label_sec: and both, and every combination of align and padding I can think of.

tiles-card

1 Like

I am having trouble upgrading tiles on the latest version of Home Assistant. I am running 65.6 and tiles are working great. I have a test system running 85.1 but I am having trouble with icons and colors. I am using an input_text entity as the container and switch entities for the buttons.

  1. Where is the current documentation? https://github.com/c727/home-assistant-tiles is not correct.
  2. I am not running Lovelace.
  3. I have seen a Legacy option mentioned but don’t know what it is for or how to use it.
  4. My icons do not show when running ha 85.1.
  5. I can’t set the text color when running 85.1.

Thanks

Love the tiles! Now converting my custom buttons :slight_smile:.
A question though, can you use theme variables in the color settings?

          icon:
            color:
              value: "var(--paper-toggle-button-checked-button-color)"
            color:
              value_on: "var(--paper-toggle-button-checked-button-color)"
            color:
              value_off: lightgrey

This doesn’t seem to work.

I second that! Great how much can be configured :grinning:

That’s working here without problems. You have to use it like this.

icon:
  color:
    value: "var(--paper-toggle-button-checked-button-color)"
    value_on: "var(--paper-toggle-button-checked-button-color)"
    value_off: lightgrey
1 Like

Thanks for the example. It works! Brilliant!

@rodrigodf Do you know if it would be possible to implement varying button widths so that they aren’t set by rigid columns please, e.g.

Perhaps if only a row number was specified (as shown below), it could work out how to spread the buttons evenly over the card width. As it stands, it currently looks like this:

        entities:
          - entity: binary_sensor.door_window_sensor_158d0001e44f03
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001b1456a
            row: 1
          - entity: binary_sensor.door_kitchen_rear_contact
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001ab73f7
            row: 2
          - entity: binary_sensor.door_window_sensor_158d0001dad5e6
            row: 2


Thanks in advance!

I’ve figured out a workaround to my question above by using a combination of templates, display, gap, and padding! Hope this helps others too.

image

  - title: test
    icon: mdi:run
    panel: false
    path: test
    cards:
      - type: custom:tiles-card
        card_settings:
          title: test
          gap: 10px
          padding: 0px
          columns: 5
          row_height: 45px
          templates:
            style: "return 'box-shadow: 0px 0px;'"
        entities:
          - entity: binary_sensor.door_window_sensor_158d0001e44f03
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001b1456a
            row: 1
          - entity: binary_sensor.door_kitchen_rear_contact
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001e44f03
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001b1456a
            row: 1
      - type: custom:tiles-card
        card_settings:
          display: hidden
          gap: 10px
          padding: 0px
          columns: 3
          row_height: 45px
        entities:
          - entity: binary_sensor.door_window_sensor_158d0001e44f03
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001b1456a
            row: 1
          - entity: binary_sensor.door_kitchen_rear_contact
            row: 1
      - type: custom:tiles-card
        card_settings:
          display: hidden
          gap: 10px
          padding: 0px
          columns: 2
          row_height: 45px
        entities:
          - entity: binary_sensor.door_window_sensor_158d0001e44f03
            row: 1
          - entity: binary_sensor.door_window_sensor_158d0001b1456a
            row: 1
1 Like