Analog + Digital Clock module

Kevin

Looking for some help with implementing an analog clock next to (left of) the standard digital watch.
So is someone intrested in helping me “convert” this moments js script to module and make an impementation of it to the standard clock.js? http://codepen.io/Wardee-IDUK/pen/XmMvGK

With a end result similar to:
alt text

nobita

@Kevin you can convert to module like default module,because I don’t unstand in css,js

MichMich

I love the idea of adding a analog clock. If you manage to add it, and make it configurable, feel free to send a pull request to the default module.

KirAsh4

I’m mildly curious, @Kevin, why would you want both an analog and a digital clock displayed at the same time? I’d rather think someone would want one or the other, but maybe I’m missing something in the grand scheme of things here … like making sure both parallel universes are running on the same time. :)

KirAsh4

a) what comes before ALPHA, or BETA? whatever it is, that’s the state of the code
b) at the moment it’s a separate module, will see about merging it with the current (default) clock

Kevin

Cool, looking good.
Hehe, right now it’s purely cosmetic with both analog and digital. Looking forward to the beta, delta, omega versions :)

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.