Save performance when rotating screen e.g. on Raspberry Pi

[j.e.f.f]

Great hack!! I’m going to add this to my CSS 101 guide if that’s OK. I think this is incredibly useful.

[ptrk95]

@j-e-f-f thank you! Of course you can :)

[Joern]

Hello,

Iam struggeling on my PI3 to rotate by 90deg to right. Monitor has 1920x1080.
But I see only black screen at any other position than -90deg!!
As I need to change to 90deg or -270deg I got only black screen (also 180deg even) …

So I changed config.txt to:

display_hdmi_rotate=0
framebuffer_width=1920
framebuffer_height=1080

& custom.css to:

body {
        margin: 0;
        position: absolute;
        transform: rotate(90deg);
        transform-origin: top left; 
        width: 100vh;
        height: 100vw;
        object-fit: cover;
        top: 100vh;
        visibility: visible;
}

What is missing?

Worse case I change physical mounting way, but not preferred :face_with_stuck-out_tongue_winking_eye:

[Joern]

transform: rotate(90deg);
transform-origin: top right;

works at least see have screen, but only half screen is used, so no option…

[hdez]

Warning! Extreme newbie here. This is only my second day playing with Magic Mirror css.

I changed my css file and boot/config.txt following @evroom’s instructions above and although I was able to rotate the screen with these instructions, like @Joern, the Magic Mirror modules only fill the bottom half of the screen.

My CSS file is as follows (sorry, I don’t know how to put this in a separate box):

body {
margin: 0px; If I omit “px”, Magic Mirror does not display correctly.
position: absolute;
transform: rotate(90deg);
transform-origin: top right;
width: 100vh;
height: 100vh; If I change this to “100vw”, Magic Mirror does not display correctly.
object-fit: cover;
top: 100vh;
visibility: visible;
background: #000;
color: #aaa;
font-family: “Roboto Condensed”, san-serif;
font-weight: 400;
font-size: 2em;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
}
.MMM-HTMLBox {
font-size: 18px;
line-height: 22px;
}
.MMM-RTSPStream header {
text-align: left;
}
.MMM-RTSPStream .innerWrapper {
border-style: none;
}

…a few more entries after these ones.

My boot/config.txt contains the following entry:

display_hdmi_rotate=0
framebuffer_width=1600
framebuffer_height=900

Any entries shown here that were not included in @evroom’s instructions, are from the original installation of Magic Mirror.

I’m running Magic Mirror latest software on a Pi4 with an Acer 24" monitor.

Any ideas as to what I should change in order for the modules to fill the entire screen?

Any help will be greatly appreciated.

[sdetweil]

@hdez said in Save performance when rotating screen e.g. on Raspberry Pi:

(sorry, I don’t know how to put this in a separate box

after you paste the text, select it, and then push the button above the editor that looks like </>

[hdez]

@sdetweil Thanks. Next time.

[hdez]

Never mind guys I was able to get it to work by following the instructions here
After all it wasn’t the css file that I needed to change, but the Pi autostart file in the /etc/xdg/lxsession/LXDE-pi/ folder.

[Goeste]

Thank you @ptrk95, that just came in handy while playing around with fullpageos and the magic mirror in my docker setup!

[floydrexdime]

Hi there! thanks for the easy fix! Is there a way to reposition the modules on the mirror? when I rotate the screen 90 degrees the bottom module (the newsfeed) its completely cut out.