loading

We decided that we needed a mirror in our kitchen, and I was also conscious that my family uses their smartphones to check weather, calendar appointments etc before getting the children ready and heading out for the day.

I had found numerous great examples of smart mirror tutorials and articles on the web, and I decided to see if I could improve on them using my existing skills as a web developer and some spare kit I had in a drawer (and original Nexus 7).

I also wanted the "smart" bit of the mirror to come on only when looked at, so no buttons to touch, voice control (difficult in a sometimes noisy house) and definitely not on all the time.

Given that I was using an Android tablet I was able to find all the apps I needed, some paid for, some free, all links below.

The hardware

- Already mentioned - the Nexus 7 tablet (2012 model I think) running Android 5.0, plus its USB power supply.

- Standard picture frame, but deep enough to hold the extra thickness of the tablet:

https://www.amazon.co.uk/gp/product/B003DZFTCI/ref...

- Mirror screen film:

https://www.amazon.co.uk/gp/product/B002QETDXI/ref...

Other bits:

- thick black craft card

- couple of plastic glazing shims (or some thin wood like lollipop sticks would do I think)

- some scrap of thick foam (I used an old child safety door stop, but even an eraser would do, cut into a few strips)

Tools:

Laptop (for writing the code, copying to Nexus 7) - PC or Apple, it doesn't matter - I used both at times.

Hot glue gun (or good all purpose glue, for gluing the shims and foam wedges, need to make sure it's secure to not drop the tablet).

Craft knife

The software

Motion Detector - as it suggest, it detects the motion and sends a signal/intent that gets picked up by Tasker
https://play.google.com/store/apps/details?id=org....

Tasker - couple of profiles added on here, explained in later step

https://play.google.com/store/apps/details?id=net....

Full screen browser - so that the "web page" can be shown with no buttons our screen surrounds

https://play.google.com/store/apps/details?id=tk....

Web Server - the ability to run a "localhost" site directly on the tablet

https://play.google.com/store/apps/details?id=com...

UPDATE 23rd May 2016: I have added the code to Github, here is the link:

https://github.com/alan-zetland/smart-mirror

Step 1: Setting Up the Web Page

I have experience in Android development, but I would need to spend a lot of time relearning it to use it for this, that I decided I'd build it mainly in html/js and style it white on black using css.

So on my PC I created a localhost site with html, css and js. I can post the code if required, but basically it:

- loads a weather feed for the next 4 days

- loads my "family" calendar and gets items for the next 4 days

- adds a little panel at the top showing the current date/time, when it was last updated (it's set to update every hour, to save reloading the page every time movement is detected) and the current weather

- a table is then draw of the next 4 days, with weather and all the events, including ones that started in the past but include today.

Points to note:

For the calendar (using a Google calendar) I had to create a key in my Google Developer Console to use the API - not sure what you do if you don't have a developer account though.

Step 2: Configure the Tablet

Install all the apps.

Using the Bit Web Server, create a localhost site (ie turn the web service on), take note of the home folder for the site as this is where you will copy the files.

Open the "full screen browser" pointing to the web page.

Basic tablet setup:

Turn auto brightness and daydream off, set screen timeout to 1 minute (or longer if you are going to spend longer looking at the data on the mirror). Turn off all notifications, warnings etc that might pop up on the screen when it's switched on.

In Tasker (this was my first experience using this powerful tool, so I think I've done it efficiently)...

Profile 1 - receives the "intent" signal from the motion controller (the string for this "org.motion.detector.ACTION_GLOBAL_BROADCAST") and carries out the following actions:

a. turns off this profile (so it stops detecting motion)

b. Send an alert to the screen - this is a workaround to avoid the problem that Tasker cannot directly turn a screen on, so I configured the popup to say "loading smart mirror" for 5 seconds, then disappear. This turns on the screen and leaves you with the web page showing full screen.

Profile 2 - this detects when the screen goes off and enables Profile 1.

Finally, in Motion Detector, set the "send" to active (this ensures the intent is broadcast to other apps, ie Tasker) and then click "start motion detect".

Finally come out of that app and ensure the full screen web page is running front and centre. Then wait until the screen goes black. Wave your hand and you should get the popup, followed a few seconds later by the web page in full screen mode. Voila!

Step 3: Build the Mirror

Take the frame apart

Clean the glass as best you can

Follow the instructions of the mirrored film and apply to the glass. It's a bit like getting a screen protector on a mobile phone, but bigger and more fiddly. I was *reasonably* happy with my first attempt at doing this, but I can see some blemishes and dirty marks when I look at the mirror so I may redo it at some stage if it gets in the way. Preparation is the key it seems, as with a lot of DIY stuff I guess.

Place the black card on the mirrored glass (all of which face down at the moment).

Place the tablet in the corner where you want it and mark around it. Cut it out with a sharp blade (taking it off the glass first of course). I actually cut a few mm inside the line, a to give me breathing space in case I made a mistake and b to allow any shiny bezel on the tablet to be covered in black and not show through from the front.

Now put the card/hardboard backing of the frame back on the frame, place the tablet on top - mark and cut that too, but don't leave any wiggle room or overflow, you want a tight fit.

Place the black card back on, add the tablet and then add the card - you may need to notch the card slightly where the usb cable come out just to make sure it doesn't stress the cable or port on the tablet.

I then used a hot glue gun to glue the foam strip to the frame sides (top and left).

Holding everything in tight, I then placed the shims/wedges up the right and bottom sides and hot glued them into place too, ensuring I didn't glue the actual tablet of course.

This way, the tablet is actually held in by the normal tabs that are holding the backing board in, making it really easy to take it all out and get access to the tablet.

Step 4: Finishing Touches

I notched a bit out of the frame to let the cable slip through and it's plugged in constantly now. Ideally I might get a white cable so it looks less intrusive.

Finally I installed a piece of software called "Mobizen" on both my PC and my tablet that allows me to remotely control the tablet by connecting the usb cable directly to my PC - that way I figure I can do any routine maintenance without unhooking the whole mirror. It came in handy actually when the web server stopped running so the web page stopped refreshing, a quick remote control session was able to restart it.

What I would do differently:

I can't honestly say I'd change anything about it, other than to try applying the mirror film again. I notice the mirror is a bit darker than a "normal" mirror but I guess that's a result of using that film as opposed to a proper silver backing.

You also might need to play with the brightness of your tablet screen to make the "black" of it's background match the black of the card behind - when at it's brightest I got a kind of light grey/black on the tablet portion of the mirror, so I dropped the brightness by about 10-15% and it's spot on now, all you can see is the white text, as was intended.

I hope there is enough detail and interesting ideas here to make it a worthwhile Instructable that others might want to follow.

Why noy just get an outlet installed behind the mirror so none of the cord will show. They make outlets that are recessed and inexpensive like this one here. https://www.monoprice.com/mobile/product/details/8475?gclid=CJKM-eXi4tICFYuNswodRLMPkQ<br><br>I built a networked digital picture frame and ran a laptop behind it as the main piece. This is before tablets and small factor mobos became reasonably priced and more mainstream. I ran a piece of cat 6 low voltage in wall wire down the wall and into the laptops brick. I wouldnt recommend that today because it was most likely a fire hazard but you could also do that with high voltage in wall wire and wire it to an outlet below the mirror for easy removal later. <br> Great job on the post.
<p>Hi, thanks for the comment - in truth when I originally made the mirror and the Instructable, I hadn't decided exactly where the mirror was going to live. In the end, I didn't actually move it, and all I did was change the black cable for a white one. We hardly notice the cable any more, so it never troubled us.</p><p>I like the idea of the laptop behind, but so glad we've moved on to smaller form factors like tablets and the likes of Raspberry Pis.</p><p>Cheers,</p><p>Alan</p>
<p>Hey! Great project, looks really good. Looks like you used my tutorial to set up the motion detection. Great to see someone found it useful :) maybe you can put a link to it in the article? Thanks! http://www.magicmirrorcentral.com/making-smart-mirror-even-smarter-motion-detection-android/</p>
<p>Hi Jay, I used a number of different articles across the web to set up my system. I don't remember your one particularly, but reading it now I don't think I used any DISPLAYSTATE variables or anything like that. I used 2 separate tasks, one to detect the motion detection, and another to detect when the screen switched off, to save it from detecting motion constantly even when the screen was switched on. That said your article and your images are very clear and smart (pardon the pun), so congratulations.</p>
<p>Ah, no worries! We must have gotten the same idea for the motion detection execution. Great minds and all that :) keep up the good work.</p>
Nice smart mirror. I haven't done it yet but it is in my intention.<br>One question though...what if - instead of Tasker, would be used IF - available from Play Store. IF is the late If This Than That - IFTTT on short. For me is better than Tasker.<br>I'll give a try to your instructable as soon as possible.
<p>Hi Adrian, I'm not sure if IF can do it - I wasn't sure if IF had the possibility of listening for the motion detecting signal/intent. Tasker did the job perfectly, so I did it with that.</p>
Very nice. I have been thinking of a project to do with an first generation Raspberry Pi and LCD screen, seems now I have no excuse ?
very cool! been dying to do this - I have the exact same Nexus 7. sure looks promising.<br><br>I'll have to back shelf something else. hmmm
<p>Thanks for the feedback, much appreciated. The old Nexus is getting a bit slow navigating between apps (especially when setting everything up) but once it was configured, it performs perfectly well for this purpose. Good luck!</p>
<p>This is awesome. I'm tempted to work on one for my bathroom. I've got an old Nook HD lying around, or I could always grab one of my flat screen monitors to use too. Hmmmmm</p>
<p>Thanks for the feedback. The only reservation I'd have with the Nook HD is that the plastic bezel around the screen is raised, so you won't get the glass of the tablet screen lying flat against the mirrored glass. Still, it should work, and you're doing the same as I did, only using something that was lying around anyway! I've seen others done with a flat screen monitor, but not sure how you'd do that with Android, you'd probably need a Raspberry Pi or something, and that's a whole new technology stack to use. Best of luck though, I'd be interested to see the results.</p>
<p>After looking at yours I took a look at some other mirror builds and I think a combination of your usage of the tablet and some others for the arduino sensors and controls will be the way to go. I figure if I use the Nook though I may just take it apart so that I can get the screen flush. I'm also thinking that I may have to wipe the operating system and put something else on there so I can control what it shows on startup.</p>
<p>I've seen other articles where they take a flat screen LCD TV apart so they can just use the screen, so it can't be too difficult with the Nook if that's what you have. I didn't really look too much into the control aspect (apart from motion control to switch it on of course) as we wanted it just as a read-only device, but there seems to be plenty of possibilities for different sensors - I did wonder if a Leap Motion could be used at all.</p>
<p>Cool. I'm going to have to wait for a while, too many other projects on the list right now, but I'll post some picks when I get it going.</p>
<p>I know that feeling, so many projects, so little time!</p>
Dude. You killed this.
<p>Thanks very much :-)</p>
<p>That is a sweet project. very cool.</p><p>goes into my faves</p>
<p>Thanks very much :-)</p>
<p>we dont need this (im 9) , since we have a amamzon echo</p>
<p>That's good, they look like cool devices. We don't have one (and have a noisy house where voice control would not work properly) so I built the mirror.</p>
<p>That is really awesome. You can get ready in the morning and have the weather fore cast in front of you.</p>
<p>Thanks, yes that's what we want to use it for, checking the weather and the next few days diary appointments, but not too obtrusive as to get in the way.</p>
<p>Great idea <a href="https://www.instructables.com/member/HiVisVest72" rel="nofollow">HiVisVest72</a></p><p>This is something i was looking for.</p><p>Can you post the code somewhere? </p><p>That would be really awesome.</p><p>Thanx for sharing this great idea &amp; instructable.</p>
<p>See the edited &quot;Intro&quot; page for a link to the code on Github!</p>
<p>Hi, yes I am tidying up the code at the moment so once I know it's working right (and I've removed some of my own personal details) then I'll post to github and add the link in the comments here. Thanks for the feedback too :-)</p>
<p>Please see the edited first page (Intro) for a link to my Github repo for the source code that I have just uploaded. Please read the readme - especially the bit about it not being &quot;production-ready&quot; as I prepared it for personal use only, but I've been asked a lot to upload the code, so I don't provide any sort of support or warranty for it. Cheers</p>
<p>good idea ..thumbs up</p>
<p>Thanks very much, I appreciate the feedback.</p>
I'm confused. What is a &quot;smart mirror&quot;? It would be nice to define this technology in the beginning statements, please. Thanks.
<p>Hi there, I take your point and will make it clearer on my next Instructable, but I'll not edit this one as the majority seem familiar with the concept already. The best definition I can think of is that it's a mirror that can be used display helpful information in front of you, without needing to get tablets/phone out and unlocked etc. There are loads of articles on Google and here with different versions/technologies, but if you've not come across them, then hopefully my explanation will help.</p>
<p>I bet you are from my country !</p>
I'm serious. I don't know what a smart mirror is.
<p>This is really great. It gets the wheels in my brain turning...</p>
<p>Thanks mate, mine too, so many ideas and inspirations from other comments.</p>
<p>This is fantastic, what a useful tool, kudos to you sir!</p>
<p>Thanks for the feedback, much appreciated :-)</p>
This is great! I was just at Harry Potter Land in Universal Studios and say a very cool smart mirror that I was wondering how to make myself.
<p>Thanks for the feedback, much appreciated. As a mere muggle, I was pleased with myself :-)</p>
Any suggestions for someone who isn't a programmer? Put a soldering iron in my hands and I'm freakin McGuyver, but ask me to code? Lol, not happening.
<p>Hi Michael, I saw a few other smart mirrors using other technologies (Raspberry Pi, Arduino etc) but I think you'd need even more technical know-how than me for those. There's a few apps on the Google Play app store that will create a similar screen - one I can think of is Home Mirror. It looks pretty good but it's limited in terms of the layout, the particular data it can bring back etc - while it is impressive I have the advantage of being able to use my web development experience to write something completely custom. I didn't use anything like that because while I have Android (and iOS) experience, it would take me too long to get familiar with them again, and I wanted something finished in a few weeks. I guess the market is crying out for someone to come up with a user friendly, configurable app that you can just download and it will handle everything in one place (motion sensing, screen timeout, data updates etc etc). It's not a space I have time to get into right now. Good luck finding something that suits though, I'd be interested to see some more Instructables following and improving on mine.</p>
Thank you so much for responding so quickly and thanks for the help and for this amazing instructable I'll contact u again if I have any problems have a great day
Nice. I'm sure you'll I could set it up for some Halloween pranks too ?
<p>haha I never thought of that!! I'm definitely going to get something set up for Hallowe'en now. I can imagine something at the front porch that surprises kids with a scary greeting as they approach the door!</p>
Indeed. If I was checking myself in the mirror and another face/skull etc appeared, I'd lose my......cool ?<br> <br> <br>
<p>That's genius! Yes, definitely doing something like that. Someone else commented that it would be good to do something to recognise the particular user (NFC tags, specific mobile phones held up to the mirror etc) - would be good to give my wife a different message, eg on her birthday or our anniversary, as a surprise.</p>
<p>Just wanted to drop a quick note to say I'm amazed by the popularity of this post and the really positive comments and feedback. I've tried to respond to everyone, even with a simple thanks (as I think this is what the web is all about!) but if I haven't responded directly, please don't be offended. Thanks again for all the feedback, just thinking of my next idea now!</p>
Great idea!
<p>Thanks very much :-)</p>

About This Instructable

102,510views

1,274favorites

License:

More by HiVisVest72:Android Motion Sensing Smart Mirror 
Add instructable to: