MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Vertical Image Diagonal Line Issue

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    imageresolution
    13 Posts 2 Posters 4.8k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil @mfruckus
      last edited by

      @mfruckus see

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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      M 1 Reply Last reply Reply Quote 1
      • M Offline
        mfruckus @sdetweil
        last edited by

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

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @mfruckus
          last edited by

          @mfruckus cool… i just did a google search to find that info… will be great if you post a step by step for others

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • M Offline
            mfruckus
            last edited by

            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!

            1 Reply Last reply Reply Quote 1
            • M Offline
              mfruckus
              last edited by mfruckus

              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!

              1 Reply Last reply Reply Quote 0
              • 1
              • 2
              • 2 / 2
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy