Still haven’t figured out my question above this one, but I have a new one for you
I can’t seem to clear cache and refresh browser to see what’s changed after editing the yaml files, I have to do a reboot of HA for it to show up. I remember this from another project a while back aswell, is this due to the templates somehow? Moving the icons around using developer mode on the browser shows the updates in real time, but things like lovelace buttons, entity states, transparent room overlays for lightning, etc requires a reboot of HAOS.
Have you tried going into the three dots menu at the top right and hitting reload? It won’t clear cash but it will reload the code after a change (a new icon position for example).
This might have to do with your overall aspect ratio. Basically, your images + sidebar together should have the same aspect ratio as your device’s native resolution. That way, they’ll scale nicely to full screen and you won’t have any bars showing up.
My iPad is 2360x1640, whereas my floorplan images are 75% of the width (-25% to account for the sidebar), so 1770x1640. The floorplan images fit perfectIy and they’re not cropped nor any visual dead zones top and bottom. I even resized the images for the sidebar to be the correct height. Will have another look at this to make sure everything is correct on my side.
Regarding the three dots menu, I will try that, thanks!
Regarding the gray gaap underneath the side menu…
I guess you use Lukes yaml right?
I can remember I had the same thing. Tried to correct the color for background at the first lovelace menu part (room control). I guess it has to to with the entites that are collected at the very top off Lukes code.
If you havent delete them do so. I think that causes it on my side.
Lukes code:
- title: Control Rooms
icon: 'mdi:floor-plan'
panel: true
badges: []
cards:
################### config-template-card #####################
######################### IMPORTANT! #########################
# To use the styling templates for individual lights, I have used
# Config Template Card. Config template card passes the entities it
# uses into the card. Make sure you change these entities below to
# your own and include any light entities you use above.
# To understand why, check: https://github.com/iantrich/config-template-card
- type: 'custom:config-template-card'
entities:
- light.roof_garden
- light.roof_plants
- light.kitchen_1
- light.kitchen_2
- light.kitchen_3
- light.kitchen_4
- light.couch
- light.table
- light.cabinet
- light.toilet_1
- light.toilet_2
- light.study
- light.bedroom_roof
- light.bed
- light.stairs
- light.door
- light.balcony
- light.kitchen_sink_lights
- light.kitchen_fridge_lights
- light.kitchen_lights
- light.toilet_lights
card:
################### Picture Elements Card #####################
type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
I’m actually going off of CDRX’s yaml now. Most views are done now, vacuum set up aswell with room selection etc working, just trying to figure out how to get the current room reported (if possible at all with Roborock). Still, this sidebar thing is bugging the hell out of me Another weird thing I had with the sidebar, was that the inner shadow being wonky and not covering the entire height also, but only a small part of it. Got rid of that bit of code for now and might just add a small gradient to the main background image when I get it working.
Using the dev tool again and choosing the gray part at the bottom actually highlights the entire sidebar, and the code in there is actually the correct code that I’m using for the picture element;
I’m lost… Thanks for trying to help me out, I really appreciate it!
While selecting the bottom gray part, the following is shown in the dev tools:
The ha-card part is the one I’m using for the BG image, even tried messing with the height of it as you can see, but removed that part again seeing as the div is actually taking up the full height already.
I do not use CDRX2s code with the grid layout but does the part where the background image is not start with “-” infront of type and also with type: “custom:config-template-card”? @CDRX2
It does not use the dashes infront of type in these examples. Because they are templates they are inserted after other codes have already been loaded. Even though my sidebar.yaml starts exactly like my image from previous post (just type: picture-elements), it’s actually inside a decluttering card that has a dash infront.
I must admit though, I’m not sure when and where you need to use dashes, because my previous dashboard that was using templates and view layout aswell, no sections had the leading dash (“-”).
I might just try to include Luke’s code for that specific part, but I’m still stumped as to why it’s not working (also want to keep it nice and clean).
I the past few days definitely added dozens of new white hair to my head. All started when I tried to upgrade from 2022.9 to the latest version of the fronted 2024.
Until now the Floorplan view worked flawlessly. Something definitely broke (not supported anymore?)
Now the whole Floorplan is gone from the view.
I tried to troubleshoot this for hours but didn’t go far then just presenting the base picture (the floor darken image) but whenever I try to add the elements it just breaks.
Has anyone experienced this behavior?
It seems like something related to the picture-elements?
It’s like not changing the status of the entity with its current state.
Hey there. When you right click inspect, do you see any errors? It could be any component you are using crashing JavaScript etc. Maybe flick a screenshot of it through.
title: just test
panel: true
icon: 'mdi:floor-plan'
background: center / cover no-repeat url("/local/back.png") fixed
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:config-template-card #---- for CSS support
entities: #--- all entities that will be used in the floor plan
#second floor
- light.nightstand_left
card:
type: vertical-stack #--- the two floors
cards:
- type: picture-elements #---- change 2nd floor base image according to the position of the sun
image: /local/new_floorplan/second_floor/2nd_all_off_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
####################################--------master nightstand left--------####################################
- type: image
action: none
entity: light.nightstand_left
hold_action:
action: none
image: /local/new_floorplan/second_floor/2nd_master_lamp_left_on.png
style:
filter: >-
${ "hue-rotate(" + (states['light.nightstand_left'].attributes.hs_color
? states['light.nightstand_left'].attributes.hs_color[0] : 0) + "deg)"}
mix-blend-mode: lighten
opacity: "${states['light.nightstand_left'].state === 'on' ? (states['light.nightstand_left'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
left: 50%
tap_action:
action: none
#Master Bedroom nightstand left
- type: state-icon
title: Master Nightstand Left
icon: 'mdi:lightbulb-variant-outline'
tap_action:
action: toggle
entity: light.nightstand_left
style:
top: 12%
left: 50%
--mdc-icon-size: 14px
--iron-icon-stroke-color: "#00FFFF"
so this is working perfectly in 2022 version and breaks at 2024
I’m using config-template-card with picture-elements. maybe something changed between the versions?
Haha yes another “mug” (mosquito).
can’t wait for your new and improved dashboard.
I have been thinking with it for a while and i changed a lot of thing hahaha.
I made this one for the tablet in my hallway that uses a lot of conditional cards as i don’t want to swipe, or as little as possible and provide my with information at a glance (still a work in progress). when this on is done iam gonne make one for my kitchen wthat will heavy leaning on meallie.
Another weird thing I had with the sidebar, was that the inner shadow being wonky and not covering the entire height also, but only a small part of it. Got rid of that bit of code for now and might just add a small gradient to the main background image when I get it working.
