MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    My first written module

    Development
    3
    13
    365
    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.
    • BKeyport
      BKeyport Module Developer last edited by

      So,

      I jumped right into the deep end, and started writing my own module, as the modules available didn’t do quite what I wanted (a floating 3 month calendar), and it was too much of a hassle to modify existing.

      I’ve got it displaying the way I want, including the right size and such.

      Things I’m wondering about:

      1. the update logic of Magic Mirror. When, how, does it do all modules, etc?
      2. the CSS aspect. Is there any documentation on how the CSS interfaces in, and first on CSS in general for beginners?
      3. if there’s better table creation within MM. Currently, I’m working with a hunk of javascript made with the help of jsfiddle.net and learning on the fly.

      This module won’t ever see the light of day, I imagine, as it’s a very tight use case.

      Thanks!

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @BKeyport last edited by

        @BKeyport

        • the update logic of Magic Mirror. When, how, does it do all modules, etc?

        it on;y does ALL modules at startup, after that modules need to call updateDom() to signal new content ready

        *the CSS aspect. Is there any documentation on how the CSS interfaces in, and first on CSS in general for beginners?

        not quite sure what u mean here. there are tons of books and training on cascading style sheets. (CSS)
        the ‘cascade’ in MM is

        main.css is first
        module styles next (response from getStyles()), adds/overrides main
        and custom.css is last, adds/ overrides all prior

        *if there’s better table creation within MM. Currently, I’m working with a hunk of javascript made with the help of jsfiddle.net and learning on the fly.

        as you’ve seen/discovered, html is a very tedious language.
        there are libraries like jquery where one can get significant assist in creating the content,
        but under the covers its the same stuff… one can create table like structures with div and span too.

        MM by itself doesn’t add anything to the content creation discussion, its a display tool

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • BKeyport
          BKeyport Module Developer last edited by

          Sam,

          I guess what I’m looking for is a “for dummies” version of CSS introduction. I’m not understanding how to use it effectively in building a webpage, once I understand that aspect of it, I can modify what I know into my module. That’s been my problem, jumping from absolute noob to basic understanding.

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @BKeyport last edited by

            @BKeyport there are three layers of cascading style sheets.

            main.css
            any stylesheet inserted by module (module reply to the getStyles() function call
            custom.css

            u can target system wide, or you can target to module specific

            .Modulename .class .class…etc {
            settings
            }

            the .class .class has different operations depending on if there is space between the classnames…

            you can target JUST a specific implementation of a class, which is used inside a specific class or tag, multiple layers into the style sheet tree
            or in general all uses of a class by that module

            there are good books and online resources… it takes time and practice to get it right… and there are amazing things you can do…

            Sam

            Create a working config
            How to add modules

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

              @BKeyport something that seems like it should be easy, in css is

              make a vertical list of buttons with images,with divs, buttons, images, spans, easy
              now rotate that list to be horizontal… easy with flex-direction… but
              the images turned too…
              so, now rotate the images back 90 degrees…

              Sam

              Create a working config
              How to add modules

              1 Reply Last reply Reply Quote 0
              • BKeyport
                BKeyport Module Developer last edited by

                OK… so, I figured out CSS except for how to write the file to work with magic mirror - this is where the documentation don’t exist.

                Some CSS files have the module name in front of the css class, like “.MMM-NewsFeedTicker .tickerbody” - others just have the class as “.tickerbody” - what’s the difference?

                Thanks!

                lavolp3 1 Reply Last reply Reply Quote 0
                • BKeyport
                  BKeyport Module Developer last edited by

                  This post is deleted!
                  1 Reply Last reply Reply Quote 0
                  • lavolp3
                    lavolp3 Module Developer @BKeyport last edited by lavolp3

                    @BKeyport In this case css works in hierarchies.

                    It looks in the webpage from top (document) to bottom for the classes, ids or elements you give it. When the page is loaded all the css files present (main.css, custom.css all module css) are being merged into one big css pool.
                    Giving it the hierarchy of classes (or elements), you can specify the css adaption.

                    Imagine your module has a class “.tickerbody” and another modules does as well.

                    Then, if you reference it in your custom.css, .tickerbody would apply the properties to BOTH modules.
                    But if you use .MMM-yourmodule .tickerbody it is only applied to the class tickerbody that is A CHILD OF the class .MMM-yourmodule.
                    You could also use something like .MMM-yourmodule div (note the missing . before div, meaning not a class is ereferenced but an element) which would affect ALL divs that are child elements of your module. Or .MMM-yourmodule .tickerbody spanwhich would affect all spans in the tickerbody of YOUR module.
                    In main.css you can see things like ‘.dimmed’. This affects ALL elements of the whole mirror with the class .dimmed and gives the respective color.

                    Every module gets it’s own name as class, this is general MM behaviour.

                    How to troubleshoot modules
                    MMM-soccer v2, MMM-AVStock

                    lavolp3 BKeyport 2 Replies Last reply Reply Quote 0
                    • lavolp3
                      lavolp3 Module Developer @lavolp3 last edited by

                      @BKeyport Have you seen this?
                      https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1587124513929

                      How to troubleshoot modules
                      MMM-soccer v2, MMM-AVStock

                      1 Reply Last reply Reply Quote 0
                      • BKeyport
                        BKeyport Module Developer @lavolp3 last edited by

                        @lavolp3 Wow. that’s a really handy description, Thanks.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy