Just the Clock at night

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.

ortizimo

@darrenhill one last question… do you know why once they turn off except those ignored, the following day it doesn’t restart as normal? All are off except those ignored and have to restart the pi for it to work…thnx.

DarrenHill

@ortizimo said in Just the Clock at night:

@darrenhill one last question… do you know why once they turn off except those ignored, the following day it doesn’t restart as normal? All are off except those ignored and have to restart the pi for it to work…thnx.

On mine they come back fine, so that’s a little weird. All I can think of is that there’s something off in your set-up somewhere, but as you can see from the snippets I posted before the plugin gives times for both turn-off and turn-on, so not sure there…