Alternating Modules to save on real estate

amanzimdwini · Jul 19, 2016, 5:30 PM

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

KirAsh4 · Jul 20, 2016, 3:55 AM

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;
        }
      }
    }
  }
});

amanzimdwini · Jul 20, 2016, 3:55 AM

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

KirAsh4 · Jul 20, 2016, 4:54 PM

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. :)

KirAsh4 · Jul 20, 2016, 8:16 PM

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 …

amanzimdwini · Jul 21, 2016, 8:54 PM

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

KirAsh4 · Jul 21, 2016, 9:05 PM

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.

tobias789 · May 19, 2020, 7:21 AM

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

niksadon · May 20, 2021, 2:21 PM

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