I have my mirror mostly done. Right now, the screen turns off after 10 minutes of inactivity (RPI default screensaver). I want to do something different - I’d like to create a module that does the following:

• When the screen has been idle for a specified time, the display goes to a “photo frame” mode where everything is hidden except for a rotating image from local storage
• When the screen is touched, things go back to the regular mirror contents (I have a touch screen)

Additional nice-to-haves:

• Some modules could remain visible: for example I might want my Clock module to stay up
• When the screen is touched, I’d want to go back to a specific page
• Between certain times of day (at night), the screen just goes blank or turns off

I’m happy to develop this, and I’m looking for the simplest path forward - I would prefer not to reinvent the entire wheel.

I looked around and found a number of modules that can display photos, I think that part is fine. I’m already using MMM-BackgroundSlideshow, in fact.
I also found MMM-PIR, which seems to be able to a) do something after X minutes of inactivity, and b) do something else after the screen is touched.
However, the code for MMM-PIR is fairly complicated for me and I’m not sure I can just borrow the pieces I want. Right now I would try to fork it and make some minimal changes to do what I want instead.

Questions for the community: Are there other modules I should look at, with some of this functionality but maybe easier to fork or borrow from? Are there existing forks of MMM-PIR or other modules that you can share, if you did similar stuff?

@MMRIZE It’s all good, it works fine now.
I’m now going to try to add buttons that let someone move to the next or previous week in the calendar, so I’ll probably have more questions soon… Thanks again.

@MMRIZE I was wrong yet again… The real culprit (I hope) seems to be the module MMM-WallberryTheme. When I don’t include it, everything works fine with the calendar, even with height: ‘50vh’. When I add that module to another page (not even the one with the calendar), things start to look different: the calendar’s geometry and fonts are different, and I see that problem with the helloworld module displaying in the wrong place.

Digging in a bit more, the WallberryTheme module has this body style in its css:

body {
margin: 60px;
color: #fff;
font-family: “Rubik”, sans-serif;
font-weight: 400;
font-size: 27px;
text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.6);
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
}

The two culprits are:
font-size: 27px;
line-height: 1.5em;

If they are both enabled, even if all other styles are commented out, I see the problem. If either or both are commented out, everything is good.
No idea why this happens, but yet again I think I’m good to move forward :)

@MMRIZE I just got it to work by removing

height: '50vh',

from my config. I copied it from the git example but don’t know how vh works for height. If I comment it out altogether, the calendar is pretty short (for 14 hours) but the helloworld content displays correctly. If I do height: ‘1200px’, the calendar is a lot taller and looks great, AND the helloworld content displays correctly.

I guess something I have doesn’t like the 50vh stuff. The dev tools were showing some weird stuff also…

Thanks, this is good for me to move forward!

@MMRIZE It’s running on a RPI5. The resolution should be 1080 x 1920 although I also see it when accessing the mirror from my desktop. I’ll open dev tools and try to figure out if some other module is interfering.
So, even if you use 16-20 hours in your calendar, the text still goes below?
Thanks for the help by the way, and for the module!

@MMRIZE I think I narrowed it down to the hourLength attribute - mine is 14, and at least on my system if I use anything > 10 I see the issue. This is the config for the two modules, the image is below (the dayIndex was different when I took the screenshot but it should not matter):

{
			module: "MMM-CalendarExt3Journal",
			classes:"Calendar",
			position: "middle_center",
			config: {
				height: '50vh',
				width: '100%',
				locale: 'en-US',
				staticWeek: false,
				dayIndex: 0,
				days: 7,
				staticTime: true,
				hourLength: 12,
				beginHour:  7,
			}
		},
		{
			module: "helloworld",
			classes:"Calendar",
			position: "middle_center",
			config: {text: "THIS TEXT SHOULD BE BELOW" ,}, 
                },

I have CalendarExt3Journal (working well, awesome module) in middle_center, and another module after it in my config.js, also in middle_center. The second module is a simple helloworld module with a div and some spans inside it, not very tall. Just using text has the same issue.

The second module is NOT being rendered all the way below the calendar, but rather inside/behind it - near the lower quarter of it, the calendar is fairly high.
For every other module I tested, including CalendarExt3, if I put two modules in the same position they are rendered one below the other. Is this a bug with CalendarExt3Journal or do I need to do something to the second module to force it down below the calendar?

@sdetweil Thanks, this is perfect! I am set up with SFTP to the Pi and I can edit the remote files with VS Code on my machine. Haven’t tried SSH yet but hopefully that works well too.
I’m good with old school HTML, JavaScript, and CSS, but have zero experience with anything Linux. This has been a great project to get my feet wet. I think in 3 or 4 more weeks I should be able to post some pics of my display here, it’s coming along.

I have a Raspberry Pi with Magic Mirror running - attached to a monitor but no keyboard or mouse. To develop, I am using Remote Desktop from my main Windows computer to remote in and do whatever. This is not ideal, as I have to:

• Turn on the Pi, let it load to MM
• Close MM, then Log the main user out of the Raspberry Pi OS (while leaving the Pi on)
• Remote Desktop from my Windows machine
• Develop / edit the mirror from the remote window

I have to do this because Remote Desktop will not let me log into the Pi using the same user that is already logged in. I had actually created a second user, but then I don’t have access to the main user’s files (I know you can get around this, it just doesn’t seem like the right approach).

So, is there some write-up or general consensus of the best way to work on Magic Mirror from a Windows machine, where the ultimate target is a Raspberry Pi? Things like editing the config and css files, installing modules, developing new modules, etc.

BTW I also installed MM directly on my Windows machine as a way to develop a fork of a module, much easier than trying to do so via remote desktop. However, at some point I need to pull that fork down to the Pi, edit the config, test it with my other modules, etc.

How do you long-time users do this?

@sdetweil I open the Git Bash console, go to the MagicMirror folder, and type npm start
No flags or scripts. Is there a better way?