michmich / magicmirror

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant. MagicMirror² is built by the creator of the original MagicMirror with the incredible help of a growing community of contributors.

MagicMirror² focuses on a modular plugin system and uses Electron as an application wrapper. So no more web server or browser installs necessary!

Documentation

For the full documentation including installation instructions, please visit our dedicated documentation website: https://docs.magicmirror.builders.

Links

• Website: https://magicmirror.builders
• Documentation: https://docs.magicmirror.builders
• Forum: https://forum.magicmirror.builders
  • Technical discussions: https://forum.magicmirror.builders/category/11/core-system
• Discord: https://discord.gg/J5BAtvx
• Blog: https://michaelteeuw.nl/tagged/magicmirror
• Donations: https://magicmirror.builders/#donate

Contributing Guidelines

Contributions of all kinds are welcome, not only in the form of code but also with regards to

• bug reports
• documentation
• translations

For the full contribution guidelines, check out: https://docs.magicmirror.builders/about/contributing.html

Enjoying MagicMirror? Consider a donation!

MagicMirror² is opensource and free. That doesn't mean we don't need any money.

Please consider a donation to help us cover the ongoing costs like webservers and email services. If we receive enough donations we might even be able to free up some working hours and spend some extra time improving the MagicMirror² core.

To donate, please follow this link.

magicmirror's Issues

Google Calendar not working

Hey guys,
I'm very, very new to scripting but I've tried looking around the forums for what might be the problem, and while it likely is just my incompetence, I need some help. I'm not sure where the url for my google calendar goes, I've tried it in a few different locations but none of them seem to work. I've been getting a link in ical format but it still does not show up. I've downloaded fresh code and tried it again with no luck. thanks guys!

config.lang getting overwritten

Hey, awesome project!
Started looking into it and adapting it to my needs, I just noticed that updating the lang parameter in the config.js file does nothing for me, and still returns "nl" in the browser console.
I couldnt figure it out myself by reading through the code, either theres a different parameter to change the language of moment.js or its a bug.
greetings,
fabian

News module not working

I just pulled the new version today and uploaded it and the news module isn't working

I just changed the rss feed to "http://www.reddit.com/r/news/.rss", as I've done with many previous versions and not changed any internal settings.

"No feed results for: https://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20rss%20where%20url%3D'http%3A%2F%2Fwww.reddit.com%2Fr%2Fnews%2F.rss'"
Failed to show a news story 20 times, stopping any attempts

Few questions about PHP code

Hello @MichMich
Project MagicMirror is awesome. 👍 !

I've few questions about PHP code here

Why you decide use include for importing css?

    <?php include('css/main.css') ?> 

In my opinion better option:

 <link rel="stylesheet" type="text/css" href="css/main.css">

file: https://github.com/MichMich/MagicMirror/blob/master/index.php#L5

The same code is in hash.php file

file: https://github.com/MichMich/MagicMirror/blob/master/index.php#L9
hash.php: https://github.com/MichMich/MagicMirror/blob/master/controllers/hash.php

function get_url() is really needed?

On my vagrant machine output for calendar url is the same for both functions: get_url and file_get_contents

Could you tell me what version PHP you have? :)

Tested on:
PHP 7.0.2-2+deb.sury.org~trusty+1 (cli) ( NTS )
Copyright (c) 1997-2015 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2015 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2015, by Zend Technologies
    with Xdebug v2.4.0RC3, Copyright (c) 2002-2015, by Derick Rethans

Calendar URLs not changeable with js anymore

I have a module changing the calendar URLs based on who is using the mirror. Before the multi-calendar update this used to work but now it does not any ideas?

config.displaySymbol = true

config.calendar.urls = [ { //Schule symbol: 'calendar-plus-o', url: 'sdfsdf' }, { symbol: 'mars', url: "werwer", } ]
calendar.updateData()

Changing the calendar URLs still seems to work but it only changes after some time not after a calendar.updateData() like it did in the past. config.displaySymbol = true is not changeable after initial loading it seems, is there any way to change that?

New refresh algorithm?

Hello,

I don't want to sound too petty, but I noticed a disturbing refreshing of the website since the new update. The Version before refreshs each "div" for weather and calendar, in a smooth fx. For me it was great to see, that there is a smooth refresh way per "div". NOW the whole page refreshs every 15min-20min (like pressing F5).

Is that how it should be?

Regards
Maurice

How long will it take me to get to work?

Putting together a mirror and figuring out what can be done with this. An idea I had was a small section returning the time it would take for me to get to work with traffic.

I did some research and tested Google Maps DistanceMatrix API, which I think would be perfect for this. Unfortunately, I have ZERO skills in JS or CSS, so I have the idea and the tool, but no way to show the result.

Anyone interested in implementing this?

The API query is simple:

https://maps.googleapis.com/maps/api/distancematrix/json?origins=(Home Lat/Long)&destinations=(Work Lat/Long)&key=(Super Secret API Key)&departure_time=now

This returns:

`
{

"destination_addresses" : [ "(Work address, not lat/long surprisingly" ],

"origin_addresses" : [ "home address" ],

"rows" : [

  {

     "elements" : [

        {

           "distance" : {

              "text" : "28.0 km",

              "value" : 28045

           },

           "duration" : {

              "text" : "22 mins",

              "value" : 1347

           },

           "duration_in_traffic" : {

              "text" : "21 mins",

              "value" : 1242

           },

           "status" : "OK"

        }

     ]


  }

],

"status" : "OK"

}

`

The only important return is duration_in_traffic, since it's usually a set commute.

Another idea to add would be a stoplight that would show a different color based on the difference between average duration vs traffic duration (if slower by 5-25%, yellow; if slower by >25%, red).

What do you all think?

Weather Forecast - Low Temp Displayed in Wrong units

I am using imperial units in my config.js. The current weather and high forecast shows up in Farenheit, but the low appears to be in Celsius.

Two calendars in main.js ?

Nice project - just a thought:

Would it be possible to use two calendars in the interface?
I have one at yahoo one at icloud. I already have a working calendar.php for yahoo and I'd like to show both in the gui.
But the variables seem to override each other, so I end up with mixed dates/time strings and everything looks messy..

Any idea what I need to edit to use two calendar sources and display them separately ?

Google Calendar not working

Everything else is working, except my google calendar. I put in my url in the config file but it's not showing up. I'm using Midori as my browser.

Your super-secret hash is showing

FYI, anyone can pull your calendar feed right now. I'm not sure if that's an intentional demo feed, or actually a personal calendar... but I thought I'd let you know.

Cheers!

curl -L https://p01-calendarws.icloud.com/ca/subscribe/1/n6x7Farxpt7m9S8bHg1TGArSj7J6kanm_2KEoJPL5YIAk3y70FpRo4GyWwO-6QfHSY5mXtHcRGVxYZUf7U3HPDOTG5x0qYnno1Zr_VuKH2M | grep SUMM
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 47 0 47 0 0 100 0 --:--:-- --:--:-- --:--:-- 100
100 14266 100 14266 0 0 13942 0 0:00:01 0:00:01 --:--:-- 196k
SUMMARY:Oud & Nieuw
SUMMARY:Lancering iPhone 6
SUMMARY:Winterverlof
SUMMARY:6 jaar samen
SUMMARY:Apple Keynote
SUMMARY:20-weken echo
SUMMARY:Auto ophalen
SUMMARY:Weekendje Parijs
SUMMARY:Verjaardag Michael
SUMMARY:Verjaardag Lotte
SUMMARY:Kerstmis
SUMMARY:Ibiza
SUMMARY:Uitgerekende datum
SUMMARY:Concert JT
SUMMARY:Ardennen
SUMMARY:Zomervakantie
SUMMARY:Sinterklaas
SUMMARY:Verjaardag Lotte
SUMMARY:7 jaar samen
SUMMARY:Sinterklaas
SUMMARY:Verjaardag Michael
SUMMARY:Apple Keynote
SUMMARY:Vakantie Lefkas
SUMMARY:Kerstmis
SUMMARY:Weekendje Hamburg

Day of the week repeated twice

The JavaScript is displaying the current temperature as well as the low and high for the day.

Openweather shows previous day's forecast, and it's wrong

There appears to be a bug with the open weather api. Not only does it show the previous day's forecast (which might not be so bad), but all the high and low temperatures are the same:

Translation calendar.shortRunningText

Hi,

first of all thank you for your great work! It is great fun to configure the mirror.

I have a problem with the translation of the calendar.
In config.js I set lang: 'de'.

When I have an all-day event (for example a birthday) at the actual day (now), I get
first name last name hat Geburtstag still 31 Minuten

The still should be something like noch or nach wie vor.

Can someone tell me where the translation take place?
I went through js/compliments/compliments.js, but I have no experience so far.

Thanks,
Fabian

Face recognition

Hi,

I really love the work you have been doing and will try to build my own mirror.

I think it could be cool to extend this with a camera and make face recognition so that my calendar is shown if i'm in front of the mirror, and the calendar of my wife, if it's her in front.

This would also make it possible to personalise it, as the News i would be interested in would not nesecerily by the same as my wife..

• If a person not recognised is in front of the mirror, it should only display default information..
• If we can make it "intelligent to and check against Facebook, then when friends are walking in front of the mirror.. Hi Peter, You're looking good today.

Just thoughts, i'm happy to help with implementing my ideas, but first i need to build the mirror.

iCloud encoding problems

Even when i try to parse the icloud calender feed, all chars screwed to funny symbols. When i try to manage the file per browser, all is fine and i get an nice *.ics file. // google calendar works like charm

New Module System Discussion - Please contribute.

Maybe it's a good idea to discuss the new Module System before we writeout the API.

@paviro, I noticed you've contributed. Thanks for this. I really appreciate your help! Just a few questions though:

The functions you proposed, are those method of a module class? I can't really wrap my head around how this would work, could you elaborate?

Also, I think the added regions are a bit unnecessary. In most cases you can just add content in one of the corners (the content will stack) or align right or left in the upper third, center or lower third. I think we should try to keep the layout simple.

Aslo, what do you guys think about using a system like vue.js? I'm not a big fan of jQuery, and prefer a mvvm model. But this might make it to difficult for most users to contribute.

EDIT 2016/3/23: First steps in the development are made. See: #80 (comment)

Printing calendar date as well as day until

Thank you so much for writing and releasing this beautiful interface :)
I'm just trying and failing to make a small adjustment to the calendar display.
I would love it to have the actual date before the event, but I just cannot for the life of my work out how to get the calendar.js to give me the event date.

Essentially what I'd love is this:

23rd June | Event Title | In 3 weeks

I've tried e.DTSTART and e.date and a load of other things but nothing will give me the start date :)
Any help would be massively appreciated.

Openweathermap API changed

I think Openweathermap changed the API and now the script has no weather forecast anymore

Calendar Request

I really enjoy the calendar feature but I wish that I could have two calendars.

Would it be possible to either:

a) merge any number of calendars together; or
b) designate a separate calendar placeholder?

Very old google calender events shown as short running events

A lot of very old events were shown as short running events (from 2007..).

Analyze showed, that the have 0 as end second.. because they had no End. T.g. Events starting and ending at 10:00.

Fixed it for me in calendar.js this way:

changed } "else if (endSeconds >= 0)" to "} else if (endSeconds > 0) {"

so all

                //[email protected] better to hide them when endSecond = 0; changend endSeconds >= 0 to endSeconds > 0
                } else if  (endSeconds > 0) {
        // TODO: Replace with better lang handling
        if (endSeconds <= 60*60*5 || seconds >= 60*60*24*2) {
            var time_string = this.shortRunningText + ' ' + moment(startDate).fromNow(true);
        }else {
            var time_string = this.longRunningText + ' ' + moment(endDate).calendar()
        }
        if (!e.RRULE) {
            this.eventList.push({'description':e.SUMMARY,'seconds':seconds,'days':time_string,'url': url, symbol: this.calendarSymbol});
        }
        this.calendarSymbol});
                            //this.eventList.push({'description':seconds,'seconds':seconds,'days':time_string,'url': url, symbol: this.calendarSymbol});
        }
        e.seconds = endSeconds;
    }

Calender Events

The Problem is that the calendar shows nearly all events. An so I have my events behind the compliments as well as behind the Newsfeed.

position awareness

Hi,

can a module somehow know it's position? I would like to reverse the rendering order depending on the side, the module is displayed.

Gettin' our own iCloud Hash

Hi, I see your magic mirror project and just thought it's awesome, yet I'd like to use the iCloud "sort-of" API but I didn't know how to generate my own hash code, and maybe I didn't read all your article correctly but I didn't see how to generate it. Is it possible for you to explain how you did it ?

Thank you
Regards.

The fade/opacity effect on calendar and weather

I have study the code but cant solve the case. Where is the fading/opacity effect on the calendar and weather coming from? I want to make it all 100% white due to some issues with my monitor.

Thanks alot in advance!

Morten Johnsen
Norway

Nest Integration

I remember you talking about your nest thermostat.

Will there be any integration in the magic mirror?

gboudreau has a nice script at
https://github.com/gboudreau/nest-api

regards,

joe

Unable to modify compliments

I changed the default phrases in js/config.js and afterwords the page will not display any content. Just a black background.

MagicMirror is not formatted

Hey guys,
It seems that the Interface´s formatting is not active.
https://gyazo.com/c983b006ad854eb498de238a58bcb3fc

I guess it´s the same issue which is solved #89 but I don´t know what to do / What is the right directory of the CSS files?

Redistribution of Proprietary Font Files

Helvetica Neue is a proprietary font. I don't think that redistributing the font files in this way is considered fair use and it might result in legal action. I propose that Helvetica Neue remains the first option in the font-stack, but that the font files are removed and a secondary font (perhaps Roboto?) is shipped with the software load. That way, if you have the Helvetica Neue font on your system (e.g., if you purchased it), that font will be used, and Roboto will be used otherwise.

Your "secret" ical hash is saved in this repository

Compliment / weather doesn't work correctly

Hi,

with the new update, compliments don't change anymore. Anyone else with these problems?

Also the weather forecast isn't the same like on the openweathermap website.

Greets
Maurice

AM/PM

Is it possible to get AM/PM on the js?

Thanks,

Show event ocurring today

Hi, is there a way to show the events in the calendar which are ocurring the same day?

Thanks!

Many RSS on the page

Hi all !

How to put a lot of RSS feed on the page ?
I have to copy/paste many news.js. But one news.js per feed, it is so many heavy no ?

Do u have an idea ?

Error on years with FB birthday calendar

I've tried to use my personal FaceBook account to get birthday calendar, and it work. Only dates are too late off one year (as you can see on the three last lines).

Voice recognition

It would be nice if the efforts on this other fork can be worked in. I like the voice recognition portion.

https://github.com/evancohen/smart-mirror

simple questions about the code and possible changes

First of all, thanks for the great project! I really like it and am trying to build my own mirror now. Before I start with the hardware project, I'd like to complete the website as best as possible for me.

Right now I am thinking about using a touch panel in front of the mirror - I don't know if it'd look good or if it'd work at all. It just an idea at the moment.

For that, I'd like to change the news display. I'd like open a small pop up window on the page when I click on it. This should display more about the currently displayed news headline and maybe have the possibility to load the complete article. And it should close if clicked next to the window on the background.

Since I have no experience with php & javascript so far, do you have a way to realize it? Maybe a hint or an example so I could experiment with it myself?

Cheers
Felix

Google .ics URL not displaying / page formatting

This could be because I'm a complete and absolute beginner, but my private .ics Google Calendar URL seems not to display my calendar when placed in its proper spot at line 45.

Additionally, the formatting for my page seems off. screenshot below.

What have I done horribly wrong? many thanks in advance for the help.

https://gyazo.com/c983b006ad854eb498de238a58bcb3fc

Sonos integration

Idea: Display Album art, Titel etc. of the currently playing song on the rooms Sonos speaker.

Git ignore file...

Hi, I love the clean look of the "mirror".
It would be great if you added a .gitignore file ignoring the changes made in the config.js file locally.
When pulling the config.js file get's overwritten. :)

Thank you for sharing!

V2: remote access not possible

The v2-beta is working good so far. Do simplify the configuration, I run the web server on my laptop and let the PI connect to die one. But since v2 the screen stays black. The html is loaded (static html is rendered) but the JS is not working.
If I open the index file directly on the laptop (file:///path/to/index.html) I get the following errors:

If I connect with localhost (localhost/path/to/index.html) it's working. Any ideas how to fix this?

Netatmo Integration

I'm working on a Netatmo implementation for my mirror (which is by now just a web page) to display humidity, temperature, co2 of my different indoor stations and weather warnings.

If anyone is interested in this I can do a pull request.

MM Crashes after a few second

I tryed disabling the calendar, the feeds an even the compliments, but it is still chrasing.
I´ve tested it in two php servers (both Windows).

Any suggestions?

Thanks!!

NaN in weather forecast

The current temperature is showing NaN instead of -2.7 (as shown on the open weather web site). The temperature of the coming days is ok. Values there are also in same range between -0.5 to -12..

It is the same conversation function used by the code as far as I can see( I am not a programmer more HW guy). Any idea/solution?

Groetjes HubBert99

Interface a little bit laggy

Hi,

do you have any performance tips for the interface? I made two mirrors (1x Raspi 2 Model B, 1x Raspberry 3, both with raspbian and the configuration on Michael's Website). Since the new Jessie Version the interface is very laggy, especially with the fade fx (rss, calendar, wheather, compliments). I have the newest updates. On Pi 3 it's a little bit better than on Pi 2.

My GPU Memory is 128MB. Do you guys have the same problems? What is your configuration? Any tips? Another browser, ... .?

Thank you, regards,
Maurice

Calendar not working for Google calendar

It looks like the latest code no longer works with Google calendar dates. It only shows recurring events now, not one-off events. I'm no javascsript expert, but I took a look, and in calendar.js the 'seconds' variable always seems to be negative. The obvious culprit is the piece of code marked "//FIXME: problems with Gmail's TimeZone", so I guess it's a known issue.

Calendar event ordering

Hi,
I see the change that you placed in your code for max calendar entries. However the calendar doesn't always come back in the date order.

I fixed this by changing your code to ensure the sort occurs first. Then simply slice the final array.

Remove your new for loop, then

add this right after your array.sort
this.eventList = this.eventList.slice(0, calendar.maximumEntries);

This way it ensures all entries are sorted, and then the array is just culled to length.

Good work!
:)

Implement smooth weather icons

Hi,

thank you very much for describing your project. Actually, I'm working on the magic mirror, too :). So, I have a question / an idea:

I saw these very smooth weather icons (https://github.com/maxdow/skycons). Is it possible to implement these?

Greets
Maurice

News.js doubling some news feeds

Hello. Thank you for the project and the people working on programming.

I am new to the programming languages involved here. I have noticed that some RSS feeds (all of the Fark.com feeds) I tried display text twice in a row. It looks as if the RSS feed is valid if this website and Firefox can be trusted. I will attempt to go through the news.js code line by line and learn how it works and possibly how to fix it. Any insight on the issue would be helpful.

//Feed
feed: 'http://www.fark.com/geek/fark.rss'

//RSS Validator
http://feedvalidator.org/check.cgi?url=http%3A%2F%2Fwww.fark.com%2Fgeek%2Ffark.rss

Calendar Full day events

Hey,

First of all, thanks for doing this, it's awesome!

Now over to the not so fun stuff... I currently do not have the correct skills to remedy this but when I create full day events in Google Calendar it gives:
Alarm notification in 16 days
Alarm notification in 17 days
Alarm notification in 25 days
Alarm notification in 2 months
Alarm notification in 6 months
Alarm notification in 9 months
Alarm notification in 9 months

While 1h long events etc shows up with correct name and all.

Any chance this could be looked at?