Analog + Digital Clock module

KirAsh4

Myah, found a few bugs in both the JS and CSS, which are now fixed. (Also found a conflict with same name CSS files across different modules.) Tomorrow I’ll start working on incorporating it with the default one, and see how to make it work so both can be displayed, or one of them while allowing for everything else to reflow gracefully. Adding some config features at the moment … which means I get to play a bit:

Kevin

Fantastic! Looks great. Would be nice if you can ajust the placement of the analog dail, if you manage to implement it to the original clock script.

KirAsh4

Adjust placement?

Kevin

ex. right of, left of, over or under the digital time…

KirAsh4

Oh that … yeah that will need to be worked out once merged with the other. The current thought process is:

displayType: "analog" || "digital" || "both",
analogPlacement: "top" || "right" || " bottom" || "left",
analogFace: "face-001" || "face-N",

There’s likely to be (more) changes/additions as well.

KirAsh4

Digital or Analog

Both: Analog “top” or “bottom”

Both: Analog “left” or “right”

Other options include:

ability to change the face of the analog clock
ability to change the size of the analog clock

Does that about cover it @Kevin? :)

KirAsh4

By the way, there are a few more options being added, specific to the analog clock. While I like my “second” hand to be red, the default will be gray, but I’ll make a config option so people can change its color to something else.

I’m also going to have it take into account the 'config.displaySeconds' options.

KirAsh4

Also, @MichMich, if you have other requests or comments before I create a PR, now’s the time.

MichMich

Is the red color default? I’d like all the default modules to be B/W…

MichMich

Very Nice Work By the way! :)

Kevin

Very nice work, you’re the best, thanks a million for the great work.
I think it covers my need right now.

KirAsh4

@MichMich, read the post above yours … default is gray, not red. A config option will let the user set it to whatever color they want.

KirAsh4

Ok, I checked in a PR with the new addition. Current changed/added options in addition the ones already present are:

displayType: 'digital',  // options are: 'digital', 'analog', or 'both'
analogSize: '200px',     // This defines how large you want the analog clock to be
analogFace: 'simple',    // options are: 'simple', 'none', or 'face-###' where ### is a value between
                         // 001 to 012, inclusive. The 'simple' options displays a simple border, 'none' is no border,
                         // and the 'face-###' ones are SVG images that can be used as the face for the clock
analogPlacement: 'bottom', // options are: 'top', 'right', 'bottom', 'left' This option is applicable only
                           // when the displayType is set to 'both' and defined where you want the clock in relation
                           // to the digital one
secondsColor: '#888888'. // this defines what color the seconds hand will be. I like mine red ... like wine.

You can see the displays in a prior post.

KirAsh4

I forgot to mention this: the clock faces are SVG files, so if you want to put a large analog clock in the middle of your mirror, you can, it will scale beautifully. This is a 600 pixels wide clock using the same SVG file as the smaller one in a previous post.

Kevin

Great work, is this published somewhere already?
How do i get it?

KirAsh4

It’s checked into the develop branch. You can grab that and test it out.

Kevin

Sorry, im quite new here, develop branch? Cannot find it. :(

KirAsh4

I’m on the road at the moment so I can’t give you a detailed answer, but you can clone the develop branch instead of the master one:

git clone - b develop http://github.com/MichMich/MagicMirror

Warning: it will overwrite any changes you may have made to local files, just be aware of that.

MichMich

It’s in the master branch now … :)

Kevin

Thanks alot mate… :bow: