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 :joy:
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…

sdetweil

@sdetweil JSON.parse, JSON. stringify

u have an object so, stringify turns it into text
parse takes text and makes an object

1BlauNitrox

@sdetweil What about JSON.stringify(this.response);

sdetweil

@1blaunitrox that would work

but it will be the JSON text representation of the object

all fields and values

1BlauNitrox

@sdetweil
First: Is there an other option?

Second: I added the getData() function in getDom()

        const wrapper = document.createElement("div");
        this.getData();
        if(this.response.lenght <= 0) {
            wrapper.innerHTML = "No Entries";
        } else {
            wrapper.innerHTML = JSON.stringify(this.response);
        }
        return wrapper;

Now the mirror show UNDEFINED again

sdetweil

@1blaunitrox length

spelling matters…

use the debugger

sdetweil

@1blaunitrox this.getData() is not synchronous, so it will return long before the data is ready

don’t call from getDom()

sdetweil

see the doc

https://docs.magicmirror.builders/development/introduction.html#module-structure

https://docs.magicmirror.builders/development/core-module-file.html#subclassable-module-methods
notificationReceived in particular

1BlauNitrox

@sdetweil Do you remember my problem yesteray that my magic mirror doesn`t start? I started the program today in the morning. Without doing anythink since yesterday evening, the same error occurs.

The only think I change was that I renamed lenght to length. Than I deleted the module module and copyed the new one.

old post: https://forum.magicmirror.builders/topic/16233/error-while-starting-magic-mirror/29

sdetweil

@1blaunitrox I need to see the messages output by npm start

if you use pm2, then pm2 logs --lines=50

also maybe info from the developers window, ctrl-shift-i on the keyboard and select the console tab and scroll up to see any errors red text

1BlauNitrox

@sdetweil
Here is the .pm2/logs/MagicMirror-error.log
https://haste.lyrotopia.net/equzexapal.js
Its always the same error

Here is the .pm2/logs/MagicMirror-out.log
https://haste.lyrotopia.net/mosubanoro.css