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).
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.
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…?
eddi89
Any errors in development console of your browser?
Hi - many thanks for the assistance! I see these:
-
frontend-a11afc34fee98099d1a916297a146c46.html:57 paper-drawer-panel is deprecated. Please use app-layout instead!
-
ready @ frontend-a11afc34fee98099d1a916297a146c46.html:57
-
[Deprecation] Styling master document from stylesheets defined in HTML Imports is deprecated, and is planned to be removed in M65, around March 2018. Please refer to GitHub - TakayoshiKochi/deprecate-style-in-html-imports: Deprecating/Removing <style> application from HTML Imports for possible migration paths.
-
states:1 Uncaught (in promise) DOMException: Only secure origins are allowed (see: Prefer Secure Origins For Powerful New Features).
My Home Assistant UI is HTTP only - is that relevant? It’s running on a Synology NAS (Ubuntu)
I replaced the config file with the config file from Github (below). Added some bare basics. And this is what I see:
I can browse to http://host:port/local/custom_ui/state-card-tiles.html, so the files are all in correct place.
I would so love to get this working - what am I doing wrong arrrgh 
homeassistant:
# Name of the location where Home Assistant is running
name: Home
# Location required to calculate the time the sun rises and sets
latitude: -36.8
longitude: 174.7
# Impacts weather/sunrise data (altitude above sea level in meters)
elevation: 40
# metric for Metric, imperial for Imperial
unit_system: metric
# Pick yours from here: http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
time_zone: Pacific/Auckland
customize:
input_text.dummy_tiles:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 75px
row_height: 75px
entities:
- entity: input_boolean.switch1
label: S1
- entity: input_boolean.switch2
label: S2
column: 3
row_span: 3
- entity: script.switches_off
icon: mdi:power
column_span: 2
row_span: 2
- entity: script.press_button
label: ^
column: 2
row: 4
data: {value: top}
- entity: script.press_button
label: <
column: 1
row: 5
data: {value: left}
- entity: script.press_button
image: /local/ok.png
column: 2
row: 5
data: {value: ok}
- entity: script.press_button
label: ">"
column: 3
row: 5
data: {value: right}
- entity: script.press_button
label: v
column: 2
row: 6
data: {value: value}
frontend:
extra_html_url:
- /local/custom_ui/state-card-tiles.html
input_boolean:
switch1:
switch2:
script:
switches_off:
sequence:
service: input_boolean.turn_off
press_button:
sequence:
service: input_text.set_value
data:
entity_id: input_text.command
data_template:
value: "{{ value }}"
input_text:
command:
name: Button
dummy_tiles:
name: dummy
group:
g1:
name: Tiles showcase
entities:
- input_text.dummy_tiles
http:
# Secrets are defined in the file secrets.yaml
# api_password: !secret http_password
# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# base_url: example.duckdns.org:8123
api_password: ########That worked!! Thanks so much!
Maybe that should be added to the default git?
Edit: I just searched for “extra_html_url_es5” and I see that when I downloaded the git as zip, the docs directory was missing the extra instructions… wonder why? Strange… the info I needed was in there.
Edit2:
I see now - https://github.com/c727/home-assistant-tiles/tree/master/docs only has the png, and that is linked at the top of this thread.
https://github.com/andrey-git/home-assistant-custom-ui/tree/master/docs has the extra info needed for success.
Thanks again…!
1 Like
- entity: script.script_lq_living_voldown
icon: mdi:volume-minus
color: '#FF6633'
background-color: '#FF6633'
column: 2
row: 2
In my above entity code, the individual tile icon takes on the color attribute, but the background of the tile does not take the background-color attribute. What am I doing wrong?
background-color is not a valid parameter for the config. I’ve been trying to change the script to have it update the background instead of the icon. I’ve had no luck. My problem is I can’t see any updates after a cache clear. I wish there was a dev environment for this so we could adjust a buttons interactions in real time then just release it when it works. Very frustrating the way it is currently. Maybe that’s just the way html works.
I did read, and followed the thread. Clearing cache and refreshing the page did nothing when I was implementing my changes to the background color. I got it working, I had an character ( / ) at the end of a config setting. This didn’t cause any errors or warnings in HA, it just caused the config beyond that character to be ignored. So my statement stands, I wish there was a dev environment to implement changes to the HTML without having to deal with everything on the home assistant side. Thanks for your helpful comments though.
I also have everything aligned to left ,did you figure this out ?
The latest Chrome
Thanks for creating this epic state-card.
Is it possible to toggle the state of a group?
I tried using a group as the entity_id, but it did not work.
I think it has to do with the fact that the service group.toggle does not exist.
However, I believe that you can change the state of a group with light.toggle or homeassistant.toggle.
Would there be an easy fix to this?
Hi,
I just copy and past all config etc. from git other then
panel_custom:
- name: tiles
sidebar_title: Tiles
sidebar_icon: mdi:view-dashboard
url_path: tiles
config:
entities:
- entity: input_boolean.switch1
label: Switch 1
but tiles are not showing.
Please help me to get it working.
Thanks, I got it working, issue was on my end.
Thanks again
Hello, thank you very much eddi89 and all the people involved in the evolution of this great feature.
I have finally understood how to add button in my config, the buttons are showing fine in the dedicated card.
But when i add the group in an existing group/card the buttons are broken.
Do someone now where the problem is coming from?
Here is my code:
customize:
script.tv_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
row_height: 30px
column_width: 40px
gap: 15px
color: '#555B65'
color_on: '#D5D619'
color_off: '#BBBEC2'
entities:
- entity: script.tvmute
icon: mdi:volume-mute
column: 1
row: 1
- entity: script.tvvolumedown
icon: mdi:volume-medium
column: 2
row: 1
- entity: script.tvvolumeup
icon: mdi:volume-high
column: 3
row: 1
I don’t use this code in my config.yaml
customize_glob:
"*.*":
custom_ui_state_card: state-card-custom-ui
Thank you very much for the amazing work, this feature is the cherry on the cake.
Ok solved it. I was Dumb to use the group instead of the script. This code was wrong:
group:
tv_remote:
name: UHD TV
control: hidden
entities:
- input_boolean.tv_power_switch
- input_select.tv_input_select
- group.tv_remote
This code is good:
tv_remote:
name: UHD TV
control: hidden
entities:
- input_boolean.tv_power_switch
- input_select.tv_input_select
- script.tv_remote
Thank you.
I would like to display more than one ‘row’ but it doesn’t seems to work for me. Do someone know what i’m doing wrong?
customize:
script.harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
row_height: 75px
column_width: 62px
gap: 15px
color: '#555B65'
color_on: '#D5D619'
color_off: '#BBBEC2'
entities:
# Favorites
- entity: script.tvvolumeup
icon: mdi:menu
column: 1
row: 1
- entity: script.tvvolumeup
icon: mdi:arrow-up-bold
column: 2
row: 1
- entity: script.tvvolumeup
icon: mdi:volume-plus
column: 3
row: 1
- entity: switch.tvvolumeup
icon: mdi:arrow-left-bold
column: 1
row: 2
- entity: script.tvvolumeup
icon: mdi:check-circle
column: 2
row: 2
- entity: script.tvvolumeup
icon: mdi:arrow-right-bold
column: 3
row: 2
- entity: switch.tvvolumedown
icon: mdi:backup-restore
column: 1
row: 3
- entity: script.tvvolumeup
icon: mdi:arrow-down-bold
color: '#FF6633'
column: 2
row: 3
- entity: script.tvvolumeup
icon: mdi:volume-minus
column: 3
row: 3
group:
harmony_remote_button:
name: Harmony Remote button
entities:
- script.harmony_remote
script:
harmony_remote:
sequence:
I really don’t understand what i’m missing.
That looks right, have you done Ctrl+f5 since adding the new config?
Yes, I did. I’m using the same script for each buttons, otherwise my config is suppose to be fine. It’s strange.
