Navigation

    MagicMirror Forum

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

    Module creation workflow - Newbie

    Development
    2
    7
    149
    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.
    • T
      Temisola1 last edited by Temisola1

      Hello all. I’m currently trying to build a custom module. I’ve been trying to wrap my head around it for a few days but I think I finally have a decent understanding. I’m not that familiar with node.js so my question might sound stupid. I understand that the MMM-ModuleName.js pretty much passes data or documents to the main html. Is it possible to have an html file with custom html already defined, a table of data for example, load it in your MMM-ModuleName.js using nodejs, modify the contents using the elementid and then pass that to the main html? As opposed to creating the html using nodejs. Again, I’m pretty green when it comes to nodejs please forgive me.

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

        @Temisola1 here is my sample module,

        https://github.com/sdetweil/SampleModule

        the modulename, will create a small segment of content…

        you can construct it multiple ways… even as an html string…

        then on call to getDom()
        in the wrapper div, you set the wrapper.innerHtml to your text html string.
        if u only have text, there is wrapper.innerText

        you can also create the elements one at at time thru code … document.creatElement(type)
        and then append each to its proper parent (so it looks like the html string)…

        then once u have created that (in getDom), you give it to the MM runtime (return wrapper)

        and MM puts it into the page html tree in the right place (position: for module in config.js)…

        u can see the document tree in the dev window elements tab
        dev window via npm start dev, or ctrl-shift-i on keyboard on the MM screen

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

          @sdetweil How can I construct ModuleName as an html?

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

            @Temisola1 you cannot… it is a program… with a routine, called getDom() that returns the modules little bit of content for MM to display.

            this part of my sample sets the content to display… u can make it part of an html document, a table, or paragraph…

            // this is the major worker of the module, it provides the displayable content for this module
            	getDom: function() {
            		var wrapper = document.createElement("div");
            
            		// if user supplied message text in its module config, use it
            		if(this.config.hasOwnProperty("message")){
            			// using text from module config block in config.js
            			wrapper.innerHTML = this.config.message;
            		}
            		else{
            		// use hard coded text
            			wrapper.innerHTML = "Hello world!";
            		}
            
            		// pass the created content back to MM to add to DOM.
            		return wrapper;
            	},
            

            u are sharing the page with all the other modules…

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

              @sdetweil I think I see what your mean now. Can I do, for instance, something like

              wrapper.innerhtml = "<h1>This is some random text</h1>"
              
              
              S 1 Reply Last reply Reply Quote 0
              • S
                sdetweil @Temisola1 last edited by

                @Temisola1 yes set the innerHtml to the html text string

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

                  @sdetweil Amazing. Thank you.

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • 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