Shower The People

Technology is everywhere, what if we have a shower/bathtub system in which three surrounding walls are nothing but high resolution touch displays and the real cool thing is you can talk to your shower like you would talk to a normal person. This application is exactly for that setup and it is voice controlled/assistive, touch and supports multiple languages.

How to Use

Using Shower The People is easy and simple, when you click on the start button, the shower opens itself, shower head and bathspout pop open along with the controls for everything you need in a shower. Allow this application to use your microphone when prompted.
HTML5 Icon

iControl:The panel of controls can be dragged to any of the walls using the iControl.

Temperature:The temperature can be controlled by clicking on the "+" and "-" buttons present, if you try to increase the temperature beyond 42 C you get a voice feedback warning that says you will experience hot water.

Flow:Flow is either Off, Low or High

Water: You can direct the water to Shower or bathtub
HTML5 Icon

Spray Type: You can switch between different spray types like "Power Spray", Rain Sprey and "Water Saver"

Language: You can change the language from English to Spanish,Japanese and 8 other languages.
HTML5 Icon

Theme: Switch between different themes like Chicago Skyline, Chicago Night, Disney, Jelly Fish, Nature
HTML5 Icon

Drain Hole: You can either "Open" or "Close the Drain Hole

Users: You can switch between 3 users, save their preferences or update the preferences of guests

Music: You can Play/Pause the Music

News: You can listen to the news in two languages

TV: You can watch television in the shower/bath
HTML5 Icon

Voice: You can say commands like "Watch TV" , "News" and "Update" any time when you are in the shower its always listening.

Information: Needed information like Time, Date, City, Weather are provided. These are not interactive elements but the units of temperature can be changed between C and F.


Step 1: Download the code as zip from GitHub

Step 2: Download appropriate version of Brackets and install

Brackets is an open source code editor and NOT a malware

Step 3: Extract the Zip file downloaded from GitHub

Step 4: Right click on the extracted folder and selct Open as Brackets Project

Step 5: In the Brackets editor click on the Live Preview button on the top right

Step 6: Play Around

Softwares/libraries used:
1. fabric.js - A Javascript library to draw on canvas.
2. annyang - A Javascript library for voice recognition.
3. Buzz - A Javascript library that plays sound.
4. Responsive Voice - A Javascript library for text to speech
5. LESS CSS - A Javascript library to write efficient CSS.

Why this design?

-Shower is a place to relax and definitely has a purpose, eventhough the walls are high resolution displays,they are not meant for pure entertainment.
-It is hard inside the shower/bath to move around and be at a single position, this design facilitates for the user to drag the controls where ever necessary among the three walls of the shower.
-All the controls need to be at one place, it is not feasible to have the controls scattered everywhere and make the user move each and every time.
-When in shower or bath the visibility is low due to steam,soap etc, a voice controlled user interface facilitates for this purpose and also addresses the visually impaired users.
- Feedback for the changes made through alert messages and lights doesn't really help the user in shower/bath, a voice feedback can make things clear faster and easier.
-Minimal entertainment options like news, movies and music are supported in this design through both touch and voice.
-It is easy for the user to navigate to a button and touch it to change a setting assisted by voice feedback, is optimistic since there is voice feedback even if text is not visible due to steam.
-Preset Themes are easy and comfortable to toggle rather than wasting time on choosing one.
-Language is a barrier in many interfaces, in this case it is no more a barrier, you can choose text and audio in 10 different languages.
- Cultural limitations like colors do not exist.
-Non interactive information like date, weather, city are also provided just to keep the user informed.
-Preset Preferences save a ton of time for the expert users.


There were a number of sketches I came up with during the design of the shower but these are the ones that are pretty legible and worth sharing.

HTML5 Icon
HTML5 Icon