Alternating Modules to save on real estate

[amanzimdwini]

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

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]

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]

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

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]

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

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