Difference between revisions of "Tech Reflect"

From ESE205 Wiki
Jump to: navigation, search
m
m (Protected "Tech Reflect" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
 
(47 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
 
==Overview==  
 
==Overview==  
Everyone is a little vain. Whether you’re shaving, brushing your hair, or taking a quick peek at yourself for self-admiration, it would be incredible to save some time and see your calendar or the stock market without having to look at your phone. Get ready, get informed, that is the beauty of a smart mirror. Our objective is to create a mirror that can be programmed to display a variety of different information. We are hoping to connect this smart mirror with a phone or website so you can customize your preferences easily and efficiently.
+
Everyone is a little vain. Whether you’re shaving, brushing your hair, or taking a quick peek at yourself for self-admiration, it would be incredible to save some time and see your calendar or the stock market without having to look at your phone. Get ready, get informed, that is the beauty of a smart mirror. Our objective is to create a mirror that can be programmed to display a variety of different information. We are hoping to connect this smart mirror with a phone/website so you can customize your preferences easily and efficiently.
 
 
=Objectives=
 
 
 
  
 +
==Objectives==
 
Our objective for this project is to create a mirror than can be used as any other mirror but is also able to seamlessly display information. The information we intend to be put on display includes the time, the weather forecast for the day or week, stock information, and a calendar of the user's day. The weather forecast would need to be pulled from the internet so creating a connection between the display and the internet is necessary. Another objective is to make the mirror display controllable from an iPhone. We intend to achieve this phone-to-display connection by using a remote desktop controller that would allow a user to control the interface of the mirror display from a phone.
 
Our objective for this project is to create a mirror than can be used as any other mirror but is also able to seamlessly display information. The information we intend to be put on display includes the time, the weather forecast for the day or week, stock information, and a calendar of the user's day. The weather forecast would need to be pulled from the internet so creating a connection between the display and the internet is necessary. Another objective is to make the mirror display controllable from an iPhone. We intend to achieve this phone-to-display connection by using a remote desktop controller that would allow a user to control the interface of the mirror display from a phone.
  
 
== Team Members ==
 
== Team Members ==
#Sam Kramer
+
*Sam Kramer
#Andreas Larsen
+
*Andreas Larsen
#Alex Blustein
+
*Alex Blustein
 +
*Kjartan Brownell (TA)
  
 
== Budget ==
 
== Budget ==
Line 23: Line 23:
  
  
==Initial Design Sketches==
+
==Design==
[[File:Front sketch.png|thumbnail|left]]
+
[[File:Dre.jpg|600px|frameless]] [[File:Wood.JPG|thumbnail|left]]
[[File:Back1.png|thumbnail|center]]
+
 
  
  
Line 44: Line 44:
 
== Gantt Chart ==
 
== Gantt Chart ==
  
[ [File:GanttTwo.PNG|thumbnail|left] ]
+
[[File:Ganttneww.jpg|1000px|frameless|center]]
 +
 
 +
== Design + Solutions ==
 +
===Weather, Calendar, News===
 +
{| class="wikitable"
 +
|-
 +
! Module 1: Weather !! Module 2: Calendar !! Module 3: News
 +
|-
 +
|
 +
[[File:Weather.JPG|thumbnail]]
 +
||
 +
[[File:Hey.png|thumbnail]]
 +
||
 +
[[File:News.JPG|thumbnail]]
 +
|-
 +
| For our weather module, we used the Dark Sky Forecast API (https://darksky.net/dev/) to give us the most up to date weather for display. We "called" the API in our code and "requested" the current weather and the temperature readout with various icons pertinent to the actual weather forecast. Our program contains an array of graphic icons (sunny, cloudy, partly cloudy, rainy etc). We set our program to resend a request every minute so the weather updates quickly and when the location changes.  || Our calendar module was more complex and required more setup than the weather module. This is because it is a lot more difficult to set up a personalized API (connecting to a specific gmail account) than it is a general site. In order to set up the google calendar api, we had to do a fair amount of reading online. We have condensed these directions into a HowTo (see below). The Google Calendar API pulls information in real time from whichever google calendar you set up your JSON data file.  || To create the news feed, we used the Google Feed API which uses an RSS (Rich Site Summary) to pull current information from major headlines regularly. Our program makes a request for the Google Feed API to grab headlines from an array of news urls (NYtimes.com, Washingtonpost.com, LATimes.com, Foxnews.com). When displaying each news headline using the Tkinter GUI we added a newspaper graphic icon to separate headlines.
 +
 
 +
|}
 +
 
 +
===Configuring the Raspberry Pi===
 +
After reading multiple online instructions and watching numerous YouTube videos, we finally set up our raspberry pi (in only 2 hours!). This process can and should only take around 30 minutes; however, the videos and instructions online are so technical and complex that I was unable to figure it out. Therefore, we have written our own instructions below!
 +
 
 +
==How to Set Up and Configure a Raspberry Pi==
 +
{|
 +
|-
 +
! 1. What You Need !! Hardware Diagram !! 2. Setting Up Hardware
 +
|-
 +
| [[File:Nee.png|300px|frameless|right]] || [[File:Dia.png|frameless]] || <small>1. Position you raspberry pi like the diagram with the raspberry pi symbol facing up.
 +
2. Begin by placing your SD card into the SD card slot on the Raspberry Pi as shown on the left side of the diagram above. It will only fit one way.
 +
 
 +
3. Next, plug your keyboard and mouse into the USB ports on the right side of the Raspberry Pi.
 +
 
 +
4. Make sure that your monitor or TV is turned on, and that you have selected the right input (e.g. HDMI 1).
 +
 
 +
5. Connect your HDMI cable from your Raspberry Pi to your monitor or TV, as shown by the red cable in the diagram.
 +
 
 +
6. Now connect the micro USB power supply (to the left of the HDMI cable). This action will turn on and boot your Raspberry Pi. If done correctly, the green LED on the Raspberry Pi should blink.
 +
 
 +
7. You will be prompted to create a username and password. Type in any username and password you would like.
 +
 
 +
8. The Raspberry Pi will then boot and you should see a computer desktop on the monitor with the raspberry pi symbol as the background.</small>
 +
|}
 +
 
 +
{|
 +
 
 +
|-
 +
| 3. <big>Loading With Raspbian</big>
 +
 +
The cheapest way to get Raspbian is to download it on to a Micro-SD card. This requires that you have access to another computer.
 +
 
 +
    <small>1. Insert the SD card into either the built in SD card reader or a USB card reader.
 +
    2. Go to the Raspberry Pi Downloads page ([https://www.raspberrypi.org/downloads/ click this link)].
 +
    3. Select the tab RASPBIAN.
 +
    4. Select the Download Zip option.
 +
    5. Save to your desktop and open the folder.
 +
    6. Drag all the files in the RASPBIAN folder into the SD card drive which should be on your desktop as well.
 +
    7. Remove the SD card and insert it into your Raspberry Pi.</small>
 +
 
 +
|-
 +
| <big>4. To connect to the internet, you can either:</big>
 +
 
 +
<small>A. Plug an Ethernet cable into the Ethernet port:
 +
    1.  The Raspberry Pi has an Ethernet port, together with the USB ports. Plug one side of the Ethernet cable into the Raspberry Pi and the other side into a router. Now the Raspberry Pi will automatically connect to the internet.</small>
 +
 
 +
<small>B. Connect a WiFi dongle to one of the USB ports:
 +
    1. Plug one Wifi dongle into the raspberry pi and another into your computer. You should now be able to access the wifi just like you would on a normal computer.
 +
    2. In the top right corner of the screen, you should see a wifi configuration symbol. Click on it and select your network.
 +
    3. You should now be connected to the network. If not, repeat steps B1-3.</small>
 +
 +
|}
 +
 
 +
==How To: Make Requests to the Google Calendar API==
 +
 
 +
1. Before you start, make sure you have the newest version of Python, a wifi connection, and a gmail account with google calendar:
 +
 
 +
[[File:List.jpg|500px|frameless|center]]
 +
 
 +
 
 +
2. Now, follow along as we show you how to enable the API: https://www.youtube.com/watch?v=z2qnm-VJ70E
 +
 
 +
3. Place your downloaded JSON file in your directory.
 +
 
 +
4. Now that you have enabled the API, copy and paste the following code in to terminal to install the Google Client Library:
 +
 
 +
                          '''pip install --upgrade google-api-python-client'''
 +
 
 +
5. To set up a sample request for 10 upcoming calendar events, create a file named "quickstart.py" in your working directory and copy in the following code from this pdf
 +
[[File:Google.pdf|frameless|left]]
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
6. To run your sample, run the following code in terminal:
 +
                        python quickstart.py
 +
7. A white window will pop up and you should now see your upcoming events!
 +
 
 +
==Results==
 +
Our objective was to create a mirror that displayed the weather forecast for the day or week, stock information, and a calendar of the user's day. We also wanted to make  the mirror display seamlessly controllable from an iPhone with a remote desktop controller. We were unable to create a seamless connection between an iPhone and the mirror display. We had success manipulating the display from an iPhone using the iOS version of VNC Viewer (the application used to access the remote desktop). Although there are ways to alter the module being displayed from an iPhone, this would require closing out of the module, and either changing code in a primary .py file, or accessing a separate premade .py file with the desired module changes. Neither of these options are viable for a user looking for effortless and non-complex functionality.
 +
 
 +
Assembling the frame was more complex than anticipated. We assumed that we would use planks of woods to place on top of the LCD to serve as both a securing mechanism and a way to eliminate light emanating from the screen. We decided to secure the LCD display screen that lays on top of the mirror with zip ties to a piece of wood that compresses the screen to the mirror. This piece of wood blocks all light coming from the screen. On top of this wooden panel sits all of the hardware such as the Raspberry Pi and power supply lines.
 +
The final layer is another piece of wood to cover all of the hardware with small cutouts to allow easy access to crucial hardware and our power supply chords (see photo in Design section).
 +
 
 +
The coding portion of the project proved more difficult than expected. We were not familiar with Python, so there was a steep initial learning curve. Coding the stock module was far more strenuous than anticipated, and ultimately we decided to create a news feed which proved to be a less complex process. We ran into an issue also while painting and assembling the frame. We were unaware that the acrylic on the two-way mirror was easily stripped and, as we were removing the blue tape placed on the mirror to protect it from the paint, it took off a few inches off the acrylic making a small portion of the mirror transparent (i.e. the back wood panel was visible).
 +
 
  
 
[[Category:Projects]]
 
[[Category:Projects]]
 
[[Category:Fall 2016 Projects]]
 
[[Category:Fall 2016 Projects]]

Latest revision as of 23:23, 14 December 2016

Overview

Everyone is a little vain. Whether you’re shaving, brushing your hair, or taking a quick peek at yourself for self-admiration, it would be incredible to save some time and see your calendar or the stock market without having to look at your phone. Get ready, get informed, that is the beauty of a smart mirror. Our objective is to create a mirror that can be programmed to display a variety of different information. We are hoping to connect this smart mirror with a phone/website so you can customize your preferences easily and efficiently.

Objectives

Our objective for this project is to create a mirror than can be used as any other mirror but is also able to seamlessly display information. The information we intend to be put on display includes the time, the weather forecast for the day or week, stock information, and a calendar of the user's day. The weather forecast would need to be pulled from the internet so creating a connection between the display and the internet is necessary. Another objective is to make the mirror display controllable from an iPhone. We intend to achieve this phone-to-display connection by using a remote desktop controller that would allow a user to control the interface of the mirror display from a phone.

Team Members

  • Sam Kramer
  • Andreas Larsen
  • Alex Blustein
  • Kjartan Brownell (TA)

Budget

  1. Raspberry Pi = $0 (Provided by Washington University)
  2. 10" LCD Display = $69.99 https://www.amazon.com/Resolution-1280x800-Raspberry-EJ101IA-01G-Rasbperry/dp/B00S4EWF6G/ref=sr_1_11?ie=UTF8&qid=1474384968&sr=8-11&keywords=lcd+screen)
  3. Power Supply - $6.59 (https://www.amazon.com/RockBirds-RB-1202-Switching-Supply-Adapter/dp/B00VM292AO/ref=pd_bxgy_147_img_2?ie=UTF8&psc=1&refRID=QH83QHMSQ472133SMD9P)
  4. 14in x 20in Two-Way Mirror- $46 + $12 shipping (http://www.tapplastics.com/product/plastics/cut_to_size_plastic/two_way_mirrored_acrylic/558)
  5. Black Electrical tape- $4.11 (https://amzn.com/B001B19JLS)
  6. Wood for frame- (http://www.homedepot.com/p/2-in-x-6-in-x-8-ft-2-and-Better-Kiln-Dried-Heat-Treated-Spruce-Pine-Fir-Lumber-161713/100037451)
  7. Wood glue- $3.47- http://www.homedepot.com/p/Liquid-Nails-10-oz-Extreme-Heavy-Duty-Adhesive-LN-907/205089262
  8. Wifi Dongle Adapter - $0


Design

Dre.jpg
Wood.JPG



______________________________________________________________________________________________________________________

Challenges

  • Software
    • Raspberry pi is pre-loaded with Python. Will have to learn language (codecademy, python.org).
    • We need to find a way to connect a smartphone to the raspberry pi. This could possibly be done by using a VNC, a graphical desktop sharing system that allows you to remotely control the desktop interface of one computer from another. Our LCD screen is only 10 inches so we are considering adding a feature which allows you to switch the "widgets" visible on the mirror. This will require further knowledge of python. Also once we have fastened the LCD to the back of the mirror (check hardware sketches), it will be useful to be able to access it from another device.
    • Connecting your phone to the smart mirror (to import calendar events, stock market, weather): we can do this with the wifi dongle which allows the raspberry pi to connect online. However, there are some security issues we need to address.
    • Cyber Security: We need to ensure that no data from your connected phone can be accessed by others. We need to make sure that there is no way for other systems to access the raspberry pi and this can most likely be done by using password protection. VNC's require a password to access the desktop so this will heighten the security. No matter the amount of security, however, people will be wary of sending personal information via wifi and so for our demo we will only be using our own devices. To access the raspberry pi, we just need one device with a VNC app and the access password. (Also, we will be using the wustl secure wifi connection for our project).
  • Hardware (Check sketches)
    • We need to be especially careful with our LCD screen and also our mirror as the screen's circuit board can easily be fried and the mirror is brittle. To ensure that our mirror/screen will not break during use, we are going to build a wooden frame/case and a stand for the mirror. The wooden frame/case secures the LCD screen on the back of the mirror by placing planks of wood along the back edges of the screen. The screen will not be able to be separated easily from the back of our mirror. For the sake of our demo, we plan on either 3D printing or building a stand for the mirror as to avoid the risk of hanging the mirror and having it drop.

Gantt Chart

Ganttneww.jpg

Design + Solutions

Weather, Calendar, News

Module 1: Weather Module 2: Calendar Module 3: News
Weather.JPG
Hey.png
News.JPG
For our weather module, we used the Dark Sky Forecast API (https://darksky.net/dev/) to give us the most up to date weather for display. We "called" the API in our code and "requested" the current weather and the temperature readout with various icons pertinent to the actual weather forecast. Our program contains an array of graphic icons (sunny, cloudy, partly cloudy, rainy etc). We set our program to resend a request every minute so the weather updates quickly and when the location changes. Our calendar module was more complex and required more setup than the weather module. This is because it is a lot more difficult to set up a personalized API (connecting to a specific gmail account) than it is a general site. In order to set up the google calendar api, we had to do a fair amount of reading online. We have condensed these directions into a HowTo (see below). The Google Calendar API pulls information in real time from whichever google calendar you set up your JSON data file. To create the news feed, we used the Google Feed API which uses an RSS (Rich Site Summary) to pull current information from major headlines regularly. Our program makes a request for the Google Feed API to grab headlines from an array of news urls (NYtimes.com, Washingtonpost.com, LATimes.com, Foxnews.com). When displaying each news headline using the Tkinter GUI we added a newspaper graphic icon to separate headlines.

Configuring the Raspberry Pi

After reading multiple online instructions and watching numerous YouTube videos, we finally set up our raspberry pi (in only 2 hours!). This process can and should only take around 30 minutes; however, the videos and instructions online are so technical and complex that I was unable to figure it out. Therefore, we have written our own instructions below!

How to Set Up and Configure a Raspberry Pi

1. What You Need Hardware Diagram 2. Setting Up Hardware
Nee.png
Dia.png 1. Position you raspberry pi like the diagram with the raspberry pi symbol facing up.

2. Begin by placing your SD card into the SD card slot on the Raspberry Pi as shown on the left side of the diagram above. It will only fit one way.

3. Next, plug your keyboard and mouse into the USB ports on the right side of the Raspberry Pi.

4. Make sure that your monitor or TV is turned on, and that you have selected the right input (e.g. HDMI 1).

5. Connect your HDMI cable from your Raspberry Pi to your monitor or TV, as shown by the red cable in the diagram.

6. Now connect the micro USB power supply (to the left of the HDMI cable). This action will turn on and boot your Raspberry Pi. If done correctly, the green LED on the Raspberry Pi should blink.

7. You will be prompted to create a username and password. Type in any username and password you would like.

8. The Raspberry Pi will then boot and you should see a computer desktop on the monitor with the raspberry pi symbol as the background.

3. Loading With Raspbian

The cheapest way to get Raspbian is to download it on to a Micro-SD card. This requires that you have access to another computer.

    1. Insert the SD card into either the built in SD card reader or a USB card reader. 
    2. Go to the Raspberry Pi Downloads page (click this link).
    3. Select the tab RASPBIAN.
    4. Select the Download Zip option.
    5. Save to your desktop and open the folder.
    6. Drag all the files in the RASPBIAN folder into the SD card drive which should be on your desktop as well. 
    7.	 Remove the SD card and insert it into your Raspberry Pi.
4. To connect to the internet, you can either:

A. Plug an Ethernet cable into the Ethernet port:

    1.  The Raspberry Pi has an Ethernet port, together with the USB ports. Plug one side of the Ethernet cable into the Raspberry Pi and the other side into a router. Now the Raspberry Pi will automatically connect to the internet. 

B. Connect a WiFi dongle to one of the USB ports:

    1.	 Plug one Wifi dongle into the raspberry pi and another into your computer. You should now be able to access the wifi just like you would on a normal computer.
    2. In the top right corner of the screen, you should see a wifi configuration symbol. Click on it and select your network. 
    3. You should now be connected to the network. If not, repeat steps B1-3. 

How To: Make Requests to the Google Calendar API

1. Before you start, make sure you have the newest version of Python, a wifi connection, and a gmail account with google calendar:

List.jpg


2. Now, follow along as we show you how to enable the API: https://www.youtube.com/watch?v=z2qnm-VJ70E

3. Place your downloaded JSON file in your directory.

4. Now that you have enabled the API, copy and paste the following code in to terminal to install the Google Client Library:

                         pip install --upgrade google-api-python-client

5. To set up a sample request for 10 upcoming calendar events, create a file named "quickstart.py" in your working directory and copy in the following code from this pdf

Google.pdf















6. To run your sample, run the following code in terminal:

                       python quickstart.py

7. A white window will pop up and you should now see your upcoming events!

Results

Our objective was to create a mirror that displayed the weather forecast for the day or week, stock information, and a calendar of the user's day. We also wanted to make the mirror display seamlessly controllable from an iPhone with a remote desktop controller. We were unable to create a seamless connection between an iPhone and the mirror display. We had success manipulating the display from an iPhone using the iOS version of VNC Viewer (the application used to access the remote desktop). Although there are ways to alter the module being displayed from an iPhone, this would require closing out of the module, and either changing code in a primary .py file, or accessing a separate premade .py file with the desired module changes. Neither of these options are viable for a user looking for effortless and non-complex functionality.

Assembling the frame was more complex than anticipated. We assumed that we would use planks of woods to place on top of the LCD to serve as both a securing mechanism and a way to eliminate light emanating from the screen. We decided to secure the LCD display screen that lays on top of the mirror with zip ties to a piece of wood that compresses the screen to the mirror. This piece of wood blocks all light coming from the screen. On top of this wooden panel sits all of the hardware such as the Raspberry Pi and power supply lines. The final layer is another piece of wood to cover all of the hardware with small cutouts to allow easy access to crucial hardware and our power supply chords (see photo in Design section).

The coding portion of the project proved more difficult than expected. We were not familiar with Python, so there was a steep initial learning curve. Coding the stock module was far more strenuous than anticipated, and ultimately we decided to create a news feed which proved to be a less complex process. We ran into an issue also while painting and assembling the frame. We were unaware that the acrylic on the two-way mirror was easily stripped and, as we were removing the blue tape placed on the mirror to protect it from the paint, it took off a few inches off the acrylic making a small portion of the mirror transparent (i.e. the back wood panel was visible).