Custom UI: Tiles

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!

JesseWebDotCom · December 11, 2017, 11:10pm

@mviezzer - I downloaded your GitHub config and modified for my needs. I can’t seem to get background colors to change when an entity is on, off, or unknown. It just looks like this:

Any thoughts?

mcfrojd · December 17, 2017, 5:01pm

Do i have to do anything more to get this to work when i use a .png image in my tile?

MrEd · December 19, 2017, 1:07pm

Ok but you have special version of .html files for latest version and es5 version?

I have big problem on my iphone 6s with ios 11 and my wife iphone 5 with 10.3.3
When i have latest in frontend i have tiles visible but my wife can’t see anything. States not loaded.
When i change to es5 or auto, tiles section is empty but states load on booth phone.

PS. Sorry for my english

mviezzer · December 19, 2017, 11:46pm

I didn’t have this exactly problem, but all similar problems that I had was cache or JS error (while editing html). Try in the incognito mode and check chrome inspector (paper-button style).

mviezzer · December 20, 2017, 3:58am

You only need set the image: /local/x.png and have the file in the www folder. Check the chorme inspector to see any hint (like file not found).

mcfrojd · December 20, 2017, 9:55am

My question was about getting the tiles to auto expand on the width when there is a .png inside.
(@jamesdawson3 sollution)
Somehow that won’t work for me.

MattP · January 3, 2018, 9:03am

Maybe someone can explain what I’m doing wrong - I’ve been trying to get the default code to display properly, but the “Tiles Showcase” box is empty, and I have separate boxes for Script, Input Text, and Input Boolean. I’ve tried substituting in a valid entity into the config to no change.

I thought I’d followed the config to the letter, so I’m pretty confused…?