Person status on FP
#420
-
Hi again.
- type: image
entity: person.martin
image: /local/lovelace/home/martin-home-250.png
state_image:
Away: /local/lovelace/home/martin-out-250.png
Home: /local/lovelace/home/martin-home-250.png
not_home: /local/lovelace/home/martin-out-250.png
style:
left: 6%
top: 59%
width: 12%Because I have 2 levels/layer of which 1 is for cameras and 2 is for floor plan! Details on: (#411)I tried to add a person according to the aforementioned setting, but it doesn't work. Not sure if it would be best to make another one levels/layer for persons? I also don't understand why there have to be so many pictures in the settings?
- type: picture-elements
card_mod:
style: |
:host {
position: absolute !important;
heigh: 100vh !important;
width: auto;
top: 40px;
z-index: 1 !important;
}
elements:
- type: image
entity: person.robert
image: /local/img/fp/Person-Frame.png
state_image:
Away: /local/img/fp/Robert-Away.png
Home: /local/img/fp/Robert-Home.png
style:
left: 400px
top: 100px
heigh: 8px !important
width: auto
image: /local/img/fp/Person-Transparent.png
Frame Person home Person away would that be better to use?
My brain has apparently stopped working and I'm blocked and I can't find a solution!Anyone have any ideas? |
Beta Was this translation helpful? Give feedback.
Answered by
Trzinka
Feb 1, 2024
Replies: 2 comments 3 replies
-
This is what the card tree looks like:
|
Beta Was this translation helpful? Give feedback.
3 replies
-
|
You can’t combine picture elements with ha-flooplan |
Beta Was this translation helpful? Give feedback.
-
Okay. Thanks for the reply.But I still don't understand where I have to put which picture? |
Beta Was this translation helpful? Give feedback.
-
|
Put the home or away picture on the background. Then add the other picture in a layer (just like your lights on images) then toggle the visibility of that image based on home or away. You could also use image_set but I find it easier to just toggle the visibility of one object |
Beta Was this translation helpful? Give feedback.
-
The final solution, although not the best, but it is possible to survive!
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.robert
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
- type: conditional
conditions:
- entity: sensor.robert_mobitel_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.robert_mobitel_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Robert
icon: mdi:battery-charging-medium
hide_name: true
primary: >-
Baterija: {{
states('sensor.robert_mobitel_battery_level') }}%
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.robert_mobitel_battery_state
state: discharging
card:
type: custom:mushroom-template-card
entity: sensor.robert_mobitel_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.robert_mobitel_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.robert_mobitel_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: >-
Baterija: {{
states('sensor.robert_mobitel_battery_level') }}%
tap_action:
action: more-info
fill_container: true
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
:host {
position: absolute !important;
top: 60px !important;
left: calc(50% - 200px) !important;
z-index: 1 !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.mojca
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
- type: conditional
conditions:
- entity: sensor.mojca_mobitel_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.mojca_mobitel_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Mojca
icon: mdi:battery-charging-medium
hide_name: true
primary: >-
Baterija: {{
states('sensor.mojca_mobitel_battery_level') }}%
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.mojca_mobitel_battery_state
state: discharging
card:
type: custom:mushroom-template-card
entity: sensor.mojca_mobitel_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.mojca_mobitel_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.mojca_mobitel_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: >-
Baterija: {{
states('sensor.mojca_mobitel_battery_level') }}%
tap_action:
action: more-info
fill_container: true
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
:host {
position: absolute !important;
top: 60px !important;
right: calc(50% - 200px) !important;
z-index: 1 !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.nata
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
- type: conditional
conditions:
- entity: sensor.nathalies_iphone_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.nathalies_iphone_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Nathalie
icon: mdi:battery-charging-medium
hide_name: true
primary: >-
Baterija: {{
states('sensor.mojca_mobitel_battery_level') }}%
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.nathalies_iphone_battery_state
state: discharging
card:
type: custom:mushroom-template-card
entity: sensor.nathalies_iphone_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.nathalies_iphone_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.nathalies_iphone_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: >-
Baterija: {{
states('sensor.nathalies_iphone_battery_level') }}%
tap_action:
action: more-info
fill_container: true
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
:host {
position: absolute !important;
top: 60px !important;
right: calc(50% - 400px) !important;
z-index: 1 !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.di
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
- type: conditional
conditions:
- entity: sensor.di_mobitel_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.di_mobitel_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Diane
icon: mdi:battery-charging-medium
hide_name: true
primary: >-
Baterija: {{
states('sensor.di_mobitel_battery_level') }}%
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.di_mobitel_battery_state
state: discharging
card:
type: custom:mushroom-template-card
entity: sensor.di_mobitel_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.di_mobitel_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.di_mobitel_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: >-
Baterija: {{
states('sensor.di_mobitel_battery_level') }}%
tap_action:
action: more-info
fill_container: true
|
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
Trzinka
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The final solution, although not the best, but it is possible to survive!
View on the tablet via Full Kiosk Browser:View on computer:code for fp.yaml