Finally completed my first MM project, a touchscreen dashboard for our kitchen!

First, big thanks to the community, to Michael Teeuw, and to Sam (sdetweil) for answering a bunch of questions.
The project was loads of fun but challenging, especially as most modules are not set up for touchscreen interactivity. It runs on a RPI 5, and the monitor is a super cheap no-brand 21" touchscreen.

Starting with the case: my best friend is a carpenter and he built and painted a wooden case.

The PI and power supplies are attached with velcro just in case. The numbered blocks hold the monitor in place, but can be easily removed to take the whole thing out. As you see there is a VESA stand mount already on the monitor, it’s what I used for the last few months to have the project next to my other screens in my office, on the stand that you see. This way, even after installing it, it can be removed from the kitchen wall and put back on the desk mount easily, which is awesome for some development/fixes. The frame uses a french cleat to hang on the wall.

The finished frame in my kitchen:

On top of the frame is a wireless mini keyboard we can use to add text. I thought about implementing an onscreen keyboard but I already had that mini one and it seems to be working well for everyone.
The worst part of this whole thing is that the monitor’s viewing angles are awful ESPECIALLY when pivoted. Basically, you have to look at it from right in front or from the left. Lesson learned…

Now for the software side - I used MMM-pages and I modified MMM-page-indicator to show tabs across the bottom to switch pages. Here’s my home screen:

It has the usual stuff, the tabs at the bottom, a WallberryTheme background that cycles through thousands of space/nature/animals images, and a module I wrote from scratch on the top left: my wife is a therapist and occasionally does sessions from home, in the basement. When clicked, this module lets her set when her next session is, and how long it is. It then counts down until session starts, then counts down the session time while playing white noise.

The board is right by the stairs to the basement, so this lets everyone know not to go down there, and gives her even more privacy with the white noise.

Next is the Calendar tab with all of our calendars:

Using CalendarExt3Journal. I modified it by adding the bar at the top: it lets you move weeks, and the four boxes on the right can be clicked to filter the calendar to only that person.

The Food tab is next, this actually replaces a dry-erase board that was on that wall (you can still see the tape…). It shows a list of meal ideas, and a list of everything in our basement deep freezer.

The two lists are done using MMM-Notion. I modified this to be interactive: if you touch an item you can edit its text or delete the item. You can also add new items, and for the deep freezer list you can change the quantity, like when I decide to eat a whole frozen pizza by myself. This module was probably the most challenging: first, selecting which existing module/solution (or writing from scratch), then doing the actual work.
This also has a WallberryTheme background showing a bunch of pictures of food.

The Fun tab is very much a work in progress, it has the XKCD comic strip and Jeopardy questions:

I modified the MMM-Jeopardy module as it was not working, my version pulls data from a different source (Cluebase).

The System module has some info and buttons to restart/power down/etc. (MMM-OnScreenMenu, MMM-SystemInfo).

Lastly, when you double-tap on the screen, or after 10 minutes of inactivity, the screensaver kicks in and turns the display into a photo frame:

This uses the ‘hidden pages’ feature of MMM-pages. After about 100 minutes, the monitor turns off altogether - I did this in the PI itself, not in MM, because I wanted it to turn off but turn back on when touched, like the standard PI screensaver feature. The only challenge there was figuring out which buried, hidden setting to change in order to extend the time from the default 10 minutes to over 1 hour.

That’s it for now - the family likes it and is already requesting more: post-it notes, an ASL sign-of-the-day module, random animal facts, and the ability to stream our security camera to name a few.

Thanks again everyone!

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!

@Kodama666 I did not override that setting, actually. This is what my config looks like for MMM-SystemInfo:

{
module: ‘MMM-SystemInfo’,
classes:“System moduleMargins”,
position: “upper_third”,
config: {
network: “My guest network has another name”,
password: "Speak, friend, and enter :) ",
showCpuUsage: true,
showRamUsage: true,
showDiskUsage: true,
showCpuTemperature: true,
showVolume: true,
tableClass: ‘medium’,
qrSize: 220,
layout: “rtl”,
}
},

The cpu usage worked from the start. However, I did have to override ‘cpuTemperatureCommand’. I did it directly in MMM-SystemInfo.js because I didn’t know any better at the time. This is my new value for it:

 cpuTemperatureCommand: "echo \"$(( ($(cat /sys/class/thermal/thermal_zone*/temp))))\"",

I doubt this will help you with cpu usage, but that’s all I modified.

@mischag My code is a jumbled mess, has few comments, and only works for the exact combination of modules (public and custom) that I have. If you tell me which parts you are stuck on, or which module changes you are interested in, I’d be happy to send you those pieces or help out as best I can. I can also clean up some of my code and post more forks on GitHub for pieces that may be useful.
I did use custom.css to modify things, happy to share that too, if you let me know what parts of my setup you are interested in.

@rkorell Thanks! I did end up implementing MMM-MPlayer. It was indeed very easy, but unfortunately it only seems to work some of the time - for the first week, it would work until about 4 pm and then stop. Now it’s not showing up at all. Since it just brings up another process on top of the mirror, I’m not sure how to debug this issue, but I haven’t had time to look at it yet.

@raymonvdm Really sorry, I wrote out this whole reply but never hit Submit… Well better late than never:
MMM-page-indicator by default has a set of little circles at the bottom, one for each page, and they are already clickable. I just turned the little circles into tabs in the HTML - that part was very easy if I remember right.
There are a bunch of modules that implement hooks for physical GPIO buttons, like MMM-button , MMM-buttons, and others. Some of them probably already have examples to attach the physical button click to page selections.

Finally completed my first MM project, a touchscreen dashboard for our kitchen!

First, big thanks to the community, to Michael Teeuw, and to Sam (sdetweil) for answering a bunch of questions.
The project was loads of fun but challenging, especially as most modules are not set up for touchscreen interactivity. It runs on a RPI 5, and the monitor is a super cheap no-brand 21" touchscreen.

Starting with the case: my best friend is a carpenter and he built and painted a wooden case.

The PI and power supplies are attached with velcro just in case. The numbered blocks hold the monitor in place, but can be easily removed to take the whole thing out. As you see there is a VESA stand mount already on the monitor, it’s what I used for the last few months to have the project next to my other screens in my office, on the stand that you see. This way, even after installing it, it can be removed from the kitchen wall and put back on the desk mount easily, which is awesome for some development/fixes. The frame uses a french cleat to hang on the wall.

The finished frame in my kitchen:

On top of the frame is a wireless mini keyboard we can use to add text. I thought about implementing an onscreen keyboard but I already had that mini one and it seems to be working well for everyone.
The worst part of this whole thing is that the monitor’s viewing angles are awful ESPECIALLY when pivoted. Basically, you have to look at it from right in front or from the left. Lesson learned…

Now for the software side - I used MMM-pages and I modified MMM-page-indicator to show tabs across the bottom to switch pages. Here’s my home screen:

It has the usual stuff, the tabs at the bottom, a WallberryTheme background that cycles through thousands of space/nature/animals images, and a module I wrote from scratch on the top left: my wife is a therapist and occasionally does sessions from home, in the basement. When clicked, this module lets her set when her next session is, and how long it is. It then counts down until session starts, then counts down the session time while playing white noise.

The board is right by the stairs to the basement, so this lets everyone know not to go down there, and gives her even more privacy with the white noise.

Next is the Calendar tab with all of our calendars:

Using CalendarExt3Journal. I modified it by adding the bar at the top: it lets you move weeks, and the four boxes on the right can be clicked to filter the calendar to only that person.

The Food tab is next, this actually replaces a dry-erase board that was on that wall (you can still see the tape…). It shows a list of meal ideas, and a list of everything in our basement deep freezer.

The two lists are done using MMM-Notion. I modified this to be interactive: if you touch an item you can edit its text or delete the item. You can also add new items, and for the deep freezer list you can change the quantity, like when I decide to eat a whole frozen pizza by myself. This module was probably the most challenging: first, selecting which existing module/solution (or writing from scratch), then doing the actual work.
This also has a WallberryTheme background showing a bunch of pictures of food.

The Fun tab is very much a work in progress, it has the XKCD comic strip and Jeopardy questions:

I modified the MMM-Jeopardy module as it was not working, my version pulls data from a different source (Cluebase).

The System module has some info and buttons to restart/power down/etc. (MMM-OnScreenMenu, MMM-SystemInfo).

Lastly, when you double-tap on the screen, or after 10 minutes of inactivity, the screensaver kicks in and turns the display into a photo frame:

This uses the ‘hidden pages’ feature of MMM-pages. After about 100 minutes, the monitor turns off altogether - I did this in the PI itself, not in MM, because I wanted it to turn off but turn back on when touched, like the standard PI screensaver feature. The only challenge there was figuring out which buried, hidden setting to change in order to extend the time from the default 10 minutes to over 1 hour.

That’s it for now - the family likes it and is already requesting more: post-it notes, an ASL sign-of-the-day module, random animal facts, and the ability to stream our security camera to name a few.

Thanks again everyone!

@sdetweil that’s an excellent suggestion! Forking MMM-PIR seemed daunting, but forking BackgroundSlideshow and using the z-index trick should indeed be simple, and it separates the problem of turning off the screen at night. Thanks!

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!