• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

MMM-Worldclock

Scheduled Pinned Locked Moved Utilities
32 Posts 8 Posters 10.3k Views 8 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    MacG
    last edited by Sep 20, 2021, 8:58 AM

    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.

    MMM-Worldclock.png

    B S 2 Replies Last reply Sep 20, 2021, 2:36 PM Reply Quote 0
    • B Offline
      BKeyport Module Developer @MacG
      last edited by BKeyport Sep 20, 2021, 2:38 PM Sep 20, 2021, 2:36 PM

      @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.

      The "E" in "Javascript" stands for "Easy"

      M 1 Reply Last reply Sep 20, 2021, 5:42 PM Reply Quote 0
      • M Offline
        MacG @BKeyport
        last edited by Sep 20, 2021, 5:42 PM

        @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.

        S B 2 Replies Last reply Sep 20, 2021, 5:57 PM Reply Quote 0
        • S Offline
          sdetweil @MacG
          last edited by Sep 20, 2021, 5:57 PM

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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • B Offline
            BKeyport Module Developer @MacG
            last edited by Sep 20, 2021, 8:25 PM

            @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.

            The "E" in "Javascript" stands for "Easy"

            1 Reply Last reply Reply Quote 0
            • S Offline
              SoleLo @MacG
              last edited by Sep 21, 2021, 4:58 AM

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

              M 1 Reply Last reply Sep 21, 2021, 8:16 AM Reply Quote 0
              • M Offline
                MacG @SoleLo
                last edited by Sep 21, 2021, 8:16 AM

                @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.

                S 1 Reply Last reply Sep 25, 2021, 3:17 PM Reply Quote 0
                • S Offline
                  SoleLo @MacG
                  last edited by SoleLo Sep 25, 2021, 4:04 PM Sep 25, 2021, 3:17 PM

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

                  M 1 Reply Last reply Sep 25, 2021, 6:27 PM Reply Quote 0
                  • M Offline
                    MacG @SoleLo
                    last edited by Sep 25, 2021, 6:27 PM

                    @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)?

                    S 1 Reply Last reply Sep 25, 2021, 6:37 PM Reply Quote 0
                    • S Offline
                      SoleLo @MacG
                      last edited by Sep 25, 2021, 6:37 PM

                      @macg mm world clock.JPG

                      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?

                      M 1 Reply Last reply Sep 25, 2021, 7:23 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 2 / 4
                      2 / 4
                      • First post
                        17/32
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy