Comments: How to Make a Magic Mirror with Raspberry Pi

Pages

Looking for answers to technical questions?

We welcome your comments and suggestions below. However, if you are looking for solutions to technical questions please see our Technical Assistance page.

  • Missing Public and Secret Address in iCal format

    If you are using a shared calendar that is public, Google may not show the link for the "Public address in iCal format" depending on your permissions. If you head to the settings of the shared calendar > Integrate Calendar, copy the address underneath "Calendar ID". Replace the <calendar_ID> with the copied ID:

    https://calendar.google.com/calendar/ical/<calendar_ID>/public/basic.ics
    

    This will be the url: value for the module. Head back into the config.js file to add the calendar link:

        .
        .
        .
        {
                    module: "calendar",
                    header: "SparkFun Shared Calendar",
                    position: "top_left",
                    config: {
                        calendars: [
                            {
                                symbol: "calendar-check",
                                url: ""                 }
                        ]
                    }
                },
    

    CalendarWeek Module

    MagicMirror v2.15 removed the "valid-url" library from the install. If you are using the 3rd party CalendarWeek module, try manually installing it in the command line with the following command.

    npm install valid-url
    

    If that does not work, you can also try the following command:

    npm install rrule-alt npm install valid-url
    

    Custom Colors for the Weather Icon

    For those interested in adjusting the weather icon colors, you will need to head to the ...MagicMirror/css folder and create a new file called custom.css. Adding the custom.css file to prevent the style from being overwritten whenever you pull in updates with Magic Mirror GitHub repo. Using a text editor, you can adjust the current and forecast weather icons color by assigning the color to a html hex color code.

    For an example, you could copy and paste the following color style in custom.css from user edlug in the Magic Mirror Forum:

    body {
    }
    
    .brightb {
    color: #55acee;
    }
    .currentweather .wi-sunrise {
    color: #ffd700;
    }
    .currentweather .wi-sunset {
    color: #ffa500;
    }
    .currentweather .wi-day-sunny {
    color: #ffff00;
    }
    .currentweather .wi-night-showers {
    color: #55acee;
    }
    .currentweather .wi-degrees {
    color: #415;
    }
    .currentweather .wi-rain {
    color: #55acee;
    }
    .currentweather .wi-showers {
    color: #55acee;
    }
    .currentweather .wi-night-showers {
    color: #55acee;
    }
    .currentweather .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .currentweather .wi-night-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy {
    color: #aaa;
    }
    .currentweather .wi-day-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy-windy {
    color: #aaa;
    }
    .currentweather .wi-showers {
    color: #55acee;
    }
    .currentweather .wi-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-snow {
    color: #fff;
    }
    .currentweather .wi-fog {
    color: #999;
    }
    .currentweather .wi-night-clear {
    color: #fff;
    }
    .currentweather .wi-night-rain {
    color: #55acee;
    }
    .currentweather .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-night-snow {
    color: #fff;
    }
    
    .weatherforecast .wi-sunrise {
    color: #ffd700;
    }
    .weatherforecast .wi-sunset {
    color: #ffa500;
    }
    .weatherforecast .wi-day-sunny {
    color: #ffff00;
    }
    .weatherforecast .wi-night-showers {
    color: #55acee;
    }
    .weatherforecast .wi-degrees {
    color: #415;
    }
    .weatherforecast .wi-rain {
    color: #55acee;
    }
    .weatherforecast .wi-showers {
    color: #55acee;
    }
    .weatherforecast .wi-night-showers {
    color: #55acee;
    }
    .weatherforecast .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .weatherforecast .wi-night-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-day-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy-windy {
    color: #aaa;
    }
    .weatherforecast .wi-showers {
    color: #55acee;
    }
    .weatherforecast .wi-thunderstorm {
    color: #ff00ff;
    }
    .weatherforecast .wi-snow {
    color: #fff;
    }
    .weatherforecast .wi-fog {
    color: #999;
    }
    .weatherforecast .wi-night-clear {
    color: #fff;
    }
    .weatherforecast .wi-night-rain {
    color: #55acee;
    }
    .weatherforecast .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-night-snow {
    color: #fff;
    }
    

    You could also adjust the color of the humidity icon:

    .currentweather .wi-humidity {
    color: #87CEFA;
    }
    

    Note that the colored weather icon may not be as easy to see behind the one way reflective film compared to the default high contrast, black and white style.

    Updating Magic Mirror

    If you get a message similar to the following when the Magi Mirror is running:

    The current installation is 164 commits behind on the master branch.
    

    You can update the Magic Mirror by following the Upgrade Guide. Make sure that you backup a copy of any module folders or custom files ( e.g. config.js, custom.css) that you added before updating.

    Compliments.js File

    Another method of adding compliments is to adjust the compliments module in the config.js file. This keeps the changes in the config.js file so that you do not need to backup the compliments.js file as well every time there is an update for the Magic Mirror.

    Issues Overwriting File

    If you need to make changes to certain files but have issues saving, this maybe due to the file permissions. One example may be the compliments.js file. If you are trying to change the default compliments, but have issues modifying the file, follow the instructions below.

    Head to the path where the file is located and type the following to see what the kind of permissions the file has.

    ls -l compliments.js
    

    The permissions for the file will be listed as a string of characters with four different sets. The first character indicates the file type. For each set of three characters after, this indicates the file permission of the user, owner's group, or others. Let's focus on the first string of characters from the output for compliments.js. The following indicates only the user can read and write to the file. The user and owner's group can only read the file.

    -rw-r--r-- 1 pi pi 6164 Aug 18 18:49 compliments.js
    

    If the permission for others is read only, you will need to change it to read and write using sudo

    sudo chmod o=rw compliments.js
    

    After saving the changes for a file, feel free to set it back to the previous permissions.

    sudo chmod o=r compliments.js
    

    Weather Forecast Only Showing Two Days

    As of MagicMirror (v2.12.0), if the weatherforecast module shows two days even though it was configured for more than that, you may need to modify line 297 of weatherforecast.js. As explained above, you may need to adjust the file permission settings. This is explained in the forums by user oemel09 in this post:

    By modifying the line of code, the weatherforecast module was able to display the correct number of days from Open Weather Maps.

  • There are no posts in the forum on this project that I can see. My question is probably silly, but...

    Can a Raspberry PI3 be used instead of the PI4?

    • Absolutely! My first pass of this project actually used a Raspberry Pi 3 I had sitting around.

    • Yeah, I used this with the Pi 3. It's everything that I've been looking for! I tried a different method but it did not work. The Magic Mirror was a lot easier. ^_^ I'd prefer the Pi 3 unless I decide to use two monitors with the Pi 4. It just was getting too hot with the Pi 4. It would be interesting to see if I can configure the settings to reduce the amount of heat generated.


If you've found a bug or have other constructive feedback for our tutorial authors, please send us your feedback!