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 if you look at the messages from npm start you should see an error maybe

      one of the ideas was to make the positions extendable/customizable…
      currently you have to edit 5 files.

      SO, I added code to read the index.html file, which has the positions/regions used defined, in the server side where I can read a file
      BUT I need to pass that info to the browser side code that checks it…
      SO, I WRITE the list of positions to a file js/positions.js

      someone else reported that they got a permission denied on this write…
      (cause they had used sudo to install MM… oops)
      it also fails on synology nas drives under docker, if the storage is created by a synology user , and accessed from the docker user(1000)

      you can erase that file, js/positions.js
      and it will be recreated

      I added a new message to the next release about this permissions problem, instead of crashing

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

        @roaminMirror Thank you for your reply. What are the 5 files that I will need to edit to have the positions be recoginized and allowed in the positions.js file? I found that editing it manually it will, as you mentioned, recreate itself in the original manner. I am assuming it is gathering it’s array from another location butI am not sure what file is creating that positions.js file with this const modulePositions=[“fullscreen_below”]e with the array .

        The only position that is working is Fullscreen_Below for some reason. Sorry I am just not understanding.

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