Rotate screen by custom.css work only for -90deg

Joern

Hello,

based on that showcase here
[Showcase] (https://forum.magicmirror.builders/topic/9707/save-performance-when-rotating-screen-e-g-on-raspberry-pi/12)
I tried to rotate screen. So post it here again in Troubleshooting, as showcase is not right place for support I assume.

Iam struggeling on my PI3 to rotate by 90deg to right. Monitor has 1920x1080.
Doing it I see only black screen at any other position than -90deg!!
At -90deg screen is there only upside done…
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/wrong?

hango

try this:

html {
	transform: rotate(-90deg);
	transform-origin: left top;
	position: absolute;
	top: 100%;
	left: 0;
}

body {
	height: 100vw;
	width: 100vh;
}

Joern

Hello,

I tried your proposal in custom.css.

For -90deg as written works fine.
For 90deg again black screen.

(edit: 0deg , 180deg, -270deg result in black screen)

hango

	transform: rotate(90deg);
	transform-origin: right bottom;
	position: absolute;
	bottom: 100%;
	right: 0;

-270 = 90 and 270 = -90
why you need 0 and 180?

Joern

Screen appears THANKS, but whole display is having a offset of approx 10% moved to right… (left black bar, right gutted away…)

bottom: 110%; works for right side, but left side is cutted.

ist that something that is driven maybe by config or main.css?

Joern

After removing frame margin from main.css body, works fine!!
@hango - Big thanks for super fast reply!!

body {
  margin: 0px;
  position: absolute;
  height: calc(100% - 0px);
  width: calc(100% - 0px);

hango

yes, in main.js the value of body is

margin: 60px;
height: calc(100% - 120px);
width: calc(100% - 120px);

now if you change this in custom.css (do not edit main.css) you need to ajust the left just as you did with bottom 110%

if you change body margins keep in mind to change

.region.fullscreen {
  position: absolute;
  top: -60px;           // same as body margin but with -
  left: -60px;          // same as body margin but with -
  right: -60px;         // same as body margin but with -
  bottom: -60px;        // same as body margin but with -
  pointer-events: none;
}

Joern

bottom 110% was first try, but cutted away parts on left side even if there was space… Margin 0, if not other issues will come - works fine as mirror is anyhow bigger…

hango

height: calc(100% - 0px);
width: calc(100% - 0px);

are pointless, make them

height: 100%;     // or 100vh
width: 100%;      // or 100vw