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.

    How to determine which monitor is being used at runtime

    Scheduled Pinned Locked Moved Hardware
    4 Posts 2 Posters 263 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.
    • R Offline
      rmustard511
      last edited by

      I make changes to my installation on a 27in monitor but run MM on a different monitor (located elsewhere in house) that uses a 14in (prior laptop) screen.

      Been looking around for a module (or some code) to let MM determine which monitor (runtime env) is being used - as the font sizes and module placements need to change to due the screen size differences. Note: Rpi 3 is being moved back and forth from one location to the other such that the only variable is the monitor.

      Anybody have a similar situation? How’d you handle i? (Don’t really want to use custom.css if don’t have to - as I would still need to know which monitor is being used!)

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

        @rmustard511 you can code into custom.css to switch resolutions based on screen size

        in another app I do

        :root{
          --scale-factor: 1;  /* set default scaling in case we have partial window, debug or in vm terminal window */
          --design-width: 1920px;
          --design-height: 1080px;
        }
        
        @media screen and (orientation: landscape) {
            :root{
                --scale-factor: var(width) / var(--design-width);
             };
         }
         @media screen and (orientation: portrait) {
            :root{
                --scale-factor: var(width) / var(--design-height);
             };
         }
        

        and then I can scale the font size (and other things, border. … blah blah blah ) based on that

        ul.calendar {
            list-style: none;
            font-size:  calc( 22px * var(--scale-factor));
            margin-left:  calc( 10px * var(--scale-factor));
            padding: 0;
        }
        

        the hard coded value is the expected horizontal value at the default resolution

          --scale-factor: 1;  /* set default scaling in case we have partial window, debug or in vm terminal window */
          --design-width: 1920px;
          --design-height: 1080px;
        

        so smaller screens will get smaller size and large screens will get larger size

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        R 1 Reply Last reply Reply Quote 0
        • R Offline
          rmustard511 @sdetweil
          last edited by

          @sdetweil Thanks Sam. I’ll give that a shot soon as I get a chance. I suspect I’ll mess it up… and make new questions… (as a newbie on this!!)

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

            @rmustard511 no problem, we all have to learn stuff every day

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • 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