Yeah I was hoping that would too. I think a PR is necessary to add an image_template.
Ah thanks, I knew I’d be missing something daft!
I am stuck here too. Here is my customize. I use google chrome.
input_text.tiles_harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 75px
row_height: 75px
entities:
- entity: script.tvmenu
icon: mdi:menu
column: 1
row: 1
…
With the latest home assistant update I’m getting these pop ups whenever I click on any tile. Anyone know how to get rid of them?
1 Like
Same here, only on the iphone app i am not getting it on Firefox.
So, first of all… I really like this project.
I’ve seen a lot of configurations and examples and I currently have an issue with adding a switch as a tile. Now, I’ve read on the forums that this exact example works for someone else (see other topic where @azgooon ‘finally got it to work’ as he says), it just doesn’t work for me.
This is the configuration for the switch that I want to use. Before this I haven’t used any switches, so this is the first one. Not sure if this is correct, but the config is valid.
- platform: template
switches:
tv_template:
friendly_name: TV power switch
value_template: "{{ is_state('media_player.tv', 'on') }}"
turn_on:
service: media_player.turn_on
data:
entity_id: media_player.tv
turn_off:
service: media_player.turn_off
data:
entity_id: media_player.tv
This configuration is located in config/switches/tv.yaml and in my configuration.yaml I have the following:
switch: !include_dir_merge_named config/switches
So far, so good or at least I think it is. Now the following is the configuration for the UI tiles:
input_text.remote_control:
custom_ui_state_card: state-card-tiles
config:
columns: 4
row_height: 50px
column_width: 50px
gap: 4px
entities:
- entity: switch.tv_template
icon: mdi:power
column: 1
row: 1
- entity: script.tv_mute
icon: mdi:volume-off
column: 2
row: 1
- entity: script.tv_volume_down
icon: mdi:volume-medium
column: 3
row: 1
- entity: script.tv_volume_up
icon: mdi:volume-high
column: 4
row: 1
input_text:
remote_control:
name: Control panel
The above does not work, but when I remove the switch.tv_template entity (below) from the above list, the other tiles immediately show up in the frontend:
- entity: switch.tv_template
icon: mdi:power
column: 1
row: 1
I noticed in the web developer console that I got a JS error:
Uncaught TypeError: Cannot read property 'state' of undefined
at HTMLElement.computeClass (state-card-tiles.html:162)
at f (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at Function._evaluateBinding (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at Object.d [as fn] (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at a (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at e (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at a._propagatePropertyChanges (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at a._propertiesChanged (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at a._flushProperties (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
at a.ready (frontend-c873dc80aa0057847f22bcf3fff98f57.html:1)
Line 162 of state-card-tiles.html:
return window.hassUtil.OFF_STATES.includes(hass.states[entity.entity].state) ? 'off' : 'on';
So, it seems that hass.states[entity.entity] is undefined. I’m guessing that entity.entity refers to switch.tv_template. I tried looking up the entity on the /dev-state page, but it isn’t listed in the table of entities. I’m not sure whether it should be there or not, since I haven’t used a switch before.
Can anyone help me out here? Why isn’t this working?
Is it me or have a load of @eddi89 posts gone missing in this thread? There are replies to his posts that are no longer there that sound like they were useful to help understand Tiles better…
Yeah, all his replies from another thread have disappeared too, not sure what’s happening.
I have Tiles working but I’m trying to configure it so that a single tile can turn off all lights in a room, and in particular have the tile colour change at the same time based on it’s on/off state. Trouble is the lights are made up of switch and light entities - switches for floor standing lamps with non-standard bulbs, and Philips Hue light bulbs.
At the moment it works by combining the items into script.study_lights as seen below, but the problem is the tile just stays the same colour.
homeassistant:
customize:
script.remote_control:
custom_ui_state_card: state-card-tiles
config:
columns: 7
row_height: 75px
column_width: 62px
gap: 15px
color: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Lights
- entity: script.study_lights
label: Study
icon: mdi:school
column: 1
row: 1
script:
study_lights:
sequence:
- service: switch.toggle
entity_id: switch.tplink_sw4
- service: light.toggle
entity_id: light.study_desk_lamp
remote_control:
sequence:
group:
remote_control:
name: Control Panel
entities:
- script.remote_control
Looking through this thread I see some suggestions on using a switch template, but I don’t think you can combine light and switch entities at the same time (or at least my attempts have been failing for one reason or another).
@simbesh your solution here seems to be what I need (but with just the single Room on/off button), but I guess your switch template only has light entities? Could you share your yaml anyway, both the switch template and tile layout please as I’d like to see how it’s been implemented.
Thanks.
Scripts just run, they don’t have an on and off state. Simplest would probably be put everything into a group and then create a switch template to turn it on and off as you can’t toggle groups directly, then make the template your tile. Using homeassistant.turn_on and homeassistant.turn_off should get around mixing lights and switches.
I cannot get more than 1 row in the custom tiles. The scripts are present and activate when I click on activate in the scripts section. I have updated to the latest files from yesterday.
Here is my config:
input_text.tiles_harmony_remote:
custom_ui_state_card: state-card-tiles
config:
columns: 3
column_width: 75px
row_height: 75px
entities:
- entity: script.tvmenu
icon: mdi:menu
column: 1
row: 1
… - entity: script.tvvolumedown
icon: mdi:volume-minus
column: 3
row: 3
Great suggestion putting a group into a switch template, thank you!
Any one else getting this strange behavior?
Did it end up working for you as @Bobby_Nobble suggested? I was actually trying to do somewhat of the same thing, except I’m try to use my TV as the source, see my previous post.
For some reason I can’t get the template switch to show up in the frontend. It even gives an error.
Yeah, it works a treat, here is my initial test controlpanel.yaml file in /home/homeassistant/.homeassistant/packages/
homeassistant:
customize:
script.remote_control:
custom_ui_state_card: state-card-tiles
config:
columns: 7
row_height: 75px
column_width: 62px
gap: 15px
color: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Lights
- entity: switch.study_lights
label: Study
icon: mdi:school
column: 1
row: 1
script:
remote_control:
sequence:
group:
remote_control:
name: Control Panel
entities:
- script.remote_control
study_lamps:
name: Study Lamps
entities:
- light.study_desk_lamp
- switch.tplink_sw4
switch:
- platform: template
switches:
study_lights:
value_template: "{{ is_state('group.study_lamps', 'on') }}"
turn_on:
service: homeassistant.turn_on
data:
entity_id: group.study_lamps
turn_off:
service: homeassistant.turn_off
data:
entity_id: group.study_lamps
My configuration.yaml has the following:
homeassistant:
name: Home
latitude: !secret homeassistant_latitude
longitude: !secret homeassistant_longitude
elevation: !secret homeassistant_elevation
unit_system: metric
time_zone: !secret homeassistant_timezone
customize: !include customize.yaml
packages: !include_dir_named packages/
frontend:
extra_html_url:
- /local/custom_ui/state-card-tiles.html
extra_html_url_es5:
- /local/custom_ui/state-card-tiles_es5.html
I also make - group.remote_control visible to show the tile card (configured within groups.yaml)
@thmry your switch template looks ok. Check to see if media_player.tv and switch.tv_template appears on the “states” page within developer tools.
1 Like
Yes that’s happening on mine too (Safari) - this pops up on each button press:
Thanks for reminding me to check the ‘states’ page. In my previous comment I even posted that it wasn’t showing up on that page. I should have realized that it had something to do with loading in the switch config file, since I’m using a split configuration.
This is literally what I posted before:
- platform: template switches: tv_template: friendly_name: TV power switch value_template: "{{ is_state('media_player.tv', 'on') }}" turn_on: service: media_player.turn_on data: entity_id: media_player.tv turn_off: service: media_player.turn_off data: entity_id: media_player.tvThis configuration is located in
config/switches/tv.yamland in myconfiguration.yamlI have the following:
switch: !include_dir_merge_named config/switchesSo far, so good or at least I think it is.
Well, turns out it wasn’t ‘so far, so good’. I’m was using !include_dir_merge_named (as you can see in there), but the file (config/switches/tv.yaml) that I’m including has a list, so instead of using that, I actually should have used !include_dir_merge_list.
I just did and it finally showed up :).
Newbie question: how are colours defined? e.g. text_color: "#FFF"
I’m used to seeing three hexadecimal 0-255 values for red, green and blue components, e.g. #FF0080.
Sorry I probably wasn’t clear. I’m familiar with the usual RGB hex formal but the text colour in this panel is only defined using three hex digits, not the usual 6:
text_color: "#FFF"What gives?
/edit, never mind. I’m guessing they are just place holders in the config not actual values.