Hello fellow MagicMirror makers!

It is with a huge sense of self-satisfaction that I present my build of MagicMirror. Looking at the builds that came before mine was extremely helpful and the people that have assisted me here should all be commended. Without your help I may not have completed my project. Thank you all, for your time, patience and effort on my behalf. I think you are nothing short of brilliant and I wish you all every success. And a special shout out to Michael Teeuw for making this all possible. Feel free to comment, Michael, so I can tell my son that the creator of MagicMirror actually contacted me about my build. (fingers crossed)

My reason for building: (Yes, I’m going to tell a short, boring story)

My son is a senior at Steven’s Institute of Technology. He majors in Computer Programming and Engineering. While he was home for Christmas break he suggested I take an old PC and install uBuntu on it as a project. (I like projects). It took me a few days, but when I was done I thought, “Well now what do I do with it?” He suggested a few online sites that teach you Python and Java but I have no practical use for learning that at my age. Then he suggested I check out this thing called a Raspberry Pi. He said people were doing all sorts of cool things with them. Then he went back to school.

First, I did some Google searching for what a Raspberry Pi actually was. Seriously, I had no idea. Another Google search for what people were doing with them. BLAM! There it was! A Magic Mirror, but I was unsure of my ability to do this. My solution? See if I could get it up and running on a PC. Once I was able to successfully install and actually get MagicMirror running I was totally into it, hard core. I ordered my Pi and the 2-way mirror. When my son comes home for his next break, I will present him with a Magic Mirror, and thank him for the best suggestion, ever.

(End of boring “short?” story).

In the future, it is my intention to add a USB webcam, a microphone and speakers so that I can have facial recognition, some sort of voice activation with response and sound. Might as well dream big.

!

Install MagicMirror on a PC Windows 7/10 - Complete walkthrough

I just finished a fresh install of Windows 7 on a Compaq Presario CQ57 laptop with 3.5GB of RAM and 32-bit OS.
Worthless really, but it runs Magic Mirror like a champ, as it is far more robust than a Pi of any kind.
No graphics problems. No system load issues. Even this old laptop makes a decent MM dev machine.
Ok, lets get to it!

First things first

• Go to https://nodejs.org/en/download/ and download the Windows Installer. In this case it’s the
  node-v6.11.0-x86.msi file because I’m running 32-bit Windows 7. Double Click the installer and
  let it do its thing. You don’t have to change anything. The default installation is what you want.
  You may have noticed that npm was also installed. Isn’t that nice? :-)

• Now go to https://git-for-windows.github.io/ and download git for Windows. Double Click the
  installer. Again, you can use the defaults but if you want to use TrueType fonts in your terminal
  windows then choose that in the Components section of the installer. Also, you can choose to use
  Git only from the Git Bash terminal. The default allows you to use Git commands from the Windows Command
  prompt. Other than that, this walkthrough assumes the defaults for Git installation.

Lets get the MagicMirror software

• Go to https://github.com/MichMich/MagicMirror to get the MagicMirror software.
• Click on the green Code button on the right and copy the url (https://github.com/MichMich/MagicMirror.git)
• Open and new terminal and type git clone and one space, then paste the url you just copied.
• It should look like this git clone https://github.com/MichMich/MagicMirror.git

Now you wait patiently as it installs.

You’re so close you can taste it!

Remember we installed Git? Click Start/All Programs/Git/Git Bash. This opens your Git Bash terminal
window.

• Type cd MagicMirror and press the Enter key. Now you’re in the ~/MagicMirror directory.

• Type npm install and press the Enter key. This will install the dependencies for MagicMirror.
  It will take some time to complete depending on your PC. Mine took 6 minutes.
  You may see npm WARN for a few items but these are NOT errors and don’t affect anything.
  When that’s done, we continue, still in the ~/MagicMirror directory.

• Type npm start and press the Enter key. You WILL get a “Please create a config file.” message
  I just wanted you to see it. No worries. We’re almost done. Follow me!

• Press the Alt key on your keyboard. This drops down a menu bar at the top of your screen.
  You won’t see your mouse cursor until you move it all the way to the top of the screen into the
  menu bar. There it is! Click on the File menu and click Exit. This brings you back to your
  desktop. If there is a “Windows Security Alert” window concerning “Electron” click the Allow access button.
  You’ll notice “fatal: Not a git repository (or any of the parent directories): .git” in your teminal window.
  Not to worry. Minimize your terminal window or move it out of the way.

Here we create your working config.js file.

We’re not going to use the terminal to do this. This way is just easier, especially for beginners.
From your desktop, navigate to your MagicMirror folder. Remember where it is? :-)

• Double click the MagicMirror folder.
• Double click the config folder.
• Right click the config.js.sample file.
• Choose Copy
• Right click somewhere else in that same window and choose Paste.
• Rename the “COPY” you just pasted to config.js
  Windows may ask about changing the file type. Accept! It’s now a JScript Script File.
  The config.js file that you just created is your working config file.
  This is where you’ll add your entries for other modules to your mirror.

Had enough? Lets run that MagicMirror, NOW!

If your Git Bash terminal window is still open (I never told you to close it) we can continue.
If you need to open a new one then do so now and type cd MagicMirror to enter the MagicMirror directory.
Now that you’re in the ~/MagicMirror directory of your terminal:

• Type npm start and press the Enter key.

Your Clock, Calendar, Compliments and Newsfeed modules are now operational!

You’re welcome!

Why did I bother?

Well, for a number of reasons. When I discovered MagicMirror (January 2017) I knew less than you.
I am completely serious. I had to learn all of this from scratch. Fortunately for me, there were some
very generous and kind users on this forum that helped me. One in particular continues to help and
tutor me to this day. I will call him, “Broffessor” for the sake of this walkthrough. I approached
him for help on my very first module and he was more than willing. Now, I have 10 modules under
my belt (7 published, 2 about to be released and 1 that will NEVER be released) and a good friend
to go along with them. This walkthrough is a way for me to say thank you to those people that helped
me, by helping others. I hope I have done so.

How it all began

My son mentioned the Raspberry Pi in passing one day. Now I’m doing some simple coding and creating
modules for MagicMirror.

Who woulda thought?

Edit! Windows 10 users!

I have not tested this but I’ve been assured that MM will indeed work on Windows 10, following the instructions above. You must absolutely use the Git Bash terminal window because the Windows CMD window does not recognize bash or sh. However, Git Bash creates a linux-like environment in which MM runs very well. :-)

How to post code on the forum. For absolute beginners.

I’m going to walk you through this. Why? Well, someone always helped me when I was new.
What better way to repay them? By helping others, that’s how.

At some point . . .

You’re going to be asked to post some of your code so that it can be looked at by
the people here on the forum. It helps them to help you.

Some of the reasons.

• MagicMirror is telling you to create a config.js file, but you already did.

• You added a module and now MagicMirror won’t load.

• One of your modules just says “Loading…” on your mirror, but never does.

• You get a black, or white, or blank screen on your mirror.

• You get a syntax error reported in your terminal or console

The wrong way

If you just copy and paste your code into a topic on the forum, the result will look
something like this. Not too easy to look at, right? It loses its formatting.

Worse than that

If someone copies the code that you posted (the wrong way) there is an anomaly that often occurs. Some characters will be changed when pasted, causing the code to fail, and leaving you wondering why because you might not notice what characters were
changed. The most common unwanted changes concern quotes ', double quotes "
and the comma ,. Can you say, “Syntax error?”

The right way

• The secret is . . . the “back-tick”.

• If you enter one back-tick at the beginning of a word or words and one back-tick at the end of a word or words, you get “inline code” for that word or words.
  Try it in a post. It should look like this. Or, it can look like this.

You’ll like this

• Now we want to post a portion (or all) of our config.js file (or any code) in the forum so that it can be viewed easily (and properly) by the people trying to help us.

• You use three back-ticks before the code AND three back-ticks after the code. That is how you “fence” blocks of code. You will love the result!

Remember that code posted above?

• Well, this is how it looks when you “fence” it in with three back-ticks, before AND
  after the code. Tell me you don’t like this better? ;)

{
    module: 'MMM - PrayerTime',
    position: 'top_left',
        config: {
        apiVersion: '1.0',
        lat: 12.089796,
        lon: -56.807734,
        timezone: 'EST',
        method: 5,
        playAdzan: ['fajr', 'dhuhr', 'asr’, 'maghrib', 'isha'],
        notDisplayed: ['midnight', 'sunset'],
        useUpdateInterval: true,
        updateInterval: 86400 * 1000,
        animationSpeed: 2.5 * 1000,
        language: "en",
        showAdzanAlert: true,
        alertTimer: 15000
    }
},

Is it a big deal?

• No, it’s not, but for the sake of conformity we should all post code this way. You’ll like it better (because it looks nicer) and the people reading it will like it better (because it looks better) and we’ll all be one happy forum family.

• And besides, it’s the way we’re supposed to be doing it. Climb aboard!

So, where is the back-tick key on my keyboard?

• On U.S. QUERTY keyboards it’s to the left of the 1 key (not the Numeric keys)

But I don’t use a U.S. QWERTY keyboard!

• You’ll have to determine where yours is if you use a different keyboard.

• This is the internet. Look it up. You want me to do everything for you?

An even easier way.

• Why did I put you through all that? I don’t know. I had to learn it that way so that’s how I teach it.

• Just do this and forget everything I said above! Simply clicking the icon indicated by the red arrow will place the correct back-ticks in the correct place, with a highlighted //your code here showing you where to paste your code.

Peace! :)

How to add modules. For absolute beginners.

I’m going to walk you through this. Why? Well, someone always helped me when I was new.
What better way to repay them? By helping others, that’s how.

Are there other ways of intalling modules?

Yes, there are, but the aim of this walkthrough is to make things as clear, and as easy,
and as explicit as possible for the absolute beginner. Why? When I was a beginner, a guide
such as this would have saved me a lot time and mental anguish. You know exactly what I mean.

First things first!

This guide assumes that you have your Pi up and running and that you have installed
the MagicMirror software AND that you have successfully gotten your mirror to work.
Now you want to add some cool modules? Well, lets get to it!

Follow me . . .

Lets use my MMM-JEOPARDY module for this guide. The procedure is the same for any module
that you want to add to your mirror.

• Go to this page of modules:

• https://github.com/MichMich/MagicMirror/wiki/3rd-Party-Modules

• Scroll down the page until you see MMM-JEOPARDY by Mykle1.

• Click on it.

• Now you’re at my repository for the MMM-JEOPARDY module.

• Click on the green Clone or download button on the right side of the page.

• That shows you the url to get the module.

• Copy that url. (click on the clipboard icon)

So far, so good! Stay with me . . .

• Now open a terminal (cltr-alt-t on the desktop) and type cd MagicMirror/modules and press Enter.

• Now you’re in the ~/MagicMirror/modules $ directory.

• Now type git clone AND one space and paste the url that you copied from my repo for the module.

• It should look like this: git clone https://github.com/mykle1/MMM-JEOPARDY.git

• Press your Enter key. This will download the module into the MagicMirror/modules folder creating a new folder with the name of the module (in this case MMM-JEOPARDY)

• You’re done with the terminal! (for now) Close it. We’ll get back to it.

Note about dependencies

Some modules require dependencies. MMM-JEOPARDY does NOT. Each module folder should have
a README file that tells you if you need to install them, in which case you would navigate to
the folder of the module that you just installed (via the terminal) and type npm install.
But we don’t have to do that in this case, so HOORAY FOR US!

Go to your Pi desktop

• Click the File Manager folder. (Top menu bar, 3rd from the left, in Raspbian Jessie)

• Double click the MagicMirror folder.

• Double click the config folder.

• Double click the config.js file. (Not the sample! The config.js file you made during setup)

• Your config.js file is now open in a text editor. If not, open it in your text editor.

• You have to add an entry for the module you just downloaded so that MM knows to load it.

• Lets put the entry for MMM-JEOPARDY under your calendar module entry.

• Modules that occupy the same position display in the order they appear in the config.js file.

• Scroll down to the calendar entry in the config.js file.

• The calendar entry “ends” at the last }, and the compliments module entry begins with a {.
  So, all module entries in the config.js file begin with a { and end with a },
  Look at the way the modules are entered. What I just described should be evident.

• Copy and paste the following “between” the ending of the calendar module entry - },

• And the beginning of the compliments module entry - {

Copy and paste ALL of this

{
	module: "MMM-JEOPARDY",
	position: "top_left",
	config: {       
		useHeader: false,                  // true if you want a header
		header: "This is Jeopardy!",
		maxWidth: "250px",
		animationSpeed: 3000,              // Fades to next clue
	}
},

Does it look the same as the other entries?

• It should look like this:

• Go to the file menu and choose SAVE. You can close your text editor window now.

• Open a new terminal and type cd MagicMirror and press your Enter key.

• Now you’re in the ~/MagicMirror $ directory.

• Type npm start and press your Enter key to launch MagicMirror with your new module installed.

From now on

• You’ll find the entry you need to make in the config.js file in the README file of each module.

If the module requires an API key

• You’ll have to get that BEFORE you attempt to load the module. It simply will NOT work without it. The README file for the module should contain a URL to the site where you’ll need to acquire you’re API key. These are usually free and only require you to sign up with your email address. Once you have the API key you’ll have to add it to the config.js module entry.

Backup your config.js file

• Every time you make a successful addition to your config.js file you should back it up.

• Why? If something goes wrong you have a backup. Who wants to start from the beginning?

Description:

Hello-Lucy.

Off-Line voice control.

Hide/Show all, individual, or pages of modules, using voice commands. (With sound)

Example:

A screenshot won’t really do here. You should watch and listen. Makes more sense.

https://youtu.be/bKHEXPzVb2A

Download:

[card:mykle1/Hello-Lucy]

Version 1.0.0

How to find and use key commands in MM. For absolute beginners.

• Some very useful key commands that often go unnoticed in MM.

It is common enough that a new user will successfully install and run MM,
only to be left wondering how to stop the MM process. Y’all know who you are. :^)

The Alt key! And sometimes the Control key

There are so many different platforms and OS’s being used for MM, but in MOST cases
the Alt key will drop a Menu Bar at the top of MM while it is running. From there
you can execute a host of commands by clicking through the menus. Here I have
provided the key commands that have been most useful to me. They don’t even require that
you to press the Alt key. Simply execute the key command while MM is running.

Simultaneously means at the same time ;^)

• Minimize MM = Control and M

• Reload MM = Control and R

• Open Dev Tools = Control and Shift and I (That’s an i)

• Default Display Size = Control and 0 (That’s a zero)

• Zoom In = Control and Shift and = (That’s an equals sign)

• Zoom Out = Control and - (That’s a dash/minus sign)

• Toggle Full Screen = F11

Other “Absolute Beginner” tutorials

How to MANUALLY install MM on your Pi. For absolute beginners.

https://forum.magicmirror.builders/topic/5274/how-to-manually-install-mm-on-your-pi-for-absolute-beginners

How to create a working config. For absolute beginners.

https://forum.magicmirror.builders/topic/4528/how-to-create-a-working-config-for-absolute-beginners

How to check your config for errors. For absolute beginners.

https://forum.magicmirror.builders/topic/5399/how-to-check-your-config-for-errors-for-absolute-beginners

How to add modules. For absolute beginners.

https://forum.magicmirror.builders/topic/4231/how-to-add-modules-for-absolute-beginners

How to post code on the forum. For absolute beginners.

https://forum.magicmirror.builders/topic/4247/how-to-post-code-on-the-forum-for-absolute-beginners

Install MagicMirror on a PC Windows 7/10 - Complete walkthrough

https://forum.magicmirror.builders/topic/4089/complete-walkthrough-install-magicmirror-on-a-pc-windows-7

I’d be disappointed if he didn’t use at least some of the money towards drugs and alcohol, or is that a separate donation?

How to create a working config. For absolute beginners.

I’m going to walk you through this. Why? Well, someone always helped me when I was new.
What better way to repay them? By helping others, that’s how.

This is ALL in the installation tutorial.

Yes, it is, BUT, this can be overwhelming for someone completely new to programming.
I know, I was an absolute beginner 7 months ago. I needed help, too. I still do.
I’m writing this guide so that you benefit from the kindness that was shown to me.

My mirror says, “Please create a config file.”

So you just installed MagicMirror and you launched it for the first time and you
were presented with the dreaded, yellow, “Please create a config file” error message.
Don’t panic! I did. You’ll be up and running in no time. I promise. Follow me.

Editing in the terminal scares the $h!t out of me.

Yeah, me too! So let’s do it another way. An easier way. A way we’re used to.

Creating a working config in the GUI.

We don’t need no stinking terminal! We’re going to navigate through this just like
we would on a PC or a Mac desktop. We all know how to point and click with a mouse.

STFU Mykle, and tell me already!

Fine! Here it is.

• Go to your Pi’s desktop

• Click on File Manager (Top menu bar, 3rd from the left, in Raspbian Jessie)

• Double click the MagicMirror folder

• Double click the config folder

• Right click the config.js.sample file - select Copy

• Right click again somewhere else in that same window - select Paste

• Rename the file you just pasted to config.js and click the Rename button

• The new config.js file that you just pasted is now your working config file for MagicMirror

You did it!

Your mirror will run now!

Open that pesky terminal

• Open a new terminal and type cd MagicMirror and press your Enter key.

• Now you’re in the ~/MagicMirror $ directory.

• Type npm start and press your Enter key to launch MagicMirror.

Other “Absolute Beginner” tutorials

How to add modules. For absolute beginners.

https://forum.magicmirror.builders/topic/4231/how-to-add-modules-for-absolute-beginners

How to post code on the forum. For absolute beginners.

https://forum.magicmirror.builders/topic/4247/how-to-post-code-on-the-forum-for-absolute-beginners

Install MagicMirror on a PC Windows 7/10 - Complete walkthrough

https://forum.magicmirror.builders/topic/4089/complete-walkthrough-install-magicmirror-on-a-pc-windows-7

Due to Weather Underground closing its free API, and at the suggestion of @cowboysdude, I’ve rewritten MMM-BMW to work with the Darksky api, which still offers a free plan.

Description:

Bugger My Weather - Darksky

• This was designed for use in the bottom_bar position of your MagicMirror

• Can share bottom bar position with newsfeed module via Hello_Lucy

See here: https://www.youtube.com/watch?v=mTGoxM6JyBE

• Minutely updates for current conditions

• CSS provided for coloring and sizing. Make it your own.

• 6 Built in font choices

Click on examples for a better view

• Default white

• Colored and summary hidden

Download:

[card:mykle1/MMM-BMW-DS]

Version 1.0.1

@yawns said in 1 old noob + 1 rPi = I can’t believe I did it! (revisited):

And please let us know the reactions of your son. I can imagine I would be kind of irritated but proud of my dad building such a thing on his own, working his way through all these difficulties.

My son came home yesterday and stayed through this evening. It turns out my efforts were not in vain. He was utterly amazed that I took on, and completed, the MagicMirror project. He was excited and enthusiastic, wanting to see the code of the modules and css files. He already has ideas for what he would want to do with MM.

So, he went back to school with a camera full of pictures of my mirror to show his frat buddies, and he promised that he and I would do something like this together, when time allowed. I’m hoping he will want to create a MM module with me, although he would be doing all the work and I would just be along for the ride.

@cowboysdude said in MMM-NOAA3:

t’s right here -> https://github.com/cowboysdude/MMM-NOAA3

Oh, thank god. :-)

@bkeyport said in New Youtube Video featuring MagicMirror...:

Becky Stern walks us through her Magic Mirror design build, including disassembling a monitor, building a frame, etc. It’s a cool setup.

Sweet. She’s using MMM-EyeCandy. NY’ers have such good taste.

@cowboysdude

That’s weird. I downloaded from the repo onto ubuntu and everything was fine. Module folder and module name were fine, MMM-Gas. 2 days ago, that is.

@sifuhall said in MMM-Gas Still Working?:

Could you try for zipcode 40391 and see if that works for you? Maybe there are just no results?

I tested your zip code and the typeGas options. Everything seems to work fine. I’m sure cowboysdude will get you sorted

I see he a;ready left some suggestions. Follow those and see what you get

@cowboysdude

I can confirm that the module is still working under ubuntu 20.04.3 LTS. I just installed it and it fired right up. Nice work, bro.

@sdetweil said in 1 old noob + 1 rPi = I can't believe I did it! (revisited):

u two keep bringin back to the top!

That’s right. :-)

5 years since I completed my first mirror? Who would have thought? I’ve been away for quite some time. Got plenty of messages in the meantime, stating that my modules weren’t working. Thought I would address some of them after a brand new install of the newest MM running on ubuntu 20.04.03.

These are running. Although some with hard coded options may not display all of them (e.g. MMM-EyeCandy). Finding the default animations was very time consuming and a changed url is all it takes to break the module. I welcome anyone that wants to find new ones for the module.

https://github.com/mykle1?tab=repositories

MMM-

• EyeCandy
• EARTH
• Lunartic
• EasyBack
• Numbers
• TP
• Spacecraft
• Climacell-Hourly
• TMWidget
• Confucius
• BMW-CC
• Launch
• ISS
• EventHorizon
• WeatherOrNot
• Fortunix
• Insults
• PopulationClock
• TrivialAbyss
• HeavenlyBodies
• CoronaVirus
• Earth-Live
• MercuryInRetrograde
• PLOW
• Searchlight
• Clockinese
• NASA
• EOL
• ToDoLive
• EasyPix
• Jeopardy
• WillyWeather
• Earthwinds
• NPMW

Gee, I’ve missed this place.

No, really.

@sharkbyte

Classy bro! Well done. :thumbsup:

@sdetweil said in install script fail error:

use my install script,

This install script is a godsend. Installing any other way is just, uh, … silly?

@sdetweil

Well, thanks to you and John I had the best help available when I got stuck (which was quite often). John gets the lion’s share of credits in my readMe files. I am indebted to you both and am forever in your debt.