SmartDoor™
A portal to the future.

Overview

SmartDoor™ is a simulation of the main door of a house having touch panels on either sides (like a large 4K thin-border LCD TV on both sides of the door). It is assumed that the door has internet connectivity, combined with speakers, cameras and microphones on either sides of the door. At some point in the future, we see form factors like these to become mainstream and every other device is interconnected, forming the Internet of Things.

A screenshot of the inside and outside of the door.

The design is inspired by Apple's iOS design guidelines. Throughout our design, we have used two variants of the Helvetica font family - Light and Regular. The icons are 120 X 120 pixels, with a radius of 21 pixels. The colors for the icons are bright and vibrant for the brilliant 4K display, which would make a visual treat. The images inside the icon are white in color, which complement the vibrant colors around them. This makes the icon easy to spot visually, and it allows for quick accessing of the applications.

Source code and Installation

  • 1. Click here to download the source code which contains the HTML, CSS, JS and the media files.
  • 2. Install WAMP/XAMPP to use as the local server for running the application in the local system.
  • 3. Copy the source code folder into C:\wamp\www or C:\xampp\htdocs\ folder which makes the application accessible from the local server setup by WAMP/XAMPP.
  • 4. The source code folder pasted can be tested by opening it on localhost in your browser.

Softwares/libraries used:

  • 1. HTML, CSS and Javascript - The regular stuff we use to make awesome web applications.
  • 2. Fabric.js - A powerful Javascript library that makes working with HTML5 canvas a breeze.
  • 3. The Noun Project - For a few icons in SVG format that we customized.
  • 4. ResponsiveVoice.js - For TTS feedback.
  • 5. Annyang.js - For voice recognition.
  • 6. OpenWeatherMap API - For real time weather data.
  • 7. Yandex API - For real time translation from English to other languages.
  • 8. NYTimes Top Stories API - For real time news.
  • 9. Sketch - The #1 tool for UI and Wireframing.
  • 10. Brackets - Code editor.
  • 11. Wallhaven.cc - For those stunning, high-res theme and gallery images.

Features

1. Emergency

The emergency app is a built in app that is used to call 911 for emergency. It has three different options - Fire, Police and Medical for different emergency types as different countries use different numbers for various kinds of emergencies.

2. Alarm

The alarm app is connected to the house alarm. If the door is tampered in any way, the alarm goes off. The user can choose to keep the alarm turned on (Which is the default option) or turn it off. If it is turned off, a small indication appears on the main menu screen to show that the alarm has been turned off and it needs to be turned on again.

3. Themes

The themes application allows the user to change the theme of the door. The user can choose among the following built-in themes: Birthday, Christmas, Halloween, Metal, Red, Sea, Stars and Wood. Both the inside and the outside of the door are customizable. Additional themes are available for download from the App Store.

4. Music

The music application allows the user to play music on the door. The user can choose among the following built-in music: Sugar by Maroon 5, Marvin Gaye ft. Meghan Trainor by Charlie Puth and Uptown Funk ft. Bruno Mars by Mark Ronson. Additional music is available for download via the App Store.

5. News

The news application allows the user to read the news on the door. It allows to get a glimpse of the top stories as you enter/exit the house. The news is obtained from the NYTimes Top Stories API for the best real time news. The top three news items are shown on the screen and the last updated time is shown on the bottom of the news screen.

6. Logs

The logs application is a built in application that allows the user to check who has opened the door with the timestamp. It is a security feature that helps the users keep track of all the people who have visited. It works with the people approaching the door and opening from outside via keypad or fingerprint scanner.

7. Settings

The settings application is a built in application that allows the user to change the various settings in the door. Language, Chime style, Date and time format, Temperature, Fingerprint and Passcode are some of the settings that are present. The main security features and access control are located here.

8. Do not disturb

The DND app can be used to set the door to a Do Not Disturb mode that lets people outside the door know that they must not disturb. The icons for the door bell and the package delivery are disabled and the users outside can only leave a text. The user can choose to keep the DND turned on (Which is the default option) or turn it off. If it is turned off, a small indication appears on the main menu screen to show that the alarm has been turned off and it needs to be turned on again.

9. Doodle

The doodle app can be used by kids and adults alike to run their imagination wild on the door. The user can draw doodles on the door can also clear the canvas using the eraser icon. The huge form factor allows the users to play with a lot of space and create art. It also encourages children to express their creative side.

10. ScreenCast

The ScreenCast app allows the users to broadcast their phone's screen to the door. This allows a part of the door to be used like the phone and touches on the app mimic touch actions on the phone. Thus, the users can make use of the huge form factor to view all their phone's apps on the door.

11. Gallery

The Gallery app has a set of in built images that can be viewed on the large screen. The user can connect his/her phone to the door and transfer their images to the door. This allows for viewing the images on the huge 4K display.

12. App Store

The App Store is a built in application that allows the users to install other optional applications that are provided by SmartDoor or by third party vendors. It can also be used to purchase additional themes and music. Applications that are currently installed on the door are also listed. Clicking on one of the apps provides the option to install it.

13. Maps

To help users plan their routes better, the Maps application provides a map on the large screen that allows the users to see multiple places at once. It also works using voice commands and shows the nearest restaurants, gas stations, etc. Is there a better way to plan your travel at the last minute than using the super sized display?

14. Lock/Unlock

The lock/unlock feature is a slider that allows the users to lock or unlock the door from inside. Touching the lock icon and sliding it to the left unlocks the door, while sliding the unlock icon to the right locks the door. Note: this does not automatically open or close the door. It mimics the actions of a dead bolt rather than a traditional digital slider element.

15. Door handle and accessibility

The door handle is a physical lever that allows the users to turn and open the door, just like a normal door handle. It contains a fingerprint sensor on both the inside and outside of the door. The accessibility icon is used to open the door by tapping on it. Double tapping brings all the icons down for wheelchair users to access the apps on the door.

16. Outsider actions

The icons on the outside of the door allow visitors to ring the bell, deliver a package or leave a message to the people inside. The chimes for the door bell and package delivery can be customized so that the users would distinctly know if they have a visitor or a package delivery.

16. Mirror

The door doubles up as a mirror on selecting the Mirror app. The front camera is used to display the same image that it sees so that it produces a mirror like effect. This feature is especially useful for those who need a large screen to get dressed up or make those final touch ups before you leave for work!

17. Voice Control

The door is smart door and listens to voice commands. It also gives a voice feedback when important actions are performed. The following commands in English work:

  • Smart Door Alarm ON
  • Smart Door Alarm OFF
  • Smart Door Play Music
  • Smart Door Unlock
  • Smart Door Lock

The following commands in Spanish work:

  • Smart Door alarma activada
  • Smart Door alarma de seguridad fuera
  • Smart Door reproducir musica
  • Smart Door Abierto
  • Smart Door Cerca

Team

Gautam Krishnan
Features: All icons, Designs, Aesthetics and Interactions
Sai Priya Jyothula
Features: Emergency, Alarm, Themes, Music, News, Settings
Sumanth Reddy Pandugula
Features: Logs, Door Lock, Accessibility Voice Recognition/Feedback
Vinit Amitabh Kumar
Features: Doodle, Messages, Outdoor Messages, ScreenCast, App Store

Demo