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
- Tasker - couple of profiles added on here, explained in later step
- Full screen browser - so that the "web page" can be shown with no buttons our screen surrounds
- Web Server - the ability to run a "localhost" site directly on the tablet
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.
via Instructable
No comments:
Post a Comment