Touchscreen Kiosk

From Mindworks
Jump to navigation Jump to search

TouchStone's goal is to create an information portal at the college of engineering that students and visitors may use to experience information about the college. This portal should be interactive and even attract people to the college.

Concept art of Janssen Interactive Multimedia Module
Team Name TouchStone
Sponsor Dean Larry Stauffer
Faculty Advisor Bruce Bolden
Duration Fall 2015 - Spring 2016

Problem Description[edit]

The goal is to create an information kiosk for JEB that will offer all inclusive information on the college of engineering. This kiosk needs to demonstrate cutting edge technology to make the college of engineering stand out as a bastion for learning and technology. With consideration to the following we designed the Janssen Interactive Multimedia Module.

  1. Design an exciting and innovative medium for displaying our user interface.
  2. Design a user interface that is appealing both in usability and presentation.
  3. Create the display and integrate the user interface into it.
  4. Make it simple and create a guide for the content and interface to be easily edited by anyone for the coming years.

Display Design[edit]

In this task we considered several options from a simple 40" touchscreen to virtual reality. We decided that the technology in virtual reality was not quite complete enough yet and a 40" touchscreen was too small and didn't deliver enough of a "WOW" factor. Instead we settled on something we think will match the aesthetic of the Think Tank which is just around the corner from the hallway where our display will be placed.

The design we chose is to project our UI onto a large glass pane from behind. This will give the illusion of the glass being the object displaying the UI much like what is seen in many sci-fi films. In order to make this display interactive, we need to implement a way to interact with it. For this we will be using Ubi Interactive which uses a short throw camera and a laser sensor to read touch events on the displayed surface. With this hardware we can detect up to 20 touch points, allowing for a maximum of 10 concurrent users.

This display will be placed on top of a wooden or metal kick box to keep users from accidentally kicking or shattering the glass. It will also serve as cover for concealing the projector, computer and any other cables from view.

Parts List[edit]

Projector Glass Rear-Projection Film
Casio XJ-UT310WN Tempered 3M Vikuiti Rear Projection Film
  • Ultra-Short Throw 0.27:1
  • LED/Lazer Hybrid lamp
  • 20,000 hr half life
  • 1280 x 800 resolution
  • 9.5' x 5.5' x 1/4"
  • Safer/tougher than normal glass
  • More scratch resistant than plexiglass
  • Ninja Gray Color
  • Optimal for indoor setting
Touch Interface Kick Box Computer
Ubi Interactive
  • Touchscreen interaction for any surface
  • 20 touchpoints
  • Easy to hide behind screen
  • Ultra-short throw camera

Display Design Concepts[edit]

Diagram of the setup: A rear facing projector will project onto a glass panel with a special film to capture the light. Using Ubi Interactive and its infrared sensor we will capture touch input on the display to effectively create a giant touchscreen.

An example of the display in use.

User Interface Design[edit]

The UI for this project needs to be a living UI, meaning it needs to move and display useful information while not in use. It also needs to be easy to understand and navigate for the user. Because of this we are planning on using a "live tile" system, where bits of useful information are displayed periodically on their respective tile. We are also thinking about developing this as a three-dimensional tree structure where the user is flown/zoomed into the next layer of whichever menu options they choose.

As design has progressed, we were met with the issue of how to make it as easy as possible for the content and look of the app to be updated after we had left the university. It hadn't really occurred to us, but the people updating the UI and the content of JIMM are very likely not going to be engineers in any capacity. Therefore, we had to forfeit some of our earlier ideas (such as using web scraping to get the necessary information) for the sake of longevity.

This led to us deciding to create an "Edit Mode" within the app itself that can be easily accessed to edit any and all content. So, basically, we're not hard-coding our user interface at all, but coding an app that can itself create the user-interface via intuitive content creation menus. Taking this approach will make life much, much easier for the person tasked with updating content than if we had hard-coded everything.

User Experience UI[edit]

On the user end of the UI the following information will be supplied somewhere in the application. Using button presses the user will be able to navigate an intuitive UI to find the following.

  • Map of engineering building/campus
  • Map and information on parking
  • History of programs with timelines and photos
  • History of Deans of the college of engineering with timelines and photos
  • Faculty of the college of engineering
  • Academy of Engineering members
  • Class schedules and rooms
  • Student clubs in the college
  • Information on majors
  • NAE Grand Challenges
  • Events list/calendar

Editing UI - List of Tools[edit]

The UI will be modifiable after entering a key combination and correct password. There will be numerous tools available to create and modify the UI to achieve an interface that will supply the information listed above.

  • Tool to add image from URL or directly from hard drive (png, jpg, or SVG)
  • Tool to move, scale, and rotate images once they've been loaded
  • Tool to add bodies of text with editable properties (font style, size, color, etc)
  • Tool to add hyperlinked text and images
  • Tool to add YouTube videos
  • Tool to change the background color of a panel
  • Tool to choose which transition animation to use


Meeting Minutes[edit]


The Team[edit]

Picture Bio Discipline
Higley, Joseph

Joseph Higley: Senior in Computer Science. Interested in UX and custom tool development.

Holbart, Morgan

Morgan Holbart: Senior in Computer Science, born in Coeur d'Alene Idaho. Interested in Virtual Reality and Game Development.

Rodriguez, Ronald

Ronnie is a 4th year Senior Computer Science student at the University of Idaho. He was born in San Diego, California, but he was raised in Coeur d' Alene, Idaho. His hobbies include Guitar, music production, video games, and archery.

Rakowski, Robin

Robin Rakowski is a third year University of Idaho student, majoring in Computer Science and Economics. Robin is from the Tri-Cities, Washington, and enjoys fencing and playing the violin.

Guan, Feng

Feng Guan is a senior Computer Science major student. Current studying at the University of Idaho. From Wuhan, China.