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.

    How to port/create a sweep clock module from existing html/js/css code

    Scheduled Pinned Locked Moved Solved Requests
    12 Posts 4 Posters 2.5k Views 4 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.
    • N Offline
      nirvana @sdetweil
      last edited by

      @sdetweil Thanks for the info.

      I have problems adding index.html to getDom() wrapper, how to add all elements correctly
      The syntax is different I suppose from html

      I just started html and js, so don’t know much about this languages.

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

        @nirvana just the stuff in the body tag, not all of index.html

        <div>
        ...
        </div>
        

        https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript

        so, all you would have to do is copy/paste the body contents and wrap it in backtics (shifted to left on the number 1 key)

        getDom(), MUST always return SOMETHING (some html element)

        most of the examples return an empty div, when there is not yet anything to display (or they are hidden)

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          css info

          https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works

          developing module specs

          https://docs.magicmirror.builders/development/introduction.html#general-advice

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          N 1 Reply Last reply Reply Quote 0
          • N Offline
            nirvana @sdetweil
            last edited by

            @sdetweil ok thank you very much

            will go through them and try to build the module

            1 Reply Last reply Reply Quote 0
            • N Offline
              nirvana @sdetweil
              last edited by

              @sdetweil It is working but only showing the svg image of the clock face without hour/minute hands.

              I think the time elements are not called using moment.js

              The script uses new Date() to get the time. how to tell scipt.js to use moment.js call to get the time instead

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

                @nirvana Date should work.

                make sure the css labels line up w the code

                did u pass the css file back on getStyles?

                you should be able to see all that in the developers window

                ctrl-shift-i
                elements tab will let u see the dom and elements
                console any messages
                source the code for your module, and u can step thru it

                see
                https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1631634934084

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                N 1 Reply Last reply Reply Quote 0
                • N Offline
                  nirvana @sdetweil
                  last edited by

                  @sdetweil I tried but not working, I think something is missing.

                  Anyways, I am just using the default analog clock for now. Thanks for all help. I may try it sometime later. u1.png u2.png

                  S mumblebajM 2 Replies Last reply Reply Quote 0
                  • S Offline
                    sdetweil @nirvana
                    last edited by sdetweil

                    @nirvana yeh, the code needs to change

                    window.addEventListener('DOMContentLoaded', () => {
                        firstMinute()
                    })
                    

                    this will never occur, cause it happened a long time ago in MM web page being loaded
                    u could use notification of DomObjectsCreated to call firstMinute()

                    I don’t know if this is right in MM

                    document.addEventListener("visibilitychange", () => {
                    

                    its the difference between having the whole page to yourself and sharing the space with other modules

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • mumblebajM Online
                      mumblebaj Module Developer @nirvana
                      last edited by

                      @nirvana You can have a go at my module I created for this.

                      MMM-SweepClock

                      a1eca181-b4db-4f96-8213-9c26a8dded42-image.png

                      Works fine. Any issues please raise on the modules git page and I will have a look for you.

                      Check out my modules at: https://github.com/mumblebaj?tab=repositories
                      Check my blog-post: https://mumblebaj.xyz/

                      N 1 Reply Last reply Reply Quote 0
                      • N Offline
                        nirvana @mumblebaj
                        last edited by

                        @mumblebaj Works perfectly! Thanks for your time!

                        I also tried but could not make this work, but edited the default MM clock to contain sweep seconds.

                        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 Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy