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.

    Just the Clock at night

    Scheduled Pinned Locked Moved Solved Requests
    13 Posts 3 Posters 2.4k Views 3 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.
    • O Offline
      ortizimo
      last edited by ortizimo

      Is there a way to disable all other modules except the clock by time of the day? I’ve tried a module (cant find it now) and its too complicated and can’t make it work. If you have then let me know. Thnx.

      D 1 Reply Last reply Reply Quote 0
      • D Offline
        DarrenHill @ortizimo
        last edited by DarrenHill

        @ortizimo I use MMM-ModuleScheduler to do exactly this and works perfectly.

        https://github.com/ianperrin/MMM-ModuleScheduler

        In your config.js you just need to set it up something like this:

                {
                    module: "MMM-ModuleScheduler",
                    config: {
                        global_schedule: [
                            {from: "0 7 * * *", to: "30 22 * * *", ignoreModules: ["alert", "updatenotification", "MMM-DigClock"]},
                            {from: "0 7 * * *", to: "30 22 * * *", dimLevel: "50", groupClass: "nightDim_scheduler"} ]
                            }
                },
                {
                    module: "alert",
                },
                {
                    module: "updatenotification",
                    position: "top_bar",
                    classes: "nightDim_scheduler",
                },
                {
                    module: "MMM-DigClock",
                    position: "top_center",
                    classes: "nightDim_scheduler",
                    config: {
                        showDate: true,
                        showWeek: false,
                        showSeconds: true,
                        dateFormat: "ddd DD MMM (W)",
                        timezone: "Europe/London"
                        }
                },
        
        

        Mine there is set to remove all modules except alert, updatenotification and DigClock, some of which it instead dims by 50%.

        You can see also there where I’ve assigned the digital clock module to the class to get the dimming.

        O 3 Replies Last reply Reply Quote 0
        • O Offline
          ortizimo @DarrenHill
          last edited by

          @darrenhill thnx…i’ll try it soon!

          1 Reply Last reply Reply Quote 0
          • O Offline
            ortizimo @DarrenHill
            last edited by

            @darrenhill it worked perfectly…i just replaced the DigClock with the default one which I use and remove all other configurations for DigClock…now I have to see if I can have the clock move to the center and be big or become bigger from top_left…thnx again!

            D 1 Reply Last reply Reply Quote 0
            • D Offline
              DarrenHill @ortizimo
              last edited by DarrenHill

              @ortizimo You’re welcome :)

              In your config.js , you should have something like:

              	{
              		module: "clock",
              		position: "top_left",	// This can be any of the regions.
              		config: {
              			// The config property is optional.
              			// See 'Configuration options' for more information.
              		}
              	}
              

              If you change the “top_left” to “top_center” or “top_bar” then it should centralise it.

              You can see the full configuration options at the link below:
              https://docs.magicmirror.builders/modules/clock.html

              For the size you can change the analogSize parameter for the analog face. I can’t see where to do it for the digital one, but it can probably be done via a custom css setting.

              I’m not a great expert with css though, so someone else can maybe help there?

              D 1 Reply Last reply Reply Quote 0
              • D Offline
                DarrenHill @DarrenHill
                last edited by DarrenHill

                Look in this thread for the custom css change:

                https://forum.magicmirror.builders/topic/10582/default-clock-size/6

                
                .clock .time {
                 font-size: 100px;
                }
                
                .clock .date {
                 font-size: 30px;
                }
                

                It goes in custom.css, which is in the css sub-folder of your main MagicMirror folder (~/MagicMirror/css). Just set the fonts to whatever you like.

                O 1 Reply Last reply Reply Quote 0
                • O Offline
                  ortizimo @DarrenHill
                  last edited by ortizimo

                  @darrenhill thnx! luckily i used to write webpages before the invention of Dreamweaver and learned CSS when it was incorporated into HTML…i know, i know…old…but not really…just an early dev…thnx again…

                  O 1 Reply Last reply Reply Quote 0
                  • O Offline
                    ortizimo @ortizimo
                    last edited by ortizimo

                    @ortizimo Ok, so in case anyone is wondering…this is what I wanted to do.

                    I wanted to turn off all modules except clock and move clock to the middle of the screen and make it big. I am still working on CSS but for the time being this is what I did to make it work like I wanted to. FYI, I removed “alert” and “updatenotification”. I also added two instances of “clock” one for daytime and one with an class array for evening with nightDim.

                    I’m looking to see if installing/registering the same clock module under a new name like “clock2” even though it is the same, may be easier than exploring CSS for a different view of “clock” with bigger font size. I tried copying it to “clock2” and rename it, but I guess it needs to be registered for it to work from config.js.

                    Also, I added some CSS to make the clock bigger by 300% and bold. I didn’t like the (clockBold: true) configuration because it only work in the minutes and not hour. Below is what you need to add to config.js.

                                // ************  MMM-ModuleScheduler START ***********************
                                {
                                        module: "MMM-ModuleScheduler",
                                        config: {
                                                global_schedule: [
                                                {from: "0 6 * * *", to: "0 18 * * *", ignoreModules: ["clock"]},
                                                {from: "0 6 * * *", to: "0 18 * * *", groupClass: "daytime_scheduler"},
                                                {from: "0 18 * * *", to: "0 21 * * *", groupClass: "evening_scheduler"},
                                                {from: "0 18* * *", to: "0 21 * * *", dimLevel: "55", groupClass: "nightDim_scheduler"}],
                                                }
                                },
                                {
                                        module: "clock",
                                        position: "top_left",
                                        classes: "daytime_scheduler"
                                },
                                {
                                        module: "clock",
                                        position: "middle_center",
                                        classes: ["evening_scheduler","nightDim_scheduler"],
                                        config: {
                                                showSunTimes: false,
                                                showMoonTimes: false,
                                                showWeek: false,
                                                showDate: false
                                                }
                                },
                                // ************* MMM-ModuleScheduler END *************************
                    
                    O 1 Reply Last reply Reply Quote 0
                    • O Offline
                      ortizimo @ortizimo
                      last edited by ortizimo

                      @ortizimo Here’s the CSS…add this at the very end of the clock_style.css…change the color if you want to or remove it:

                      .module.clock .time { /* This part will change the color of the clock but not the seconds */
                      color: #0099ff;
                      font-weight: bold;
                      font-size: 300%;
                      }

                      O 1 Reply Last reply Reply Quote 0
                      • O Offline
                        ortizimo @ortizimo
                        last edited by ortizimo

                        @ortizimo Got it! Now I have two clocks each one of different sizes and locations. This is what I did:

                        1. copied clock to clock2 in defaults directory
                        2. changed the name of the two files to say clock2.js and clock2_styles.css
                        3. in CSS at the end I entered this:

                        .module.clock2 .time { /* This part will change the color of the clock but not$
                        color: #0099ff; /*change this color or remove
                        font-weight: bold;
                        font-size: 500%;
                        }

                        1. in clock2.js I changed two instances of the word clock to clock2. Using nano use (shift+Alt+3) to turn On the line numbers and look for lines: 9 and 42.

                        2. Then in config.js I entered this which is the same as I replied before but with a new config line for timeZone on each clock and also I specified clock2 to be in the middle:

                        {
                        module: “clock”,
                        position: “top_left”,
                        classes: “daytime_scheduler”,
                        config: {
                        timeZone: “America/New_York”
                        }
                        },
                        @ortizimo Got it! Now I have two clocks each one of different sizes and locations. This is what I did:

                        1. copied clock to clock2 in defaults directory
                        2. changed the name of the two files to say clock2.js and clock2_styles.css
                        3. in CSS at the end I entered this:

                        .module.clock2 .time { /* This part will change the color of the clock but not$
                        color: #0099ff; /*change this color or remove
                        font-weight: bold;
                        font-size: 500%;
                        }

                        1. in clock2.js I changed two instances of the word clock to clock2. Using nano use (shift+Alt+3) to turn On the line numbers and look for lines: 9 and 42.

                        2. Then in config.js I entered this which is the same as I replied before but with a new config line for timeZone on each clock and also I specified clock2 to be in the middle:

                        // ************ MMM-ModuleScheduler START ***********************
                        {
                        module: “MMM-ModuleScheduler”,
                        config: {
                        global_schedule: [
                        // 0 7 * * 3 means 0700 on Wed … 30 20 * * * means 2030 all days … replace * with name of days (optional)
                        {from: “0 6 * * *”, to: “0 18 * * *”, ignoreModules: [“clock”, “clock2”]},
                        {from: “0 6 * * *”, to: “0 18 * * *”, groupClass: “daytime_scheduler”},
                        {from: “0 18 * * *”, to: “0 21 * * ", groupClass: “evening_scheduler”},
                        {from: "0 18
                        * *”, to: “0 21 * * *”, dimLevel: “25”, groupClass: “nightDim_scheduler”}],
                        }
                        },
                        {
                        module: “clock”,
                        position: “top_left”,
                        classes: “daytime_scheduler”,
                        config: {
                        timeZone: “America/New_York”
                        }
                        },
                        {
                        module: “clock2”,
                        position: “middle_center”,
                        classes: [“evening_scheduler”,“nightDim_scheduler”],
                        config: {
                        showSunTimes: false,
                        showMoonTimes: false,
                        showWeek: false,
                        showDate: false,
                        timeZone: “America/New_York”
                        }
                        },

                                    // ************* MMM-ModuleScheduler END *************************
                        
                        R 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          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