• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 885 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 @sdetweil
    last edited by Apr 2, 2020, 4:37 AM

    @sdetweil How can I construct ModuleName as an html?

    S 1 Reply Last reply Apr 2, 2020, 4:40 AM Reply Quote 0
    • S Away
      sdetweil @Temisola1
      last edited by Apr 2, 2020, 4:40 AM

      @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 Apr 2, 2020, 8:12 AM Reply Quote 0
      • T Offline
        Temisola1 @sdetweil
        last edited by sdetweil Apr 2, 2020, 11:35 AM Apr 2, 2020, 8:12 AM

        @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 Apr 2, 2020, 11:34 AM Reply Quote 0
        • S Away
          sdetweil @Temisola1
          last edited by Apr 2, 2020, 11:34 AM

          @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 Apr 2, 2020, 3:15 PM Reply Quote 0
          • T Offline
            Temisola1 @sdetweil
            last edited by Apr 2, 2020, 3:15 PM

            @sdetweil Amazing. Thank you.

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