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

[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/

[mumblebaj]

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

MMM-SweepClock

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

[sdetweil]

@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

[nirvana]

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

[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)

[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

[nirvana]

@sdetweil ok thank you very much

will go through them and try to build the module

[nirvana]

@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

[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

[nirvana]

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

[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