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.

    Help required creating a Module

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    5 Posts 2 Posters 1.4k 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.
    • 4 Offline
      404ryannotfound
      last edited by 404ryannotfound

      Hi All,
      I’m totally new to Magic Mirror (as in last week), but I thought I’d attempt to make a module anyhow.
      My background is Web & Multimedia, but not a full-on programmer so I’m having issues getting it to work.

      I decided to create an Animated CSS background module, which will allow the user to select from a bunch of different themes. These are CSS only, requiring no Javascript or dependencies. I know this is meant to be a Mirror, so perhaps background animations may not show, but I want to use it as a screen. How it works (or is meant to):

      User selects a theme
      The class is added to the html tags
      the .njk template displays code based on what theme is selected

      Issues:
      Whenever I add the

      getDom: function() { }
      

      It breaks

      I also don’t think I set up the .njk template if statements correctly. As long as I don’t add the getDom it will load my CSS and display the hello world text (I was using top_center to test the text)…

      I’ve read the Documentation, viewed many examples, but can’t figure out why it’s not working.

      If anyone has any time to assist, I’d be forever grateful and can add as a contributor.
      here’s what I’ve done so far on Github, this is my first real Github repository, so still learning how to use:

      https://github.com/404ryannotfound/MMM-CSSBackgrounds

      If I can get it working locally, I’ll be able to clean up and refine the CSS. I’m working on the assumption the browser that runs on the Raspberry Pi will be able to render the animations ok, and I’ve toned them back considerably.

      Thanks in advance!
      Regards,
      Ryan

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @404ryannotfound
        last edited by

        @404ryannotfound getDom must return an html Dom tree object to be inserted in the modules configured position.

        Use getTemplate/getTemplatedata if u are using njk

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        4 1 Reply Last reply Reply Quote 0
        • 4 Offline
          404ryannotfound @sdetweil
          last edited by 404ryannotfound

          @sdetweil
          Thanks Sam, I’ll play around with it tomorrow more, I saw the Dark Sky does similar, so will start reviewing that.
          https://github.com/jclarke0000/MMM-DarkSkyForecast/blob/master/MMM-DarkSkyForecast.js

          Hopefully I can still pass JS code to target the html like:

          body.classList.add(themeSettings.effectPrefix);
          html.classList.add(themeSettings.effectPrefix);
          
          S 1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @404ryannotfound
            last edited by

            @404ryannotfound

            I have a sample module doing getDom

            Easy to change to template

            https://github.com/sdetweil/SampleModule

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            4 1 Reply Last reply Reply Quote 1
            • 4 Offline
              404ryannotfound @sdetweil
              last edited by

              @sdetweil oh that’s perfect, thanks so much!

              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