Rotate screen by custom.css work only for -90deg
-
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?
-
try this:
html { transform: rotate(-90deg); transform-origin: left top; position: absolute; top: 100%; left: 0; } body { height: 100vw; width: 100vh; }
-
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)
-
transform: rotate(90deg); transform-origin: right bottom; position: absolute; bottom: 100%; right: 0;
-270 = 90 and 270 = -90
why you need 0 and 180? -
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?
-
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);
-
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; }
-
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…
-
height: calc(100% - 0px); width: calc(100% - 0px);
are pointless, make them
height: 100%; // or 100vh width: 100%; // or 100vw