Building my first MM project, it’s a touch-screen for the family. One of my main needs is the ability to display interactive lists: meals for the week, items in our deep freezer, etc. I’d like the community to weigh in on whether you think it would be better for me to write my own module or use & modify an existing one.

For context: I built my first module already, a fairly easy timer. I’m fine with JS and CSS, though this is my first real node.js and Linux experience.

Requirements and nice-to-haves:

• ability to add/edit/remove items directly on the screen
• ability to optionally show a quantity for each item, and to easily change that. Worst-case I can do this within the item text, but it’d be nicer for the family to have a number they can touch and change next to each list item
• multiple lists
• ability to access the list from my phone while I’m out. This isn’t an absolute requirement but it would be nice.

I looked at the existing 3rd party modules, and the biggest issues are lack of interactivity - since many of you have this as a mirror, - and unknown module support. Modules that display from AnyList, Todoist, Microsoft To Do, Google Keep/Shopping List/Sheets look ok but I’d have to implement the interactive bits, as well as any other changes (some of the above may not work anymore).
Ideally I would love an integration with OurGroceries but I’m not sure I’m quite up to that task. I also looked at Mealie, which looks great, but the API is a bit daunting.

If implementing my own module, I’d probably just keep the lists as json files in the module folder. I’m guessing this would be easier, but I don’t know how useful it would be to the community.

This is an open-ended prompt, and all thoughts are much appreciated. Are there modules out there I could use or build on? What do you think are some pros and cons?
Thanks!

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

@sdetweil I’m not using pm2 - I didn’t install it and the log I posted above has a row that says ‘You are not using pm2’. Is there a similar thing that would keep rebooting my mirror?