MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

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


  • Module Developer

    @j-e-f-f thank you! Of course you can 🙂



  • 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 😜



  • transform: rotate(90deg);
    transform-origin: top right;
    

    works at least see have screen, but only half screen is used, so no option…



  • Warning! Extreme newbie here. This is only my second day playing with Magic Mirror css.

    I changed my css file and boot/config.txt following @evroom’s instructions above and although I was able to rotate the screen with these instructions, like @Joern, the Magic Mirror modules only fill the bottom half of the screen.

    My CSS file is as follows (sorry, I don’t know how to put this in a separate box):

    body {
    margin: 0px; If I omit “px”, Magic Mirror does not display correctly.
    position: absolute;
    transform: rotate(90deg);
    transform-origin: top right;
    width: 100vh;
    height: 100vh; If I change this to “100vw”, Magic Mirror does not display correctly.
    object-fit: cover;
    top: 100vh;
    visibility: visible;
    background: #000;
    color: #aaa;
    font-family: “Roboto Condensed”, san-serif;
    font-weight: 400;
    font-size: 2em;
    line-height: 1.5em;
    -webkit-font-smoothing: antialiased;
    }
    .MMM-HTMLBox {
    font-size: 18px;
    line-height: 22px;
    }
    .MMM-RTSPStream header {
    text-align: left;
    }
    .MMM-RTSPStream .innerWrapper {
    border-style: none;
    }

    …a few more entries after these ones.

    My boot/config.txt contains the following entry:

    display_hdmi_rotate=0
    framebuffer_width=1600
    framebuffer_height=900

    Any entries shown here that were not included in @evroom’s instructions, are from the original installation of Magic Mirror.

    I’m running Magic Mirror latest software on a Pi4 with an Acer 24" monitor.

    Any ideas as to what I should change in order for the modules to fill the entire screen?

    Any help will be greatly appreciated.



  • @hdez said in Save performance when rotating screen e.g. on Raspberry Pi:

    (sorry, I don’t know how to put this in a separate box

    after you paste the text, select it, and then push the button above the editor that looks like </>



  • @sdetweil Thanks. Next time.



  • Never mind guys I was able to get it to work by following the instructions here
    After all it wasn’t the css file that I needed to change, but the Pi autostart file in the /etc/xdg/lxsession/LXDE-pi/ folder.


Log in to reply