loading

I saw one of these mirrors online and instantly set out to make one in the cheapest, thriftiest and easiest way I could find and now you can too! This mirror is my second iteration, I used a Laptop first to write the code and eased my way into using the Raspberry Pi, The total cost of the build was $146 NZD = roughly $100 USD

I am using Raspberry Pi 3 model B for the brains of the project as it has built in WIFI which is perfect for this. Building this mirror was my first taste of the Pi, and it was delicious... If you like this instructable please vote for me in the Beyond the Comfort Zone or Internet of Things competitions :-) thaaanks

You will need:

(Expenses I paid in NZ Dollar)

  • Raspberry Pi 3 (with power supply) - $70
  • Desktop Monitor (recommend 19" or larger) - $20
  • HDMI to VGA adapter for display - $10
  • Picture frame with glass (or any piece of glass larger than your monitor) - $10
  • Silver Reflective Window Film - $20 - AMAZON
  • 3mm Black Acrylic plastic sheet (For laser cut) - $6
  • 6X small screws - $5
  • Superglue - $5

Fortunately I have cheap access to some powerful tools through Victoria University where I study Media Design which allowed me to do all the manufacturing myself. I have never laser cut anything before this project and have minimal experience with a 3D printer so if I can do it I am confident you can too! If you don't have access to this equipment there may be some local Maker facilities in your area such as: Techshop / MakerSpace / FabLab or somebody who will do it for a small fee.

Tools:

  • 3D Printer
  • Laser Cutter
  • Sand paper
  • Drill
  • Screw Driver

Step 1: Specifications

So, before I began building my Mirror I decided to jot down some project goals detailing exactly what attributes the Mirror will have in its final form.

It must display:

  • Today's Date and Time
  • The current weather conditions with icon and outside temprature
  • A list of reminders for things I need to do Today + Tomorrow
  • My upcoming hand-in dates for University projects
  • The current week in the year and what events I have on this week

The Design of the mirror itself must aim to be:

  • Lightweight for portability
  • Adjustable (height and angle)
  • Very strong and durable
  • Sexy

Step 2: Start Building

I started by tidying up an old picture frame I picked up from an op-shop for $20, I tried to explain to the old man who worked there that I was turning it into a Smart Mirror and I have never seen anybody look so confused. I was looking to buy one that had a glass surface larger than the 19" Monitor I planned to mount it too. I also wanted the wooden frame itself to be large + strong enough to support 6 small screws. Try get one with thick glass to avoid cracking it in the building process as I did with my first concept.

Once I had the perfect frame I sanded it back to its natural wood grain and tinted the glass with my one way mirror tint film. If you have never tinted anything with film I highly recommend watching a few youtube videos on How to install reflective window film, as there is a few tricks to doing it with no bubbles at the end. You will also need to pay attention to the VTL (Visual light Transmittance) level of the tint. The VTL of these films ranges from around 5% = Very Dark. 15% = Dark. 35% = Lightly Dark. 50% = Light. 65% = Very Light. For this specific project we are aiming to tint the glass in a way that provides surface reflection on the external side but also allows the graphical output of the Mirror to Transmit through the glass. I used 20% for mine but I believe there could be a more suitable VTL for achieving this effect.


Step 3: Mounting the Mirror to the Monitor

This is the part where I laser cut two rectangles out of 1 piece of acrylic sheet. The first rectangle cut out of the acrylic sheet was to the size of my wooden frame and the second one was to the size of my monitor 19".

I did this by making a very basic file in Illustrator and sending it to
the laser cutter. I would attach the file but your dimensions will likely be different to mine.

Once this piece is cut out to the perfect size it is superglued to the front of my monitor. I took the front of the monitor off for this step to avoid getting glue on the screen.

They bonded together extremely well and I then lined up the acrylic with the back of the wooden frame and started drilling small holes through the plastic and softly into the wood. Drilling holes is very important to allow the screws to go into the wood and plastic without causing cracks or splits. I did this with 3 screws running down each side, 6 in total to secure the frame to the acrylic / monitor.

Step 4: Lets Get Nerdy (Coding)

If you are new to Raspberry Pi like me and you are completely unsure
how to get started, also like me you should head over to this instructable

https://www.instructables.com/id/Setting-up-and-run...

to learn how to download and set up NOOBS the operating system for the Pi.

The Pi contains all the brains for the mirror and allows it to run a Processing sketch.

Once your Raspberry Pi is up and running with NOOBS installed you will need to install Processing.

Processing is an IDE (integrated development environment) used by Designer's for writing Java applications. Processing has only recently become supported by Raspberry Pi and you can create applications directly on your Pi without the need for another Laptop or PC. To install Processing on your Pi take the 'processing-linux-arm' file attached to this step, put it on a USB and transfer it to the Pi. Now just open it on the Raspberry desktop and Processing should begin to install.

I have attached the processing sketch (it is in the Mirror_Pi.zip file along with the weather icons and reminders.txt) I used to create the Application for the mirror. Go ahead and open it on your Pi and hit 'Run'. You will need to change the width and height values in the setup() loop to match the resolution of your screen.

This sketch pulls weather data from the internet for Wellington City and retrieves the current date and time from the Pi's default timezone settings. It also retrieves my upcoming hand-ins from a .txt file in the root folder called reminders.txt that can easily be edited to your needs. It has a calendar & week planner hard-coded into it so it knows what week it is in the year and displays your events for that week.

*** You will need a bit of coding skill to make the sketch pull weather data for your City. I Took this data straight off accuweather.com by using firefox's developer tools to find where in the sites code it shows today's conditions and temp and displaying that in the Application. You can do this with your weather website of choice or use an API like Yahoo Weather. ***

When you are happy with the sketch and how it looks on your screen hit the Export Sketch button at the top of the Processing window and export it as an application.

Step 5: Housing the Pi

I decided to 3D Print a case for my PI so I could mount it to the back of the monitor. I found this case on thingiverse courtesy of a maker named Normand:
http://www.thingiverse.com/thing:410003

I 3D Printed it in about 2 hours on an UP Mini. This case is ideal for this project as it protects the GPIO pins but allows access to the USB, HDMI, SD and Micro USB (power) ports.

I attached the bottom piece of the case to the back of my monitor with more superglue to avoid putting screws into the internal organs of the monitor.

Step 6: Power Up and Admire

Now all you need to do is power up your monitor and your Raspberry Pi and open the exported Application from Processing.

There you go !

if you followed along you should now own your very own smart mirror, congratz! I would love to see your projects and I'll be right here to answer any questions to help you along. If there is any advice you have for me i'd be glad to hear it. I plan on developing this Prototype further so if you want to see where it goes from here make sure to follow me for future updates :-) There are so many potential developments for this project and I hope this Instructable is a useful blueprint for the Maker Community.

Happy Making peeps !

<p>I'm struggling with the wdata section. What line of code are you looking to retrieve? Do you have an example of what it looked like for you?</p><p>When I look at the source code for accuweather, line 217 (what you used) is blank, even for the source you used (Wellington). I'd appreciate any and all help! Thanks!</p>
<p>That's awesome. We just need a DIY of doing that to an HUD :)</p>
<p>im having a hard time to get wdata of the prefered weather for my country. http://www.accuweather.com/en/ph/pag-asa/1894661/weather-forecast/1894661 hope u can reply asap.</p>
<p>Looks like Micro$oft are playing catch up!</p><p><a href="http://www.electronicsweekly.com/blogs/gadget-master/general/raspberry-pi-3-powers-microsofts-magic-mirror-2016-06/" rel="nofollow">http://www.electronicsweekly.com/blogs/gadget-mast...</a></p>
<p>Dude this is an awesome design. Literally just what I want for my make shift robotics lab. Is there a way that I can hook up a tablet/ phone up to this? If so how would I do it? </p><p>I will definitely make sure to vote for you.</p>
<p>I think this would look great in your robotics lab there is another instructable where the mirror uses an Android tablet for its display I will find it for you. I am still researching to find a way to update the event and reminder cycles from a smart phone / device.</p>
<p>Google Calendar all the way for adding from a mobile device, I'm working on it but not sure how far I will get, I haven't a clue where to start lol. Looking at the Java APIs, it's on about installing a Google Calendar library but there isn't a version for Processing so not sure if one of their other ones will work with it.</p>
<p>https://www.instructables.com/id/Android-Motion-Sensing-Smart-Mirror/</p>
<p>You could apply a touchscreen overlay bezel to it </p>
<p>I was tempted to do this for the one I'm making but wasn't sure about fingerprints + mirror lol</p>
<p>Funny you mention touch screen. There are a few instuctables about converting LCDs into touch screens. </p>
<p>wow I have never heard of touchscreen overlay's that is a great idea. Do you know where to buy them ? </p>
http://www.ebay.com/bhp/touch-screen-kit
<p>How does a man autostart a jar file after the pi booted? =)</p>
It will be awesome if you add voice and talk back functionality to it
<p>That is awesome! I read somewhere that hdmi to vga adaptors were causing pi systems to overheat and freeze. Apparently that adaptor is working okay though. Would you be willing to share brand of your hdmi to vga adaptor. </p>
<p>I can't say I've heard of these issues before but I've had Pi's overheat just running as a basic board so I always put heatsinks on the cpu and other chips, heatsinks are about &pound;2 on ebay. The freezing sounds to me like it could be a lack of power, as long as the Pi's USB adapter is rated at 2A I wouldn't expect to see any freezing issues. I've had loads of HDMI to VGA adapters in the past I just get whatever is cheapest on ebay, normally about &pound;3 or so from China and I haven't had any problems from them, this was the last one I bought about a year ago and it's still going strong: http://www.ebay.co.uk/itm/291751430337</p>
<p>Thanks for the great guide. I've been wanting to do something like this for a while and recently saw a Microsoft Windows 10 version (http://lifehacker.com/microsofts-official-guide-fo... but the coding on that one seemed a bit beyond my capabilities.</p><p>Your one however looks perfect and is well documented. I'll be looking to modify it slightly so that the monitor will only turn on when someone is standing in front of the mirror (the Pi will remain on all the time). I haven't yet decided how to do it but I'm thinking of a mini PIR sensor (https://learn.adafruit.com/pir-passive-infrared-pr... which will control a relay connected to the power of the monitor. I'll also be completely stripping down the monitor to it's bare parts so I can make the casing smaller and wall-mountable. I also hope to use Google Calendar instead of the text file as well so I can add appointments from my smartphone or computer and have it sync across to the mirror.</p><p>This is the perfect starting point that I've been looking for though so thanks for the guide, I'll let you know how it goes when I get it finished :D</p>
<p>Or a sensor this size would be better than the adafruit one for my use: https://www.parallax.com/product/28033</p>
<p>I see that you had replied but I can't see the comment here for some reason. Good idea about the PHP site to customize things sounds like a great idea. </p><p>I noticed that the day of the week wasn't changing at the top and from my limited Java knowledge I think it was due to the &quot;String D = &quot;Monday&quot;;&quot; line near the top so for some reason it was always showing Monday my end, may just be that I'm running it on Windows at the moment for testing until I'm happy with it. </p><p>I did manage to correct that by changing that line to: </p><p>Date now = new Date();<br>SimpleDateFormat dateFormat = new SimpleDateFormat(&quot;EEEE&quot;);<br>String D = dateFormat.format(now);</p><p>For the date suffix I managed to come up with this, it's probably not the best method as I'm new to it all but I cobbled that up and it seems to do the trick:</p><p> // Add suffux to days + display long date<br>if (day() == 1) {<br>text(day() + &quot;st &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() == 2) {<br>text(day() + &quot;nd &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() == 3) {<br>text(day() + &quot;rd &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() &gt;= 4 &amp;&amp; day() &lt; 21) {<br>text(day() + &quot;th &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() == 21) {<br>text(day() + &quot;st &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() == 22) {<br>text(day() + &quot;nd &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() == 23) {<br>text(day() + &quot;rd &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() &gt;= 24 &amp;&amp; day() &lt;= 30) {<br>text(day() + &quot;th &quot; + M + &quot; &quot; + year(), 20, 200);<br>} else<br>if (day() == 31) {<br>text(day() + &quot;st &quot; + M + &quot; &quot; + year(), 20, 200);<br>}</p>
<p>Those all seem like very good ideas, let me know if you're able to get it working with Google Calendar I was going to attempt something similar in my next step. I'm thinking of developing a website for the mirror where multiple people can log in and set their upcoming events / reminders / location. </p><p>I think The PIR sensor is a good idea but you might want to think about leaving the monitor on too and just having the PIR sensor bring it out of sleep mode. That way you will avoid seeing the boot up screens for the monitor whenever you walk past and it will instead just light up the default program.</p><p>You're Welcome to put it up on Github as long as you attribute me in there somewhere haha, Cheers. Goodluck with the project.</p>
Ok thanks Carl that's great and of course I'll post a link here for you as well if/when I do. I'm quite pleased with how it's coming along, I'm not a great coder and only have intermediate knowledge of HTML/PHP/CSS and never worked with Java so I'm a bit over my head but hopefully I can get it running. I might separate some settings like the resolution and weather settings into a separate file for other users as well if I can work out how to lol.<br><br>I've also managed to add a suffix to the date, I don't believe you use it much in the USA but in the UK we often have &quot;1st&quot; &quot;2nd&quot; &quot;3rd&quot; etc after the date. Found a nice font as well, 'Roboto Light' looks good, not sure how it will look through the mirror at the moment though so might end up changing it to a heavier version.
<p>Thats looking really good man, nick work. Roboto is one of my favourite fonts for web Design, great choice haha I think I like the look of that more than helvetica. I live in NZ and we do use the suffix in the date I just forgot that detail in my code oops, thanks for pointing that out. </p><p>I have just started building a site with PHP that people can register and log into so they can easliy customise their settings for the mirror from there. PHP is still quite new to me too so its pretty ambitious at this stage. </p>
<p>Just working on the code at the moment, I've never worked with Java before but it's easier than I was expecting and I've made a few modifications already. Would you mind if I put it all up on Github or similar if I give you credit for the original project?</p>
<p>You have created a new monitor experience ...which is just awesome ...soon you would be famous</p>
<p>You have created a new monitor experience ...which is just awesome ...soon you would be famous</p>
<p>You have created a new monitor experience ...which is just awesome ...soon you would be famous</p>
<p>Bro youve given way to the new monitor experience ...son you would be famous bro</p>
<p>If you really wanted to get into it you could make a design that allows you to put the mirror in a resizeable window. You could also do something like they do with some makeup mirrors and make it on command magnify as well as reflect. Or, like rear-view mirrors on cars, it could reduce the view, or it could present a fish-eye panoramic view... You could put a sign on it that says &quot;Caution: objects in mirror are uglier than they appear...&quot; or more beautiful, or something...</p>
<p>I like the idea, as found in other instructables, of teaching and learning without buying or selling. The cost of it is the energy used in doing it yourself. Staying away from mass production avoids unnecessary pollution and allows for the possibility of unique and beautiful works of creation, and maybe art.</p><p>A letter I wrote to my son, daughter, and a friend&quot;<br><br><br>One of you is going to Algonquin College this fall to a school of design similar to this one in New Zealand. Another of you is planning something similar, perhaps with a different trajectory. I support this project as I have had the same idea for years. If you didn't want to use the 2-way mirror film you could do one with a built-in camera. That would allow the mirror function and also you could display photos or paintings or whatever else when not using the mirror function. You could even watch a movie! I think that idea conforms and improves on the first design with a similar spirit.<br><br><br>A thing I find wrong with the idea of design for mass production is, well, it's potential for massive production and pollution. No-one designs with reusability in mind. So the idea of making a general-purpose computer (Windows if you must) with the new capability of a being usable as a mirror is at least a halfway measure.<br><br></p>
<p>Hey I appreciate that comment thanks, I also disagree with mass-production unless their is a long-term plan for re-usability of the materials. I aim to use re-cycled parts for that reason :) I also like the idea of combining everyday products together too to save space and energy and I can say this design really does feel as though it could be used as a PC and a mirror.</p>
<p>Dude, I think it's the best Instructable! I like it very much, but i would add face and speech recognizing using Pi :)<br><br>You can be sure I'll buuild it when I got my own house :')<br><br>Thanks for the idea!</p>
<p style="margin-left: 20.0px;">I'm glad to provide some project inspiration, make sure to send some progress pics i'd love to check em out.</p>
<p>Also, if you are a linux users, the Intel computer on the stick is $60. $100 for the Windows version, but the monitor you use would require an HDMI port. On the plus side, it's all you would require.</p><p>https://www.amazon.com/Intel-Compute-STCK1A8LFC-Z3735F-Ubuntu/dp/B00W7KAABK/ref=sr_1_6?srs=9433327011&amp;ie=UTF8&amp;qid=1465567455&amp;sr=8-6&amp;keywords=intel+compute+stick</p>
<p>Carl,</p><p>Excellent project and excellent instructable. I've seen similar projects, but you made it simple enough (including the wifi and programming) that I might attempt it.</p><p><strong>Suggestion</strong>: I'm guessing, and it's a guess, that you'd get better results (better image transmission, a crisper image, and maybe even better reflectivity) if you mounted the LCD monitor screen surface physically closer to the reflective film.</p><p>The way you have it, it's kind of &quot;projecting&quot; on to the back of the film, rather than &quot;printing&quot; right on the surface. Because of the projection, there is some spreading of the light rays, decreasing the crispness etc. Additionally, there is probably some light bouncing around inside the cavity, which decreases the reflective effect.</p><p>So, if you had a way to get the monitor surface right up against the glass... No spreading, no bouncing...</p>
<p>Hey Rickster, I'm stoked you like the instructable I was aiming to keep my process as simple as possible so I'm glad it shows. Thanks for the suggestion I can see what you mean about the image 'projecting' onto the back of the film and will have a tinker to try get that crisper image. </p><p>I plan on trying out some different tint film to see what gets the best result, i'm using 20% at the moment but not completely satisfied with the light transmittance. As it is this version of my Mirror is still a Prototype there will be more features and Design considerations to come in the future.</p>
<p>Thanks. So would you recommend higher or lower. I have to buy big sheets so I'd trying to get it right the first time.</p>
can you sell1 to me?
<p>possibly in the future when I have a completed product version :)</p>
<p>Carl,</p><p>Excellent job. Funny, never knew a smart mirror could be &quot;sexy.&quot; </p>
<p>the sexiness is &quot;reflective&quot; of the build :P</p>
<p>I wish I had thought of that line first haha</p>
Elegant job, thanks! What a great use for used monitors in second hand stores all over the USA, where framed pictures can be had there also for very few dollars. It would be super to make a wall mounted version. Did you also make the floating planters in step 6?
<p>I did plan on making it wall-mounted to begin with but I decided I liked the adjustable base of the monitor, I think it would look great on a wall though. No I didn't make the planters sadly haha that was another piece of work in our Maker Culture exhibition.</p>
Your reflection in the mirror is pretty sexy if you ask me. 101/10
<p>hahaha thanks babe ;)</p>
<p>awesome mahn. Really creative.. looking forward to make it..</p>
<p>Thanks dude, let me know how your build goes and if there is anything I can do to help.</p>
Even though the price point is awesome, I would highly suggest starting out with two-way mirrored acrylic if you want your mirror to look better and last longer! It's a little more expensive (from somewhere like TAP plastics) but it's absolutely 100% worth it. Been making them for a few years ;) feel free to DM me on Twitter if you have questions. @nucleardreamer and http://www.oaklabs.is/
<p>Hey thanks heaps for the suggestion for two-way mirrored acrylic I honestly had no idea where to begin when choosing a tint for the glass. My mirror is still very young so it will be interesting to see how durable the tint is and whether it will fade out. </p>

About This Instructable

120,817views

1,594favorites

License:

Bio: I started making things at Victoria University in Design School while studying Industrial and Media Design. This degree has helped develop my creative ability in ... More »
More by Carl Gordon Media:Laptop Control Box Interactive Reflex Punching Bag $100 Smart Mirror Pi 
Add instructable to: