I guess Magic Mirror projects are the "new shinny." Last year it was, "Mirror, Mirror on the wall, who's the..." Smart Mirror! Last week it was MagicMirror².
This week we've got another, one that uses some of the latest and greatest Windows tech...
Building an IoT Magic Mirror with Hosted Web Apps and Windows 10
At Build 2016, we demoed a Magic Mirror project powered by a Hosted Web App on Windows 10 IoT Core. This project builds on the inspiration of projects like Michael Teeuw’s open-source Magic Mirror, enhancing the concept with a personalized experience that recognizes each user with facial recognition.
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. 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?
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. 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.
We designed the Magic Mirror to be low-cost and simple, so anyone could build it in a couple of hours. We’ve also open-sourced the web app and shared our bill of materials and assembly instructions on our GitHub repository.
To power the mirror, we chose a Raspberry Pi because of its popularity, price point, support, and hardware specs. Our web app, which provides the interface and basic functionality, is a simple Hosted Web App that runs on Windows 10 IoT Core.
Building the interface
We designed the mirror user interface (UI) to be as functional as possible, as both a mirror and an info hub. There are some practical implications to this. The UI should be simple and easy to visually digest, so we kept adornment light and typography clear. The screen needs to be readable through the mirrored surface, so we used a high contrast ratio of pure white on pure black. 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.
....
Building the web app
There are multiple pieces at play here. First is what you see displayed behind the mirror: This is a web app created in HTML, CSS, and JavaScript and served from a Node instance hosted on Azure.
...
Making it smart
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. 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 leverages Microsoft’s Cognitive Services Face API to match the user’s face to their profile. 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.
...
Try it out
This is just a small sample of what’s possible with the Hosted Web Apps platform and Cognitive Services APIs, but it’s a great introduction to how Hosted Web Apps on Windows 10 allow you to target the full range of Windows 10 devices, including the Internet of Things, to create compelling experiences with familiar web technologies. We’ve open sourced the application source code and bill of materials on GitHub – try it out for yourself and let us know what you think!
MicrosoftEdge/magic-mirror-demo
Overview
We took the magic mirror concept a step further by enabling user recognition . The mirror can recognize registered users and personalize the experience accordingly.
The Magic Mirror is a fun weekend IoT project that showcases the power of Universal Windows Platform (UWP) hosted web apps. Please check out the instructions below to see how you can build it yourself .
The client side was coded against standard web technologies (CSS, HTML, JS) ❤️, and the back-end leverages the power of NodeJS and Mongo hosted on Azure. The client side implements Windows API (mediaCapture) to detect faces from the devices camera, and the Microsoft's Cognitive Services Face API to match Faces to profiles.
Since a mirror device doesn't generally receive input from a keyboard and mouse, our web app provides a view that allows users to personalize the experience.
Assembly Process
Please see the assembly process section.
Installing the app
Once the mirror is assembled and wired up, you can install the Magic Mirror app on your Raspberry Pi (RP). Don't worry if you don't have a PC, you can also do it with a Mac.
Deploying on a PC
Prerequisites:
- Visual Studio (2013+)
- Windows 10 SDK installed in Visual Studio
Steps:
- In Visual Studio, click File > New Project > JavaScript Templates > Windows > Hosted Web Apps
- Go to Solution explorer, click on package.appxmanifest > Application and set http://webreflections.azurewebsites.net/mirror as the start page
- Within the package.appxmanifest view, click the Content URIs tab and insert http://webreflections.azurewebsites.net/ with WinRT Access All
- Click the Capabilities tab and select Webcam
- On the ribbon, Change the taget architecture from Any CPU to ARM
- Click play (it should say Remote Machine)
- A prompt should appear asking you for the Machine Name. Set the IPv4 of your RP as the Machine Name and select Universal for the Require Authentication
- and voilà! You have succesfully installed the Magic Mirror hosted web app in your RP running Windows IoT core.
If you want a tutorial with pretty pictures, you can find it here.
...
Run Locally
Please see the run locally section.
...
Assembly Process
The assembly process requires manual work so please make sure you take the appropriate safety measures.
Building Materials
You will need the following materials to assemble the Magic Mirror:
- 2-Way Mirrored Acrylic Sheets
- Medicine Cabinet
- 23.6" Screen LED-lit Monitor
- LifeCam HD-3000
- Raspberry Pi 2 or 3
- Micro SD card
- Micro USB cord and USB power adapter
- HDMI cord
- Gorilla glue
- Black tape
- Scissors
- Multibit screwdriver
- Cutting pliers
- Power drill
Step 1: Cabinet + 2-way mirror
The frame of the medical cabinet is held together by staples. You can use the screwdriver to take them off. Please be careful not to shatter the mirror. Once the staples are gone, you can remove the one-way mirror and replace it with the two-way mirror. Glue each corner together as seen on the picture below.
...
Looks like you have your Project of the Summer... :)
Follow @CH9
Follow @coding4fun
Follow @gduncan411
