I must be doing something wrong then. Moved it above the ha-card code, and I don’t see any change even when I set the pixel value really high or low.
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('binary_sensor.backyard_entry_door', 'off') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('lock.back_door_lock', 'locked') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% set battery = states('sensor.back_door_lock_battery') | int %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
card_mod:
style: >
.box div:nth-child(2) div:nth-child(4) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'red' if is_state('binary_sensor.backyard_entry_door',
'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
Current SS.
Edit after post: I think I need to overwrite my old code.
M3Power95:
switch.back_yard_siren
Yes you need to overwrite the old code
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style: |
.box div:nth-child(2) div:nth-child(4) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'red' if is_state('binary_sensor.backyard_entry_door',
'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 33px !important;
}
1 Like
So it looks like this code works(with a caveat)! I can move the door, battery and lock, but with the code as is (applied to the light and siren entity 4 and 5), the light and siren will not move. Not sure if it’s related or not, but FYI I am running this dashboard in the experimental sections view.
Let me test the sections application
I know 4 and 5 move in a standard card
No issues in Sections
Well thank you for getting me this far along. I’ll keep playing around and see if I can come up with something. Baby is up now, so to be continued tomorrow! Thanks
No matter what I try, I can’t get those two to move. However, I tried deleting the siren just to see what would happen, and the light moved to the right in its place. No idea how that’s happening, but the icons do all fit within a viewable window on the mobile app when the siren is missing, even though the light got moved over so in any case I’m good. I’ll just add the siren as a basic entity switch above the glance card. Thanks again
That is so odd. Can you post your latest code just so I can play with it a bit? I’ll try to recreate the issue.
Code with siren removed from glance, added to entity grid card:
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- entity: switch.back_yard_siren
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
card_mod:
style: |
.box div:nth-child(2) div:nth-child(4) {
margin-left: 20px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: 20px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('binary_sensor.backyard_entry_door',
'off') else 'red' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
Code with siren still present (basically the same as you last corrected):
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style: |
.box div:nth-child(2) div:nth-child(4) {
margin-left: 20px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: 20px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('binary_sensor.backyard_entry_door',
'off') else 'red' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
And screenshot of the two:
Appreciate it, I’ll let you know if I find anything out.
1 Like
Thank you again for your help.
The entity type seems to make a huge difference. I switched the fifth entity from a binary_sensor to a light and it won’t shift.
That is weird. Is it possible to change the entity type by remapping it to, say a switch using the switch template code in my config.yaml? Then maybe I could position it properly and still activate the siren and light.
Displaying the state is causing the issue. I need to verify the nth layout because if you move to the .box div:nth-child(3) you’ll see a shift. The flex-wrap is most likely preventing the shift.
I’ll get it
2 Likes
Well you’ve certainly gotten it all up to this point, so I have faith in you. Bed time again for me, so to be continued tomorrow. Thanks again!
1 Like
I’d suggest shortening the title: Back Yard Live Camera to title: Back Yard Camera or adjusting the space/font-size that is applied to the title.
Test this and let me know…
card_mod:
style: >
.box div:nth-child(3) div:nth-child(5) {
margin-right: 90px; }
.box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('binary_sensor.backyard_entry_door',
'off') else 'red' }};}
.box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(3) div:nth-of-type(3) ha-icon-button ha-state-icon { {%
set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
1 Like
No change, and it seems to have moved the color scheme to the light and siren. You may want to check my work because when I copied and inserted the code, I got all kinds of indentation errors. Fixed them but want to make sure I’m using what you wrote correctly:
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style: >
.box div:nth-child(3) div:nth-child(5) {
margin-right: 90px; }
.box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('binary_sensor.backyard_entry_door',
'off') else 'red' }};}
.box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(3) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {%
set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
Actually your code did work, just the child references were wrong. Corrected code below:
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Cam
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style: >
.box div:nth-child(3) div:nth-child(1) {
margin-right: -12px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('binary_sensor.backyard_entry_door',
'off') else 'red' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {%
set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
And here’s how it looks, just fits on the screen. Now I just need to show the entity names in small print above the state and the card will be complete! Thank you so much
Great to hear! When I edited the code I eliminated the names and adjusted the child sequence. That was a mistake on my part.
No problem at all. Now that I (kind of) understand the child division thing, it’s already helped me fix another card I’m working on (there are 3 of these lol). Thanks again, I really appreciate it! Now onto figuring out putting the entity names above them, and figuring out an aspect ratio bug on my front door camera card!
1 Like
