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.

    Troubleshooting Positions

    Scheduled Pinned Locked Moved Solved Troubleshooting
    13 Posts 2 Posters 1.3k 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.
    • S Offline
      sdetweil @roaminMirror
      last edited by sdetweil

      @roaminMirror can you show me ~/MagicMirror/index.html
      that is the file i read for the regions

      it should not be changed unless you ate adding new regions

      also post the contents of ~/MagicMirror/js/positions.js

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        @roaminMirror see the doc on module position

        see the note
        IMG_0577.png

        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
          roaminMirror @sdetweil
          last edited by

          I haven’t made any changes to the index.html file. The config.js is unchanged as well as the positions.js file.

          <!doctype html>
          <html>
            <head>
              <title>MagicMirror²</title>
              <meta name="google" content="notranslate" />
              <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
          
              <meta name="apple-mobile-web-app-capable" content="yes" />
              <meta name="apple-mobile-web-app-status-bar-style" content="black" />
              <meta name="format-detection" content="telephone=no" />
              <meta name="mobile-web-app-capable" content="yes" />
          
              <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
              <link rel="stylesheet" type="text/css" href="css/main.css" />
              <link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
              <link rel="stylesheet" type="text/css" href="vendor/node_modules/animate.css/animate.min.css" />
              <!-- custom.css is loaded by the loader.js to make sure it's loaded after the module css files. -->
          
              <script type="text/javascript">
                window.mmVersion = "#VERSION#";
              </script>
            </head>
            <body>
              <div class="region fullscreen below"><div class="container"></div></div>
              <div class="region top bar">
                <div class="container"></div>
                <div class="top_bar"><div class="container"></div></div>
                <div class="region top center"><div class="container"><clock /></div></div>
                <div class="region top right"><div class="container"></div></div>
              </div>
              <div class="region upper third"><div class="container"></div></div>
              <div class="region middle center"><div class="container"></div></div>
              <div class="region lower third">
                <div class="container"><br /></div>
              </div>
              <div class="region bottom bar">
                <div class="container"></div>
                <div class="region bottom left"><div class="container"></div></div>
                <div class="region bottom center"><div class="container"></div></div>
                <div class="region bottom right"><div class="container"></div></div>
              </div>
              <div class="region fullscreen above"><div class="container"></div></div>
              <script type="text/javascript" src="socket.io/socket.io.js"></script>
              <script type="text/javascript" src="vendor/node_modules/nunjucks/browser/nunjucks.min.js"></script>
              <script type="text/javascript" src="js/defaults.js"></script>
              <script type="text/javascript" src="#CONFIG_FILE#"></script>
              <script type="text/javascript" src="vendor/vendor.js"></script>
              <script type="text/javascript" src="modules/default/defaultmodules.js"></script>
              <script type="text/javascript" src="modules/default/utils.js"></script>
              <script type="text/javascript" src="js/logger.js"></script>
              <script type="text/javascript" src="translations/translations.js"></script>
              <script type="text/javascript" src="js/translator.js"></script>
              <script type="text/javascript" src="js/class.js"></script>
              <script type="text/javascript" src="js/module.js"></script>
              <script type="text/javascript" src="js/loader.js"></script>
              <script type="text/javascript" src="js/socketclient.js"></script>
              <script type="text/javascript" src="js/animateCSS.js"></script>
              <script type="text/javascript" src="js/positions.js"></script>
              <script type="text/javascript" src="js/main.js"></script>
            </body>
          </html>
          
          ![positions.png](/assets/uploads/files/1735328208567-positions.png) 
          
          
          S 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @roaminMirror
            last edited by

            @roaminMirror cant attach files, only their text as a paste

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @roaminMirror are you running on Windows?

              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
                roaminMirror @sdetweil
                last edited by

                @sdetweil

                Yes I am running on windows for the time being until I am ready to move it to a RPI.

                The positions.js file is

                const modulePositions=["fullscreen_below"]
                

                If I attempt to change it and then start the server with npm run start it will revert back to the above code.

                S 2 Replies Last reply Reply Quote 0
                • S Offline
                  sdetweil @roaminMirror
                  last edited by

                  @roaminMirror interesting… I don’t see this problem on windows…

                  anyhow

                  edit js/utils.js
                  at the end is the function

                  getModulePositions () {
                  		// if not already discovered
                  		if (modulePositions.length === 0) {
                  			// get the lines of the index.html
                  			const lines = fs.readFileSync(indexFileName).toString().split(os.EOL);  
                  

                  change that last line to

                                         const lines = fs.readFileSync(indexFileName).toString().split('\n');  
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @roaminMirror I was able to recreate this on windows…

                    opened issue #3662 and submitted fix #3663
                    change to ‘\n’ as I proposed

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • R Offline
                      roaminMirror
                      last edited by

                      That was what was needed! Thank you for helping out with that!

                      S 1 Reply Last reply Reply Quote 0
                      • R roaminMirror has marked this topic as solved on
                      • S Offline
                        sdetweil @roaminMirror
                        last edited by

                        @roaminMirror great… fixed in next release (Wednesday)

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

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