Lovelace - picture-element Questions

I have been slowly making the move towards the Lovelace UI and so far I have been very impressed. I found a few things that I would have liked included such as being able to set opacity on a glance card but maybe that will come in the future.

One challenge I had for myself was to see if I could replicate a floorplan layout that I am using that is displayed on a Fire HD7 tablet and is my bedside Alarm clock (see screenshot below). My thought was that if I could replicate this I may also have a little more flexibility than I do currently with the floorplan layout I use today. Generally I have been able to replicate the majority of the setup outside of a few things. These could very well be my lack of knowledge and that is why I am hoping someone may be able to answer the questions below for me.

  1. I have been doing most of my setup using my secondary monitor (25" screen) attached to my laptop however when that setup gets viewed on the Fire HD7 the layout is wildly different. You can see in the screeshot below (Fire HD7) I have adjusted my yaml file settings for the “picture-element” to meet the Fire HD7 screen but when you look at the screenshot below of the laptop monitor you can see how different it looks (spacing/alignment off). Is this because of the varying screen sizes or (and hopefully) is there logic I can include in the style settings(?) that would render both the same when viewed on either. I am hoping this is the answer I am just unaware of how to do it and would like to learn. It was suggested that I use “transform: none” in my setup but unfortunately that didn’t really work.

  2. The screenshots below show how it looks through my use of “Fully” browser. In the original floorplan layout you can there is no “HA Header” (the ability to switch views etc). While I like the extra screen real estate this is the flexibility part that I think may be helpful because I can use the tablet to change views and turn off lights etc where as I can’t really do that now easily with the floorplan layout. Is it possible to hide the blue bar above and maybe swipe down to show it? I suspect this may not be doable but would like to know how if it is.
    **Edit - I found this kiosk mode by @ciotlosm -> https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931 that does exactly what I needed. If anyone has any thoughts on Q1 above please let me know. Thx

I am sure as more releases are made available the flexibility will be greater but in my quest to learn I am interested to see if some of this can be done right now.

Original Floorplan Layout:

Fire HD 7 view:

Computer Monitor view:

1 Like

If you have any zoom in your desktop layout (ctrl + in browser) this could distort coodinates

I don’t have any zoom applied however I just viewed it on an older 11" chromebook that I have and it appears the same way it does on my laptop monitor. I wonder why the 7" tablet is so different?

***Edit -> I also just tried on an old 10" samsung tablet I had and it also appears the same as my computer monitor so it appears to be something related to either the size of the Fire HD7 tablet or the Fire HD tablets themselves?

More likely with the supported features on the browser version.

use transform: none with the elements in the card and they should appear in the same position.

I had tried that but it didn’t make any difference.