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

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?


  • Module Developer

    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)


  • Module Developer

    	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);
    

  • Module Developer

    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…


  • Module Developer

    👍🏻

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

    are pointless, make them

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

Log in to reply