Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IndianaJS - Building spatially aware web sites for the Web of Things


Published on

While almost any device today may have a virtual representation, the web itself is not yet a very physical experience. Bringing proven spatial interaction and ubiquitous computing paradigms to life using current web technology, we designed IndianaJS, a JavaScript framework to add a physical browsing experience to any Web of Things content. The evaluation of the IoT-Radar, built on top of our library, shows that web-based hyper-reality can still achieve a unique user experience 15 years after the first implementations.
This presentation introduces the library, showcases our physical browser - the IoT Compass, and presents the results of our usability study. It was presented the Web of Things Workshop within the International Conference on the Internet of Things 2015 in Seoul, South Korea.

Web presence:
Visit our research in general on:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

IndianaJS - Building spatially aware web sites for the Web of Things

  1. 1. KIT – University of the State of Baden-Wuerttemberg and National Research Center of the Helmholtz Association IndianaJS Building spatially aware web sites for the Web of Things Andrei Miclaus, Jack Unseld, Alexandru Miclaus, Matthias Berning, Till Riedel, Michael Beigl
  2. 2. 2 INDIANAJS.GITHUB.IO - Wot 2015, Seoul The future was here: HP Cooltown
  3. 3. 3 INDIANAJS.GITHUB.IO - Wot 2015, Seoul WoT and IoT Kindberg, "Implementing physical hyperlinks using ubiquitous identifier resolution." Proceedings of the 11th international conference on World Wide Web. ACM, 2002. Tourrilhes, "On-Demand TCP: Transparent peer to peer TCP/IP over IrDA." IEEE International Conference on Communications, 2002.
  4. 4. 4 INDIANAJS.GITHUB.IO - Wot 2015, Seoul RELATE: Supporting device discovery and spontaneous interaction with spatial references Gellersen, Hans, et al. "Supporting device discovery and spontaneous interaction with spatial references." Personal and Ubiquitous Computing 13.4 (2009): 255- 264.
  5. 5. 5 Adds interactivity and alternative browsing pattern to the web Todays phone usage patterns make it natural to augment the world via the smart phone Mobile scanning much more lightweight than full blown augmented reality Calm technology: cognitively not demanding Makes the real world accessible by adding „alt“-tags to it Light-weight security model (proximity keys: at least as good as printed wifi-pass) INDIANAJS.GITHUB.IO - Wot 2015, Seoul Why spatial interaction using WoT?
  6. 6. 6 INDIANAJS.GITHUB.IO - Wot 2015, Seoul Previous work
  7. 7. 7 INDIANAJS.GITHUB.IO - Wot 2015, Seoul Can we abstract this with tools from today‘s web?
  8. 8. 8 Only HW needed: QR Checkpoints INDIANAJS.GITHUB.IO - Wot 2015, Seoul
  9. 9. 9 Website Barcode Checkpoint Meta-Data (static web store)1 2a 2b 3 Room CoffeeMachine Flower Fuse avatar with site Meta-Data Update Device Orientation Relocate Device in Space Connect Stabilization aids like Kinect Device Scanning Augment site with controls • Additional Control Menu • Relate Gateways • Radar • In site Compass (Contains some meta-data) Calibrate/Position device in 3D space User INDIANAJS.GITHUB.IO - Wot 2015, Seoul
  10. 10. 10 We want to support different tracking technology Point and Click using Kinect BT Beacons JSON-Location format { direction*: X, distance*: Y, z-direction*: Z } *optional, relative INDIANAJS.GITHUB.IO - Wot 2015, Seoul The abstract view
  11. 11. 11 INDIANAJS.GITHUB.IO - Wot 2015, Seoul The concrete view
  12. 12. 12 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
  13. 13. 13 @: document @: IoT radar listing 5 items @: graphic @: nothing in front of you @: graphic @: microwave in front of you slightly to the right @: link @: graphic @: flower to the right @: graphic @: lamp to the left @: graphic @: coffeemachine behind you @: graphic @: fridge behind you @: link @: graphic <span id=“microwaveLocation” role="status" aria-live="polite"> The microwave is in front of you.</span>INDIANAJS.GITHUB.IO - Wot 2015, Seoul
  14. 14. 14 INDIANAJS.GITHUB.IO - Wot 2015, Seoul The application
  15. 15. 15 INDIANAJS.GITHUB.IO - Wot 2015, Seoul Different alternatives
  16. 16. 16 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
  17. 17. 17 INDIANAJS.GITHUB.IO - Wot 2015, Seoul Completion Time & User Preference (N=18)
  18. 18. 18 INDIANAJS.GITHUB.IO - Wot 2015, Seoul UEQ
  19. 19. 19 The spatial dimension of the web of things is highly important Comparision to augmented reality: Even richer interactions possible using mobile web? HTML5 creates a gateway towards reality Using the device orientation can interactivity to web sites For mixed media we need to better under stand the media breaks Switching from mobile interface to pointing Can proxemic interaction be extended to a mobile Web of Things? INDIANAJS.GITHUB.IO - Wot 2015, Seoul Future Work & Challenges Rekimoto, 1995
  20. 20. 20 HTTP://INDIANAJS.GITHUB.IO Thank you! INDIANAJS.GITHUB.IO - Wot 2015, Seoul