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

Change layout based on orientation?

Scheduled Pinned Locked Moved Development
13 Posts 2 Posters 1.7k 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.
  • G Offline
    gonzonia @sdetweil
    last edited by Mar 1, 2025, 7:48 PM

    @sdetweil That’s on the server side though. I was thinking more at the client side, so that you could have multiple clients using a single server with different views.
    For example:
    I have a pi hooked up to a monitor in the kitchen running MM in portrait.

    It might be nice to have it up on the TV in another room or on a second monitor while I’m working. Those will be in landscape.

    I think it can be done with shifting CSS mostly(https://forum.magicmirror.builders/topic/13197/change-the-regions-positions). But modules that use full screen might be a challenge.

    S 1 Reply Last reply Mar 1, 2025, 7:57 PM Reply Quote 0
    • S Offline
      sdetweil @gonzonia
      last edited by Mar 1, 2025, 7:57 PM

      @gonzonia yeh screen shifting is different than module shifting

      you can certainly detect the orientation in css

      on another app i support

      
      :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);
           };
       }
      
      /*@media screen and (width:3840px)  and (orientation: landscape) {
          :root{
          --scale-factor: width/var(--design-width);
      
          };
      }
      @media  screen and (width:1080px)   {
          :root{
          --scale-factor: width/var(--design-width);
          };
      }*/
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      G 1 Reply Last reply Mar 1, 2025, 8:06 PM Reply Quote 0
      • G Offline
        gonzonia @sdetweil
        last edited by Mar 1, 2025, 8:06 PM

        @sdetweil Yeah the challenge I’m having with the way I’ve chosen to lay things out is that I have things in the top left, top center, and top right. They are just below things in the top bar on the vertical screen. Using the CSS from the post that shifts them They are still below the top bar but I kind of want them to the right of the top bar. I’m plying with it to see what I can do, but since they are all part of the same container, I’m not sure I can.

        S 1 Reply Last reply Mar 1, 2025, 8:11 PM Reply Quote 0
        • S Offline
          sdetweil @gonzonia
          last edited by Mar 1, 2025, 8:11 PM

          @gonzonia there is a moduke that can
          move dynamically
          https://github.com/Toreke/MMM-Dynamic-Modules

          but it needs notifications

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          S 1 Reply Last reply Mar 1, 2025, 8:14 PM Reply Quote 0
          • S Offline
            sdetweil @sdetweil
            last edited by sdetweil Mar 1, 2025, 8:14 PM Mar 1, 2025, 8:14 PM

            @gonzonia or start a different instance on a different port for landscape

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            G 1 Reply Last reply Mar 1, 2025, 8:17 PM Reply Quote 0
            • G Offline
              gonzonia @sdetweil
              last edited by Mar 1, 2025, 8:17 PM

              @sdetweil That’s a thought. I think I can probably adapt the Dynamic Modules to allow for a config option to adjust based on orientation and that gets triggered at the ALL_MODULES_STARTED notification from the core.

              Let me fork that and see if I can make that work.

              S 1 Reply Last reply Mar 1, 2025, 8:49 PM Reply Quote 0
              • S Offline
                sdetweil @gonzonia
                last edited by sdetweil Mar 1, 2025, 8:49 PM Mar 1, 2025, 8:49 PM

                @gonzonia create your own module

                send the notifications when it matters

                lot easier

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                G 1 Reply Last reply Mar 1, 2025, 9:05 PM Reply Quote 0
                • G Offline
                  gonzonia @sdetweil
                  last edited by Mar 1, 2025, 9:05 PM

                  @sdetweil Maybe. I find it easier to build on someone else’s code. After I have some basic stuff functioning, I’ll look for a module template to work from. I’m also not sure the dynamic module will work (it’s 7 years old) so it might need to be updated anyhow.

                  S 1 Reply Last reply Mar 1, 2025, 9:06 PM Reply Quote 0
                  • S Offline
                    sdetweil @gonzonia
                    last edited by sdetweil Mar 1, 2025, 9:18 PM Mar 1, 2025, 9:06 PM

                    @gonzonia all you need is a
                    notificationReceived
                    “DOM_OBJECTS_CREATED”
                    if the width is greater than the height its landscape
                    then loop thru the config

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    G 1 Reply Last reply Mar 1, 2025, 9:31 PM Reply Quote 0
                    • G Offline
                      gonzonia @sdetweil
                      last edited by Mar 1, 2025, 9:31 PM

                      @sdetweil I’m going to make it more dynamic. There’s actually screen.orientation.type that works to get landscape vs portrait

                      S 1 Reply Last reply Mar 1, 2025, 9:37 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        7/13
                        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