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

[ptrk95]

@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

[evroom]

@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 and display_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 need rotate(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.

[ptrk95]

@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.

[evroom]

@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 ?

[evroom]

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.

[thedk]

Didnt work that easy for me.

1. You have to take the resolution of your display/monitor in the config.txt, not just 1600,900.
2. I had to enable overscan, cause the picture was to big.
3. 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.

[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…