How I Customized MagicMirror To Make A Digital Daily Dashboard

Getting yourself organized can be a pretty overwhelming task, especially if you’re like me and work from home. Keeping up with email, my calendar, and all the things that have … Read more

Taylor Bell

Taylor Bell

Published on Jul 07, 2024

How I Customized MagicMirror To Make A Digital Daily Dashboard

Getting yourself organized can be a pretty overwhelming task, especially if you’re like me and work from home. Keeping up with email, my calendar, and all the things that have to get done can be a lot. Hopping around between apps on your computer can be a big time suck, and using your phone to stay organized is just an invitation to abandon yourself to social media for an hour. What could help, though, is a digital dashboard to keep all of that information in one place without any other distractions.

You could pay for something like a DakBoard, but that’s pretty limited unless you pay for a subscription. Thankfully, there’s MagicMirror, a free smart dashboard that’s open-source and endlessly customizable. But the cost of being free is that you have to do all the work to customize it yourself. Thankfully, you’ve got us to help you get started.

Magic Mirror word mark over an image of a Magic Mirror display

Related

Magic Mirror: Everything there is to know

All the ways that MagicMirror2 can help organize your life

Install MagicMirror on your SBC

Get your SBC up and running, if it’s not already

To get started with MagicMirror, you’re going to need a single-board computer to run the software. It can run on a Windows PC, but it’s more work than it’s worth. You also need something on which to display your digital dashboard. I have an old TV mounted on my wall connected directly to my SBC, but you can also run MagicMirror as a server and display it on any device on your network. We have a guide dedicated to the whole process, so don’t stress it.

A render of the Raspberry Pi 5

Raspberry Pi 5

The Raspberry Pi is back, and the fifth iteration of the SBC is a lot more capable than the older models. From a new quad-core Arm Cortex-A76 CPU, support for dual monitor setups at 4K 60Hz, and a dedicated power button, there’s a lot to love about this palm-sized computer.

Turning MagicMirror into a digital daily dashboard

See everything you need at-a-glance

Making the daily dashboard that’s right for you is not something that I can do for you. What I can do is impart the philosophy that will help you make your dashboard most effective for you, and show you how I set up mine.

The first thing you have to do is ask yourself what information you need every day or on an ongoing basis throughout the day. Some things will be common to most of us, such as our calendar, to-do list, or email. For other people, it might be stock or crypto prices. I work from home, so I don’t get out much, but for a lot of people, the local traffic conditions or public transit schedules will be must-have information.

Once you’ve got your goals figured out, or even if you just need some inspiration, it’s time to start looking for MagicMirror modules that will deliver the information you need. Thankfully, GitHub user KristjanESPERANTO maintains an easily searchable list of all the registered MagicMirror modules. Take some time to browse through this list to see what modules are available and which ones best suit your needs.

screenshot of webpage with list of MagicMirror modules

Some of the modules on his list are deprecated and no longer work.

Magic Mirror word mark over a tablet running Magic Mirror on the browser

Related

How to install MagicMirror modules

Let’s make this fun

Once you have a couple of modules in mind, you need to install them. The overwhelming majority of MagicMirror modules are found on GitHub, but a few are hosted on Bitbucket. Regardless of where the module is hosted, the method of installing it will be the same.

We’ve outlined the process of installing MagicMirror modules previously, but the basic idea is as follows.

  1. Navigate to the modules directory.
    cd ~/MagicMirror/modules
  2. Clone the repository hosting the module.
    git clone 
  3. If needed, install any Node packages the module relies on to run.
    cd ~/MagicMirror/modules/ && npm install

Once you have the module installed, you’ll need to alter your MagicMirror configuration file to have the module displayed and positioned on your display. For most modules, you’ll also have to add some configuration information to make it display properly. The repo pages for the individual MagicMirror modules will have details on how to configure them, and we’ll go over the configuration for the modules covered here.

Magic Mirror wordmark over a Magic Mirror install

Related

Power up the MagicMirror default weather module

Stay one step ahead of the rain

Now that it’s the rainy season here in Mexico, the first thing I want to see when I turn on my dashboard is the weather. We’ve covered how to set up the default modules previously, which involves getting a free API key from OpenWeather, but that basic API plan doesn’t include an hourly weather forecast, which is something I need if I want to outsmart the rain. Fortunately, OpenWeather does provide an API which provides what I need (One Call API 3.0), but there’s a catch. The API allows for 1,000 free calls per day, but you have to subscribe, which means you’ll have to turn over your credit card info to get access to the advanced API.

Once you’ve upgraded your API, let’s unlock hourly forecasts on your weather module. Start by opening the MagicMirror configuration file.

cd ~/MagicMirror/config && sudo nano config.js

We have to deviate from the default configuration quite a bit to get hourly forecasts set up, but it’s all covered in the documentation.

  • The first change we have to make is to the type property. Instead of forecast or current, we need to use hourly.
  • Next up is the apiVersion property. If we don’t include it, the module will default to 2.5but the One Call API has updated to version 3.0 and version 2.5 has been deprecated, so we have to explicitly set that to 3.0.
  • Now we need to tell the module to use the One Call API by setting the weatherEndpoint property to /onecall.
  • The One Call API doesn’t recognize the location or locationID properties, so you have to use lat and lon instead.
  • If you want to see hourly precipitation forecasts, you have to include the showPrecipitationProbability property and set it to true.
  • Finally, for me, the default size of the forecast is too small. Add the tableClass property and set it to medium or large. It defaults to smallor xsmall and xlarge are options as well.

configuration info for the MagicMirror hourly weather forecast module

See your Gmail inbox on MagicMirror

View your new emails effortlessly

Normally if you want to use Google services on your MagicMirror, you have to jump through some hoops to get an API key, but this module relies on an app password, a Google feature that allows older services without the latest security standards to access your Google account. Is it less secure than using an API key? Yes, but it also means it’s less work for you since getting an app password is pretty easy.

Install MMM-GmailFeed by going to your modules directory and cloning the repo.

cd ~/MagicMirror/modules && git clone https://github.com/shaneapowell/MMM-GmailFeed

Once you’ve copied all the module files, go to the MMM-GmailFeed directory and use npm to install the dependencies it needs to run.

cd MMM-GmailFeed && npm install

Now that everything is installed, setting up the configuration is quick and simple.

  • Set the username property to your Gmail address.
  • Next, set the password property to the app password you created earlier.
  • Choose how many emails you want to display with the maxEmails property. The number you choose will be determined by how much screen real estate you have.
  • Likewise, your maxSubjectLength property will be determined by how wide your display is.
  • Finally, I don’t want my dashboard to make noise, so I set the playSound property to false.

configuration info for the MagicMirror module MMM-GmailFeed

Integrate Todoist with MagicMirror

The calendar of choice for my dashboard

I use Google Calendar in my daily life because it’s free and I’ve been using it for years. But even though Google Tasks integrates with Calendar seamlessly, Google doesn’t let you use an ical link to easily share it with outside services (such as MagicMirror), and even though there is a Google Tasks module, it’s a lot of work to get it connected to your account. That’s why we’re using Todoist instead. If you don’t already have an account, swing over to Todoist.com and sign up to get a free one. Once that’s done, access your Settings and set up an Integration to get a free API key.

Install MMM-Todoist by navigating to your modules directory and cloning the repository.

cd ~/MagicMirror/modules && git clone https://github.com/cbrooker/MMM-Todoist.git

Then, jump into the MMM-Todoist directory and install the Node dependencies.

cd MMM-Todoist && npm install

To get the Todoist module working we’ll have to jump through a few hoops, but it’s nothing too onerous.

  • First, set your accessToken property to the API key you generated earlier.
  • Set your maximumEntries and updateInterval to whatever makes sense for your needs. I have mine set to 20 entries and a 20-minute update time, but you do you.
  • For the projects property, you need to list the project ID for all Todoist projects you want to appear on your MagicMirror display. You can find this ID in the address bar of your web browser when you’re viewing your Todoist project.
  • Alternatively, you can elect to only display tasks with specific labels by using the labels property.

    You must include either the projects property or the labels property for the module to display your tasks.

  • Set the maxTitleLength property based on how much space you want the module to occupy.
configuration settings for MagicMirror Todoist module

Use more MagicMirror modules to make a personalized digital daily dashboard

The possibilities are endless

This guide to setting up a digital daily dashboard is far from exhaustive. This is just the setup that works best for my needs. If you want to add Airtable or Trello integration, you can do that instead of Todoist. If keeping up with news or sports throughout the day is important to you, there are lots of modules for you to experiment with. If you’re feeling adventurous, you can also modify the CSS files to get unique colors and customized fonts. If you end up making a MagicMirror dashboard, tell us about your setup in the comments!

screen shot of a MagicMirror display

Partager cet article

Inscrivez-vous à notre newsletter