Read the statement by Michael Teeuw here.
Save performance when rotating screen e.g. on Raspberry Pi
-
@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:
-
transform: rotate(90deg); transform-origin: top right;
works at least see have screen, but only half screen is used, so no option…
-
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=900Any 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.