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.

    Divide Config.js into modules

    Scheduled Pinned Locked Moved Unsolved Feature Requests
    21 Posts 7 Posters 9.9k Views 6 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 Do not disturb
      sdetweil
      last edited by sdetweil

      Well, there is one problem.

      Once u put the info in each module folder, you will lose the ability to order the modules differently

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

        @sdetweil said in Divide Config.js into modules:

        Well, there is one problem.

        Once u put the info in each module folder, you will lose the ability to order the modules differently

        Nope the modules are declared in /config/config.js not that I have much experience but my new noob experience of MM is that with complexity it starts to get a bit cumbersome.

        As an example would you really want to add compliments to your main config.js.
        I am just wondering if it could be split and presented slightly more cleanly and simpler for the likes of me.

        module: "calendar",
        			header: "Calendar",
        			position: "top_left",
        

        Would still be the same place and it would in essence just be the same but the bloat of

        config: {
        

        Would be elsewhere.

        Also if it was loaded serially as different objects declared by config.js then each module config could have some form of isolation and error checking?
        Gson gson = new Gson();
        JsonObject jsonObj = gson.fromJson (jsonStr, JsonElement.class).getAsJsonObject();
        jsonObj.add(“criterias”, “Location”);

        Dunno as really know naff about NodeJS but thinking you could even make it more robust with feedback to which module config error?

        1 Reply Last reply Reply Quote 0
        • S Do not disturb
          sdetweil
          last edited by

          So, you end up with two places to config …

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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

            Yes and actually multiple places as to which modules you installed as that is the whole point of dividing the config.js into smaller module based configs.
            I am presuming it could also pre-parse and raise errors to which module the error is located.

            Only starts getting relevant with complex setups as the base is extremely simple but rather than linux having a single file in /etc/… the config is divided to make working easier.

            1 Reply Last reply Reply Quote 0
            • A Offline
              artieikon
              last edited by

              I also agree with this approach as it will allow us to script configuration/deployment easier. It would be similar to configurations done in other applications ie Nginx. For loadbalancing you just have a folder you can add all endpoints, ports, what have you and the system itself will read everything in there and make a master behind the scenes.

              I’ve tried to do something similar and stitch them together by hand but it seems that if i place any ‘require’ statement in the config.js file MM does not properly load my configs. I can monitor the logs and everything gets parsed and output properly, just when i go to the actual UI it just shows the standard “Please create a config file.” screen. I could not find any logs anywhere that show any additional errors of why this is not wanting to start.

              S 1 Reply Last reply Reply Quote 0
              • S Do not disturb
                sdetweil @artieikon
                last edited by sdetweil

                @artieikon require is not allowed in module.js, but you could use the getScripts function to load them

                Also

                Start mm in developers mode

                npm start dev
                

                Then select the console tab to see what’s going on in the modules
                Node_helpers display info in the terminal window

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                A 1 Reply Last reply Reply Quote 0
                • ? Offline
                  A Former User
                  last edited by

                  I always want Conditional Loading or Lazy Loading. I want programmable Pre-processor for which module should be loaded or not by just mention it.
                  And if configuration for each module be separated, PPL would make less mistakes on configuration step and at least, It could be easier to find which configuration wrong.

                  S A 2 Replies Last reply Reply Quote 1
                  • ejay-ibmE Offline
                    ejay-ibm Project Sponsor Module Developer
                    last edited by

                    I can only agree 1 config file per module in the config folder and you can get rid of a lot of mistake

                    1 Reply Last reply Reply Quote 0
                    • S Do not disturb
                      sdetweil @Guest
                      last edited by

                      @sean thats all cool, but will take significant rewrite of the core services…

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @sdetweil said in Divide Config.js into modules:

                        @artieikon require is not allowed in module.js, but you could use the getScripts function to load them

                        Also

                        Start mm in developers mode

                        npm start dev
                        

                        Then select the console tab to see what’s going on in the modules
                        Node_helpers display info in the terminal window

                        You are amazing! thank you so much for this

                        S 1 Reply Last reply Reply Quote 0
                        • A Offline
                          artieikon @Guest
                          last edited by

                          @Sean
                          Lazy loading is always a quality thing to have. Anything that takes away from startup times and pre-processing generally helps user experience greatly.

                          I think it’s been overlooked because of the “hide modules using an orchestrater” so its not like functionality is being lost. But the benefit of it would still be there

                          S 1 Reply Last reply Reply Quote 0
                          • S Do not disturb
                            sdetweil @artieikon
                            last edited by

                            @artieikon also, please create a config file is because of a syntax error in the config file…

                            from the MM folder do

                            npm config:check
                            

                            fix errors from the top down

                            Sam

                            How to add modules

                            learning how to use browser developers window for css changes

                            A 1 Reply Last reply Reply Quote 0
                            • S Do not disturb
                              sdetweil @artieikon
                              last edited by

                              @artieikon yeh, but generally people startup once and it runs for months…

                              Sam

                              How to add modules

                              learning how to use browser developers window for css changes

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

                                @sdetweil

                                npm run config:check
                                

                                but that actually came back valid since there are no syntax errors it just blew up on me runtime. The dev mode properly shows what is the issue though

                                1 Reply Last reply Reply Quote 0
                                • BKeyportB Offline
                                  BKeyport Module Developer
                                  last edited by

                                  I do two things myself to make it sane.

                                  1st, I use geany to edit. It’s a dream to work with, and keeps all my { with my } …

                                  2nd, I’ve reorganized my config file as follows (Config options and modules removed to protect secure data).

                                  /* Magic Mirror
                                   * Live Config
                                   * By Brendan Keyport
                                   */
                                  
                                  var config = {
                                  	modules: [
                                  // top_bar 
                                  // top_left
                                  // top_center 
                                  // top_right 
                                  // upper_third 
                                  // middle_center 
                                  // lower_third 
                                  // bottom_left 
                                  // bottom_center 
                                  // bottom_right
                                  // bottom_bar 
                                  // fullscreen_above 
                                  // fullscreen_below 
                                  // Hidden & Background
                                  // End modules before this line, do not edit below
                                  ]
                                  };
                                  if (typeof module !== "undefined") {module.exports = config;}
                                  

                                  The "E" in "Javascript" stands for "Easy"

                                  1 Reply Last reply Reply Quote 0
                                  • A Offline
                                    artieikon
                                    last edited by artieikon

                                    Stumbling though the process to get this working the way i want. Just felt like i should share.

                                    From what i surmise config.js is used both client side and server side. This is why “require” doesnt work and the browser complains. That is a server side construct and cannot be used client side.

                                    Cool whatever, we have other ways to do things. Next i started trying to use XMLHttpRequest.
                                    This blew up on me because electron does not support hitting the filesystem from the browser unless you set webSecurity to false. Cool this seems doable as we can pass in that value in the electronOptions in the config.js

                                    Here’s where the fun happens. This doesnt work because that is done server side and it also uses the same config.js. Server side it cant resolve XMLHttpRequest because you need a “requires” statement to get it but then that blows up client side.

                                    I can hack it in by specifying the webSecurity setting in the js/electron.js file as a default but that seems far too darn hacky. Im still stuck with the client showing the modules properly but the server not loading them… next try will be to run server only and client only with slightly different configs :vomit:

                                    S 1 Reply Last reply Reply Quote 0
                                    • A Offline
                                      artieikon
                                      last edited by

                                      Got it working. Here is some simple code for anyone curious. There is probably a better way to get the same outcome, but this seems to work for now so I’m happy with it. Obviously this is rather useless currently, but I’m planning on iterating over a directory to pull out configs and parse them into modules, but i wanted to share the simple version first.

                                      config.js

                                      if (typeof window === 'undefined') {
                                      // Server side add requires here
                                              var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
                                      } else {
                                      // client side only code here
                                      }
                                      
                                      var Http = new XMLHttpRequest();
                                      var url = "file:///location/of/file/abc.txt";
                                      Http.open("GET", url, false);
                                      Http.send();
                                      
                                      var mods = [
                                              {
                                                      module: Http.responseText.trim(),
                                                      position: "top_left"
                                              },
                                      ];
                                      
                                      
                                      var config = {
                                              address: "0.0.0.0",
                                              port: 8080,
                                              ipWhitelist: [],
                                              language: "en",
                                              timeFormat: 12,
                                              units: "imperial",
                                              modules: mods,
                                              electronOptions: { webPreferences: { webSecurity: false } }
                                      };
                                      
                                      /*************** DO NOT EDIT THE LINE BELOW ***************/
                                      if (typeof module !== "undefined") {module.exports = config;}
                                      

                                      abc.txt

                                      clock
                                      

                                      Notes:

                                      • Without specifying webSecurity: false Electron will not allow you to access a file that is not served up by the application. This is a security risk so use at your own discretion.
                                      • typeof window === 'undefined' is how I am figuring out if this code is executing server side or client side. Server side I had to add the require to be able to use XMLHttpRequest.
                                      1 Reply Last reply Reply Quote 0
                                      • S Offline
                                        stuartiannaylor
                                        last edited by

                                        @lavolp3 said in MMM-Compliments doesn't load:

                                        @stuartiannaylor yes that’s all you need in the config part.

                                        The module entry looks like this for me:

                                            },
                                                {
                                                //disabled: true,
                                                module: "compliments",
                                                position: "lower_third",
                                                config: {
                                                    classes: 'small',
                                                    remoteFile: 'xxxxxxx.json',
                                                    updateInterval: 12*60*60*1000,
                                                }
                                            },
                                        

                                        As that is a top tip and ‘small’ ?
                                        Dont know what you mean with that. I think you don’t need to give it a class but with this class you can determine the size of the text.

                                        remoteFile is a file, not a folder. But it can be anywhere, however if it’s not in the module directory you ned to give the absolute path “/home/pi/…”

                                        1 Reply Last reply Reply Quote 0
                                        • S Do not disturb
                                          sdetweil @artieikon
                                          last edited by

                                          @artieikon u can get files from the filesystem without special config settings just setup an express url handler in the node helper. See the MMM-ImagesPhotos module for an example use.

                                          Node_helper sets up the express url handler, module does a request to that url, and handler gets invoked, and files are found and their names are returned. The a url request is made for a file and it’s contents are returned.

                                          Module doesn’t know helper provided the files list or data

                                          Sam

                                          How to add modules

                                          learning how to use browser developers window for css changes

                                          1 Reply Last reply Reply Quote 0

                                          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                          With your input, this post could be even better 💗

                                          Register Login
                                          • 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