• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 276 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 Jul 15, 2024, 8:55 PM

    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 Jul 15, 2024, 9:58 PM Reply Quote 0
    • S Offline
      sdetweil @rmustard511
      last edited by Jul 15, 2024, 9:58 PM

      @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 Jul 21, 2024, 6:19 PM Reply Quote 0
      • R Offline
        rmustard511 @sdetweil
        last edited by Jul 21, 2024, 6:19 PM

        @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 Jul 21, 2024, 7:20 PM Reply Quote 0
        • S Offline
          sdetweil @rmustard511
          last edited by Jul 21, 2024, 7:20 PM

          @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
          1 / 1
          • First post
            3/4
            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