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

Troubleshooting Positions

Scheduled Pinned Locked Moved Solved Troubleshooting
13 Posts 2 Posters 1.1k 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 @sdetweil
    last edited by Dec 27, 2024, 7:24 PM

    @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 Dec 27, 2024, 7:37 PM Reply Quote 0
    • R Offline
      roaminMirror @sdetweil
      last edited by Dec 27, 2024, 7:37 PM

      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 Dec 27, 2024, 7:41 PM Reply Quote 0
      • S Offline
        sdetweil @roaminMirror
        last edited by Dec 27, 2024, 7:41 PM

        @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 Dec 27, 2024, 7:51 PM

          @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 Dec 27, 2024, 7:56 PM Reply Quote 0
          • R Offline
            roaminMirror @sdetweil
            last edited by Dec 27, 2024, 7:56 PM

            @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 Dec 27, 2024, 8:00 PM Reply Quote 0
            • S Offline
              sdetweil @roaminMirror
              last edited by Dec 27, 2024, 8:00 PM

              @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 Dec 28, 2024, 2:08 AM

                @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 Dec 30, 2024, 3:53 PM

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

                  S 1 Reply Last reply Dec 30, 2024, 4:12 PM Reply Quote 0
                  • R roaminMirror has marked this topic as solved on Dec 30, 2024, 3:54 PM
                  • S Offline
                    sdetweil @roaminMirror
                    last edited by Dec 30, 2024, 4:12 PM

                    @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
                    1 / 2
                    • First post
                      9/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