Intelligent web enabled devices proliferate our households and work environments and brought a Web of Things to life. However, while almost any device has virtual representation the web itself is not yet a very physical place. Bringing proven spatial interaction and ubiquitous computing paradigms to life using current web technology we designed IndianaJS1, a JavaScript framework to add a physical browsing experience to any web of things content. The IoT-Compass, built on top of our library, shows that the “wow factor” of web-based hyper-reality can still be achieved 15 years after the first implementations. Today however, tra- ditional browsing paradigms can be augmented to feature a physical browsing experience with the Web of Things without requiring special devices and infrastructure. Our lightweight framework design, prototypical interaction components and our use case evaluation just show how little is needed to bridge the interactive gap towards the web for a better user experience within the Web of Things.

1. IndianaJS: Building spatially aware web sites for the
Web of Things
Andrei Miclaus, Jack Unseld, Alexandru Miclaus, Matthias Berning, Till Riedel∗
TECO, Karlsruhe Institute of Technology (KIT)
Karlsruhe, Germany
∗{miclaus, unseld, amiclaus, berning, riedel}@teco.edu
Intelligent web enabled devices proliferate our households
and work environments and brought a Web of Things to life.
However, while almost any device has virtual representation
the web itself is not yet a very physical place. Bringing
proven spatial interaction and ubiquitous computing paradigms
to life using current web technology we designed IndianaJS1
,
a JavaScript framework to add a physical browsing experience
to any web of things content.
The IoT-Compass, built on top of our library, shows that the
“wow factor” of web-based hyper-reality can still be achieved
15 years after the first implementations. Today however, tra-
ditional browsing paradigms can be augmented to feature a
physical browsing experience with the Web of Things without
requiring special devices and infrastructure. Our lightweight
framework design, prototypical interaction components and
our use case evaluation just show how little is needed to bridge
the interactive gap towards the web for a better user experience
within the Web of Things.
I. RELATED WORK
By revisiting proven concepts from related work towards
current technology, we design a framework that addresses
some common challenges when bridging Internet and Internet
of Things interaction. We show little is needed to actually
create a hyperreality using mixed reality interaction. The
presented framework adapts simple REST and linked data APIs
to integrate with heterogenous enviroments, and uses the power
of the document object model to represent interactive context
things. It thus fits any hypertext based interface towards the
Internet of Things and can bring an IoT experience also to
formerly static content. The system design is validated using a
realistic use case by building multiple interactive components
on top of the framework, that are ready to use in many web
based applications that deal with spatially locatable things in
the surroundings of a user.
The second major strand of research, we are building on, is
the work on relative location and spatial interaction. Although
[1] shows that relative positions are better understood by
users, much work in the area of Internet of Things has fo-
cused on global scopes and absolute positions. By identifying
things relative to the user and if available, provide interaction
controls, it augments the user experience and allows spatial
exploration of smart environments. Within our work we want
to provide an up-to-date framework that enables things like
the RELATE Gateways [2] or the Point and Click interaction
1IndianaJS, https://indianajs.github.io
[3] and reimplement those as state of the art web components.
As [1] states, also the RELATE interaction model was limited
because it needed dedicated relative positioning support. We
want to show that we already overcame those limitations with
technology available today (as started with [4]) and evaluate
a system that works with the user’s personal smart phone
out of the box using common web technologies and can be
extended with commodity specialized hardware like a Kinect
depth camera which is found in many homes as part of gaming
equipment.
II. FRAMEWORK DESIGN
The increasing popularity of the web drives the implemen-
tation of standards like the HTML5 device sensor API. These
can be leveraged to access functionality previously reserved for
native applications. Furthermore, HTML and JavaScript show
the highest increase in the number of created projects in recent
years2
. By choosing a web technology stack as presented in
Figure 1, the framework is compatible across devices and a
large number of potential developers and users are targeted.
3rd Party LibrariesIndianaJS
Device Hardware: Sensor APIs, GPU
HTML5
Spatial Aware
Web-Application
… … …
Spatial Aware
Web-Application
IndianaJS
Fig. 1: Integration of the library in the development stack
The location information is queried from a static server
using the URI of the thing. Filtered location information of the
surrounding things is provided with the help of the Location
Checkpoint that contains the URI of the room, i.e. the location
of the user. The checkpoint can be realized as a simple paper
printed qr-code or more advanced, as NFC tags, Bluetooth
beacons etc.
Exploiting context is particularly useful if the user has
special needs for interaction and the information channel is
2Language statistics, https://www.openhub.net/languages/compare

2. limited. Web standards have been designed with accessibility
for all humans and all devices in mind. The extension of
the scope of Web standards towards mobile application is a
huge opportunity for tackling usage barriers in many domains
beyond the stationary Internet.
Through our framework we enable navigating physical
things in an accessible way through this proven accessibility
layer by exposing location queues to devices as part of
a standard web site. Accessible Rich Internet Applications
(ARIA)3
attributes allow us to fine tune the navigation structure
that much that physical context of a web site can be explored
without e.g. actually seeing the physical environment providing
an immersive experience through a screen reader as audio
augmented reality. It is the same immersive experience that
allows a user with normal vision to reduce the number of media
breaks within one interaction scenario.
III. DEMONSTRATION PROTOTYPE
To get a better understanding of the capabilities needed for
such a framework, we developed two example applications.
The IoT-Compass is a web-site enhancing radar for localisation
of the things listed on the web site the user is currently on.
The second application is an implementation of the RELATE-
Gateways [2].
A. IoT-Compass
Fig. 2: Morphing a web site into a spatial aware application.
Fig. 3: screen reader output while physically browsing.
3ARIA, http://www.w3.org/TR/wai-aria/
For this implementation we borrow the compass metaphor
used in [2] and create a radar web component populated with
information from things having a RDFa4
Product attribute. In
the kitchen web site for example, we have several things that
have URIs and thus are connected to the Web. The JavaScript
follows the links and retrieves data belonging to the things.
The location data is used to compute the relative location to
the user whenever a deviceOrientation Event is fired from the
HTML5 sensor API. That data is used to update the SVG based
radar graphic in real time.
Figure 2 shows screenshots of the radar. The design is
chosen to allow the mapping between real-world and flat
representation to correspond to the users expectation [1]. We
chose a non-intrusive way to avoid cluttering the screen too
much. When browsing, the circle in the center of the radar is
filled with the icon of the thing currently under the reticule.
Making the layout of the compass accessible can be accom-
plished by two techniques: (i) additional HTML markup with
a translation of the displayed graphic and (ii) using graphics in
SVG format augmented with ARIA tags and attributes. Using
the latter, a screen reader can transform the graphic to speech.
An output of the speech transcript from the radar ca be seen
in Figure 3. Setting the aria-live attribute for example allows
screen readers to return the updated name of the thing in front
of the user as he changes his orientation. Additional haptic
feedback is provided using the vibration API of the smart-
phone when a thing is in front of the user.
IV. CONCLUSION AND FUTURE WORK
Comparing the smart-phone user with a modern day ex-
plorer, we wish to enable more immersive experiences in the
Internet of Things. To this end, we described a JavaScript
library that enables spatial interaction with devices in smart
environments. The main goal of the library is to ease de-
velopment and accelerate the adoption of spatial information
in the web. The presented system allows building upon other
discovery frameworks to increase the accuracy of the location
tracking and provide further information on the smart environ-
ment. By including the accessibility features such as embedded
location information in the web site, users with disabilities can
perceive their environment in a novel way.
REFERENCES
[1] H. Gellersen, C. Fischer, D. Guinard, R. Gostner, G. Kortuem, C. Kray,
E. Rukzio, and S. Streng, “Supporting device discovery and spontaneous
interaction with spatial references,” Personal and Ubiquitous Computing,
vol. 13, no. 4, pp. 255–264, 2009.
[2] D. Guinard, S. Streng, and H. Gellersen, “Extending Mobile Devices
with Spatially Arranged Gateways to Pervasive Services,” 2007.
[Online]. Available: http://eprints.lancs.ac.uk/13028/
[3] M. Beigl, “Point & click-interaction in smart environments,” in Handheld
and Ubiquitous Computing. Springer, 1999, pp. 311–313.
[4] M. Budde, M. Berning, C. Baumg¨artner, F. Kinn, T. Kopf,
S. Ochs, F. Reiche, T. Riedel, and M. Beigl, “Point & control
– interaction in smart environments,” Proceedings of the 2013
ACM conference on Pervasive and ubiquitous computing adjunct
publication - UbiComp ’13 Adjunct, p. 303, 2013. [Online]. Available:
http://dl.acm.org/citation.cfm?doid=2494091.2494184
4Resource Description Framework in Attributes, http://www.rdfa.info/