Mobile implementation of a web 3D carousel with touch input

ABSTRACT

Mobile devices such as the iPhone provide state of the art interaction capabilities also for web browser applications. Our mobile development is targeted to a Energy Awareness application that provides playful access to detailed and realtime information on energy consumption of appliances of a household. Using the available Safari Browser that adopts W3C web standards we demonstrate the implementation of a 3D carousel giving access to cards on a web page where each card gives access to information on one appliance. The carousel can be browsed using the multitouch capability of the iPhone. We describe the programming approach and discuss the lesson learned in developing the touch interaction with the carousel.

REFERENCES

• 1: Shen, Y., Ong, S. K., and Nee, A. Y. 2008. Collaborative design in 3D space. In Proceedings of the 7th ACM SIGGRAPH international Conference on Virtual-Reality Continuum and Its Applications in industry (Singapore, December 08--09, 2008). VRCAI '08. ACM, New York, NY, 1--6. DOI=http://doi.acm.org/10.1145/1477862.1477900
• 2: Carousel.us: a JavaScript 3D Carousel: http://www.piksite.com/carousel.us/carousel.us.php
• 3: Carousel 3D Slideshow -- demo 2, http://www.paulvanroekel.nl/picasa/carouseldemo2/
• 4: VectorForm's Silverlight 2.0 Carousel, http://www.vectorform.com/silverlight/silverlight2/ImageCarousel/
• 5: Peltonen, P., Kurvinen, E., Salovaara, A., Jacucci, G., Ilmonen, T., Evans, J., Oulasvirta, A., and Saarikko, P. 2008. It's Mine, Don't Touch!: interactions at a large multi-touch display in a city centre. In Proceeding of the Twenty-Sixth Annual SIGCHI Conference on Human Factors in Computing Systems (Florence, Italy, April 05--10, 2008). CHI '08. ACM, New York, NY, 1285--1294. DOI=http://doi.acm.org/10.1145/1357054.1357255
• 6: FingerTapps, Interactive Show Room Display -- Lexus. (http://www.fingertapps.com/default.aspx?pagename=Showcase), 2009
• 7: Apple Inc., 2009. Safari CSS Reference.
• 8: W3C, CSS Transition Module Level 3 (http://dev.w3.org/csswg/css3-transitions/), 2004
• 9: W3C, CSS3 mudle: Synax. (http://www.w3.org/TR/css3-syntax/#vendor-specific), 2009
• 10: W3C, CSS 3D Transforms Module Level 3. (http://dev.w3.org/csswg/css3-3d-transforms/), 2009
• 11: W3C, CSS Animations Module Level 3. (http://dev.w3.org/csswg/css3-animations/), 2009
• 12: CSS3.info, Vendor specific extensions to CSS3. (http://www.css3.info/vendor-specific-extensions-to-css3/), 2007

INDEX TERMS

Primary Classification:
  H. Information Systems
  H.5 INFORMATION INTERFACES AND PRESENTATION (I.7)
      H.5.2 User Interfaces (D.2.2, H.1.2, I.3.6)
          Subjects: Input devices and strategies (e.g., mouse, touchscreen)

Additional Classification:
  H. Information Systems
  H.5 INFORMATION INTERFACES AND PRESENTATION (I.7)
      H.5.2 User Interfaces (D.2.2, H.1.2, I.3.6)
          Subjects: Interaction styles (e.g., commands, menus, forms, direct manipulation)

General Terms:
Algorithms, Design, Documentation, Experimentation, Languages, Standardization

Keywords:
3D interface, CSS3, HCI, Javascript, MultiTouch interaction, W3C, WebKit, XHTML, carousel, iPhone, mobile device