A clean, simple UI for Magic Mirrors
The MirrorDashboard features 4 modules in each quadrant of the screen.
🏃Google Fit Keep track of your Google Fit goals for the past week with beautiful donut charts, right on your mirror.
Raspberry Pi Installation
Many people install their Magic Mirror software on Raspberry Pi. Luckily, there is RasPi-specific documentation, right here on the Wiki.
Setup and Installation
Download and Installation
Clone this repository to whatever machine you want the Mirror to run on.
cd ~/Desktop # or any directory you want the folder to be in git clone https://github.com/yummypasta/MirrorDashboard.git
A new directory called MirrorDashboard will appear.
To update the repository, just execute the command in the MirrorDashboard directory:
If you haven't made changes to the source code, this shouldn't create any merge conflicts.
Some configuration of MirrorDashboard is required. You will have to sign up for a Google account and a Dark Sky account for the mirror to function.
- Sign up for a Google account if you don't have one already.
- Create a new project on the Google Cloud website.
- In the API library, enable to Google Fit, Google Tasks, and Google Calendar APIs.
- Create an API key on the credentials page. Copy the "key" string; you will need it later. This string is called the Google API Key.
- Create an OAuth Client ID. You will get another string labeled "Client ID"; we will call this the Google Client ID.
Dark Sky API
- Sign up for a Dark Sky Developer account on the website.
- Make note of the Secret Key on your dashboard.
Duplicate the file
src/CONFIG_TEMPLATE.js and rename the copy
Do not edit
CONFIG_TEMPLATE.js, or else it may cause conflicts when updating. You may have to copy over some variables if the config template is ever updated.
Now, we must add some parameters to the config file.
|apiKey||The Google API key from before.||string|
|clientId||The Google Client ID from before. Will probably look something like
|darkSkyKey||The DarkSky Secret Key from before.||string|
|tempLowerBound||For the color of the temperature indicator. What is a reasonable coldest (bluest) temperature in your location?||decimal number|
|tempUpperBound||For the color of the temperature indicator. What is a reasonable hottest (reddest) temperature in your location?||decimal number|
|secondaryLocation||Where do you commute to? Will usually be
|homeLatitude||The latitude coordinate of the Magic Mirror (used for weather).||decimal number|
|homeLongitude||The longitude coordinate of the Magic Mirror (used for weather).||decimal number|
|workLatitude||The latitude coordinate of the place you commute to.||decimal number|
|workLongitude||The longitude coordinate of the place you commute to.||decimal number|
|calendars||The Google Calendar ID of any calendars you want to display on the mirror. You can find this under the Integrate Calendar section in the calendar settings.||string|
|calendarLookAhead||How many days in advance an event should be shown.||integer|
|maxEntries||The maximum number of calendar events and tasks to display.||integer|
|taskLists||The IDs of the Google Tasks lists to show. Find IDs here.||string|
|anxietyLevel||Tasks will gradually start turning red as they get closer to the due date. How many days out should they start turning red?||integer|
|googleFitActivity||A "data type for instantaneous reading", as described on the Google Developers Website.||string|
|googleFitActivityUnits||The unit of the above data type, to be displayed on the mirror.||string|
|fitGoal||Your Google Fit goal, or how many (steps/calories/miles etc) it takes to fill up the donut charts.|
There are additional options that you usually can leave alone, but are customizable to each user's needs.
|googleAuthScopes||Any OAuth scopes the mirror needs to access, defined in this list. Depending on your
||string, with each scope delimited by a space|
|refreshRates||How often each widget should refresh||See table below|
|weather||How often the weather widget should refresh, in milliseconds. Each weather refresh is 2 DarkSky API calls, and DarkSky currently imposes a limit of 1000 calls per day.||number|
|fit||How often the Google Fit widget should refresh, in milliseconds.||number|
|calendar||How often the Google Calendar widget should refresh, in milliseconds. One Google API request is made for each calendar, every refresh.||number|
|tasks||How often the Google Calendar widget should refresh, in milliseconds. One Google API request is made for each task list, every refresh.||number|
After you make any changes to
config.js (or any other sourcecode file for that matter), you must re-build the mirror software.
First, you may need to install Node and NPM. You can get it from the official website.
If this is your first time building this download/clone of MirrorDashboard, run the following command from the MirrorDashboard directory:
This installs any necessary dependencies for your clone.
Once that finishes installing, build the actual webpage you will open:
npm run build
build directory should appear. You're ready to use your mirror!
IMPORTANT! Do not distribute your build folder to the Internet, as your configuration and API keys is baked in.
After you build your mirror for the first time, you can finally use it!
Unfortunately, you can't directly open the
index.html file in your favorite browser. However, there is a handy script available to you!
If it's your first time starting MirrorDashboard, you may need to allow your machine to execute the start script. Within the MirrorDashboard directory, run:
sudo chmod +x start.sh
The start script will first serve the
build directory then open the Chromium browser. If you don't have it already, install it here.
By default, it will open Chromium in kiosk mode, making it mildly annoying to exit. If the device you are starting MirrorDashboard on is not a dedicated computer, remove
--kiosk from the script. If you want it to start in a window of Chromium, also remove the
Finally, globally install the serve command:
npm install serve -g
Any time you want to start your mirror,
cd into the MirrorDashboard directory, then run the
start.sh script using the command:
After you sign in with Google, you should be all set!
Tip You can always sign out by clicking on your name in the upper left.
How To Contribute
MirrorDashboard uses React. You can start a development server using:
There are currently no strictly-enforced code style standards, and I welcome and encourage all Pull Requests!
master branch is the current version of MirrorDashboard that is pushed out to users.
development branch is the next release that is being developed on. One pull request will be sent from the
development branch to the
master branch once a release is ready. Please send all pull requests to the development branch.
Issues, Feedback, and Bug Reports
Found any issues, have any feature requests, but haven't had time to implement them? Create an issue on Github, and I will review it and possibly add it to the code.
Have any other concerns? Feel free to email me at firstname.lastname@example.org.
Main Design and Development
Code Contributors and Pull Requesters
None yet! I encourage everyone to take a peek at the source code and help out!
Feature Suggesters and Bug Reporters
None yet, but you can be the first!