By the way - totally forgot to share, im sure some of you already are doing this with dashboards - but its pretty easy to copy and paste your floorplan to a mobile config. I now have this going on my phone too… just copied the yaml and changed some of the icon sizes etc:
2 Likes
Great! I was having this issue wit icon sizes. Not yet attempted to improve it. But you already have that working. GREAT! 
Topper ben je.
Thank you
I think this has something to do with this:
I need to update all “–iron-icon-width:” and “–iron-icon-height” to just:
–mdc-icon-size: 2vw
Including in my tablet config 
2 Likes
Wow @lukevink, you’ve really done some great, great work here! I just finished my 3D floor plan in Sweet Home 3D and yesterday I spent the evening looking through your code (best evening in a long while 
)!
Working as a frontend developer myself and I’m pretty new to Home Assistant, but your repo really made things “click” for me on how you can integrate CSS with the yaml configs. And I really dig how you have solved individual lighting with CSS filters. Really smart!
Anyways, I noticed that most of your lights in the floor plan is “invisible” and instead you have the icon showing. I like this clean approach, but I’m pretty new to Sweet Home 3D and I haven’t figured out how to make my ceiling lights, bedside lights etc invisible in the export, but still render the light from it. Do you have any advice on this matter?
Thanks again for sharing this repo, I will for sure do the same when I’m done with my floorplan!
// Jens.
1 Like
I’m answering my own question since I now realized that when adding only lightbulbs instead of “real” lights with lamp-shades and such, it seems they are invisible in the 3D render
1 Like
Hello guys,
I’m trying to use the “Recently Added” card as @lukevink is doing.
I literally copied his code on this side, but the UI is a mess:
How can I achieve this result?
Thank you!
Had the same problem as you. There is a piece of code at the bottom of the media section that you need to have as well.
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
upcoming-media-card ha-card{
background: none;
box-shadow: none !important;
}
upcoming-media-card ha-card div:nth-child(2) {
padding:0 !important;
}
.rece_poster{
width: 31% !important;
display: inline-block !important;
margin: 0% 0.2% !important;
}
.rece_svg_poster{
position: absolute !important;
bottom:-5%;
left:0;
width: 100% !important;
}
.rece_container_poster{
width:100% !important;
outline: none !important;
margin: 1% 1% !important;
overflow: hidden;
}
.rece_svg_poster > rect{
fill:none !important;
}
.card-header{
font-size: 1vw;
padding: 0;
}
Find that, and you’ll get the result you want, provided you’re also using the Plex recently added sensor.
Thank you for your reply!
I really can’t find out where to put this code.
Luke places it under the Sidebar code, but it seems it’s idented to stay under the “elements” of the picture elements of Media View.
I put it there but I had no changes…
My Code
- title: Media
path: media
icon: 'mdi:play-circle'
panel: true
badges: []
cards:
- type: picture-elements
image: /local/ui/blurredFloorplan.png
style: |
upcoming-media-card ha-card{
background: none;
box-shadow: none !important;
}
upcoming-media-card ha-card div:nth-child(2) {
padding:0 !important;
}
.rece_poster{
width: 31% !important;
display: inline-block !important;
margin: 0% 0.2% !important;
}
.rece_svg_poster{
position: absolute !important;
bottom:-5%;
left:0;
width: 100% !important;
}
.rece_container_poster{
width:100% !important;
outline: none !important;
margin: 1% 1% !important;
overflow: hidden;
}
.rece_svg_poster > rect{
fill:none !important;
}
.card-header{
font-size: 1vw;
padding: 0;
}
elements:
...................
- entity: sensor.film_recenti
style:
left: 84%
top: 25%
width: 18%
title: Film Aggiunti di Recente
type: 'custom:upcoming-media-card'
- entity: sensor.serie_tv_recenti
style:
left: 84%
top: 59.5%
width: 18%
title: Serie TV Aggiunte di Recente
type: 'custom:upcoming-media-card'
Ok, probably I found something.
Another card, using similar styling, is not appearing well:
This should be the media player which must appear when it’s ON. (Luke is using his Projector for this).
The related code is the following:
- type: conditional
conditions:
- entity: media_player.appletv_soggiorno
state_not: off
elements:
- artwork: cover
entity: media_player.appletv_soggiorno
hide:
icon: true
mute: false
power: true
power_state: true
info: short
style: |
:host {
border-radius: 1vw;
overflow: hidden;
height: 300px;
box-shadow: none !important;
left: 50% !important;
top: 43% !important;
width: 42.3% !important;
height: 66%
}
ha-card {
border-radius: 1vw;
height: 100%;
overflow: hidden !important;
box-shadow: none !important;
}
type: 'custom:mini-media-player'
For some reason, the positioning included isn’t recognized by HA.
I’m totally lost…
Did you install card-mod? Those CSS attributes won’t work without it.
Sure, I have it.
Another thing guys.
Using Photoshop I changed the resolution of the sidebar background and the blurred background accordingly to my Tabled resolution (an iPad Pro 11”, so 2388×1668 px) but I still have some strange dimensions inside the UI.
As you can see here, the mini graph card seems to be placed outside the sidebar.
Also, i have a strange gap in the bottom.
Do you know how to solve it?
Hello guys,
First of all, thanks a lot for this huge work.
This topic made me switching from another solution to Home Assistant as it is reflecting exactly what I want to have.
I have been able to adapt more or less your huge piece of code to my installation and now trying to finalize the setup on my tablet.
The issue is the following, in full screen mode on my tablets (whatever I am on Fully Kiosk Browser or HA Companion): I have a very thin white bar which appears on top of the design and I can scroll a little bit down and make appear a big grey bar
I have looked for a solution but unfortunately with no result…
Interesting thing is that this two bars aren’t appearing on my laptop.
Does any one have an idea on where I should look?
Thanks in advance,
Regards
Tell me please
how did you calculate these values so accurately?
left, top and width
- action: none entity: binary_sensor.bathroom image: /local/ui/floorplan/lights/bathroom.png state_filter: 'off': opacity(0%) 'on': opacity(100%) unknown: opacity(0%) style: left: 76.85% top: 78.2% width: 46.1328125% mix-blend-mode: lighten tap_action: action: none type: image
Hi seba,
May I ask you where did you download the obj to make your home in SweetHome3D? I’m trying to find some decent models to improve my design.
Like the Lego rocket on the top of your shelf is it a picture or a 3d model? I do have the rocket too but found only very expensive models to download
thank you
Hi DBuit, when you create the image in sweethome3d (“Create photo…”), check that the Lens option is set to default.
Anyone else know how to accurately position things in lovelace with respect to top: height: and left: styling?
…is it just using developer mode (F12) in chrome?
Any tips on how to speed up the process would be nice!
Thanks
with a screenshot of your dashboard you can use an editor like photoshop . set grid to percent and read the values easily
I sometimes use this tool: https://github.com/bradcrc/now-playing-card/tree/master/Design%20Tool
Demo: https://www.youtube.com/watch?v=1ZU4WMgwU6s&feature=youtu.be
2 Likes
Looks great, but how did you change the text and icon in the buttons on the left? Do you or @lukevink have a template for those please to customize them to our own likings?
And also what I see in your screenshot is that the text of the weather in the menu bar is dark. I have this on mine as well, while if I look at the page on my sektop it’s showing white text and temperatures.
Thanks!