Custom UI: Tiles

sparkydave · April 15, 2018, 4:44am

I’m just trying to get this set up on my HassIO install but get the following error:

Testing configuration at /config
ERROR:homeassistant.util.yaml:while parsing a block mapping
in “/config/customize.yaml”, line 58, column 3
expected , but found ‘’
in “/config/customize.yaml”, line 61, column 5
Failed config
General Errors:
- Error loading /config/configuration.yaml: while parsing a block mapping
in “/config/customize.yaml”, line 58, column 3
expected , but found ‘’
in “/config/customize.yaml”, line 61, column 5
Successful config (partial)

The entry in the customize.yaml is straight from the git repo:

input_boolean.dummy_tiles:
  custom_ui_state_card: state-card-tiles
  config:
    {{ grid config }}
    entities:
      - entity: input_boolean.switch1
        {{ entity config }}

Can someone please help me get this working? I’m really looking forward to having these tiles work

EDIT: my bad… i didnt read the repo enough and now I realise I need to add in actual grid config data

sparkydave · April 15, 2018, 5:29am

So I went and copied the entire config from @eddi89 's repo and set it up as a package so I could play with it separately to learn the set up… it passed config check so I restarted HassIO to enable all the additions but now I get the following:

Two tiles tabs on the side.

The first one gives me a blank page:

and the second one gives me this:

I was expecting to get the custom tiles as per the git repo:

I guess I need to do some more playing around… any tips?

genik · April 15, 2018, 6:29pm

Hello!

I actually have the same trouble as sparkydave. Although Tiles are working in Home Assist (which is on Raspbian). But exactly the same configuration is not working on HASS.IO version 0.67.
Does anyone have suggestions?

sparkydave · April 15, 2018, 10:04pm

I tried logging in to HassIO on a different computer and the tiles showed up correctly… tried again on the original PC and all good. Must just have had an issue loading the page or something

mynameisdaniel · April 16, 2018, 2:17am

I haven’t been able to find a way to do this with style_template. I think the way this component works, is it applies the style_template to the attributes of the HTML tag where the primary label (and icon) lives (which also includes the background). Whereas label_sec gets its own tag of HTML attributes.

I’d raise it as a feature request / issue on github asking C727 to add a style_template_sec, or to change how style_template is applied (I have no idea how easy/hard either of those would be to do, or how open C727 would be to doing it).

Mariusthvdb · April 16, 2018, 7:22am

thanks for trying, will ask on the github and await @eddi89 's advice. It might be possible without alterations, and if not, ask if these can be made. Still, wouldnt this be possible with the label_sec_template or label_template already provided for? Testing this and see what happens:

entities:
  #Force switches
  - entity: script.audio_auditorium_on
    label_sec: 'Audio A'
    style_template: "if (entities['sensor.audio_auditorium_state'].state === 'on') return 'background-color: #F0C209; color: #555B65';
                      else return 'background-color: #555B65; color: #F0C209';"
    label_sec_template: "if (entities['sensor.audio_auditorium_state'].state === 'on') return 'color: #555B65';
                      else return ' color: #F0C209';"
    icon: mdi:music

fwiw: i’ve tested with label_sec_template and label_template with color: , text_color: and text_sec_color: unfortunately no result yet.

cheers,
Marius

eddi89 · April 16, 2018, 12:12pm

Here is the code, use css vars: https://github.com/c727/home-assistant-tiles/blob/master/www/custom_ui/state-card-tiles.html#L51

Mariusthvdb · April 16, 2018, 1:04pm

thanks @eddi89 for chiming in.

to be sure, are you saying to use the color: in a label_sec_template or label_template, or should we use the tiles-text-color in a style_template… or maybe even together, label_sec_template with tiles-text-color.

    label_template: "if (entities['sensor.multi_purpose_state'].state === 'on') return 'tiles-text-color: #555B65';
                      else return 'tiles-text-color: #F0C209';"

or:

        label_template: "if (entities['sensor.multi_purpose_state'].state === 'on') return 'color: #555B65';
                          else return 'color: #F0C209';"

or:

style_template: "if (entities['sensor.multi_purpose_state'].state === 'on') return 'tiles-text-color: #555B65';
                  else return 'tiles-text-color: #F0C209';"

so many possible combinations…

i have found this to be working for an icon_template:

icon_template: "if (entities['sensor.multi_purpose_state'].state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"

still no luck coloring the secondary text below the icon though…

Marc-Antoine_Seyer · April 17, 2018, 10:25am

Hmmm… does not work on my end.
Everything look to be set-up…
Does anyone has an idea ?

customize.yaml :

input_boolean.dummy_tiles:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 4
    row_height: 50px
    entities:
      - entity: input_boolean.switch1

Configuration :

frontend:
  extra_html_url:
    - /custom_ui/state-card-tiles.html
  extra_html_url_es5:
    - /custom_ui/state-card-tiles_es5.html

input_boolean:
  dummy_tiles:
  switch1:

Here what I have in the interface :

Here are my file :

genik · April 17, 2018, 6:28pm

Hi, @tomerbs!

I really like the way your remote looks like (including round buttons). Could you maybe share with me how have you done it?
Would really appreciate that.
Thanks.

Mariusthvdb · April 17, 2018, 6:50pm

Hi

I believe I’ve tried every option… including text_sec_color:

  - entity: script.tester_on
    label_sec: 'Tester on'
    style_template: "if (entities['sensor.tester_state'].state === 'on') return 'background-color: #F0C209;text_sec_color:#555B65; color: #555B65;';
                      else return 'background-color: #555B65; text_sec_color:#F0C209;color: #F0C209; text-decoration: line-through';"
    icon_template: "if (entities['sensor.tester_state'].state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"

  - entity: script.tester_off
    label_sec: 'Tester off'
    style_template: "if (entities['sensor.tester_state'].state === 'on') return 'background-color: #555B65;text_sec_color:#F0C209;color: #F0C209;';
                      else return 'background-color: #F0C209; text_sec_color:#555B65;color: #555B65;text-decoration: line-through';"
    icon_template: "if (entities['sensor.tester_state'].state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"

no colored text below the icon yet.

Could you please just tell me what the code should be? No matter what I try , which css var I use, there’s just no result … the template must be in correct form and syntax since the icon changes, the color: changes, and the line-through decoration all change according to the entity state. Don’t know what to try anymore.

Thanks in advance
Marius

tomerbs · April 19, 2018, 9:21am

Hi genik
Sorry for the late reply, please find below the code i use and the icons files:

input_text.dummy_tiles_master_remote:
custom_ui_state_card: state-card-tiles
config:
  columns: 5
  column_width:
  row_height: 65px
  gap: 3px
  color: marbel
  color_on: marbel
  color_off: marbel
  entities:
  - entity: input_boolean.remote_livingroom_harmony_poweroff
    style_template: "return 'background-image: url(\"/local/icons/activities/poweroff/' + state + '.png\");'"
    column: 1
    row: 1
  - entity: input_boolean.remote_livingroom_harmony_watch_tv
    style_template: "return 'background-image: url(\"/local/icons/activities/watch_tv/' + state + '.png\");'"
    column: 2
    row: 1
  - entity: input_boolean.remote_livingroom_harmony_movie_time
    style_template: "return 'background-image: url(\"/local/icons/activities/movie_time/' + state + '.png\");'"
    column: 3
    row: 1
  - entity: input_boolean.remote_livingroom_harmony_listen_to_music
    style_template: "return 'background-image: url(\"/local/icons/activities/listen_to_music/' + state + '.png\");'"
    column: 4
    row: 1
  - entity: input_boolean.remote_livingroom_harmony_playstation4
    style_template: "return 'background-image: url(\"/local/icons/activities/playstation4/' + state + '.png\");'"
    column: 5
    row: 1

and the icon files you can find in this link:
http://mycloud.bezeq.co.il/s/JWKnuDs0aJs/

Enjoy!

Norik_Krasniqi · April 19, 2018, 9:25am

Hey @Mariusthvdb can you let me know the code that you used on the plug icon (1st one) that has different height than the others?

Mariusthvdb · April 19, 2018, 10:36am

sure,
trick is to set a smaller minimum height for the small tiles, and use row_span: 2 for all the others:

input_text.tiles_lights:
  state_card_custom_ui_secondary: state-card-tiles
  config:
    columns: 3
    row_height: 25px
    text_uppercase: false
    text_size: 1em
    text_color_on: '#555B65'
    text_color_off: '#F0C209'
    color_on: '#F0C209'
    color_off: '#555B65'
    entities:
      #Lights
      - entity: input_text.tiles_lights_title
#            label: Lights
        text_color: '#F0C209'
        label_template: "if (entities['group.all_lights_only'].state === 'on') 
                             return 'Lights on'; else return 'All off';"
        style_template: "if (entities['group.all_lights_only'].state === 'on') 
                         return 'color: red; min-height: 25px;'; 
                         else return 'color: green; min-height: 25px';"
        color: "var(--paper-card-background-color)"
        color_on: "var(--paper-card-background-color)"
        color_off: "var(--paper-card-background-color)"
        column: 1
        row: 1
        row_span: 1
      - entity: group.all_lights_only
        icon_template: "if (state === 'on') return 'mdi:power-plug';
                        else return 'mdi:power-plug-off'"
        style_template: "return 'min-height: 25px;'"
        color_on: green
        color_off: red
        text_color_on: red
        text_color_off: green
        column: 3
        row: 1
        row_span: 1
      - entity: group.buffet_lights
        label: Buffet
        icon: mdi:pine-tree
        column: 1
        row: 2
        row_span: 2
      - entity: group.dining_table_lights
        label: Dining
        icon: mdi:silverware
        column: 2
        row: 2
        row_span: 2
      - entity: group.terrace_lights
        label: Terrace
        icon: mdi:nature
        column: 3
        row: 2
        row_span: 2
      - entity: group.auditorium_lights
        label: Auditorium
        icon: mdi:theater
        column: 1
        column_span: 2
        row: 4
        row_span: 2
      - entity: group.living_lights
        label: Living
        icon: mdi:seat-recline-extra
        column: 3
        row: 4
        row_span: 2

Mister-Espria · April 19, 2018, 8:29pm

I like the tiles very much! But i was trying if it works with the weblink component and no luck so far. I am trying to have some nice looking shortcuts to websites in the frontend.
When i add the entity: weblink.abc and click i see this error in the log: Unable to find service weblink/turn_on
So i think there need something to be changed in the files to not call turn_on but do something else. but i cannot figure out what
Or is there an easy way i am overlooking?

nicohirsch · April 19, 2018, 9:32pm

I don’t know if anybody used that before: With style_template you can show/hide Buttons based on conditions. I use that to show buttons when I’m away and replace them with other buttons when I’m home:

entities:
  - entity: switch.one
    label: Show me when home
    style_template: "if (entities['input_boolean.away'].state === 'on') return 'display:none;'"
  - entity: switch.two
    label: Show me when away
    style_template: "if (entities['input_boolean.away'].state === 'off') return 'display:none;'"

If I come home or go away these two buttons replace each other. Besides that, all buttons keep the same position.

Mariusthvdb · April 19, 2018, 10:11pm

yes, that s very nice indeed, and i need to use it for my Hue lights that can show On while in fact they are ‘unreachable’ because the power to them is switched off. Using this prevents me from accidentally switching them off…

  - entity: light.driveway
    label: Driveway
    icon: mdi:car
    column: 1
    column_span: 1
    row: 6
    row_span: 2
    style_template: "if (entities['binary_sensor.driveway_reachable'].state === 'off') return 'display:none';"

Mariusthvdb · April 20, 2018, 8:01am

was pointed to the '-- 'necessity by @eddi89 here: https://github.com/c727/home-assistant-tiles/issues/44#issuecomment-382911774 Thanks!

since these aren’t toggle-tiles the color-on/off option obviously is incorrect (which is why i have all these templates i the first place, and config-settings aren’t applicable).

turns out it wasn’t text-sec-color: but --text-sec-color: that was needed:

only too bad adding this extra template, frustrates the text-decoration: line-through, which was working perfectly.

  - entity: script.tester_on
    label_sec: 'Tester on'
    style_template: "if (entities['sensor.tester_state'].state === 'on') return 'background-color: #F0C209; --tiles-text-sec-color: #555B65; color: #555B65';
                      else return 'background-color: #555B65; --tiles-text-sec-color: #F0C209; color: #F0C209; text-decoration: line-through';"
    icon_template: "if (entities['sensor.tester_state'].state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"

not sure if this is an issue or not? do these templates have a max number of configurable options?

Mister-Espria · April 20, 2018, 9:59am

@eddi89 Wow, thank you so much for adding the weblink support so quickly!
It is working great!

hotmatter · April 24, 2018, 10:15pm

Any trick or way to control vertical-align?
now I’m using that code to show second state on bottom

        color_on: 'transparent'
        color_off: 'transparent'
        column: 1
        column_span: 3
        row: 6
        row_span: 4
        icon: mdi:map-marker
        icon_size: 80px
        text_color: 'transparent'
        text_sec_color: 'white'