Custom UI: Tiles

Only if you change the config

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

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

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

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?

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

@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.

Glad to help! :ok_hand:
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: :thinking:

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

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’)

It seems that the set property isn’t implemented :confused:

@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)

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).

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

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?

@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.

No, not at the moment.

Yes, with modificantions in html…


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.

1 Like

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

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.

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