worldclock - nobody made this, so I did.

[Arjen_lima]

Hi There,

just starting out with MM and i like the module a lot.
one question i have is how to organize the clock’s in row instead of one below the other.

thanks

Arjen

[A Former User]

@Arjen_lima
Sorry for my English, I cannot catch your question.
The order of clocks is defined in config.js by the section clocks, that is the array of clock, then the order of display is same with the order of array element.

Or… If you mean another problem, give me more detailed information. Of course, an image could be the great help for understanding.

[Arjen_lima]

@Sean said in worldclock - nobody made this, so I did.:

@Arjen_lima
Sorry for my English, I cannot catch your question.
The order of clocks is defined in config.js by the section clocks, that is the array of clock, then the order of display is same with the order of array element.

Or… If you mean another problem, give me more detailed information. Of course, an image could be the great help for understanding.

Hey Sean,

Its probably my english ;-),
now the clocks in the array are all vertically aligned one clock below the next clock.
in some of the screen shots they are in a 3x3 grid i was wondering how to get it like that

my current lay out

the lay out im looking for

[A Former User]

@Arjen_lima
Sorry for the confusion. that image was just sample of the different layout configuration. That was not real, it was photoshopped.

[Peter]

Can somebody help me to change the font size of this module?
I would like to have the time a little smaller; about the same as the size of the citynames.
Thanks.
Peter

[ninjabreadman]

@Peter This should work:

.worldclock {
  font-size: 73%; /* adjust value as needed */
}

[Peter]

@ninjabreadman thanks!
It works fine.
Peter

[cookblook]

Hello,

very nice module. Is it possible to have the clocks horizontal instead of vertical?

[A Former User]

@cookblook
You can redefine CSS of .worldclockand.worldclock .world to arrange horizontally with flex things of CSS3.

[cookblook]

@sean like display: flex;? tried that but it didn’t work

[A Former User]

@cookblook
This will work, add this into your css/custom.css

.worldtime {
  display:flex;
  flex-direction:row;
}

.world{
  width:200px;
}

[cookblook]

@sean Thanks!! That worked :-)

[BKeyport]

Ulrich/Sean -

I’ve got a bug - supposedly it’s supposed to allow override of the time format per clock. I’m trying to get a 24 hour clock only on the UTC clock. “LT” is “hh:mm A” here…

Thanks!

{
 module: "worldclock",
 position: "top_left", 
config: { 
 timeFormat: "LT", style: "left",
 offsetTimezone: null,
 clocks: [
 {
 title: "Local",
 timezone: "America/Los_Angeles",
 }, 
{
 title: "UTC",
 timezone: "UTC",
 timeFormat: "HH:mm",
 }, 
 ]
 },
 },

Thanks!

[Lagmin]

This post is deleted!

[BKeyport]

I solved this. My fork is http://www.github.com/bkeyport/MMM-Worldclock if you’d like to use it. It’ll be fully supported, and I don’t plan to merge back into the original.

[alanodoug]

Hey guys,
is it possible to change the flag-icon? Because the flag i want to use doesnt exist.
Maybe i can use a image and put it in the folder?

Thx

[BKeyport]

No. The flags are hardcoded. I’m trying to figure out how it works, because I want to use a flag for UTC, which don’t have one either.

I’m about halfway there. I’ve figured out how to do everything but get the replacement flag into the right spot. It’ll display, but it’s not showing up at the right spot. Still crunching, will look more when time permits. . :|

[BKeyport]

@alanodoug said in worldclock - nobody made this, so I did.:

Hey guys,
is it possible to change the flag-icon? Because the flag i want to use doesnt exist.
Maybe i can use a image and put it in the folder?

I’ve added the functionality to MMM-Worldclock. The supported version™

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

Is created by:

		{
			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"
					},
				]
			},
		},

the module is located at http://www.github.com/BKeyport/MMM-Worldclock

Cheers!

I really need someone to help me with the CSS buildout. I’m not understanding how to get the icons down to the same size as the normal flags, and other little ticky stuff.

What I added was “altflag” in the code, and based it off of what Sean did originally.

The combo of JS and CSS is maddening me.

[alanodoug]

Oh cool, that looks good.
is it not possible to create a custom css. Because in the worldclock.js is the link to the flags

loadCSS: function() {
    var css = [
      {
        id:'flag-icon-CSS',
        href: 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css'
      }
    ]

and there are a lot of flags, wich I can change it maybe?

But I cant find the svg.

Maybe someone can help?
Thanks a lot.

[BKeyport]

Those SVGs are for the built in flags. I figured it would be “download and place the file in the module directory” for the custom flags… Like I have “world.jpg” and “washington.png” (or is it the other way).

Just make sure the flag image is square, and use “altflag” rather than “flag” with the filename of the image file, and it’ll pick it up.

(the requirements are hopefully temporary for the alternate flag image, I’m working on learning CSS in my spare time, and how to fix the image insert later)