Android Motion Sensing Smart Mirror

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.

Comments

[ShannakayL]

Hi someone may have already asked this but I don't want to go through all those comments. So, is there an alternative to the film that one could use. My fear is I might mess up on putting it on and I would have to start from scratch. Any and all suggestions are welcome please and thanks in advance.

[HiVisVest72]

Hi, I found that film to be easy to use - if you get the glass wet, and press it on with for example a credit card, then you have plenty of give and time to position and smooth it out, as far as I know it can also be peeled off, although never had to do that myself.

[ShannakayL]

Okay I will try that. Thank you.

[JayD144]

Brilliant idea mate, ideal for upcycling old tablets

[mosivers]

Hi,

thanks for sharing your awesome project.

Unfortunately, I have trouble getting the calendar API to work on the Full Screen Browser app. It is working on Chrome but in the full screen browser the "Authorize" button does not appear. I also tried to log in manually via the google calendar website and then switch back to localhost but the calendar does still not appear.

Any suggestions on what might be going wrong here?

[fenyvesi]

Dear Alan,

I inform you that the modernizr.js not reachable anymore written in the program. I found it here:

https://cdnjs.cloudflare.com/ajax/libs/modernizr/2...

The other issue maybe I had was related to the artill_clean_icons icons. I found them here:

https://github.com/mysamai/mysam-weather/tree/mast...

I downloaded them and and used locally.

A question: Did you use the meteo icons? I can't see them in your picture.

Anyway i don't have them in the ouput despite of the fact that the css file has a big chunk related to the icons. My html/css/java knowledge is very limited, so I can't check it.

[edgiru]

nice... ths

[JustusC]

Sweet

[MichaelH820]

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

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.
Great job on the post.

[HiVisVest72]

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.

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.

Cheers,

Alan

[JayS157]

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/

[HiVisVest72]

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.

[JayS157]

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.

[Adrian N.]

Nice smart mirror. I haven't done it yet but it is in my intention.
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.
I'll give a try to your instructable as soon as possible.

[HiVisVest72]

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.

[Funky Diver]

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 ?

[t41photo]

very cool! been dying to do this - I have the exact same Nexus 7. sure looks promising.

I'll have to back shelf something else. hmmm

[HiVisVest72]

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!

[TheGreyWolfe]

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

[HiVisVest72]

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.