Here’s an update with an even better fix!

While beginning my journey into custom css, I quickly came across another fix to the poor graphics of a vertically rotated screen. In my opinion, this fix is even better than using xrandr because this fix saves a ton on performance, results in a look just as good as using the screen in its native horizontal look, and once you implement it, it will stay implemented.

All you have to do is copy and paste the following to your MagicMirror’s custom css:

 body {
        margin: 0;
	position: absolute;
 	transform: rotate(90deg);
 	transform-origin: bottom left;
	width: 100vh;
	height: 100vw;
	object-fit: cover;
	top: -100vw;
        visibility: visible;
 }

There you go, just like that you’re set. The custom css of modules may have to be edited as well to make it work but that’s a small price to pay for a much better finished product.

Credit where credit is due, I found this fix right here on the forum!

Here’s a fix for screen tearing/graphical errors when you’ve rotated the screen to a vertical position.

First, you need to change your GL Driver to Full KMS. To do so, run:

     sudo raspi-config

• Select Advanced Options

• Select GL Driver

• Select G1 GL (Full KMS) OpenGL desktop driver with full KMS

• Select Finish

• Reboot

Upon reboot, you’ll find your screen is horizontal.
To fix this, first run:

     xrandr -q

You will be presented with a list of ports, the port that your monitor is connected to will say “connected.”

It should look something like this:

Screen 0: minimum 320 x 200, current 1080 x 1920, maximum 2048 x 2048
HDMI-1 connected 1080x1920+0+0 (normal left inverted right x axis y axis) 1210mm x 680mm
1920x1080i 60.0*+
1680x1050 59.8 60.0
1024x768 60.0
800x600 60.3 56.2
640x480 59.9
Composite-1 unknown connection (normal left inverted right x axis y axis)
720x480 62.69

In my instance, the port I need to know is HDMI-1. Yours may very well be different.

Now, using the name of the connected port, run:

xrandr --output (name of your connected port) --rotate right

My example would be:

xrandr --output HDMI-1 --rotate right

There you go! Now, your screen is vertical and not suffering from the awful screen tearing that it was. Not going to say it’ll look as good as it does horizontally but this fix vastly improved how my raspberry pi and MagicMirror looked when the screen is vertical.

I haven’t yet figured out how to make xrandr rotate on boot (any assistance there would be appreciated!) therefore, you’ll have to rotate the screen each time you boot it up.

When I do figure out how to make xrandr rotate upon boot, I’ll amend this guide!

Good luck, everybody!

@sdetweil said in Vertical Image Diagonal Line Issue:

@mfruckus see

https://askubuntu.com/questions/95812/how-can-i-rotate-my-display-in-the-most-easy-way/95825

Thanks so much man. I got it working. This was the exact info I needed.

Rendering is still imperfect but there’s no screen tearing at all. Really really appreciate it. Going to post a detailed solution here shortly because this info is too hidden.

At this point, from what I’ve read, the issue of the screen tearing when vertical seems to be related to using the legacy driver. Supposedly a switch to Full KMS should work but I need to rotate my screen using xrandr. Can anyone give me the breakdown on using xrandr to rotate my screen vertically?

Would be supremely appreciated

I’ve also tried installing just a clean raspbian stretch. However, the problem persists when I rotate the display with only the desktop environment of stretch running.

I’m now thinking that the 32" Samsung I’m using may be the issue and I’m going to try out another make/model.

I’ve also tried installing just a clean raspbian stretch. However, the problem persists when I rotate the display with only the desktop environment of stretch running.

I’m now thinking that the 32" Samsung I’m using may be the issue and I’m going to try out another make/model.

Hi all,

I’m new to the forum, new to the rapberry pi, and could use some help.

I’m building a MagicMirror, or at least I’m using MagicMirror as a starting point for different projects.

Everything has been going well for the most part. I used NOOBS to get set up but only installed Raspbian Stretch (I suspect this may be a part of the issue). I installed MagicMirror. Then, I rotated the display to vertical in /boot/config.txt and while it worked, now the screen is acting pretty oddly.

The display seems to have been divided by 2 near invisible diagonal lines. They make the display look in essence like 2 or 3 parallelograms fashioning a single image rather than a single rectangle fashioning a single image.

It only is noticeable when an image is moving but that’s pretty undesirable as I’d like to be able to view video or image slideshows on it without it looking glitchy.

I’ve tried some different solutions but to no avail.

Things I’ve tried:

• set the gpu memory split to 256 both in /boot/config.txt and raspi-config

• changed the GL driver. When I switch to either Full or Fake kms and reboot, the screen is no longer vertical despite my /boot/config.txt telling it to display_rotate=1. Because it doesn’t actually go vertical in either full or fake KMS , there’s no way for me to know if it helps my issue. I’m only able to have a vertical display in Legacy.

• alter /boot/config.txt in multiple ways I saw suggested online.

I’m pretty stumped and haven’t seen much discussion of this online.

Here’s a Youtube link to a video of my build for reference. When the slideshow transfers to the snow scene you can really see the divisions in the screen.

https://youtu.be/ZzL0XMkV7hM

Any help would be greatly appreciated.

Thanks in advance

I tried out all of the options (Full Kernel, Fake Kernel, and Legacy).

For some reason, using the Full Kernel and the Fake Kernel somehow disregards my /boot/config.txt which tells it to rotate vertically. Changing the value and rebooting does nothing. I’m only able to be vertical at all when using Legacy.

I’m fairly confounded as to why I’m not even able to get the display vertical with Full KMS and Fake KMS. My hunch is that it may not be of huge importance to my diagonal line issue.

Even when using Legacy, if the display is horizontal, there’s no diagonal lines. It seems that it just wants to divide the vertical screen with a couple diagonal lines. There must be a solution though.

@sdetweil Thanks for the info. I’m going to give it a shot and I’ll come back with results.

cheers

@sdetweil I’m really new to all of this so I’m not 100% certain if I am or not. Is there a way that I could check?