Thats a card I made that’s not publicly available. Not optimised for public use… You can achieve something similiar just by using Custom Button Card and giving it a honeycomb background of somesort. Mine is pure CSS without images but for the less experienced, I would suggest an image.
Thanks mate,
I thought about image background on custom button card… but less sure of how to line them up, I guess I should try with absolute positioning and it would look just as great, but I’ll have to try it, I expect the button will not enjoy being on top of each other
I’m looking to build something similar with 3 floors, so probably adding a swipe card to switch between floors, replacing existing floor plan with picture elements.
Really impressed by your work too, very rare to combine all these skills, it could have been 3-5 different people and a lot of patience to achieve this
Anyway, if you ever want to share that other card, I think I would have something to learn there too, nothing scares me anymore 
You’d be best using margin-left and margin-right etc. you can use minus for your margins aswell so -30px would push it back that many pixels.
Growing up I’ve been doing web design stuff but was also interested in media and graphic design eventually this grew to programming but 3d modelling and things of that nature was a hobby. Over time the collection of knowledge has allowed me to achieve things I vision, I just like how now I can see something I want as a result and feel confident enough to achieve it with the knowledge I’ve gained over the years. This isn’t to say I don’t review or google and check tutorials myself to refresh my memory for certain things.
Hello Sian
make plans for the others, I love your work. i am ready to pay you
My heat pump card
details explained here:
1 Like
HI
what did you use to create or convert your photo to cartoon characters?
thanks
Bitmoji is what I used
1 Like
fantastic thanks so much
a while ago I posted a short video about an animated gif. I was asked if I wanted to make a complete video of my dashboard with picture elements. I took that question way too seriously… < making this video took me almost as much time as building the complete dashboard 
.
Anyways: check full video on Youtube
Examples:
19 Likes
Wow that’s nuts man! Very cool and I can only image the amount of time and fine tuning it has taken to get to the current state!
wow that is incredible
1 Like
thanks mate. Yeah to be honest, if I had known how much time it would cost me, I probably wouldn’t have even started building it 
had to learn everything from zero.
1 Like
Mate, that is next level!
2 Likes
absolutely amazing! why don’t do a little step by step guide?
Not for Free, of course… you told how many work it has been…
make a “buy me a coffe” -link or something 
Would be great if Home Assistant would offer a Dashboard Generator…
put your pics here, choose your entities there… and voila, get a nice looking Dashboard 
BTW: Chapeau, for this mind blowing Video!
1 Like
This is amazing work! Would love it if you would share your config 
1 Like
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