Nunjucks and Chartjs / Javascript

sdetweil

@lavolp3 according to the code in app/js/module.js

its either template OR dom, not both.

	/* getDom()
	 * This method generates the dom which needs to be displayed. This method is called by the Magic Mirror core.
	 * This method can to be subclassed if the module wants to display info on the mirror.
	 * Alternatively, the getTemplate method could be subclassed.

using Chart.js in my module I do

   				position: 'top_right',

in config, so that is the base location
then

create the canvas div, and then the chart in the canvas (I could have multiple charts to draw, from an array of data)

					var this_pin = wself.config.Pins[pin_index];
					// clear the work variable
					var canvas = null;
					// try to locate the existing chart
					if ((canvas = document.getElementById("myChart" + this_pin)) == null) {
						var c = document.createElement("div");
						c.style.width = wself.config.width + "px";
						c.style.height = wself.config.height + "px";
						if (!wself.config.stacked)
						{c.style.display = "inline-block";}
						wself.wrapper.appendChild(c);

						canvas = document.createElement("canvas");
						canvas.id = "myChart" + this_pin;
						c.appendChild(canvas);
					}
					// if the chart has been created
					if (wself.charts[pin_index] != null) {
						// destroy it, update doesn't work reliably
						wself.charts[pin_index].destroy();
						// make it unreferenced
						wself.charts[pin_index] = 0;
					}
					// create it now
					wself.charts[pin_index] = new Chart(canvas, {
						type: "line",
						showLine: true,
						data: {
...
            // then return the outer container div 
		return wself.wrapper;

U could download my module and look at it
https://github.com/sdetweil/WaterLevels

so, in the end I have

wrapper  (div)
     div (chart 1)
       chart canvas
     div (chart 2)
       chart canvas
     ...
     div (chart n)
       chart canvas

I have never used templates for anything… (I have enough trouble with normal code)

lavolp3

@sdetweil

Thanks Sam.
I have built a module with chart.js as well, no problme with that, however this time I am kind of dependant on nunjucks because I had forked a project and do not want to rebuild everything.

But thanks for pointing me to the core code. I always forget to have a look into that.

lavolp3

@sdetweil said in Nunjucks and Chartjs / Javascript:

its either template OR dom, not both.
/* getDom()

This method generates the dom which needs to be displayed. This method is called by the Magic Mirror core.

This method can to be subclassed if the module wants to display info on the mirror.

Alternatively, the getTemplate method could be subclassed.

I understand this differently from the core code.
From what I see getDom is the parent function and getTemplate fills this with html code from a template. So in a module using nunjucks you could call getDom AND getTemplate separately.
And manipulate the dom after the template is loaded.
But that is something I fail to do…

sdetweil

@lavolp3 note… if you have the functions getDom, and getTemplate and getTemplateData
then the core methods will NOT be called.

i think IF you have getDom , then unless YOU call them , getTemplate and getTemplateData will NOT be called. (because u replaced the built in getDom() with your own version)

getTemplate and getTemplateData are ONLY called from the default getDom

I confirmed this in one of my modules that uses getDom()… I added the template methods, and logged when they were called…

getTemplate: function() {
	Log.log("in getTemplate");
	return "";
},
getTemplateData: function (){
	Log.log("in getTemplateData");
	return "";
}

they were not called

lavolp3

@sdetweil fully understood and agree.
Thinking about replacing getdom with the native one and somehow implementing my chart function but there has to be a simpler way.

After all getdom is the only function replacing the dom, in my case loading the template, isn’t it?. So there must be a way to manipulate the dom directly after it has been created.

lavolp3

Wait. There is an asynch function in the getdom function, isn’t there? So calling my function directly afterwards may lead to a state where the dom is not yet created. Hmm…

sdetweil

@lavolp3 the dom is created way back at the beginning when u receved the DOM_OBJECTS_CREATED notification… so, when your module is called later, the DOM exists… document. exists

YOUR contribution to the dom may not be there for some time after your getDom() routine returns. MM does not specify how long…

if I need to fiddle with the dom directly, I usually do that thru a time routine, set for 1-2 seconds after getdom returns.

lavolp3

@sdetweil
Sam, thanks again for your valuable contribution.
I tried to meddle with the getdom function, which does not work because the returned module div is appended to a parent node somewhere else in the MM code hierarchy. And only then I can refer to the DOM elements. (I guess that’s what you meant and I haven’t understood).

So, although I didn’t like it, I kind of did it your way and included a 3-second setTimeout() call directly after the updateDom() call, in which I called my chart function.

                    self.updateDom(self.config.animationSpeed);
                    setTimeout (function() {
                      self.createBarChart(...);
                    }, 3000);

It works now.
I still don’t like it. :-)
But I want to move on.

sdetweil

@lavolp3 said in Nunjucks and Chartjs / Javascript:

I tried to meddle with the getdom function, which does not work because the returned module div is appended to a parent node somewhere else in the MM code hierarchy. And only then I can refer to the DOM elements. (I guess that’s what you meant and I haven’t understood).

main.js

	var updateModuleContent = function(module, newHeader, newContent) {
		var moduleWrapper = document.getElementById(module.identifier);
        if (moduleWrapper === null) return;
		var headerWrapper = moduleWrapper.getElementsByClassName("module-header");
		var contentWrapper = moduleWrapper.getElementsByClassName("module-content");

		contentWrapper[0].innerHTML = "";
		contentWrapper[0].appendChild(newContent);

		if( headerWrapper.length > 0 && newHeader) {
			headerWrapper[0].innerHTML = newHeader;
		}
	};

takes the content returned from getDom() and inserts it into the div created by module_id in the dom tree in the ‘position’ specified.

in my code that is why i create the div ‘canvas’. I have the div object, in getDom, and can generate the content immediately… no timer waiting to look it up later

            canvas = document.createElement("canvas");    // < ---
            canvas.id = "myChart" + this_pin;
            c.appendChild(canvas);                                           // < ---
          }
          // if the chart has been created
          if (wLself.charts[pin_index] != null) {
              // destroy it, update doesn't work reliably
              wLself.charts[pin_index].destroy();
              // make it unreferenced
              wLself.charts[pin_index] = 0;
          }
					try { 
						// create it now
						wLself.charts[pin_index] = new Chart(canvas, {   // < ---

then getDom() returns the completed chart… no need for build later

sdetweil

the dom looks like this before any content is output (no < > to save errors)
matching index.html, with a div for each module, in its position div section
in fifo order

head
body
    div class=fullscreen below"
        div id="module_id_1" 
            div class="module-header"
            end-div
            div class="module-content"
            end div
        end-div
        div id="module_id_2"
        end-div
   div class="region top bar"
      div class="container",
          end-div
      		div class="region top left" 
                    div class="container"
                    end-div
                end-div
                   etc
      	</div>

then getDom() in each module is called, and its little html contribution is placed in its div id=“module-content” (by module_id)

but, until the dom.div.addChild(content) is done, the content is just in memory, NOT IN the dom…

then later the module signals the mirror runtime via updateDom()… ‘I have new content’,
and MM runtime calls the module’s getDom() and we repeat the process… note in the updateModule content
it REMOVES the prior content and injects the new…

                contentWrapper[0].innerHTML = "";  // < --- clear all content, the rough way
		contentWrapper[0].appendChild(newContent);  // < --- append the new module content tree

SO, BIG dom object tree cleanup and rebuild…

i keep the module contribution, and modify it where appropriate, to reduce the change impact.

I always think the getDom() should be named getDomContribution()

lavolp3

@sdetweil
Well…I have to say I’m not through with this.

getDom creates/updates the module-specific dom objects. Right?
So let’s say there’s two ways to have a canvas:

document.createElement in an overwritten getDom method
Nunjucks template, which is being converted into HTML during getDom.

The Nunjucks way seems asynchronous, overwriting the getDom however makes it synchronous and has the advantage of “immediate full control”. You can then code your graph directly into the getdom method (like you have done as far as I understand). All good, but does not work with Nunjucks without messing with several layers of core MM code.

OR you can use another process (like socketNotification from Node_helper) to do

getCanvasById and
write the graph into it.
That should work with both options, the async nunjucks and the overwritten getDom, since it is on a completely different chain of commands.

That didn’t work for me with Nunjucks, because it seems to do rewrite more often than just with getDom. I remember that someone on this forum had the same assumption.

Thanks for the intersting discussion. Learned a lot and will try out a bit more.

sdetweil

@lavolp3 both your 1 and 2 are processed as async, just 1 is done when getDom() returns a dom object tree.
main.js

updateDom() calls getDom() immediately. and then checks what it gets back.

either a promise (generated content will return later) or dom objects (all done generating)
if content, then it creates a promise and resolves it immediately with the data
(something will wait on the promise eventually)

now we have a promise, so can wait (.then), get the data (either approach), and then inject it into the dom.(updateDomWithContent)
(via a promise, as it may take a while to do that update, don’t want to block everybody else)
and then call back whoever called updateDom()

var updateDom = function(module, speed) {
		return new Promise(function(resolve) {
			var newContentPromise = module.getDom();
			var newHeader = module.getHeader();

			if (!(newContentPromise instanceof Promise)) {
				// convert to a promise if not already one to avoid if/else's everywhere
				newContentPromise = Promise.resolve(newContentPromise);
			}

			newContentPromise.then(function(newContent) {
				var updatePromise = updateDomWithContent(module, speed, newHeader, newContent);

				updatePromise.then(resolve).catch(Log.error);
			}).catch(Log.error);
		});
	};

lavolp3

@sdetweil Sam, sorry to say that after such a long time I’m still not through with this.
Promises make my head explode, so I hope you can help me.

    scheduleUpdates: function() {
      var self = this;

      setInterval(function() {
        var conf = self.config;
        self.updateDom(conf.animationSpeed);

        setTimeout(function() {
          self.createBarChart();
        }, 2000);
      }, this.config.updateInterval);
    },

This is an easified version of my loop to update the dom.
You can see the timeout function I have built in to wait 2 seconds and be sure the dom has been created. Then in the createBarChart function I can write the chart into the dom.
This works, but I don’t like it at all.
Isn’t there a way to “await” the resolved promise from outside of the updateDom function? After all updateDom() returns a promise.
I have tried to do self.updateDom().then( function() {self.createBarChart() });
It didn’t work.

Thanks for your support. Really appreciated.

sdetweil

@lavolp3 updateDom() returns a promise, but then IMMEDIATELY calls getDom()…

so the wait is ineffective

all you can do is check the dom to see if your minimum content some anchoring div) is present, and retry that until it is.
then call updateDom() to force a refresh

this is what I do in getDom(). i have an array of different charts to present

		// if we are not suspended/hidden due to sleep or whatever
		if (wself.suspended == false) {
			// make sure we don't start before the data gets here
			if (!this.loaded) {    < -  just a flag for first time
				this.loaded = true;
				return wself.wrapper;
			} else {
				// loop thru the data from the blynk server, one chart per data point/pin
				for (var pin_index = 0; pin_index < wself.config.Pins.length; pin_index++) {
					// get the pin text name. used for index into the data hash
					var this_pin = wself.config.Pins[pin_index];
					// clear the work variable
					var canvas = null;
					// try to locate the existing chart
					if ((canvas = document.getElementById("myChart" + this_pin)) == null) {
						var c = document.createElement("div");
						c.style.width = wself.config.width + "px";
						c.style.height = wself.config.height + "px";
						if (!wself.config.stacked)
						     {c.style.display = "inline-block";}
						wself.wrapper.appendChild(c);

						canvas = document.createElement("canvas");
						canvas.id = "myChart" + this_pin;
						c.appendChild(canvas);
					}
					// if the chart has been created
					if (wself.charts[pin_index] != null) {
						// destroy it, update doesn't work reliably
						wself.charts[pin_index].destroy();
						// make it unreferenced
						wself.charts[pin_index] = 0;
					}
					// create it now, into the special div object for this chart
					wself.charts[pin_index] = new Chart(canvas, {

my ‘schedule update’ asks for more data from my node_helper…
it informs me when its back. and I call updateDom() after saving the data where getDom() will look

u can see my code at https://github.com/sdetweil/WaterLevels