MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Module creation workflow - Newbie

    Scheduled Pinned Locked Moved Development
    7 Posts 2 Posters 851 Views 2 Watching
    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 Offline
      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 Offline
        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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @sdetweil How can I construct ModuleName as an html?

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            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…

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

                @Temisola1 yes set the innerHtml to the html text string

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                T 1 Reply Last reply Reply Quote 0
                • T Offline
                  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 Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy