Auto rotate based on orientation

[Abductist]

Hi all,

Let me first just state that HA-Floorplan is amazing and so much thanks to everybody who has done any work on this. My question is, I have a floorplan where the width and the height aren't very similar so I'd like to have the SVG rotate based on the orientation of the device (ie my phone is portrait while my computer is landscape). I can get the SVG to rotate fine by using the following in my css file:

@media (orientation: landscape) {
svg {
transform: rotate(90deg);
}
}

The problem with this is that the card doesn't resize appropriately. I'm a relative novice to CSS and was wondering if anyone knew how to get that working properly.

Thanks in advance!

[pkozul]

Hi @Abductist

Thanks for trying out floorplan.

We haven't done any work on supporting rotation/orientation, but if we come up with a good solution, we'll post it there.

[exetico]

Hi Abductist

Did you find a good solution?

If so, please share your code, so other people can use it :)

If not, kindly let us know as well.

[OzGav]

What other options are you using though as you may be encountering limitations of Home Assistant as well? For example are you using panel:true

[exetico]

@philosowaffle - Context are always a nice things. Thanks!

Remember to add px to the width-property in your mediaqueries :-)

@media only screen and (max-width: 1200px) {
  #floorplan > svg {
    transform: rotate(90deg);
    max-width: 1024;
  }
}

If you're ready to do something more modern, go with something like this:

@media only screen 
  and (min-device-width: 1px) 
  and (max-device-width: 900px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
    #floorplan > svg {
      transform: rotate(90deg);
      max-width: 1024;
    }
}

Fell free to adjust the widt, and so on.

On that note: My phone are already rotating the viewport, if I rotate the phone, so I don't really get why it's a good idea. But for people with disabled "auto rotate", I totally get it.

[exetico]

While playing around with transform, you can also try and use transform: scaleX(1.6) scaleY(1.6) rotate( 90deg); or similar scale, to get a better close-to-screen edge fit, on your mobile :-) (If the SVG aren't matching totally up with the screen-edge)

[philosowaffle]

Remember to add px to the width-property in your mediaqueries :-)

@exetico - ugh, sorry, sometimes I'm blind to my own syntax errors :( Thank you for catching that.

Closing the loop here, the modernized css you shared worked like a charm, thank you for taking the time to help me out and follow through on this.

@media only screen 
  and (min-device-width: 1px) 
  and (max-device-width: 900px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
    #floorplan > svg {
      transform: rotate(90deg);
      max-width: 1024px;
    }
}

[exetico]

You're welcome 👍😊