My module stops MMM-Pages working

[sdetweil]

The only notice you can provide is calling updateNotification to inform MagicMirror that your module has new content to display
AND Only after ALL_MODULES_STARTED, and After the first getDom() call

[Scott-M]

@sdetweil said in My module stops MMM-Pages working:

you dont tell MagicMirror you are ready, it tells you

You wait for ALL_MODULES_STARTED
You can start operations in start()
Do whatever, but you can’t draw yet

getDom() will be called for your content the first time

You never SEND any of those notifications

https://github.com/sdetweil/SampleModule

See my sample module

You are absolutely correct, I should have properly read about the life cylce of MagicMirror first.

I changed socketNotificationRecieved to

  socketNotificationReceived: function (notification, payload) {
    if (notification === "UPDATED_ROUTES") {
      this.timesReturned = payload;
      this.loaded = true;
      this.updateDom();
    }
  },

and added this in getDom()

    // show message until we have data
    if (!this.loaded) {
      container.innerHTML = "<div class='no-data'>Loading bus times…</div>";
      return container;
    }

I think the module made updateDom() call before returning a valid DOM the first time. Let me know what you think! This also works now…

[sdetweil]

@Scott-M not quite…

i avoid this state setting (this.loaded) by always waiting til ALL_MODULES_STARTED
before asking my helper to work, then I KNOW its good on socketNotificationReceived to use updateDom

notificationReceived: function(notification, payload, sender) {
		// once everybody is loaded up
		if(notification==="ALL_MODULES_STARTED"){
			// send our config to our node_helper
			this.sendSocketNotification("CONFIG",this.config)
		}

note: you CAN still get getDom() called BEFORE your socketNotification has been called by your node_helper sending data
so you need to check for data and return an empty DIV… (getDom MUST return SOMETHING)

[Scott-M]

@sdetweil
I think I understand, am I getting closer with something like this:

Module.register("MMM-TravelLine", {
  start() {
    this.timesReturned = [];
  },

  notificationReceived(notification, payload, sender) {
    if (notification === "ALL_MODULES_STARTED") {
      console.log("All modules started; fetching routes now");
      this.sendSocketNotification("FETCH_ROUTES", {
        username: this.config.username,
        password: this.config.password,
        apiBase: this.config.apiBase,
        stopIDs: this.config.stopIDs,
        timestamp: new Date().toISOString()
      });

      // Schedule refresh
      setInterval(() => {
        this.sendSocketNotification("FETCH_ROUTES", {
          username: this.config.username,
          password: this.config.password,
          apiBase: this.config.apiBase,
          stopIDs: this.config.stopIDs,
          timestamp: new Date().toISOString()
        });
      }, this.config.updateFrequency * 60 * 1000);
    }
  },

  socketNotificationReceived(notification, payload) {
    if (notification === "UPDATED_ROUTES") {
      this.timesReturned = payload;
      this.updateDom();
    }
  },

  getDom() {
    const container = document.createElement("div");
    container.className = "travelline-container";

    if (!Array.isArray(this.timesReturned) || this.timesReturned.length === 0) {
      container.innerHTML = "<div class='no-data'>Loading bus times…</div>";
      return container;
    }

    // ...builds table etc.......

    return container;
  }
});

Again, I have lost my remote conection to the PI so I can’t try it until tomorrow!

[sdetweil]

@Scott-M said in My module stops MMM-Pages working:

yes, looks good…

container.className = “travelline-container”;

you don’t have to set a class on the wrapper/container,
as MagicMirror has set your module name as a class on the module entry

open the developers window, and examine the html layout for a module in the elements tab
see the second link in my signature below

[Scott-M]

@sdetweil Great, will hopefully get my mirror on the wall next week!#

[sdetweil]

@Scott-M awesome!