I came across Magicmirror in an article about a norwegian power supplyer and decided I should give it a go. Another norwegian fellow had made a module for Tibber (the power supplyer in question) which showed power consumption, price, voltage and much more live on screen.

I already had a Raspberry Pi 4 lying around from some other projects I had been working on, so that was my base.

Materials and cost:

• Raspberry Pi 4 - 80 EU (including power supply and case)

• Display 22" Dell Monitor - Free (Old monitor which i had lying around)

• Frame - Had to buy wood, which costs a newborn child and the blood of your secondborn these days, aprox. 30EU

• Glass - Free, found an old window which someone gave away online. Had to buy a glass-cutter, cost about 10EU

• Sunscreen window film. Usually used on car-windows, but worked flawlessly for this application and really gave it an extra dimension with a “mirror” look - 10EU

• Paint, glue and screws were leftovers from other projects aswell - Free

Total cost: ~130EU included Raspberry

Modules

• Included: newsfeed, alert, updatenotification, clock

• MMM-Tibber

• MMM-YrNow

• MMM-YrThen

• MMM-CalendarExt2

• MMM-Xkcd

Process:
I installed MMM on Raspberry first. The whole proccess took me a almost a month on and off. I love to go deep and fiddle with code and things I have no clue how to do, can spend hours problem solving small problems who no one else even would think about.

My initial though was just to have the MMM-Tibber module, and not much else. But this quickly changed when I took a look at all the modules which were available. I ended up having a calendar, newfeed, weather and the XKCD-comic.

The biggest challenge, programming-wise, was getting the MMM-CalendarExt2 to work and I spent probably two weeks trying to figure out how to get everything working. In the end I managed to get everything working the way I wanted, and it now includes work and private calendars for both my girlfriend and me, birthdays and trash collection.
The calendar-types are iCloud, Office365 and Google. iCloud was a challenge getting to work, but I got it working by adding a new calendar within my Gmail account and linking that to the private .ics link from iCloud. That seems to be working fine.
One thing i couldnt get working was the ability to transform the title of events based on the content of either title or description of the event. I have made another post about that, so if anyone feel the urge to help me out, please have a look.

Second challenge, carpentry. I am in no way a carpenter, but I am practical. So after spending way to much time planning, i finally decided to make two frames. The inner frame would hold the display and the outer frame would enclose everything and leave just enough height that it would be square with the glass ontop of the screen.

I sadly have no pictures of the making of the frame.

The display is glued to the inner frame with a little dot of glue in each corner, and the glass is glued to the outer frame with a thin line around the egde. This way, i can unscrew the inner frame from the outer frame and the display will come of without touching the glass. (At least I hope that will work, I have no intention or desire to test this at this point!)

Way forward
As you can see from the pictures below, I have left a little square below the display. This is where I am planning to fit a camera for motion detection, so that the display doesnt always have to be on.

This has been a really fun project, and I hope I can actually get some use out of this compared to some of the other stupid things I spend my hard earned money on.

Pictures

@johnbachini

Sorry, forgot to remove those from testing before. Tried again with the “;” removed, same result as before. Module does not show up at all. No errors in the logs.

EDIT: Here is the new code, properly formatted, (I think):

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * see https://docs.magicmirror.builders/getting-started/configuration.html#general
 * and https://docs.magicmirror.builders/modules/configuration.html
 */
let config = {
	address: "localhost", 	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/", 	// The URL path where MagicMirror is hosted. If you are using a Reverse proxy
					// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], 	// Set [] to allow all IP addresses
															// or add a specific IPv4 of 192.168.1.5 :
															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
															// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true

	language: "nb",
	locale: "nb-NO",
	logLevel: ["INFO", "LOG", "WARN", "ERROR", "DEBUG"], // Add "DEBUG" for even more logging
	timeFormat: 24,
	units: "metric",
	// serverOnly:  true/false/"local" ,
	// local for armv6l processors, default
	//   starts serveronly and then starts chrome browser
	// false, default for all NON-armv6l devices
	// true, force serveronly mode, because you want to.. no UI on this device

	modules: [
		{
			module: "alert",
		},
		{
			module: 'MMM-Cursor',
			config: {
				timeout: 10000,
			}
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: 'MMM-CalendarExt2',
			config: {
				fetchInterval: 60 * 1000 * 15,
				rotateInterval: 0,
				updateInterval: 60 * 1000 * 15,
				firstDrawingDelay: 10000,
				calendars: [
			      	{
					name: "Johan privat",
			        	url: "******************************************************",
					className: "johan",
			      	},
                                {
                                        name: "Johan Jobb",
                                        url: "******************************************************",
                                        className: "johanjobb",
                                },
				{
					name: "Offentlige helligdager",
					url: "******************************************************",
					className: "holiday",
				},
                                {
                                        name: "Bursdager",
                                        url: "******************************************************",
                                        className: "bursdager",
                                },
                                {
                                        name: "Trash",
                                        url: "******************************************************",
                                        className: "trash",
                                },
				{
					name: "Mia privat",
					url: "******************************************************",
					className: "mia",
				},
			    	],
			    	views: [
			      	{
					name: "Uke",
			        	mode: "weekly",
					locale: "nb_NO",
					dateFormat: "nb",
					calendars: [],
					position: "top_left",
					slotCount: 1,
					maxItems: 500,
					filterPassedEvent: true,
					slotMaxHeight: "500px",
					dateFormat:"ddd DD/MM",
					slotTitleFormat: "[Uke] WW"
			      	},
				{
					name: "Dag",
					mode: "daily",
					locale: "nb_NO",
					dateFormat: "nb",
					calendars: [],
					position: "top_left",
					dateFormat:"ddd DD/MM",
					slotTitleFormat: "[Idag]",
					slotCount: 1,
					maxItems: 500,
					transform: (event)=>{
  						if (event.description.search("Bursdag") > -1) { // If the event might include "Birthday" in its title,
    							event.icon = "fxemoji-birthdaycake" // Set icon of that event to "fxemoji-birthdaycake"
  						}

						if (event.title.search("plast") > -1) {
                                                        event.icon = "fxemoji-blackuniversalrecyclingsymbol"
						}

						if (event.title.search("Restavfall") > -1) {
                                                        event.icon = "fxemoji-wastebasket"
                        }

						if (event.title.search("glass og metall") > -1) {
                                                        event.icon = "fxemoji-cocktailglass"
                        }

						if (event.title.search("papir") > -1) {
                                                        event.icon = "fxemoji-rolledupnewspaper"
                        }

						if (event.description.search("Katt") > -1) {
                                                        event.icon = "fxemoji-cat"
                        }

						if (event.description.search("Hjerte") > -1) {
                                                        event.icon = "fxemoji-sparklingheart"
                        }

						if (event.description.search("Lilla") > -1) {
                                                        event.icon = "fxemoji-heartpurple"
		                }

                        if (event.description.search("Beer") > -1) {
                            							event.icon = "fxemoji-clinkingbeermugs"
                        }
                        if (event.description.search("Par") > -1) {
                                                        event.icon = "fxemoji-couplekiss"
                        }
                        if (event.title.search("Yoga") > -1) {
                                                        event.icon = "grommet-icons:yoga"
                        }
  						return event // Return that event.
					},
				},
			    	],
			    	scenes: [
			      		{
			        	name: "Hovedskjerm",
					views: ["Dag", "Uke"],
			      		},
			    	],
			  	},
		},

Hello forum!
My first post here. I have been following this project for a while, and finally got around to making one myself. I have a functioning mirror, with all the modules i want and it is amazing. The only minor problem i have, is with the transform function in MMM-CalendatExt2.

I use the function as described in the documentation, but i cannot get it to work. Or, it did actually work for about a day, then it broke.

I try to add icons to my event headers based on the content of the event (either description or title), but as stated, i cannot get this to work. If i try to start MM with this code, the MMM-CalendarExt2 will not load. Everything else works fine.

I have included the code for the module below, if anyone could take a look and maybe tell me what i am doing wrong, it would be great. The calendar-adresses are removed and the code-snippet for the transform is commented out, for obvious reasons.

{
                        module: 'MMM-CalendarExt2',
                        config: {
                                fetchInterval: 60 * 1000 * 15,
                                rotateInterval: 0,
                                updateInterval: 60 * 1000 * 15,
                                firstDrawingDelay: 10000,
                                calendars: [
                                {
                                        name: "Johan privat",
                                        url: "******************************************************"
                                        className: "johan",
                                },
                                {
                                        name: "Johan Jobb",
                                        url: "******************************************************"
                                        className: "johanjobb",
                                },
                                {
                                        name: "Offentlige helligdager",
                                        url: "******************************************************"
                                        className: "holiday",
                                },
                                {
                                        name: "Bursdager",
                                        url: "******************************************************"
                                        className: "bursdager",
                                },
                                {
                                        name: "Trash",
                                        url: "******************************************************"
                                        className: "trash",
                                },
                                {
                                        name: "Mia privat",
                                        url: "******************************************************"
                                        className: "mia",
                                },
                                ],
                                views: [
                                {
                                        name: "Uke",
                                        mode: "weekly",
                                        locale: "nb_NO",
                                        dateFormat: "nb",
                                        calendars: [],
                                        position: "top_left",
                                        slotCount: 1,
                                        maxItems: 500,
                                        filterPassedEvent: true,
                                        slotMaxHeight: "500px",
                                        dateFormat:"ddd DD/MM",
                                        slotTitleFormat: "[Uke] WW"
                                },
                                {
                                        name: "Dag",
                                        mode: "daily",
                                        locale: "nb_NO",
                                        dateFormat: "nb",
                                        calendars: [],
                                        position: "top_left",
                                        dateFormat:"ddd DD/MM",
                                        slotTitleFormat: "[Idag]",
                                        slotCount: 1,
                                        maxItems: 500,
                                /*      transform: (event)=>{
                                                if (event.description.search("Bursdag") > -1) { // If the event might include "Birthday" in its $
                                                        event.icon = "fxemoji-birthdaycake"; // Set icon of that event to "fxemoji-birthdaycake"
                                                }

                                                if (event.title.search("plast") > -1) {
                                                        event.icon = "fxemoji-blackuniversalrecyclingsymbol";
                                                }

                                                if (event.title.search("Restavfall") > -1) {
                                                        event.icon = "fxemoji-wastebasket";
                                                }

                                                if (event.title.search("glass og metall") > -1) {
                                                        event.icon = "fxemoji-cocktailglass";
                                                }

                                                if (event.title.search("papir") > -1) {
                                                        event.icon = "fxemoji-rolledupnewspaper";
                                                }

                                                if (event.description.search("Katt") > -1) {
                                                        event.icon = "fxemoji-cat";
                                                }

                                                if (event.description.search("Hjerte") > -1) {
                                                        event.icon = "fxemoji-sparklingheart";
                                                }

                                                if (event.description.search("Lilla") > -1) {
                                                        event.icon = "fxemoji-heartpurple";
                                                }

                                                if (event.description.search("Beer") > -1) {
                                                        event.icon = "fxemoji-clinkingbeermugs";
                                                }

                                                if (event.description.search("Par") > -1) {
                                                        event.icon = "fxemoji-couplekiss";
                                                }

                                                if (event.title.search("Yoga") > -1) {
                                                        event.icon = "grommet-icons:yoga";
                                                }
                                                return event; // Return that event.
                                        },
                        */      },
                                ],
                                scenes: [
                                        {
                                        name: "Hovedskjerm",
                                        views: ["Dag", "Uke"],
                                        },
                                ],
                                },
                },

haglefar