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: https://indianajs.github.io Visit our research in general on: http://www.teco.edu

1. KIT – University of the State of Baden-Wuerttemberg and
National Research Center of the Helmholtz Association
www.teco.kit.edu
www.kit.edu
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 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
The future was here: HP Cooltown

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, et.al.
"On-Demand TCP: Transparent peer to peer
TCP/IP over IrDA."
IEEE International Conference on
Communications, 2002.

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
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 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
Previous work

7. 7 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
Can we abstract this with tools from today‘s web?

8. 8
Only HW needed: QR Checkpoints
INDIANAJS.GITHUB.IO - Wot 2015, Seoul

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
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 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
The concrete view

12. 12 INDIANAJS.GITHUB.IO - Wot 2015, Seoul

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 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
The application

15. 15 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
Different alternatives

16. 16 INDIANAJS.GITHUB.IO - Wot 2015, Seoul

17. 17 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
Completion Time & User Preference (N=18)

18. 18 INDIANAJS.GITHUB.IO - Wot 2015, Seoul
UEQ

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
HTTP://INDIANAJS.GITHUB.IO
Thank you!
INDIANAJS.GITHUB.IO - Wot 2015, Seoul