Analog + Digital Clock module

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:

KirAsh4

@Kevin, as a side note, if there’s a particular clock face that you like me to create for you, let me know. If you have an example, that will greatly help.

pugsly

Works great, just one question. I want to put the analog clock in the top_center and don’t want to show the date because I have the digital clock in the top_right position. How do I turn off the date from showing on a 2nd clock module?

KirAsh4

At the moment, it’s hard coded in. I’d have to add a config option so it can be turned off when used as a separate module.

KirAsh4

Ok, I have it in my dev branch, but I won’t push it up just yet. I’ll wait a bit to see if there are other things that people will request or fixes. But if you must get rid of it now, you can manually edit the 'clock.js' file and delete line 173:

169:    } else if (this.config.displayType === 'analog') {
170:        // Display only an analog clock
171:        dateWrapper.style.textAlign = "center";
172:        dateWrapper.style.paddingBottom = "15px";
173:        wrapper.appendChild(dateWrapper);             <===== that line
174:        wrapper.appendChild(clockCircle);
175:    } else {

It will only affect the analog clock when used as a separate module as a single clock.

KirAsh4

I should point out that this is just a temporary thing, so you can get rid of it. The updated code will give you a config option to disable it, show it above, or below the clock.