My Internet Of Things (IOT) Mirror Project

IOT_Mirrorv2

My Internet Of Things (IOT) Mirror Project
Before I decide to embark on this project, I bought a Raspberry Pi. The Raspberry Pi is a tiny and affordable computer that you can use to learn programming through fun, practical projects. The Raspberry Pi cost $70 and is about the size of a Hard Drive. Click here for specs.

I wanted to do something cool with the Raspberry Pi. I searched and looked at all the cool projects that other people had done. When I saw the IOT projects I knew it would make a great project and a perfect present for Michelle.

I decided to try make an IOT mirror.

It required 3 main elements. A monitor, some two way mirror plastic or glass and a Raspberry Pi. I already had the Raspberry Pi, so began searching for the other two elements.

I needed to get the monitor first so I knew what size two way mirror I wanted. I had to find a monitor that had a hdmi port in the back pointing down. This would allow me to hide the cables inside the case.I settled on a BENQ – GW2270H 21.5” LED Monitor ($168.00).

Next was the two-way mirror. The cheapest option would have been to by two-way mirror film and place it on top of the monitor. But discussions online recommended that unless you knew how to apply film to something you should find glass all plastic with it already applied. As it was a present I went for the expensive option. I bought Mirrored Acrylic Two-Way cut to size from TAP Plastics in California USA. Had rave reviews and you could get it cut to the exact size.

My father is a handy man who can build and do almost anything. I took everything over to his house to get his opinion on the building the case and everything else. My father got super excited about the idea and offered his help. I decided the best thing to do was play to our strengths. I would handle programming the Raspberry Pi and setting up a display, while my father created the case to hold all the components.

Programming the Raspberry Pi was straight forward. I bought an sd card and download the latest NOOB software onto it. Then it was just a matter of inserting the card into the Raspberry Pi and booting it up. With a couple of clicks it was installed and I had a full blown mini computer working. It was then a matter of changing the bootup config to do the following:

  1. Rotate the screen ( Monitor is actually on it’s side)
  2. Hide the mouse
  3. Connect to the WiFi network for internet
  4. Open Chromium ( It’s a Browser like chrome)
  5. Make Chromium open up to a website that is the display

Step 2 was creating the website display. I had two options to install apache on the Raspberry Pi and host the website page locally, Or create the website page on an external website. I choose the second option and hosted it on my own website lloydmcallister.com.au. It meant if I ever wanted to edit or add anything in the future I could easily without having to touch the Raspberry Pi or the Mirror.

The two way mirror glass works by reflecting light when the object behind it is dark. So I started off with a web page was black. I then separated it into 3 sections date/time, weather and messages. I used css to position them all in the right location in the screen. I then used javascript to insert the html I wanted into the 3 sections defined by divs.

I started off with the easiest section which was messages. I created Messages.js that would get the day of the week represented as 0-6 and then decide which of the 7 messages to insert into the Messages Div.

Now onto the date and time section. Again I used the date function in javascript to get and display the date. I also used the time function to get the time. Because time changes every second I added a refresh function to update the time/date every second.

Finally I did the weather section. I looked on the internet and found https://openweathermap.org/api. I signed up for a free api key. The key would allow me to call the api 60 times every minute which is way more than I need. With the key I used JQuery.Ajax() to call the api and grab the latest weather information for Sydney. The API returns all the information as a JSON. I used google chrome to inspect it and work out which information I would grab. I then inserted this information into the weather divs.

It wouldn’t be complete without weather pictures. So I created my own white images for cloud, sun, rain, snow etc. I then used javascript to work out what image should be displayed.

I then put it all together and booted up the Raspberry Pi. It booted up, rotated the screen, hid the mouse, opened chromium and hit my website. Seeing the page display was a very satisfying moment. I headed back to meet up with my dad who had finished making the beautiful case.

We put all the parts together. It looked amazing and Michelle said it was the best gift ever. Now just got to come up with my next IT project.

 

One comment on “My Internet Of Things (IOT) Mirror Project

Leave a Reply

Your email address will not be published. Required fields are marked *