Once they’ve created a profile, the user can stand in front of the magic mirror, which will take a picture and request Cognitive Services for the user’s face_id. The user creates a profile by adding some personal info and taking a selfie, which is then sent to Cognitive Services to get a unique identifier (a face_id) which is then stored in the Magic Mirror’s database. Magic Mirror leverages Microsoft’s Cognitive Services Face API to match the user’s face to their profile. In the past, this was complex technology out of the reach of most web apps, but, with APIs provided by Microsoft’s Cognitive Services, we’re able to build it into our mirror with minimal effort.
![magic mirror app magic mirror app](https://ipadkids.com/wp-content/uploads/2013/05/disney-magic-mirror.jpg)
![magic mirror app magic mirror app](http://www.top-app.org/wp-content/uploads/2014/07/Magic_Mirror_App.jpg)
The most important part of the app and the most delightful experience for the user is the facial recognition capability, which personalizes the mirror’s display based on the individual in front of it. All the HTML, CSS, and JavaScript comes directly from the server, hence the term hosted. Using the Hosted Web apps bridge, we turned our web app into a Universal Windows App, which not only give us access to Windows Native APIs but can also run across Windows devices, such as the Raspberry Pi 3 in our case. Lastly and most importantly, the user needs to see their reflection, so we kept the central area of the mirror clear when the user is logged in. The screen needs to be readable through the mirrored surface, so we used a high contrast ratio of pure white on pure black. The UI should be simple and easy to visually digest, so we kept adornment light and typography clear. There are some practical implications to this. We designed the mirror user interface (UI) to be as functional as possible, as both a mirror and an info hub.
#Magic mirror app windows 10#
Our web app, which provides the interface and basic functionality, is a simple Hosted Web App that runs on Windows 10 IoT Core. To power the mirror, we chose a Raspberry Pi because of its popularity, price point, support, and hardware specs. We’ve also open-sourced the web app and shared our bill of materials and assembly instructions on our GitHub repository. We designed the Magic Mirror to be low-cost and simple, so anyone could build it in a couple of hours. We designed the mirror to adapt to each person and to work without getting in the way of their daily routine.
#Magic mirror app software#
When the display is on, you can see both your reflection and the white elements, allowing software to present relevant information while you get ready for the day. Our magic mirror is basically a one-way mirror (like you might have seen in Hollywood depictions of interrogation rooms), made “smart” by a simple LCD display which sits behind the mirror and displays white UI elements with a black background.
#Magic mirror app how to#
In this post, we’ll walk you through how we went about developing the mirror and how to build one for yourself! What’s a Magic Mirror? This demo illustrates how Hosted Web Apps in Windows 10 can leverage familiar web technologies to deliver powerful app experiences to all devices, including the Internet of Things.
![magic mirror app magic mirror app](https://cache.dotapps.jp/pictures/QORun774QT4rBTPh.jpg)
This project builds on the inspiration of projects like Michael Teeuw’s open-source Magic Mirror and Nathan Patrick’s Smart Mirror, enhancing the concept with a personalized experience that recognizes each user with facial recognition. At Build 2016, we demoed a Magic Mirror project powered by a Hosted Web App on Windows 10 IoT Core.