Read the statement by Michael Teeuw here.
Save performance when rotating screen e.g. on Raspberry Pi
-
-
@keyun21 Correct, just give it a go and see what happens ;) Just delete the lines if something strange occours.
@justjim1220 Thanks for sharing! :)
Only disadvantage here is that you may have to change the styles of other modules, for example the Snow module doesn’t work right of the bat I think.
Also note that there might be a better way to code it, since I just googled how to rotate with CSS :D
-
@ptrk95 said in Save performance when rotating screen e.g. on Raspberry Pi:
and want to rotate the screen you can rotate
Did you counter clockwise rotated you screen ?
And therefore did ``transform: rotate(90deg);```??I originally rotated my screen clock wise (so the top now is on the right hand side) using
/boot/config.txt
anddisplay_hdmi_rotate=3
.
This works fine.When I use your css example and take out the /boot/config.txt line, it does not work right.
I figured I needrotate(270deg)
, but then I do not see anything.Besides that, the omxplayer modules need to be adjusted too (–orientation parameter), so I reverted back to my old method.
My question: can you setup your screen so that it rotates this way that you see everything upside down (to simulate a clockwise rotation in your case) ??
And then share the css code. -
@evroom Yes, I did rotate it counter clockwise.
I found a solution that worked for my setup, rotating the screen 270:
body { margin: 0; position: absolute; transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; object-fit: cover; top: 100vh; visibility: visible; }
Tell me if that worked for you. Then I`ll update the post :)
Adjusting the omxplayer orientation is one of the drawbacks.
-
@ptrk95 said in Save performance when rotating screen e.g. on Raspberry Pi:
Tell me if that worked for you.
Almost, but not quite.
It does rotate clock wise, but it is centered.
In Excel analogy: vertical alignment: center.
I would need ‘top’.This is my custom.css, probably the other settings interfere:
body { margin: 0; position: absolute; transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; object-fit: cover; top: 100vh; visibility: visible; } .region.top.left { width: 60%; } .region.middle.center { width: 60%; } .region.bottom.left { width: 60%; } .MMM-HTMLBox { font-size: 18px; line-height: 22px; } .MMM-RTSPStream header { text-align: left; } .MMM-RTSPStream .innerWrapper { border-style: none; //border: 1px solid red; }
I want the left side modules to occupy 60% and the right side modules 40%.
Maybe I have to interpret top, middle and bottom different now ? -
Okay, found it.
In my /boot/config.txt I had the width and height set to 900 and 1600 and this has to be now 1600 and 900.
This is working:display_hdmi_rotate=0 framebuffer_width=1600 framebuffer_height=900
Works now.
Only need to modify the omxplayer lines to have those streams rotated too.
-
Didnt work that easy for me.
- You have to take the resolution of your display/monitor in the config.txt, not just 1600,900.
- I had to enable overscan, cause the picture was to big.
- If you’re using the MMM-Remote_Control the picture is rotated when you have a look at your MagicMirror.
I switched back to the fake KMS driver.
-
Great hack!! I’m going to add this to my CSS 101 guide if that’s OK. I think this is incredibly useful.
-
@j-e-f-f thank you! Of course you can :)
-
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: