This is my Simple view of Picture card.
all buttons are hidden to keep the view clean and toggle on any room light on or off.
you can view and see the tutorials below.
3 Likes
Thank you for this tutorial, i dipt my toes in this little adventure because of your video’s.
Started with a basic layout and trying to understand every step before i will do the detailed polished version.
Next stop is to get the light show the color of the lights.
Again thank you so much
Hi. I would like to ask if you can share the code where you show the state of person!
I have a problem with the display on different devices/screens. For example:
PC monitor
Tablet
Mobile phone
yaml code for one person:
- type: vertical-stack
card_mod:
style: |
:host {
position: absolute !important;
margin: 0px !important;
padding: 0px !important;
height: 5vh !important;
width: 50vw !important;
right: 50vw !important;
z-index: 1 !important;
}
ha-card {
margin: 0px !important;
padding: 0px !important;
background: none;
}
cards:
- type: custom:stack-in-card
card_mod:
style: |
:host {
position: absolute !important;
margin: 0px !important;
padding: 0px !important;
right: 12px !important;
z-index: 1 !important;
}
ha-card {
margin: 0px !important;
padding: 0px !important;
background: none;
}
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: none;
}
mode: horizontal
cards:
- type: custom:mushroom-person-card
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
background: none;
}
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') }}%
- 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
thanks man! 
I finally managed to upload my repo to github. GitHub - re-1st/HA-3d-floorplan
Not sure about a step by step guide though. Most of the stuff i use is already from Youtube tutorials and examples present at github and this community.
but i am happy to explain anything that is not clear about my config
2 Likes
Hi Krovachek,
I love this vaccum card. Any chance you still have the config card of this ? Thanks
Welcome to the forum! The language of the forum is English, so you’ll need to translate your message, please. (Danke schön.)
1 Like
Hi,
I created the floor plan and rooms with SweetHome3D. I always created the pictures with different lighting and then made the rest transparent with Gimp. If a lamp is on, the room is also shown illuminated.
If I click up or down the stairs, I get to the next floor.
Click on the room, you jump into the room, you can see even more details, climate, audio, lighting,… .
Holding down Room turns off the lighting in the room.
On the left I see messages, for example medication, birthdays, washing machine/dishwasher finished, battery empty, heating fault, smoke detector overhaul, putting out the rubbish, … so everything with a to-do, which then has to be acknowledged with one click.
At the top right there is information such as pollen count, weather warning, if fuel prices are below a certain amount, the moon, camera monitoring is active, and I have Grocy installed, not for all of my groceries but for the ones that you should always have in the house. I am then shown: whether something is missing or has expired.
On the right in the bar I can activate guest WiFi, turn on the alarm, change the mode of the “house” - vacation, party or normal - and can also open a popup with one click that shows me the current energy flow and my energy efficiency day and yearly.
There are links at the bottom right
- Multi-room audio
- Information (weather, garbage, birthdays, events,…)
- Diagnostics (network, connections, batteries, …)
- Statistics (energy management, PV system, car, heating, …)
- Devices (overviews with the relevant data (PV system, heating, …)
- Settings (system, lighting, timers, temperatures, …)
It’s hard to explain how exactly I did what. I’ll try to upload a few more pictures, then can you ask specific questions?
Many greetings
Stephan
Living Room:
Energie:
Overview Bottom right:
Multiroom Audio:
Garage:
Statisic Mini Solar:
Overview Mini Solar:
Overview Heating:
2 Likes
Where are your sensors etc? 
Would you mind sharing your code for icons, would love to try and do something close with all the icons the same color.
Thanks
If this finally gets merged is gonna be awesome.
I will probably use again my picture elements view.
2 Likes
thanks for the repo!
i saw aou are using over 10000 lines of code in your lovelace.yaml…
WTF 
I would like to use this for my home but i can`t imagine how to adapt this mass of code
1 Like
Here’s my floorplan. Also attached is the transparent fan gifs I use to animate ceiling fans. I’m looking for better ones so if anyone has one that they use, please let me know.
1 Like
This is my code.
I have a strange issue. When an entity is ON, all the icons associated with it lose their connection. Can you help?
type: picture-elements
elements:
- type: conditional
title: TV
conditions:- condition: state
entity: light.rgb_tv
state: “on”
elements: - type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/TV.png
- condition: state
- type: state-icon
style:
left: 23%
top: 48%
entity: light.rgb_tv
icon: mdi:led-strip
tap_action:
action: toggle
hold_action:
action: more-info
title: RGB-TV - type: conditional
title: YeeLight
conditions:- condition: state
entity: light.yeelight_ceiling4_0x7d7ab0a
state: “on”
elements: - type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/Yeelight3.png
- condition: state
- type: state-icon
style:
left: 22%
top: 65%
entity: light.yeelight_ceiling4_0x7d7ab0a
icon: mdi:chandelier
title: "Yeelight "
state_color: false
tap_action:
action: toggle - type: conditional
title: Wall
conditions:- condition: state
entity: light.wall_light
state: “on”
elements: - type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/Wall.png
- condition: state
- type: state-icon
style:
left: 38%
top: 79%
entity: light.wall_light
icon: mdi:led-strip
tap_action:
action: toggle
title: Wall - type: conditional
title: Table
conditions:- condition: state
entity: light.kitchen_light_switch_2
state: “on”
elements: - type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/Table2.png
- condition: state
- type: state-icon
style:
left: 33.7%
top: 54%
entity: light.kitchen_light_switch_2
icon: mdi:ceiling-light-outline
title: Table
tap_action:
action: toggle
state_color: false - type: conditional
title: Kitchen
conditions:- condition: state
entity: light.kitchen_light_switch_1
state: “on”
elements: - type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/Kitchen5.png
- condition: state
- type: state-icon
style:
left: 41%
top: 35%
entity: light.kitchen_light_switch_1
icon: mdi:led-strip-variant
title: Up
tap_action:
action: toggle
state_color: false - type: conditional
title: Balcony
conditions:- condition: state
entity: light.ty_12z_switch_7
state: “on”
elements: - type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/Balcony.png
- condition: state
- type: state-icon
style:
left: 8%
top: 42%
entity: light.ty_12z_switch_7
icon: mdi:lightbulb
title: Balcony
tap_action:
action: toggle
image: /local/Givati19.png
no chance…
This board looks incredable! I’ve been looking to make something similar. Great work!
Would you mind sharing you yaml and the picture?
Just starting with picture elements card.
Before:
After:
Sun and moon move across the sky as elevation and azimuth change for each, and both sun and moon fade (opacity) as they dip below the horizon. (In this screen capture, Sun has already started to fade as elevation is low). Next to do is figure out how to make the moon a crescent as illumination increases/decreases.
Code for the card in case anyone is interested: current conditions picture-elements card yaml - Pastebin.com
3 Likes
