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

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 Mar 7, 2020, 7:30 AM Mar 7, 2020, 7:11 AM

    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 Mar 7, 2020, 3:10 PM Reply Quote 0
    • S Offline
      sdetweil @404ryannotfound
      last edited by Mar 7, 2020, 3:10 PM

      @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 Mar 7, 2020, 3:15 PM Reply Quote 0
      • 4 Offline
        404ryannotfound @sdetweil
        last edited by 404ryannotfound Mar 7, 2020, 3:17 PM Mar 7, 2020, 3:15 PM

        @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 Mar 7, 2020, 10:57 PM Reply Quote 0
        • S Offline
          sdetweil @404ryannotfound
          last edited by Mar 7, 2020, 10:57 PM

          @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 Mar 7, 2020, 11:51 PM Reply Quote 1
          • 4 Offline
            404ryannotfound @sdetweil
            last edited by Mar 7, 2020, 11:51 PM

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

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