What’s in a name?
e-Scape is an electronic landscape (e-Scape) that is used to share ideas and post questions in resting areas, cafes and lounges. It provides a mental escape to the users of the space from their regular work. Thus the name e-Scape.
Outcome
People around the campus can upload pictures in the form of questions through a web interface. Questions from around the campus are queued up and displayed on screens around the campus. The screen will be along with a whiteboard on which people can respond to questions. A camera takes a picture of the response when the eraser is picked up to erase the response. The image is taken and uploaded to google drive with the name renamed to match the question. The user can then see responses to his question on the web interface which pulls these images from google drive.
When there are no more images for the day, the screen would display inspirational pictures or puzzles from a database maintained by the administrator.
Components of the System
Slideshow Website
Function:
The questions posted by users are displayed on a webpage that flips through pictures after a set duration. If questions are not posted for the day or there is unused time during the day, the website pulls up puzzles from an admin folder. The webpage also sends the name of the image it is displaying onto the google spreadsheet.
The web-page has three main components:
1. The web page
2. An admin folder to store images of puzzles
3. A Questions subfolder under the admin folder to store uploaded question images
Hosting:
The slideshow website must be hosted on a domain during the actual realization. For the prototype, the website was hosted locally using python:
1. Use ‘cd <folder path>’ to change to root folder
2. Host server using the command ‘$ python -m SimpleHTTPServer’
Sending image name to google drive:
To send the name of the currently displayed image, a small hack is required. A google form is created which will accept values of the name of the image and auto submit it to the spreadsheet.
The website updates the name to the form and auto submit by using the URL:
"https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXX/formResponse",{"entry.XXXXXXXXXX":"Day"+day+"Question"+num,"submit":"Submit"
Refer to the Google Drive Spreadsheet and Form section for more details.
Website code:
webpage.zip
6.459 MB · Download / View
Google Drive Spreadsheet and Form
Function:
The google spreadsheet watches for if the eraser is picked up to erase a response and takes a picture and uploads it with the same name as the question to google drive where it can be retrieved by a user page. The three functions that it performs are:
1. Watches if the erase is picked up by monitoring the cloud variable on the spark
2. Takes a picture of the response written by the user using the ip camera through URL requests
3. Renames the image of the response as DayXQuestionY, X and Y being the respective day and question number
Access the sample spreadsheet at:
https://docs.google.com/spreadsheets/d/1Rq_1--_YCon2Gn9fW9BpUOB9iHOSDIrTzeDfoSXs0s4/edit?usp=sharing
Google script:
The functions of the google spreadsheet are driven by a google script. Go to Tools>Script Editor to access the script.
Google form:
The google form is used to create a gateway to send the file name from the website. A small hack is required to automatically enter the name into the form and auto submit it.
1. A google form with a single question to enter image name was created.
2. Open the form (Form->Go to life form).
3. Now look in the form HTML source for the section form action which looks like this:
<form action="https://docs.google.com/spreadsheet/formResponse?hl=en_US&formkey=dFRjT0hwYXNXbVRfUU9KN1hDSkk3MlE6MQ&ifq" method="POST" id="ss-form">
and copy the form key (dFRjT0hwYXNXbVRfUU9KN1hDSkk3MlE6MQ) and replace into the first section with Xs in the URL used in the website.
4. Now go back to the form source identify the single question you made:
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0">
note the name: entry.0.single
and enter this into the second section with Xs in the URL used in the website.
Access the sample form at:
https://docs.google.com/forms/d/1gUieu8gKETbYZgXXhxkxiNip_zUE5euqqs0rm1oHib4/edit?usp=sharing
Camera
Function:
The camera takes pictures of the whiteboard through URL requests. The camera could be any ip based camera that can be accessed from a certain ip address. This project uses an iphone app called ipCam - Mobile IP Camera by SKJM, LLC.
The User Interface
Function:
The user interface is a web page that users of e-Scape would interact with to:
1. Upload questions
2. See answers to their questions and other questions
Opening Page:
You can upload files of up to 20MB using this form.