MMM-Worldclock

[BKeyport]

Update: As of 1/18/21 - new feature - You now may use a flag of your choice, using the altflag command.

It’s not perfect, but it’s there.

			module: "MMM-Worldclock",
			position: "top_left",
			config: {
				style: "right",
				offsetTimezone: null,
				clocks: [
					{
						title: "Local",
						timezone: "America/Los_Angeles",
						altflag: "washington.png",
						timeFormat: "hh:mm:ss a",
					},
					{
						title: "ET",
						timezone: "America/New_York",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "CT",
						timezone: "America/Chicago",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "MT",
						timezone: "America/Boise",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "AK",
						timezone: "America/Anchorage",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "HI",
						timezone: "Pacific/Honolulu",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "UTC",
						timezone: "UTC",
						timeFormat: "HH:mm MM/DD",
						altflag: "world.jpg"
					},
				]
			},
		},

[JohnGalt]

Thanks for the module. I have installed it and have it working, but do have one question: How do I keep the top ‘home’ time zone from displaying? I already have the clock module running, so I don’t need a 2nd module telling me the local time… Unfortunately, when i remove the code for the home timezone, it still displays. Thanks in advance,

[BKeyport]

@JohnGalt Let me see your config, that’s really odd…(JUST the config for Worldclock/MMM-Worldclock, no need for the rest)

[JohnGalt]

Here you go:
{ module: “MMM-Worldclock”,
position: “bottom_right”, // This can be any of the regions, best results in top_left or top_right regions
config: { // See ‘Configuration options’ for more information.
timeFormat: ‘hh:mm A’, //defined in moment.js format()
style: ‘top’, //predefined 4 styles; ‘top’, ‘left’,‘right’,‘bottom’
offsetTimezone: null, // Or you can set Europe/Berlin to get timegap difference from this timezone. null will be UTC timegap.
clocks: [
{ title: “Home”,
flag: “us” },
{
title: “Italy”,
timezone: “Europe/Rome”,
flag: “it”,
},
{
title: “Durban, So Africa”, // Too long title could cause ugly text align.
timezone: “Africa/Johannesburg”, //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
flag: “za”,
},
{ title: “Aruba”,
timezone: “America/Curacao”,
flag: “aw”,
},
] // Close clocks list
} // Close Worldclock config
}, // Close module MMM-Worldclock

[JohnGalt]

Hummm - It looks like the forum stripped out leading tabs and/or spaces, but the content look OK…

[BKeyport]

@JohnGalt didn’t mark it as code… use ``` at the beginning and ending of the code to show it as pasted.

To remove the home timezone, just remove it, including the opening and closing bracket.

You don’t need to specify your local time zone. In my examples, I only use MMM-Worldclock to display the time on my mirror, so I need a local view. I pasted the code adjustment below, didn’t retab it, and I may have missed a few “adjusted” quotes, so if MM don’t like it, check the quotes.

clocks: [
{
title: "Italy",
timezone: "Europe/Rome",
flag: "it",
},
{
title: "Durban, So Africa", // Too long title could cause ugly text align.
timezone: "Africa/Johannesburg", //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
flag: "za",
},
{ 
title: "Aruba",
timezone: "America/Curacao",
flag: "aw",
},

[JohnGalt]

@bkeyport - Thanks! It works as you describe. I thought I had already tried removing that code to no avail, but obviously hadn’t. Thanks again!

[BKeyport]

NOTICE: As of the current moment, this module is not behaving well with MagicMirror 2.16. The module comes up smaller than intended.

As such, the workaround is as follows:

in custom.css

.MMM-Worldclock .main {
  font-size: 1.65rem;
}

.MMM-Worldclock .caption {
  font-size: 1rem;
}

Hopefully the font generation in MagicMirror will go back to normal in a couple of releases. Of course, you can adjust the font sizes as you please.

[MacG]

It’s a superb module but needs some CSS adjustments. Thanks for the helpful hints here in the thread.

Is it possible to update the clock only when the time has changed? The current refresh is every second, but I only use a clock with hours and minutes.

That might also lower the load on the browser and it would probably be helpful for CSS customizations via the browser developer tools.

[BKeyport]

@macg I doubt there’d be any performance boost, as the whole browser/javascript is constantly scanning for changes. The original code this is based on used the second for the refresh as it assumes the second would be the minimum displayed unit.

There’s really no such thing as idle anymore.

As for CSS - please, adjust it, adding to your custom.css file - and publish what you do here. Sean’s CSS is good, mine is weaker, but I’m learning and playing at the pace my job allows. Changes that I evaluate would help the core will be included.

[MacG]

@bkeyport By updating all of a second, I didn’t get to all the style classes with Chromium’s developer tools. But luckily you had already posted the essential ones.

I cared about the horizontal layout and yours has been tweaked a bit. The first clock with UTC time didn’t get a flag or globe, so it didn’t need to be as wide as the others. The text color and size were adjusted with MM variables. The size is 6px smaller than my standard (24px). The time difference to UTC time was hidden. With “display: none” I had no success, therefore my way over the transparent text.

At the config.js is:
style: ‘top’,
offsetTimezone: null,

And here al my lines for the custom.css:

/* Arrange clocks horizontally */
.MMM-Worldclock .worldtime {
      display: flex;
      flex-direction: row;
}
.MMM-Worldclock .world{
      width: 100px;
}
.MMM-Worldclock .world-0{  /* 1st clock = UTC clock */
      width: 70px;
}

/* Time title font color and size */
.MMM-Worldclock .zone {
      font-size: calc(var(--font-size) - 6px);
      color: var(--color-text-bright);
}

/* Hide time difference to UTC */
.MMM-Worldclock .gap {
      font-size: 1px;
      color: transparent;

The screenshot of this is in my previous post.

For the time zones, I looked here to see which ones are accepted. At first, I thought that America/Texas or America/Houston would be possible. But this is not the case.

[sdetweil]

@macg America/Texas, Houston is really America/Chicago

[BKeyport]

@macg They went for the biggest city in the timezone. I’m annoyed by that too. Los Angeles shouldn’t represent all of Pacific Time, damnit.

[SoleLo]

@macg can you share how you got them to be horizonal?

[MacG]

@solelo With the first eight lines of the posted snippet of my custom.css, you get the horizontal representation. Copy them into your custom.css and adjust the pixel width.

@BKeyport Pick Vancouver or the time zone itself (PST8PDT). :winking_face: That’s why I found the list of possibilities so helpful.

@sdetweil Yes, I had chosen the Windy City then, too.

[SoleLo]

@macg Thanks! I added it to my custom.css but it didn’t change. Is there anything else I should be checking?

[MacG]

@solelo Actually, no. For completeness here are my settings from config.js:

		{
			module: 'MMM-Worldclock',
			position: 'top_left', // This can be any of the regions, best in top_left or top_right regions
			config: {
			// See 'Configuration options' for more information.
				timeFormat: 'HH:mm', //Global time format, as defined in moment.js format()
				style: 'top', // Which way do you want the flag and description from the clock? choices are 'top', 'left','right','bottom'
				offsetTimezone: null, // Timezone you want to show the difference from. null, "", or omitted from config will be UTC.
				clocks: [
					{
						title: "Weltzeit",
						timezone: "UTC",
						// timeFormat: "HH:mm MM/DD", // Time format override. 
						// altflag: "world.png" // if you'd like a flag from a file on your mirror device. 
					},
					{
						title: "Vancouver", // Too long of a title could cause bad text align.
						timezone: "America/Vancouver",
						flag: "ca", // If you'd like a flag from the standard library 
					},
					{
						title: "Boca Chica", // Too long of a title could cause bad text align.
						timezone: "America/Chicago", //When omitted, Local time will be displayed. 
						flag: "us", // If you'd like a flag from the standard library 
					},
					{
						title: "Sydney", // Too long of a title could cause bad text align.
						timezone: "Australia/Sydney",
						flag: "au", // If you'd like a flag from the standard library 
					},
				]
			},
		},

Did you restart MM or do a reload (Ctrl-R)?

[SoleLo]

@macg

I added your custom css but the title is showing overlapped and I have it as style left, should I change it to top like yours?

[MacG]

@solelo Adjust the width to 200px

 .MMM-Worldclock .world {
       width: 200px;
 }

The module may also have an alignment problem on the right side. Further customization of custom.css may be required.

[SoleLo]

@macg Ok thanks I’ll mess around with it some more and see if I can get it customized. I figured it was simple as adding your custom css snippet in but I guess not