Custom UI: Tiles

JesseWebDotCom · November 26, 2017, 11:37pm

@mviezzer - Your Github has been extremely helpful, thank you. I see in summary.py, you are able to change the picture of a badge (awesome!). How can I do the same for a specific tile? FWIW - My goal is to have a 4x4 tile grid where the first 2 columns are filled by one tile that I dynamically set the picture to (ex. a movie poster png) and the remaining tiles are buttons that control lighting.

mviezzer · November 28, 2017, 12:46am

Glad to help!
Can be done in a phyton script (tested and working):

hass.states.set('script.remote_control_moods', '', {

    'custom_ui_state_card': 'state-card-tiles',
    'config': { 'columns': 1, 'entities': [ { 'entity': 'script.kodi_cmd', 'label': 'test 1', 'image': "/local/profiles/developer.png", "column": 1 } ] }
})

But is not ideal, since you have send the entire config always. Maybe there is a way to setup only the require entity, but the below code do not work, and I didn’t dig enough:

state = hass.states.get('script.remote_control_moods')
state.attributes.config.entities[0].label = 'teste 2'

JesseWebDotCom · November 28, 2017, 2:50am

Thanks. With your example I can now read the value (ex. state.attributes[“config”][“entities”][0][“label”]) but I can’t change it (I’ll get the error: AttributeError: ‘collections.OrderedDict’ object has no attribute ‘guarded_setitem’)

mviezzer · November 28, 2017, 3:27am

It seems that the set property isn’t implemented

JesseWebDotCom · November 30, 2017, 1:15am

@mviezzer - I’m having a strange issue modeling your script to change an entity picture. While I did have it working at some point, it now seems to just flash change the picture (i.e. picture changes to what I want and then dissapears). I just built a new home assistant dev environment with a simple config and its still doing it. any ideas? My files attached (just rename status.py.yaml to status.py, put them in the appropriate locations, and change status.py to reflect a png image you have)configuration.yaml (709 Bytes)
status.py.yaml (173 Bytes)

mviezzer · December 1, 2017, 3:38am

Hi, indeed!
I noticied that if the sensor already exists (platform: template) this don’t work.
If you comment the living_room_status plataform template in yaml, it will work (not sure why this behavior).
The hass.states.set(…) will create the sensor, there is no need to previous (yaml) definition.
So in the start up the sensor not existis yet, you could call the script in a startup automation (homeassistant, event: start).

MrEd · December 2, 2017, 7:55am

Is any method to change button to show sensor value with icon or temp. value?

rawdps · December 3, 2017, 9:11am

I can’t seem to get it to show o.O
this is my code: https://hastebin.com/cefuqolono.coffeescript

anyone any ideas on where I made a mistake?

JesseWebDotCom · December 3, 2017, 3:54pm

@eddi89 @mviezzer - any way to change the background of an individual tile? “Custom UI Tiles” already has the ability to change on/off text color per entity; I’d like it to have the ability to change background color per entity (not just entire script/config). Thanks again and thanks in advance. This is so great.

mviezzer · December 4, 2017, 12:10am

No, not at the moment.

mviezzer · December 4, 2017, 12:14am

Yes, with modificantions in html…

github.com

maattdiy/home-assistant-config/blob/master/www/custom_ui/state-card-tiles.html#L85


    '--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)',
    '--tiles-text-color': config.text_color ? config.text_color : '#FFF',
    '--tiles-text-color-on': config.text_color_on ? config.text_color_on : '#FFF',
    '--tiles-text-color-off': config.text_color_off ? config.text_color_off : '#FFF',
  });
}

computeLabelState(hass, entity) {
  return hass.states[entity].state;
}

computeClass(hass, entity) {
  var domain = entity.entity.split('.')[0];
  if (domain === 'script') return '';
  return (hass.states[entity.entity].state === 'on') ? 'on' : 'off';
}

If you replace the line by:
var color = entity.color ? ’ background-color: ’ + entity.color + ‘;’ : ‘’;
it will show the color in backgound intead the text, but sure is best create another attribute like color_background.

JesseWebDotCom · December 5, 2017, 12:36am

FYI - Home Assistant 59.x completely breaks Custom UI Tiles

rhodges · December 5, 2017, 1:45am

Does it break it, or do you need to add a “extra_html_url_es5” entry for the extra files? I had a couple of personally created files that broke until I figured out they needed to be under es5 now.

JesseWebDotCom · December 5, 2017, 2:00am

I added the extra files after updating custom ui - it still broke.

JesseWebDotCom · December 5, 2017, 3:55am

Issue is probably related to: https://home-assistant.io/blog/2017/11/18/release-58/

“Note: For Custom UI users: your custom UI will need to be updated before it can work with the new version of the frontend.”

JesseWebDotCom · December 5, 2017, 4:03am

I can make custom ui tiles work again by adding:

frontend:
  javascript_version: latest

But custom ui only works by adding:

frontend:
  javascript_version: es5

JesseWebDotCom · December 5, 2017, 11:31pm

Solution that worked for me:

  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/state-card-tiles.html

  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html
    - /local/custom_ui/state-card-tiles.html

tomoqv · December 10, 2017, 8:44pm

It might be worth mentioning that many updates to the configuration of custom UI tiles aren’t visible until after clearing browser cache.

Also, I would like a list of available colors to use for color_on and color_off.

Thanks,
Tomas

tomoqv · December 10, 2017, 8:51pm

Aslo, just to understand. Input_text is just a placeholder for any entitities I wish to format as tiles?

tomoqv · December 11, 2017, 8:30am

Thanks, that’s very useful information!