Custom UI: Tiles

maybe you should file an issue on the GitHub and ask for @eddi89 's assistance?

Rename the image files from image.jpeg to image1.jpeg. fixes iOS on next refresh.

Edit, obviously update the image name in the .yaml file to match its new name…

1 Like

… which indicates it is literally just a Safari cache problem

I believe it’s more than that because I’ve cleared cache and continued to experience the issue. I think it has more to do with the application local storage.

I’ve just tried to change an image again and cleared website data, even reinstalled the app and the image didn’t update until it was called something else. HTML5 application cache Is treated differently in iOS. Assuming the manifest is properly declared… it should be easy to add a option to dump cached assets or just do it automatically.

@arsaboo this is the equivalent from eddie

anyone else having Tiles showing only uppercase buttons on iPad app, here, both in Custom-panel and regular tiles, while allow text_uppercase is set to false?

input_text.tiles_switches:
  custom_ui_state_card: state-card-tiles
  config:
    columns: 4
    row_height: 50px
    color_on: '#F0C209'
    color_off: '#555B65'
    text_uppercase: false
    text_color_on: '#555B65'
    text_color_off: '#F0C209'
    text_size: 1em
    text_sec_size: 1em
    text_align: center
    icon_size: 24px
    entities:

I am having the same issue, I have cleared cache/uninstalled and reinstalled apps/rebooted phone/etc. and I am not seeing any tiles on the iOS app or iOS Safari. Started for me about a week ago and have tried everything.

I have raised a github issue here

https://github.com/c727/home-assistant-tiles/issues/40

If you can post your config including the script sequence would be helpful. TIA.

Did you find a resolution? I noticed the issue was closed?

Good day, Id like to combine the tiles with the default madia_player. Is it possible to force the tile card to expand to the media player size.

I’ve had luck by just defining how many columns I want and letting it take care of the size. It can make things difficult to properly size icons… but not to hard.

1 Like

@joshluster thank you. can you tell me what you selected here:
config:
columns: 3
column_width: 75px
row_height: 75px
gap: 15px

trying to get a separate tile to change its color (have no color set and use transparent icons to make them ‘float’, I am stuck …
since the tiles run scripts, theres no use for color_on and color_off, and i think i am forced to use the style template below, unfortunately is doesn’t work. :

entities:
          - entity: script.opstart_direct
            image: /local/activities/opstart75.png
            style_template: "if (entities['input_select.activity'].state === 'Opstart') return 'color: #F0C209';"

this is how the tiles show at the moment:

06

my goal is to have the Tile with the script that was selected have a colored background, so i can see which one was selected…
Ive asked on the Tiles Github, but no response or instruction so far.

Hope you can help,
Cheers,
Marius

Stupid mistake - I had copied and pasted the wrong thing into the frontend: section. Mine is now working

config:
columns: 4
row_height: 75px
gap: 0px
color: hsla(0, 0%, 98%, 0)
color_on: hsla(0, 0%, 98%, 0)
color_off: hsla(0, 0%, 98%, 0)
entities:
- entity: script.george_sonos
  image: /local/georgestrait1.png
  column: 1
  row: 1
  column_span: 2
  row_span: 2
- entity: script.brad_sonos
  image: /local/bradpaisly1.png
  column: 3
  row: 1
  column_span: 2
  row_span: 2
- entity: script.country_sonos
  image: /local/country90.png
  column: 1
  row: 3
  column_span: 2
  row_span: 2
- entity: script.garth_sonos
  image: /local/garth1.png
  column: 3
  row: 3
  column_span: 2
  row_span: 2

Can you post your corrected frontend: section. I still can’t get mine working.

My work-around to kind of do this, is to have template switches (or input_booleans linked to automations) that fire whatever you want them to.

Try using ‘background-color’ rather than just ‘color’ to change the tile colour, I thought ‘color’ just changed the primary text.

https://github.com/c727/home-assistant-tiles#entity-config

color is for non-toggle tiles.

what would your suggestion for a template switch look like when used for an input_select in my case? Im confused as it would not have a value on/off?

The style-template would be so very adequate … if one could get it to work that is :wink:

maybe i can create a binary sensor per input_select option and use the latest addition :https://github.com/c727/home-assistant-tiles#changelog or have the input_select also set an input_boolean for that option and use that? Im wondering if i wouldn’t create a loop here.

I was referring to color in CSS land sorry, not this component, give it a go such that the style template has a component that looks like this (this didn’t change secondary text color for me so I didn’t end up using it):

style_template: "if (state === 'on') return 'background-color: hsl(37, 96%, 48%); color: hsl(0, 0%, 98%)'"

I’m using an input select as part of mine as well. Mine uses the tiles Service command via the tiles component (against input_boolean entities which make up the tiles themselves). It looks something like this:

  - entity: input_boolean.tile_tablet_button_alarm_clock
    label_state: input_boolean.alarmclock_status
    label_sec: Alarm Clock
    text_sec_size: '0.7em'
    icon: mdi:alarm
    column_span: 3
    color: 'hsla(0, 0%, 98%, 0)'        #whitetransparent
    color_on: 'hsl(198, 97%, 48%)'      #blue
    color_off: 'hsla(0, 0%, 98%, 0)'    #whitetransparent
    text_color: 'hsl(0, 0%, 0%)'        #black
    text_color_on: 'hsl(0, 0%, 98%)'    #white
    text_color_off: 'hsl(0, 0%, 0%)'    #black
    service: input_select.select_option
    data:
      entity_id: input_select.tablet_panel_detail
      option: Alarm Clock

Then I have automations that run based on the input select value (hiding groups and controlling the button):

- alias: Tablet Alarm Clock Panel On
  trigger:
    platform: state
    entity_id: input_select.tablet_panel_detail
    to: "Alarm Clock"
  action:
  - service: group.set_visibility
    entity_id: group.tile_tablet_panel_alarm_clock
    data:
      visible: True
  - service: homeassistant.turn_on
    entity_id: input_boolean.tile_tablet_button_alarm_clock

- alias: Tablet Alarm Clock Panel Off
  trigger:
    platform: state
    entity_id: input_select.tablet_panel_detail
    from: "Alarm Clock"
  action:
  - service: group.set_visibility
    entity_id: group.tile_tablet_panel_alarm_clock
    data:
      visible: False
  - service: homeassistant.turn_off
    entity_id: input_boolean.tile_tablet_button_alarm_clock

EDIT: Ignore the over-assignment of colours in my customise bit, I’m doing some weird stuff with hiding and showing groups and found this was required to make sure the colour was correctly applied on each group visibility change.