arsaboo
(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
(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
(jamieB)
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
(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
Just updated so I can use the label_sec and now having the same overlapping rubbish you were getting, guess we take it that row_span: 1 is broken and have to use the style_template: “return ‘min-height: XXpx;’;” bodge to fix it?
jarrah
(jarrah)
March 12, 2018, 9:41pm
221
Yeah seems like it - by default the smallest tile size is 50x50 so have to use style_template to override it now.
1 Like
Yay, finally got the device tracker I was really after…
Images go colour when home, fades to grey when not. Each person has code set up as below…
- entity: device_tracker.dadsn5x
row_span: 2
column_span: 1
style_template: "return 'background-image: url(\"/local/dad/' + state + '.png\");'"
…and their own named folder in www with a colour image called ‘home.png’ and a grey one called ‘not_home.png’.
20 Likes
Jer78
(Jeremy Percival)
March 13, 2018, 12:06pm
223
@Bobby_Nobble that’s really cool! Thanks for sharing.
not sure whats happening in the backend, but all of a sudden my Tiles lights setup has changed from:
into:
No matter what i try to change in the config…
anyone else experiencing this?
config:
input_text.tiles_lights:
state_card_custom_ui_secondary: state-card-tiles
config:
columns: 3
row_height: 45px
gap: 18 px
text_size: 1em
color: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Lights
- entity: group.all_lights_only
# label: All
style_template: "return 'text-transform: none; min-height: 20px;';"
icon_template: "if (state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"
color_on: green
color_off: red
column: 3
row: 1
row_span: 1
- entity: group.buffet_lights
label: Buffet
style_template: "return 'text-transform: none;';"
icon: mdi:pine-tree
column: 1
row: 2
row_span: 1
- entity: group.dining_table_lights
label: Dining
style_template: "return 'text-transform: none;';"
icon: mdi:silverware
column: 2
row: 2
row_span: 1
- entity: group.terrace_lights
label: Terrace
style_template: "return 'text-transform: none;';"
icon: mdi:nature
column: 3
row: 2
row_span: 1
- entity: group.auditorium_lights
label: Auditorium
style_template: "return 'text-transform: none;';"
icon: mdi:theater
column: 1
column_span: 2
row: 3
row_span: 1
- entity: group.living_lights
label: Living
style_template: "return 'text-transform: none;';"
icon: mdi:seat-recline-extra
column: 3
row: 3
row_span: 1
- entity: group.hallway_lights
label: Hallway
style_template: "return 'text-transform: none;';"
icon: mdi:exit-to-app
column: 1
row: 4
row_span: 1
- entity: group.library_lights
label: Library
style_template: "return 'text-transform: none;';"
icon: mdi:library
column: 2
row: 4
row_span: 1
- entity: group.corridor_lights
label: Corridor
style_template: "return 'text-transform: none;';"
icon: mdi:exit-to-app
column: 3
row: 4
row_span: 1
- entity: group.master_bedroom_lights
label: Bedroom
style_template: "return 'text-transform: none;';"
icon: mdi:hotel
column: 1
row: 5
row_span: 1
- entity: group.mobile_lights
label: Mobile
style_template: "return 'text-transform: none;';"
icon: mdi:transfer
column: 3
row: 5
row_span: 1
- entity: light.inside
label: Inside
style_template: "return 'text-transform: none;';"
icon: mdi:ceiling-light
column: 1
row: 6
row_span: 1
- entity: light.bureau
label: Bureau
style_template: "return 'text-transform: none;';"
icon: mdi:lamp
column: 2
row: 6
row_span: 1
- entity: light.outside
label: Outside
style_template: "return 'text-transform: none;';"
icon: mdi:ceiling-light
column: 3
row: 6
row_span: 1
Exactly the same problem as @jarrah and I had, answer is literally just 3 posts above yours
Yeah seems like it - by default the smallest tile size is 50x50 so have to use style_template to override it now.
hmm, not sure, the thing is i had that, and took it out to see if it caused the issue.
Seems at least intermittent use of the min-height is not advisable …?
Cheers, can’t believe how simple it ended up being thanks to the continuous updates by @eddi89 .
Just got tons of code from all the far more complicated failed attempts to delete now, did finally learn how to use input_booleans even if I didn’t need them in the end
You’ve set the default row height to less than 50 and then have all the other entities set to row_span: 1 so, like I said, you’ve got the same issue I had, add another 5px to the row height and they should sort themselves out.
The first one has min-height set but then just below says use row_span: 1, so it has and got the same issue the others have.
Ok thanks ! Will do.
Could I also take out the row_span? Not useful anyway since i don’t use any other span…?
taken out _span, changed to 50px. Only main button should be half size… doesnt work yet, though better. Any hints?
input_text.tiles_lights:
state_card_custom_ui_secondary: state-card-tiles
config:
columns: 3
row_height: 50px
# gap: 18 px
text_size: 1em
color: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Lights
- entity: group.all_lights_only
# label: All
style_template: "return 'text-transform: none; min-height: 20px;';"
icon_template: "if (state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"
color_on: green
color_off: red
column: 3
row: 1
# row_span: 1
- entity: group.buffet_lights
label: Buffet
style_template: "return 'text-transform: none;';"
icon: mdi:pine-tree
column: 1
row: 2
# row_span: 1
- entity: group.dining_table_lights
label: Dining
style_template: "return 'text-transform: none;';"
icon: mdi:silverware
column: 2
row: 2
# row_span: 1
- entity: group.terrace_lights
label: Terrace
style_template: "return 'text-transform: none;';"
icon: mdi:nature
column: 3
row: 2
# row_span: 1
- entity: group.auditorium_lights
label: Auditorium
style_template: "return 'text-transform: none;';"
icon: mdi:theater
column: 1
column_span: 2
row: 3
# row_span: 1
- entity: group.living_lights
label: Living
style_template: "return 'text-transform: none;';"
icon: mdi:seat-recline-extra
column: 3
row: 3
# row_span: 1
- entity: group.hallway_lights
label: Hallway
style_template: "return 'text-transform: none;';"
icon: mdi:exit-to-app
column: 1
row: 4
# row_span: 1
- entity: group.library_lights
label: Library
style_template: "return 'text-transform: none;';"
icon: mdi:library
column: 2
row: 4
# row_span: 1
- entity: group.corridor_lights
label: Corridor
style_template: "return 'text-transform: none;';"
icon: mdi:exit-to-app
column: 3
row: 4
# row_span: 1
- entity: group.master_bedroom_lights
label: Bedroom
style_template: "return 'text-transform: none;';"
icon: mdi:hotel
column: 1
row: 5
# row_span: 1
- entity: group.mobile_lights
label: Mobile
style_template: "return 'text-transform: none;';"
icon: mdi:transfer
column: 3
row: 5
# row_span: 1
- entity: light.inside
label: Inside
style_template: "return 'text-transform: none;';"
icon: mdi:ceiling-light
column: 1
row: 6
# row_span: 1
- entity: light.bureau
label: Bureau
style_template: "return 'text-transform: none;';"
icon: mdi:lamp
column: 2
row: 6
# row_span: 1
- entity: light.outside
label: Outside
style_template: "return 'text-transform: none;';"
icon: mdi:ceiling-light
column: 3
row: 6
# row_span: 1
jarrah:
label_sec
finally made it…
set standard tile_height to the minimum you need in the main grid (and when that is smaller than the 50px, take care of the following for the entities):
for each row you want to be 1 row height (the minimum defined above): use the min-height: xxpx
;
for each row you want to be higher use the row_span:
And… (important) set the row: [number] accordingly, that is for a row_span: 2, skip 1 row extra…
Hadn’t realized the latter. so all got compressed.
Up and running now, thanks!
mcfrojd
(Mcfrojd)
March 14, 2018, 11:39am
231
Do you have your code on github?
Nope, anything in particular you wanted to see?
mcfrojd
(Mcfrojd)
March 14, 2018, 5:30pm
233
Mostly for inspiration, and im lazy, cut and paste of awesome peoples code is always easier…
That’s how I get started with most of mine
I can’t do blank sheet coding but am quite adept at tweaking and repurposing what others have done.
2 Likes
Jer78
(Jeremy Percival)
March 14, 2018, 7:07pm
235
That’s the way to do it! @Bobby_Nobble