updateDom() blocks MagicMirror

1BlauNitrox

Hey,

I am developing my own first module. Therefore I looked at some other modules and in the dev documentation.

This is what I have right now:

Module.register("MMM-VPlan", {
	defaults: {
		fadeSpeed: 2,
                username: "",
                password: ""
	},

	getStyles: function() {
        return ["MMM-Plan.css"];
	},

    start: function() {
		Log.log("Starting module: " + this.name);
		
        this.response = {
            "name": "Test",
            "entries": {
                "lessions": "Teacher Subject Room representation"
            }
        };

		//this.getData();
        updateDom();
	},

	getDom: function() {
        const wrapper = document.createElement("div");
        wrapper.innerHTML = response;
        return wrapper;
	},

    getData: function () {
        const request = new XMLHttpRequest();
        request.open('GET', 'http://localhost/vplan/' + username + '/' + password + '/today', true);
        request.onreadystatechange = () => {
          if (request.readyState != 4) {
            return;
          };
    
          if (request.status === 200) {
            this.response = JSON.parse(request.response);
            this.updateDom();
          } else {
            Log.error(`${this.name}: Could not load data`);
          }
    
          setTimeout(() => this.getData(), this.config.updateIntervalMs);
        };
        request.send();
      },
})

The getData() function is not in use.

My problem is the getDom() function. If I call updateDom() in the start method, the mirror shows only a black screen without any content. Even the other modules aren`t visible.
If I delete updateDom() in the start methode, the mirror shows all modules. But my module returns undefined:

sdetweil

@1blaunitrox said in updateDom() blocks MagicMirror:

    wrapper.innerHTML = response;

where is response?

i think u meant this.response

don’t call updateDom() in start

mm will call it the 1st time when the module is loaded

note that this.response might be empty in a real life situation, but you MUST return something
an empty div is ok… (it IS something)

sdetweil

@1blaunitrox you can walk thru the module code in the developers window sources tab

ctrl-shift-i,

source tab

left nav, navigate to modules, your module name, click your modulename.js

source on the right

click on a source line, left edge to turn on a break point

hit f5 to refresh , will stop

upper right arrow is run, next is step, next is into, next is over

mouse hover over variables for value/content

u can use chrome (firefox/edge) on the pc if u allow remote connection in config.js

address:"0.0.0.0".
ipWhitelist:[],

sdetweil

@1blaunitrox the black screen is cause your module source crashed the browser… oops…

its this.updateDom()

look at my sample module
https://github.com/sdetweil/SampleModule

1BlauNitrox

@sdetweil I changed getDom() to this:

getDom: function() {
        const wrapper = document.createElement("div");
        if(response.lenght <= 0) {
            wrapper.innerHTML = "No Entries";
        } else {
            wrapper.innerHTML = this.response;
        }
        return wrapper;
	},

There is a check if the array has any entries.

But the mirror shows “undefined”

sdetweil

@1blaunitrox said in updateDom() blocks MagicMirror:

if(response.lenght <= 0) {

this.response.length

always gotta use this.

unless u created the variable INSIDE the routine using it…

use the debugger

1BlauNitrox

@sdetweil

Not exectly what I wanted
Why can getDom() not transfrom the array in a readable string?

sdetweil

@1blaunitrox yes, this.response is an object

        this.response = {
            "name": "Test",
            "entries": {
                "lessions": "Teacher Subject Room representation"
            }
        };

html doesn’t know objects

1BlauNitrox

@sdetweil Is there a Json parser I can use?

sdetweil

@1blaunitrox said in updateDom() blocks MagicMirror:

Why can getDom() not transfrom the array in a readable string?

getDom() CAN do anythign YOU implement… it does NOTHING by itself…