MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    updateDom() blocks MagicMirror

    Development
    2
    28
    945
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 1
      1BlauNitrox last edited by 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:

      Undefined.PNG

      S 3 Replies Last reply Reply Quote 0
      • S
        sdetweil @1BlauNitrox last edited by

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

        Sam

        Create a working config
        How to add modules

        1 1 Reply Last reply Reply Quote 0
        • S
          sdetweil @1BlauNitrox last edited by 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:[],
          

          Sam

          Create a working config
          How to add modules

          1 Reply Last reply Reply Quote 0
          • S
            sdetweil @1BlauNitrox last edited by 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

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • 1
              1BlauNitrox @sdetweil last edited by

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

              S 1 Reply Last reply Reply Quote 0
              • S
                sdetweil @1BlauNitrox last edited by 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

                Sam

                Create a working config
                How to add modules

                1 1 Reply Last reply Reply Quote 0
                • 1
                  1BlauNitrox @sdetweil last edited by 1BlauNitrox

                  @sdetweil
                  response.PNG

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

                  S 2 Replies Last reply Reply Quote 0
                  • S
                    sdetweil @1BlauNitrox last edited by

                    @1blaunitrox yes, this.response is an object

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

                    html doesn’t know objects

                    Sam

                    Create a working config
                    How to add modules

                    1 1 Reply Last reply Reply Quote 0
                    • 1
                      1BlauNitrox @sdetweil last edited by

                      @sdetweil Is there a Json parser I can use?

                      1 Reply Last reply Reply Quote 0
                      • S
                        sdetweil @1BlauNitrox last edited by

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

                        Sam

                        Create a working config
                        How to add modules

                        S 1 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy