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 926 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.
    • 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