Custom UI: Tiles

Share your Projects! Dashboards & Frontend
41

yes try to put that

42

1600×900 151 KB

1600×900 147 KB

43

i use your configuration and this is how is showing up on my
is this what you want to do

tiles
tiles750×1334 43.6 KB

44

i dont understand why not shows me. if you use HASS.IO too, that is no problem.

45

yes i’m using hass.io is your script working by itself try using another entity like a light or switch.

input_text.dummy_tiles:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 3
    column_width: 75px
    row_height: 75px
    entities:
      - entity: light.mi_cuarto_1
        image: /local/ok.png
        column: 2
        row: 5
        data: {value: ok}

by the way i’m not an expert on this

46

yes, i going to try it

47

nop… doesn´t work :frowning_face: if you have GitHub give the link pls

48

When we make modifications to the script, do we have to restart the home assistant service?

49 
input_text.dummy_tiles:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 4
    column_width: 75px
    row_height: 75px
    entities:
    - entity: input_boolean.switch1
      icon: mdi:lightbulb
    - entity: input_boolean.switch2
      icon: mdi:lightbulb
      column: 2
      row: 1
    - entity: input_boolean.switch1
      icon: mdi:ceiling-light
      column: 3
      row: 1
    - entity: input_boolean.switch2
      icon: mdi:ceiling-light
      column: 4
      row: 1
    - entity: switch.bosinas
      icon: mdi:volume-high
      column: 1
      row: 2
    - entity: switch.cafetera
      icon: mdi:kettle
      column: 2
      row: 2
    - entity: light.arilux_lc0x_rgb_led_controller_0stateoffbrightness85white_value0colorr208g52b0
      icon: mdi:led-strip
      column: 3
      row: 2
    - entity: light.sn1_led
      icon: mdi:led-off
      column: 4
      row: 2
    - entity: switch.vizio_switch
      icon: mdi:television-classic
      column: 1
      row: 3
    - entity: switch.bar_switch
      icon: mdi:surround-sound
      column: 2
      row: 3
    - entity: switch.netflex
      icon: mdi:netflix
      column: 3
      row: 3
    - entity: switch.fuente
      icon: mdi:water-pump
      column: 4
      row: 3
    - entity: script.example_script
      label: sistem test
      column: 1
      row: 4
      data:
        value: top
    - entity: script.example_script3
      label: alarm
      column: 2
      row: 4
      data:
        value: left
    - entity: script.example_script2
      image: /local/ok.png
      column: 3
      row: 4
      data:
        value: ok
    - entity: script.rain_radar_push
      label: sample
      column: 4
      row: 4
      data:
        value: right
group:
  g1:
    name: Tiles showcase
    entities:
      - input_text.dummy_tiles 

input_text:
  command:
    name: Button
  dummy_tiles:
    name: dummy

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-tiles.html

this is my set up i hope it helps

50

Thank you @Kem the problem is solved was the google chrome cache I needed to clean it. Now its working. Thanks for all patience.

51

Hi All - this is amazing, fantastic work! A couple of questions as I work on adding this to my setup:

  1. The text on my tiles is left-justified, but I see that it’s centered in all of the examples. Did I accidentally change something?

  2. Is there a way to use templating to display state values of sensors? I have some temperature sensors that I could love to display as a label, but I’m getting an error when trying.
    label: {{ states.sensor.living_room_temperature.state }}

Thanks!

52

i think it is not implanted yet.

53

Anyone else using this on a tablet? In the “Fully Kiosk” app I use for my wall panel, the tiles display but they are not the correct sizes.

54

When we make modifications to the script, do we have to restart the home assistant service?

55

Only if you change the config

56

@eddi89 how i can add texto and icon inside on the same button?

57

When I changed the customization file i.e. words on buttons for example “s1” to “office lights” - I don’t see the change until I reboot. Same applies for any change really

59

Than you changed the config! So you must restart Home Assistant. It’s not neccessary to reboot the host.

60

Guys, awesome idea. I have implemented but I have only one issue.

The big space between rows is too big. Isn’t there a way to have the same gap as the width between columns?

56
56946×616 7.92 KB

61

Really liking this so far. I just have one suggested change to state-card-tiles.html:

Add a min-width property to paper-button:

  paper-button {          
    box-shadow: none !important;
    margin: 0 !important;
    background-color: var(--tiles-color);
    color: #fff;
    min-width: 10px; 
  }

Then, instead of defaulting to 100px for column width, change it to 1fr:

ready: function () {
  var config = this.config;
  this.updateStyles({
    '--tiles-columns': config.columns ? config.columns : '3',
    '--tiles-column-width': config.column_width ? config.column_width : '1fr',
    '--tiles-row-height': config.row_height ? config.row_height : '100px',
    '--tiles-gap': config.gap ? config.gap : '4px',
    '--tiles-color': config.color ? config.color : 'var(--primary-color)',
    '--tiles-color-on': config.color_on ? config.color_on : 'var(--google-green-500)',
    '--tiles-color-off': config.color_off ? config.color_off : 'var(--google-red-500)',
  });
},

The result of these two changes will auto fill to the container width if column width is not specified, which I think should be the default behavior:

image
nicely auto expands to this
image

6 Likes