JeffreyATW/magic-mirror-config

Custom config files for MagicMirror.

MagicMirror² config files

This is a repository of my custom config and CSS files for my MagicMirror² kitchen installation.

Here's what it looks like in real life. The background image changes every minute:

Hardware setup

I installed MagicMirror² on a Raspberry Pi 3B+. It's connected via this low profile cable to an Acer S271HL (although any monitor with a VESA mounting interface will do - it's just what I had lying around) using this slim mount. I attached the Pi, adapters, and power cables to the back of the monitor using velcro tape. (The Pi's included power adapter is too large to fit comfortably behind the monitor but I found that a 12W iPad adapter and a good micro USB cable did the trick.)

Software setup

System configuration

I modified the Raspberry Pi's /boot/config.txt file to rotate the display, adding this line:

display_rotate=3

I also modified the cron scheduler (via crontab -e) to put the display to sleep at 9 PM and wake it at 6:30 AM:

30 6 * * * DISPLAY=:0 xset -dpms
0 21 * * * DISPLAY=:0 xset dpms force off

I also added these lines to /etc/xdg/lxsession/LXDE/autostart to prevent the display from sleeping on its own:

@xset s noblank
@xset s off

For ease of configuration, I've enabled both SSH and VNC (via raspi-config).

MagicMirror configuration

I'm running the latest version of MagicMirror². The custom modules I have installed are MMM-CalendarExt2 and MMM-GooglePhotos. See each page for installation. The most difficult part was authenticating with Google Photos to access my albums.

If you'd like to use this repository's files, install the above custom modules, and copy config/config.js and css/custom.css into your MagicMirror² checkout. You'll find some notes in each file, suffixed with - JeffreyATW, where you'll have to enter some of your own info.

I made a slight change to MMM-CalendarExt2 to disable fade-out and fade-in when the calendar refreshes. If you'd like to make the same change, here's the diff:

diff --git a/CALEXT2_View.js b/CALEXT2_View.js
index 95a6f4f..33e37d5 100644
--- a/CALEXT2_View.js
+++ b/CALEXT2_View.js
@@ -68,7 +68,8 @@ class View {

   destroy() {
     this.hide();
-    setTimeout(() => {
+    // Disable delay in destroying slots
+    // setTimeout(() => {
       if (this.slots) {
         for (let i = 0; i < this.slots.length; i++) {
           this.slots[i].destroy();
@@ -82,7 +83,7 @@ class View {
           }
         }
       }
-    }, 500);
+     // }, 500);
   }

   filterEvents(events) {
diff --git a/MMM-CalendarExt2.js b/MMM-CalendarExt2.js
index cc69324..3af8e4f 100644
--- a/MMM-CalendarExt2.js
+++ b/MMM-CalendarExt2.js
@@ -398,9 +398,10 @@ Module.register("MMM-CalendarExt2", {

     if (this.currentScene) this.currentScene.clearViews();
     this.currentScene = new Scene(uid, this.config);
-    setTimeout(() => {
+    // Disable delay in creating slots
+    // setTimeout(() => {
       this.currentScene.draw(this.events);
-    }, 500);
+    // }, 500);

     if (this.config.rotateInterval > 0) {
       this.rotateTimer = setTimeout(() => {