jarrah
March 8, 2018, 5:05pm
199
edit the problem with my code below is due to a typo, it should be row_span not row-span
I’ve tried row_span but something went wrong… The row spans and row numbers look like they should work but there must be something I’m missing? (I’m trying to make kitchen with a bulb a half height strip)
homeassistant:
customize:
input_text.lights:
custom_ui_state_card: state-card-tiles
config:
columns: 3
# row_height: 75px
row_height: 35px
# column_width: 75px
gap: 15px
color: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Lights
- entity: group.lounge_lights
label: Lounge
icon: mdi:ceiling-light
column: 1
row: 1
row-span: 2
- entity: group.lounge_lamps
label: Lounge
icon: mdi:lamp
column: 2
row: 1
row-span: 2
- entity: group.study_lamps
label: Study
icon: mdi:school
column: 3
row: 1
row-span: 2
- entity: group.kitchen_lights_all
label: Kitchen
icon: mdi:lightbulb
column_span: 3
row: 3
- entity: light.kitchen
label: Kitchen
icon: mdi:door
column: 1
row: 4
row-span: 2
- entity: light.kitchen_main_led
label: Kitchen
icon: mdi:led-strip
column: 2
row: 4
row-span: 2
- entity: group.kitchen_spots
label: Kitchen
icon: mdi:spotlight-beam
column: 3
row: 4
row-span: 2
- entity: group.hall_lights
label: Hall
icon: mdi:ceiling-light
column: 1
row: 6
- entity: group.landing_lights
label: Landing
icon: mdi:ceiling-light
column: 2
row: 6
row-span: 2
Any way to hide a tile according to state?
I tried adding…
templates:
hidden: "return (state === 'off' );"
to the tile code itself and also the entity’s own customize entry but no joy, no errors, button still there regardless
jarrah
March 8, 2018, 9:28pm
202
It was a good suggestion, but unfortunately it didn’t help. I did spot I was missing a row-span: 2 on group.hall_lights but still the same issue.
Just to check, did you mean row-span: 1 on group.kitchen_lights_all? If not I also tried setting exiting row_span: 2 to 1.
I did yes, that’s all I have different for my half height told. Have you tried removing the big gap by making it row 2 to see what happens?
To get rid of this, just clear your browser cache (on the iPhone - settings | safari | clear history and website data)
jarrah
March 9, 2018, 5:43pm
206
A typo got the better of me - I was using row-span instead of row_span! doh!
1 Like
simbesh:
turns out using group.xxxx doesnt work (must be a limitation where only switch.turn_on/light.turn_on are called, whereas groups need homeassistant.turn_on)
had to make a switch template and use that for the master “room” switch
Hi @simbesh
have read this thread for 3 times now, but just cant find the code to your Master group, and the Room switch you’re showing here.
Please would you care to share ?
Thanks,
I have this same problem. I cannot get row 2 and row 3, just row 1 appears. I have tried adding row_span, deleting cache, resetting the browser, creating a panel, nothing has worked.
The scripts for each of the button works in the script section when I press activate.
I have worked on this for 2 weeks with no solution. My install is latest hass.io and custom ui updated as well.
Here is my config:input_text.tiles_harmony_remote:#555B65 ’#D5D619 ’#BBBEC2 ’
jarrah
March 10, 2018, 6:54am
209
No need to use a room template switch, just use a group. See my code example above. Custom UI: Tiles
The group would have all the entities required for a master switch, and other tiles would have those entities individually.
jarrah
March 10, 2018, 6:58am
210
Sorry my fault, my code that you used had a typo, it should be row_span.
Also code pasting tip, use three back ticks above and below your code to properly format it in the post.
Sure, Thx. Know and use that;-) just liked the setup very much and would have hoped for a code-share…
Romquenin
March 10, 2018, 3:48pm
212
Hello, they finally appear after many hassio reboot and empty cache. Hope you will solve it soon.
Thanks tried that. Have rebooted and emptied cache over 20 times, tried different os and web browsers - same results. So its got to be my configuration on hassio. I can get the tiles to move to different rows or columns but no more than 3 icons are visible at a time. I am trying to replicate your setup.
Romquenin
March 11, 2018, 1:02pm
214
I will be back home tomorrow in the evening, will post my config for you.
jarrah
March 11, 2018, 9:41pm
215
Thanks to eddi89 over on GitHub, he’s helped explain how to create a smaller height tile and how to have lowercase text.
First thing to note is that the minimum tile size is 50x50px, and this is why I was struggling to make a smaller tile in my earlier posts. To get around this you use style_template:
Lowercase text: style_template: "return 'text-transform: none;';"
Smaller tile height: style_template: "return 'min-height: 25px;';"
Combined: style_template: "return 'text-transform: none; min-height: 25px;';"
All together this is how my tiles now look, with the code for this below. Hope it helps others!
homeassistant:
customize:
input_text.lights:
custom_ui_state_card: state-card-tiles
config:
columns: 3
row_height: 25px
# column_width: 75px
gap: 10px
text_size: 1em
color: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Lights
- entity: group.lounge_lights
label: Lounge
icon: mdi:ceiling-light
column: 1
row: 1
row_span: 2
- entity: group.lounge_lamps
label: Lounge
icon: mdi:lamp
column: 2
row: 1
row_span: 2
- entity: group.study_lamps
label: Study
icon: mdi:school
column: 3
row: 1
row_span: 2
- entity: group.kitchen_lights_all
label: Kitchen All
style_template: "return 'text-transform: none; min-height: 25px;';"
icon: mdi:power
column_span: 3
row: 3
- entity: light.kitchen
label: Kitchen
icon: mdi:door
column: 1
row: 4
row_span: 2
- entity: light.kitchen_main_led
label: Kitchen
icon: mdi:led-strip
column: 2
row: 4
row_span: 2
- entity: group.kitchen_spots
label: Kitchen
icon: mdi:spotlight-beam
column: 3
row: 4
row_span: 2
- entity: group.hall_lights
label: Hall
icon: mdi:ceiling-light
column: 1
row: 6
row_span: 2
- entity: group.landing_lights
label: Landing
icon: mdi:ceiling-light
column: 2
row: 6
row_span: 2
- entity: light.bed_two
label: Bed2
icon: mdi:ceiling-light
column: 1
row: 8
style_template: "return 'text-transform: none; min-height: 25px;';"
- entity: light.bedside2
label: Bed2
icon: mdi:lamp
column: 2
row: 8
style_template: "return 'text-transform: none; min-height: 25px;';"
- entity: switch.bed_two_floor_light
label: Bed2
icon: mdi:power-plug
column: 3
row: 8
style_template: "return 'text-transform: none; min-height: 25px;';"
- entity: light.bed_three
label: Bed3
icon: mdi:ceiling-light
column: 1
row: 9
style_template: "return 'text-transform: none; min-height: 25px;';"
- entity: light.bedside3
label: Bed3
icon: mdi:lamp
column: 2
row: 9
style_template: "return 'text-transform: none; min-height: 25px;';"
- entity: switch.bed_three_floor_light
label: Bed3
icon: mdi:power-plug
column: 3
row: 9
style_template: "return 'text-transform: none; min-height: 25px;';"
3 Likes
arsaboo
March 11, 2018, 10:22pm
216
Can we use this for just informational entities (where there is no action involved)? I have a bunch of entities for the stock market futures.
Instead of taking up all the space, I was wondering if I can display them as tiles with color depending on whether the change is positive of not.
2 Likes
jarrah
March 11, 2018, 10:23pm
217
Useful update (thanks again eddi89).
My screenshot in the previous post has text either next to the icon or below, depending on text length.
To ensure text is below the icons, use label_sec:
3 Likes
jaburges
March 12, 2018, 2:46am
218
awesome, this def helped me- thanks for sharing!
did label_sec work (i cant seem to get the text under the icon)
jarrah
March 12, 2018, 8:05am
219
Yep, here is my code (just need to make sure tile size is large enough)
- entity: group.lounge_lights
label_sec: Lounge
icon: mdi:ceiling-light
column: 1
row: 1
row_span: 2
1 Like
