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.

    Alternating Modules to save on real estate

    Scheduled Pinned Locked Moved Requests
    9 Posts 4 Posters 5.2k Views 3 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.
    • A Offline
      amanzimdwini
      last edited by

      There are now so many wonderful modules out there that my MM is a bit crowded :)

      So the logical question arises: might it be possible to alternate two modules in one location?

      I’m thinking along the lines of
      postion: top_left
      {module 1 = weather
      module2 = tasklist
      switchtime = 120 seconds}
      and every two minutes weather and tasklist would alternate.

      Thanks,
      Karl

      1 Reply Last reply Reply Quote 1
      • KirAsh4K Offline
        KirAsh4 Moderator
        last edited by KirAsh4

        This would be a crude way of doing it, by creating another module to manipulate the ones you want swapping. It’s crude, but it gets the job done. Ideally this would be just a routine that allows you to tell it which modules to swap, as opposed to them being hard coded like they are in this code. But, this is just to show that it’s possible. One caveat is that if one module is wider than the other, you will notice things on your screen jump around a bit. That’s just the way CSS works when an element gets removed, and the nature of the flexible regions that we use.

        This code swaps the default calendar and clock modules every 10 seconds, with a 2 seconds fade delay. The 'config.js' portion is simply:

            {
              module: 'my_swap',
            },
        

        and in 'modules/my_swap/' I have the following file called 'my_swap.js':

        Module.register("my_swap",{
        
          // Default module config.
          defaults: {
          },
        
          // Define required scripts.
          getScripts: function() {
            return ["moment.js"];
          },
        
          start: function() {
            Log.log("Starting module: " + this.name);
            this.DOMloaded = 0;
            this.isHidden = 0;
        
            var self = this;
            setInterval(function() {
              self.swapModules();
            }, 1000);
          },
        
          notificationReceived: function(notification, payload, sender) {
            if (notification === 'DOM_OBJECTS_CREATED') {
              this.DOMloaded = 1;
            }
          },
        
          // swapModules.
          swapModules: function() {
        
            var now = moment();
            var self = this;
        
            if (!(now.seconds() % 10)) { // Update on the tens (00, 10, 20, 30, 40, and 50)
              if (this.DOMloaded) {
                if (self.isHidden) {
                  MM.getModules().exceptModule(this).enumerate(function(module) {
                    if (module.name === "clock") {
                      module.hide(2000, function() {
                        MM.getModules().exceptModule(this).enumerate(function(module) {
                          if (module.name === "calendar") {
                            module.show(2000, function() {
                            });
                          }
                        });
                      });
                    }
                  });
                  self.isHidden = 0;
                } else {
                  MM.getModules().exceptModule(this).enumerate(function(module) {
                    if (module.name === "calendar") {
                      module.hide(2000, function() {
                        MM.getModules().exceptModule(this).enumerate(function(module) {
                          if (module.name === "clock") {
                            module.show(2000, function() {
                            });
                          }
                        });
                      });
                    }
                  });
                  self.isHidden = 1;
                }
              }
            }
          }
        });
        

        A Life? Cool! Where can I download one of those from?

        A 1 Reply Last reply Reply Quote 2
        • A Offline
          amanzimdwini @KirAsh4
          last edited by

          @KirAsh4
          That was fast. Thanks. I’ll give it a whirl.

          Yes, I understand about all the caveats - I like the fading: that will make the jumping less obvious. But that problem already exists if you place the news-ticker at bottom_center, since it will vary between 2 and three lines. And I guess I could force the alternating modules to have the same width.

          BTW: thanks for teaching how to program modules. I love learning this way.

          1 Reply Last reply Reply Quote 0
          • KirAsh4K Offline
            KirAsh4 Moderator
            last edited by KirAsh4

            The fading doesn’t make it less obvious. It happens because of the different sizes per module. Fade or not, you will see the other modules in the same region jump to adjust to the new sizing. Some days my calendar will have long entries, and it makes the clock above it move. So when I hide/show the calendar, the clock will jump back and forth. The regions being flexible is what allows for longer entries on the calendar to be seen, for example. Same with the news ticker as you’ve discovered. Having fixed regions can cause other problems as well.

            But, this should be a start for you. As I mentioned, it’s crude, and hard coded. I much rather have a function you can pass details to but I will leave that as an exercise for you. :)

            A Life? Cool! Where can I download one of those from?

            1 Reply Last reply Reply Quote 1
            • KirAsh4K Offline
              KirAsh4 Moderator
              last edited by

              By the way, this works best if the two modules you are trying to swap are right below each other in the 'config.js' file. For example, if you’re trying to swap ModA and ModB, your 'config.js' should list them together

              modules: [
              		{
              			module: 'ModA',
              		},
              		{
              			module: 'ModB',
              		},
              ],
              

              if you have a ModC in between them, it won’t ‘swap’ properly, it’ll just turn them off in alternate fashion while keeping them in their respective location. So you’ll end up with:

              startup
              ModA
              ModC
              ModB
              
              then
              ModC
              ModB
              
              then
              ModA
              ModC
              
              alternating ...
              

              Not particularly ideal …

              A Life? Cool! Where can I download one of those from?

              A 1 Reply Last reply Reply Quote 1
              • A Offline
                amanzimdwini @KirAsh4
                last edited by

                @KirAsh4
                Thanks! I messed around a bit with it - here is what I came up with. (and yes, 99.999% is yours!)
                Still, here it is for anyone else who wants to play with it. But ALL credit goes to @KirAsh4

                This works best for me for MMM-Wunderground and MMM-Wunderlist - which I keep at top-right.
                a) my config.js extract:

                                {
                                        module: 'my_swap',      // as supplied by KirAsh4
                                        config: {
                                                showsecs: 30,   // seconds each module is shown (default =30)
                                                                // 30 is a "relaxed" speed
                                                fadems: 4000,   // fade time in ms (default = 4000)
                                                                //  4000 is also very relaxed - no coffee yet.
                                                modA: 'MMM-WunderGround',  // both modules need to be listed NEXT
                                                modB: 'MMM-Wunderlist'     // they should be of similar size, 
                                                                           // and in the same location.
                                                                           // These two are _prefect_ 
                                                }
                                },
                                {
                                        module: 'MMM-WunderGround',
                                        position: 'top_right',
                                        config: {
                                                apikey: '****',
                                                pws: '****',
                                                lang: 'EN',
                                                fctext: '1',
                                                fcdaycount: "5",
                                                fcdaystart: "0",
                                                hourly: '1',
                                                hourlyinterval: "3",
                                                hourlycount: "1",
                                                alerttime: 10000,
                                                alerttruncatestring: "english:",
                                                fade: true
                                        }
                                },
                                {
                                        module: 'MMM-Wunderlist',
                                        position: 'top_right', 
                                        config: {
                                                accessToken: '****',
                                                clientID: '****',
                                                lists: [
                                                        'MagicMirror'
                                                        ],
                                                interval: 60,
                                                fadePoint: 0.9,
                                                fade: true
                                                }
                                },
                

                Then the file my_swap.js ( in \modules\my_swap) needs to look like this:

                Module.register("my_swap",{
                
                  // Default module config.
                  defaults: {
                        modA: "MMM-NonExistA",  // if we dont know the EXACT NAME, we don't do anything!
                        modB: "MMM-NonExistB",  //    ="=
                        showsecs: 30,           //  as in compliments
                        fadems: 4000            //    ="=
                  },
                
                  // Define required scripts.
                  getScripts: function() {
                    return ["moment.js"];
                  },
                
                  start: function() {
                    Log.log("Starting module: " + this.name);
                    this.DOMloaded = 0;
                    this.isHidden = 0;
                
                    var self = this;
                    setInterval(function() {
                      self.swapModules();
                    }, 1000);
                  },
                
                  notificationReceived: function(notification, payload, sender) {
                    if (notification === 'DOM_OBJECTS_CREATED') {
                      this.DOMloaded = 1;
                    }
                  },
                
                  // swapModules.
                  swapModules: function() {
                
                    var now = moment();
                    var self = this;
                
                        var mod1 = this.config.modA     // yank from config file
                        var mod2 = this.config.modB
                        var fadems = this.config.fadems
                        var showsecs = this.config.showsecs
                
                    if (!(now.seconds() % showsecs)) { 
                      if (this.DOMloaded) {
                        if (self.isHidden) {
                          MM.getModules().exceptModule(this).enumerate(function(module) {
                            if (module.name === mod1) {
                              module.hide(fadems, function() {
                                MM.getModules().exceptModule(this).enumerate(function(module) {
                                  if (module.name === mod2) {
                                    module.show(fadems, function() {
                                    });
                                  }
                                });
                              });
                            }
                          });
                          self.isHidden = 0;
                        } else {
                          MM.getModules().exceptModule(this).enumerate(function(module) {
                            if (module.name === mod2) {
                              module.hide(fadems, function() {
                                MM.getModules().exceptModule(this).enumerate(function(module) {
                                  if (module.name === mod1) {
                                    module.show(fadems, function() {
                                    });
                                  }
                                });
                              });
                            }
                          });
                          self.isHidden = 1;
                        }
                      }
                    }
                  }
                });
                

                Works great for me! Thanks again for the clean code to play with. You should submit it as an official module.

                1 Reply Last reply Reply Quote 1
                • KirAsh4K Offline
                  KirAsh4 Moderator
                  last edited by

                  Yep, what you did is pretty much the idea. You figured it out and used your modules in the code. It needs to be rewritten a bit to allow for configurable module names. Possibly also allow more than just 2 modules to be swapped. There are some other things I can think of but it’s not something that’s at the top of the list for me. It is sitting in my dev repository, but it’ll be a bit before I focus on it. I’m glad what I wrote is helping you out though.

                  A Life? Cool! Where can I download one of those from?

                  T 1 Reply Last reply Reply Quote 2
                  • T Offline
                    tobias789 @KirAsh4
                    last edited by

                    @KirAsh4 Is it also possible to create alternating modules from the same type? In my case, I’m trying to alternate 2 calendar modules. Thank you very much for your answer.

                    N 1 Reply Last reply Reply Quote 0
                    • N Offline
                      niksadon @tobias789
                      last edited by niksadon

                      @tobias789 said in [Alternating Modules it to save on real estate](/post/75481):

                      @KirAsh4 Is it also possible to create alternating modules from the same type? In my case, I’m trying to alternate 2 calendar modules. Thank you very much for your answer.

                      Unfortunately, no. You can only alternate between the two modules, as prescribed in the manual.

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