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.1k 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
      last edited by nirvana

      The code for animated clock is here: https://github.com/manuelmeister/Swiss-Railway-Clock

      This is the awesome Swiss railway clock found in all Swiss railway stations. Please let me know if there is an easy way to create a module out of this to display the clockface with sweeping seconds hand.

      It looks like this: http://sbb.meister.io/

      S 1 Reply Last reply Reply Quote 0
      • mumblebajM Offline
        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

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

          @nirvana should be very easy.

          the index.html body content becomes the return from getDom()
          the script is returned from getScripts()
          and the css is returned from getStyles()
          with a slight mod to add the module name in front

          use my sample module to start
          https://github.com/sdetweil/SampleModule

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