close-circle
Close
0%
0%

Reflectrum - Smart Mirror

A new smart mirror design.

Similar projects worth following
close
I made this smart mirror as a Christmas present for my girlfriend. I started to work on it right after Thanksgiving, and gave her the first iteration on Christmas. Then we spent three weeks together on a complete redesign. The second software iteration was ready by Valentines day, and the third was ready right after our anniversary, March 14th.

Now the mirror software works great and anyone can submit more apps on Github. The hardware is finished except for the hand built scroll wheel HCI (for now a Bluetooth keyboard works as a good substitute). Deploying a new mirror is straight forward with some scripts we wrote, and the entire design is open source.

You could make this mirror for around $150 of materials with tools found at a maker space.

At it's core this smart mirror is made out of observation glass, the guts of an Motorola Atrix Lapdock and a Raspberry Pi 3. The components are tied together with layers of laser cut wood and acrylic. We've finished 8 sample mirror apps and have many more apps planned related to smart routines and taking selfies.

More Videos

Features

  • WiFi
  • Bluetooth
  • 11.6in and 27in screens supported
  • Microphone
  • Speakers
  • App Support and Menus
  • Purpose-Built Event Handling Library
  • Single Command Deployment Script
  • Persistent Settings
  • A consistent code pattern so that you can learn how to make your apps.

Mirror Apps

Shipped

  • Lockscreen App
  • Wall Clock App
  • Favorite Quotes App
  • Tetris App
  • Goodmorning! App
  • Map Wallpaper App
  • Screensaver Mode

In Progress

  • Google Calendar App
  • Weather App
  • Morning Outlook

Planned

  • Selfie Everyday App (and find a way to integrate it with the Everyday iOS app?)
  • Routine App with Todoist integration
    • Oral-B bluetooth toothbrush integration to mark todo as done
    • Amphiro b1 bluetooth shower water usage integration to mark todo as done
    • Fitbit integration to mark todo as done
    • (stretch goal) Sense by Hello integration to mark todo as done
  • Bay Area Commute App (Public Transit and Drive Traffic Map).
  • IFTTT Maker Channel trigger

Dreamt (ideas I'm excited about, but time expensive to prototype)

  • Control the Mirror with the Amazon Echo.
  • Amazon Alexa built in.

Software

Front-end is written in ES6 javascript with react (for view rendering) + redux (for state management) + electron (for full screen browser support).

The little amount of back-end we have is written in python with flask.

Firmware for the scroll wheel is written using the Arduino Wiring framework.

Hardware

A Raspberry Pi 3 running Raspbian Linux provides a full screen web browser for the mirror app.

The frame is made out of layers of MDF and feature a cavity to house the scroll wheel hardware.

There is also a layer of vinyl sticker applied to the back surface of the mirror to block light emitted by the electronics.

Credits

This open source project utilizes a lot of other amazing open source projects.

Javascript Tetris by Loktar

Javascript Clock by Martin Grand

This project takes inspiration from the other amazing mirror projects on the internet. Shouts out to Evan Cohan's smart-mirror project as it was the first one I saw and it's awesome.

Contributors

Michelle Chan

Chris Gervang

Joel Terry

  • 1 × Framed Two-Way Mirror
  • 1 × Motorola LapDock Taken apart, parts mounted in a framed 2-way mirror
  • 1 × Raspberry Pi 3 To get a low profile could solder off the tall ethernet and usb ports. Replaced with one or two shallow usb ports.
  • 1 × USB WiFi, USB Microphone USB Microphone for planned Amazon Alexa support. Optional WiFi in case the Raspberry Pi 3 built-in wifi isn't strong enough.
  • 1 × Vinyl sticker light seal Cut out a hole for the screen from a large sheet of vinyl sticker. It's applied to the back of the mirror like a giant phone screen protector. It prevents light leaking through the mirror from the electronics.

View all 10 components

  • Progress: 2nd Iteration - Software

    Chris Gervang04/20/2016 at 05:08 0 comments

    Just after christmas Michelle joined the project. This iteration of the mirror was all about adding software she could use everyday to the hardware I gave her for Christmas. As a designer, she redid the UI, color palette, and visual design. As a developer, she made mirror apps. I focused on developing mirror apps as well, and I spent a considerable amount of time experimenting with different control interfaces for the mirror.

    In this post I'll focus on the software we created and the number of false starts I made towards a satisfying human control interface (hereon written as HCI).

    The code for iteration is in the 'legacy' branch, and release 0.5 is the final working version before starting the 3rd iteration.

    Our lego prototype of the HCI (from the video above) was way too large, but the concept of a clickable scroll wheel similar to the digital crown on the Apple Watch stuck around.

    A scroll wheel was only one among many approaches we've considered. The 1st iteration of the mirror was designed with a scroll action and a separate 'mode' button that could handle a click and click-hold action.

    Ideas for implementing this ranged from capacitive and resistive touch button and panels, voice control, thin linear potentiometers, scroll wheels from a mouse, leap motion, basically anything that could scroll and do a single click.

    The first approach prototyped was this flat linear potentiometer and a button. I found the result disappointing because the resolution of the potentiometer and my microcontroller wasn't high enough, and it was hard to reason about edge cases.

    The lego scroll wheel from the video was actually the second prototype, coming after the flat potentiometer. It uncovered a key insight by combining the scroll action and button action into the same device.

    The design was a technic bar on a pivot with gears adjacent to each other along the side, a large lego wheel spinning the gears, a rotary encoder, and a push button that was hit when pressing the wheel. I don't have a good picture unfortunately and gave up on the idea after a night of trials.

    Also considered was voice control and touch control. I've used voice control on my past home automation projects, like Clyde, and found the experience overall lacking for me personally. I don't particularly enjoy uttering out loud at a machine every time I need to interact, and quality/accuracy/latency will suck unless you're really kick ass like Amazon and their Echo.

    Touch control remains an option to look into. The mirror at the time of writing doesn't have any touch components, though I have gathered Alibaba quotes for some of the required parts. For example, I could construct a touch screen mirror three layers:

    27" Glass Touch Panel on top of Observation Glass on top of a high brightness LCD display module would do the trick.

    The devils in the details, so in the end discovered rotary encoders with integrated buttons. These looked most promising and come in all sorts of sizes!

    Software

    Merry Christmas!

    The software for this iteration was written with JQuery and Python Flask - trying to keep it simple while getting a hang of what the features would feel like.

    We built a menu!

    And a favorite quotes page!

    And a weather page!

    And a friend of ours, Joel Terry, developed a Google Calendar page!

    Once valentine's day came around these pages were ready to go, but some features like nested menus and smooth page loading were missing and it will require a full rewrite to get these and few more features into the mirror.

  • Progress: 1st Iteration - Hardware Build

    Chris Gervang04/11/2016 at 06:54 0 comments

    I soon settled on a electronics enclosure design made of laser cut acrylic. Here I'm figuring out how I'll fit all of the components together on a single sheet; marking the frame clearance (purple ink). It's designed to fit a Raspberry Pi B and A at this point because I may use either in the end.

    I made the back plate and the first frame layer first. Mechanical drawings for these are in github.

    At this point the frame has a modular design so that I can mess with how wires come into the mirror. Here I'm testing clearances of an acrylic snap-fit design.

    Laser cutting a bunch of border pieces.

    It takes 5 layers of 1/8" acrylic to clear the top of the components inside.

    All together, it's about as heavy as a Macbook Pro Retina.


    I got a good amount of footage of how the heat set inserts are used to screw the electronics onto the mirror, and you'll see that I didn't rely on CAD drawings for everything. A sharpie was good enough to play with different layouts.

    Jump forward to Christmas Eve when I put it all together for the first time!

    The mirror lives! It's battery powered - no wires no worries.


    After all the electronics were in working order I built the enclosure and sealed the mirror for delivery.

    Meanwhile, the plot thickens as Michelle collects clues closer to Christmas...

    It might have a scroll wheel, a keyboard, is something she can view, has a raspberry pi in it, and she'll see pretty things when she looks at it...

    Can you guess what it might be?!


  • Progress: 1st Iteration - Hardware Prototype

    Chris Gervang04/07/2016 at 08:20 0 comments

    In this post I'll walk through the first month of the project where I produced the first shippable version of the mirror (delivered on Christmas). Early on I had a lot of unanswered questions and work to do.

    I choose my trusted Raspberry Pi and a Motorola Atrix as the core components in the mirror's computer.

    This setup can run a Github Electron environment, which is used to run the mirror application I'm making.

    Inside the Motorola Atrix is a battery, 2 speakers, a Hall sensor (to cut power on screen close), a battery level indicator, and the main logic board that contains the HDMI display driver, USB hub, and power electronics.

    I setup my heat gun and some tools to take the LapDock apart. Most of the deconstruction can be done with a philips screwdriver, and a flat tool to pry apart some plastic. The one interesting part is removing the screen bevel, which requires the heat gun.

    It took about 30 minutes to take apart my 2nd LapDock. But you can watch time fly!

    The guts laid out of my 1st LapDock. This Lapdock wasn't working, and I was probing it with the multimeter for life.. it seems the main board is just broken.

    I swapped out the broken parts and prepared to turn the Raspberry Pi on.

    It works! Notice the mirror appears transparent because more light is coming through the mirror than is coming at it from the camera's point of view.

    From the other side the mirror opaque, and the backlight on the screen is visible.

    The first idea I had for the custom HCI was a potentiometer. The mirror is not a touch screen, so I need to make some kind of interface to control the mirror application. My original thought was to use a membrane linear potentiometer for scrolling, so I prototyped with a basic pot while the fancy one was in the mail. I also proved that I could use the Arduino USB Keyboard library to interface my website application in Electron with the hardware. The arduino triggers arrow key presses. Simple system integration!

    I sent this Snapchat to Michelle... she had no idea what this was :)

  • The Idea

    Chris Gervang01/24/2016 at 08:41 0 comments

    Nearing Christmas Time

    Christmas time was approaching, which meant it was time to think about gifts.

    Well, Michelle is on top of her habits, loves to learn, loves beautiful design, appreciates thoughtfulness, likes sports, and adventures. Hmm...

    Nothing came to me over Halloween weekend, so I put the gift hunt aside for a few weeks to cook.

    Remembering the Smart Mirror

    A bit before Halloween she showed me this cool smart mirror project made by Evan Cohen [1]. Well aware of my maker habits, she said "can you make me one, please please please? Make me one!" I said I'd think about it.

    It was mid-november when I thought of the mirror idea again while cleaning up my electronics. I was puzzled at first and then...

    I Saw the Light!

    I could totally build a smart mirror. All I would have to do is combine my PiDock with a 2-way mirror and a bunch of laser-cut parts to make a frame!

    My focus was set: I'd create an experience so that helps Michelle get ready in the morning and gives her information at a glance whenever she's in her room.

    Well, there I was. I had the idea, a bunch of parts, and a bit of confidence that I could figure this out.

    Read more »

  • UI Design

    Chris Gervang01/05/2016 at 21:25 0 comments

    The Design

    Before Michelle joined the project I focused on the information architecture. I tried to make an experience that Michelle would like a lot. Starting simple, I gave it a morning routine, a splash of Tetris, a bunch of quotes that she liked, and a clean font.

    My initial design

    It looked good enough and now I knew enough to kept moving forward with the UX and hardware.

    Thinking it was a good idea to keep moving and there was a chance Michelle had some tweaks, I settled for a rough design.

    By Christmas Eve the hardware was in a good spot. Yay!

    But I barely started the software..

    Crunch Time

    By Christmas dinner it became clear I delayed long enough, so I gave it to her unfinished with a Tetris opener.

    [insert the christmas card] - Tetris!

    "Wow, you've put a lot of thought into this!"

    I was showing her all of the UI designs, CAD drawings, fabrication timelapses, and inspirations for it. To my surprise she didn't mind at all that it was unfinished!

    The Redesign

    Then the coolest thing happened. She took to her laptop and in one day completely redesigned the UI.

    "If this is something I'm going to use everyday, then it's got to look good," she said.
    "Good point," I replied.
    Michelle's Design

    Not too shabby ;)

    Her contributions are pretty awesome and unexpected. Michelle and I have been working together on projects for some time now, and she really got into this one!

View all 5 project logs

Enjoy this project?

Share

Discussions

taonylu wrote 05/12/2016 at 14:23 point

Hello, I downloaded your code. And now it worked in my PC. see a photo, https://flic.kr/p/GWXBTS .

  Are you sure? yes | no

Chris Gervang wrote 05/16/2016 at 23:40 point

Awesome! Did you have any trouble setting it up? If you wanted to add something to the software, what would it be?

  Are you sure? yes | no

taonylu wrote 05/17/2016 at 09:39 point

^.~  I met some troubles first. It costs me about 4 hours to make it work. I am trying to redesign a part of your software. ^.~  I want to turn your Python part to node.js .

And I have a thought to control it by hand gestures. 

Your design looks much better! 

  Are you sure? yes | no

Chris Gervang wrote 05/23/2016 at 22:38 point

Oh awesome! That is something I wanted to do as well. In particular I wanted to get Google calendar OAuth to be happening in node.js instead of python and then it would be little work to port the rest of the backend over to node.js. LMK if you want help, and I'll take a look at any PR you send my way on Github.

  Are you sure? yes | no

Kevin wrote 05/05/2016 at 00:50 point

Interesting project. To add a touch screen the best approach would be to go the surface acoustic wave route. I did a quick search for DIY touch screens and found another HAD project that you should look at which may allow you to add a touchscreen interface. The project is http://hackaday.com/2012/05/08/replicating-the-fancy-touch-sensor-that-uses-anything/

  Are you sure? yes | no

Chris Gervang wrote 05/05/2016 at 18:08 point

That's really cool! Does the surface need to be conductive? I wonder if the mirror acrylic has a low resistance since I'm guessing they've got metal in them, or if there's a film we can get that is transparent and conductive.

  Are you sure? yes | no

Kevin wrote 05/10/2016 at 16:07 point

The surface would not need to be conductive for capacitive or SAW based touch screens. A resistive based touch screen would require an overlay on top of the glass.

  Are you sure? yes | no

ngkenneth wrote 04/11/2016 at 08:56 point

Nice work for your hack, I like the design especially the morning Quote.  Nice job Michelle!           

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates