Just the Clock at night

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.

ortizimo

@darrenhill thnx…i’ll try it soon!

ortizimo

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

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?

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.

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…

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 *************************

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%;
}

ortizimo

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

copied clock to clock2 in defaults directory
changed the name of the two files to say clock2.js and clock2_styles.css
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%;
}

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

copied clock to clock2 in defaults directory
changed the name of the two files to say clock2.js and clock2_styles.css
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%;
}

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

ruff.hi

Very nice! I will file this away for consideration.