Cloud Space

Web-based Smart Space with Management UI

Anna-Liisa Mattila, Kari Syst

a, Jari-Pekka Voutilainen and Tommi Mikkonen

Department of Pervasive Computing, Tampere University of Technology, Korkeakoulunkatu 1, Tampere, Finland

Keywords:

Internet-of-Things, Mobile Agents, HTML5, Web Applications, Experimentation.

Abstract:

The emergence of HTML5 allows more complex applications to be run in browsers. However, these applica-

tions need not run inside the browser only. In our previous work we have shown that it is feasible to implement

mobile agents with Web technologies, such as HTML5 and JavaScript. These mobile agents can be used to

control systems like home automation. In this paper we show how this execution environment can be described

as a Cloud Space that provides the users with a new type of multi-device experience to the content and the

environment the users need to access and control. Furthermore, we present a new way to control and monitor

the Cloud Space through a web application with a 3D UI based on direct manipulation.

1 INTRODUCTION

Modern web applications are systems that use dy-

namic HTML – HTML, CSS, DOM and JavaScript –

for user interfaces and the HTTP protocol as the com-

munication protocol. These systems form the back-

bone of the current ICT infrastructure. End users

can easily access information and services through the

Web using the browser without additional installation

of speciﬁc client software. This commonality and uni-

formity has simpliﬁed end-users’ life, and given the

browser a central role in all information access and

nowadays increasingly often also in entertainment,

ofﬁce applications, and services such as banking.

For users, most of the relevant computing re-

sources and content are located in the Internet. This

trend is related to two recent developments: 1) users

have multiple devices that they use to access data and

services, and 2) users store their content in several

cloud-based services. These two aspects are not yet

fully supported since information that is typically lo-

cal – like bookmarks – is often on a wrong device,

and data that is stored in cloud-based services cannot

be accessed as seamlessly as data stored in user’s own

devices. Although some services provide a REST API

– an architectural style for systems where resources

play a major role (Fielding, 2000) – to access the con-

tent in a generic fashion, far too often data is only

available through the speciﬁc service or proprietary

application, and it is not possible to create new appli-

cations that would beneﬁt from that data.

The increasing amount of computing power in our

everyday environment is also an emerging trend. For

example, home entertainment systems are increas-

ingly often online, with considerable computing and

storage capacity. We are surrounded by several ”smart

spaces”, or systems where our environment is con-

trolled and monitored with computers and software

running in them. Cheap computing devices, such

as Raspberry Pi (Raspberry PI, 2013), have become

widely available and are suitable for research and do-

it-yourself (DIY) needs. This enables low-risk exper-

iments and provides evidence that low-cost, Internet

connected and powerful computing nodes are com-

ing closer to us. We believe that the most natural

way to access these pervasive computing elements are

through a browser instead of platform speciﬁc instal-

lable proprietary solutions which are commonly used

in today’s smart spaces.

In this paper we describe vision and proof-of-

concept implementation of a system called Cloud

Space, where all computing resources form interop-

erable clouds that users can access with any device.

Users do not need to care about boundaries between

particular services or individual devices available in

smart spaces. Still, however, users can maintain their

ownership and they are in control of their own con-

tent. In other words, data and computing will be

completely cloudiﬁed for the user without risking

users’ ownership of the content. In addition, we show

how such an environment can be controlled and man-

aged with a virtual 3D environment built using the

137

Mattila A., Systä K., Voutilainen J. and Mikkonen T..

Cloud Space - Web-based Smart Space with Management UI.

DOI: 10.5220/0004961001370142

In Proceedings of the 10th International Conference on Web Information Systems and Technologies (WEBIST-2014), pages 137-142

ISBN: 978-989-758-024-6

 2014 SCITEPRESS (Science and Technology Publications, Lda.)

same technologies. In fact, the monitoring applica-

tion could be stored in the same cloud infrastructure

as the applications it is presently managing.

The rest of the paper is structured as follows. Sec-

tion 2 describes the background. Section 3 introduces

the concept of Cloud Spaces, and Section 4 describes

a manager application for Cloud Spaces. Section 5

addresses related work. Finally Section 6 draws some

ﬁnal conclusions.

2 BACKGROUND

Our work has been motivated by a number of already

reported research artifacts. These artifacts will be

brieﬂy introduced in the following subsections.

2.1 Interactive Web Applications

Emerging web technologies such as HTML5 (World

Wide Web Consortium, 2012) and WebGL (Khronos

Group, 2011) have rapidly altered the landscape of

web application development. With such technolo-

gies, it is feasible to develop interactive applications

with web technologies only, with no vendor-speciﬁc

plug-ins that require separate installation. Even for

games, the browser is increasingly often the desired

platform due to its convenience – the users never need

to install anything except the browser itself.

These interactive applications are changing our

perception of browser-based applications. The code

that runs in a browser is no longer a simple rendering

procedure generated in the server-side. The applica-

tions are deployed and updated from the server like

a web page, but after that the needs of the applica-

tions determine how dependent the execution is of the

server. The applications can even be cached in the

device so that they can be used in off-line situations.

Examples of large web applications include systems

like Google’s Gmail

, which consists of a consider-

able amount of code run inside the browser.

At the same time increasingly powerful libraries

have simpliﬁed the development of JavaScript appli-

cations. These libraries help dealing with browser

incompatibilities and JavaScript’s not-so-good parts

(Crockford, 2008). Furthermore, they support the de-

velopment of web applications that provide the look

and feel that is fundamentally similar to desktop ap-

plications. This was shown to be feasible by the

Lively Kernel, which provided Smalltalk-like pro-

gramming environment inside the browser (Ingalls

et al., 2008), and Cloudberry (Taivalsaari and Syst

http://gmail.com/

2012) which showed that all user-visible software of

a smart phone can be implemented with dynamically

downloaded web-content.

2.2 Evolving Web Architecture

Latest web application trends have brought technolo-

gies originating from the browsers to servers, too. For

example, Node.js (Node.js, 2013) has lately gained

popularity. Node.js allows running JavaScript in the

server side, and thus to some extent Node.js allows the

execution of the same code in both server and client.

This is a core enabler of our HTML5-agents described

in the next subsection.

Technologies like Meteor (Meteor, 2013) and

backend-as-a-service systems like Firebase (Firebase,

2013) are also changing the web architecture towards

cloud-like architectures. In general, these systems

provide features that are commonly needed online.

Such features include user management, push noti-

ﬁcations, and integration with social networking ser-

vices, all of which are commonly needed in web ap-

plications.

2.3 HTML5 Agents

The Web is fundamentally based on mobile code,

pages that may contain applications are downloaded

from remote locations and evaluated inside the

browser. Four paradigms of mobile code have been

proposed (Carzaniga et al., 1997):

1. Client-Server where client uses code that is lo-

cated in another node.

2. Remote Evaluation where client sends execution

instructions, e.g. SQL queries, to another node.

3. Code on Demand where code is downloaded to

the client for execution. HTML5 applications are

widely used examples of code-on-demand.

4. Mobile Agent where code together with internal

state of the application is moved to other node for

execution.

The ﬁrst three paradigms are regularly used in

Web applications; the fourth paradigm is connected

to cloud browsing paradigm (Taivalsaari et al., 2013)

at least indirectly. In the following, we focus on the

fourth paradigm, i.e. mobile agents.

In our previous work, we have designed an agent

architecture (Syst

a et al., 2013), where agents can

travel between hosts which can be either browsers

or web servers. When running inside browsers these

agents act like any Web application, but when located

in a server, they are run in headless mode without a

WEBIST2014-InternationalConferenceonWebInformationSystemsandTechnologies

138

user interface. The agent can move between servers

and browsers and thus toggle the mode between head-

less mode and UI mode. Furthermore, we support

multi-device usage – the browser instance that pulls

an executing agent can be different from the browser

instance that had originally pushed the agent to the

server. The internal state of the application is an im-

portant part of a mobile agent. HTML5 agent’s state

needs to be serialized when the agent is moved from

a location to another. Thus, the agent needs to be

written so that serialization of the relevant parts of the

state is possible. Our design provides support for such

serialization. During agent’s life-cycle the agent may

visit several browsers and several agent servers. A

sample life cycle is presented in Figure 1.

Figure 1: Life-cycle of a HTML5 agent (Syst

a et al., 2013).

In Figure 1, an agent is started by Browser1, when

the agent is downloaded from its origin server (Step

1). In this phase the agent is initialized and the execu-

tion begins. Since the agent executes in a browser it

has a user interface. In Step 2, the agent is pushed to

an agent server. This means that the agent server gets

the internal execution state of the agent and the appli-

cation code (actually a URL to the code). The agent

can continue the execution in the server. In Steps 3-

5, the agent moves from one environment to another,

but preserves its internal state and continues execu-

tion from where it left off. Finally, the execution is

terminated in Step 6.

In our present implementation, the life cycle

shown in Figure 1 has been modiﬁed so that agents

can move between server and client but also between

two servers. This liberates applications to travel freely

between different computing nodes included in the

system.

2.4 Agents for Web-of-Things

In (J

arvenp

a et al., 2013) we proposed using mobile

agents in the context of Internet-of-Things (IoT). The

approach was based on the fact that agent servers can

be instantiated in small embedded computers and the

mobile agents can move between different devices,

and if necessary it is also possible to clone agents

to create more instances. One of the possible appli-

cation areas we discussed in (J

arvenp

a et al., 2013)

was home automation that goes beyond remote con-

trol when the agents can be run in embedded devices

installed in the physical environment. In that case an

intelligent agent can work on behalf of the user and

implement even complex strategies to optimize en-

ergy consumption and user comfort.

There are approaches that are based on uploading

and remote evaluation of code in a ”thing”. For ex-

ample, MoteLab (Werner-Allen et al., 2005) is a test

bed for sensor networks, where developers can upload

executable Java to a device. Somewhat similar sys-

tem is Kansei (Ertin et al., 2006) (later refactored to

KanseiGenie) where developers can also create jobs

to execute sensor applications. Our system can also

be used in a similar way and from similar motiva-

tions. However, in our system the uploaded code is

Web content and we can upload an executing agent

with its internal state – i.e. our system is the paradigm

of mobile agents.

Maybe the most similar approach to us is the mo-

bile agent framework proposed in (Godfrey et al.,

2013). It provides nodes in heterogeneous device net-

works with a way to communicate and co-operate.

The system is based on Java-based AgentSpace (Silva

et al., 1999) mobile agent platform. For us the use of

Web technologies is essential since it enables leverag-

ing the power of the web development ecosystem in

application development (Syst

a et al., 2013). Further-

more, our agents have been designed to work a part of

the Cloud Space explained in Section 3.

Since our mobile agents are based on Web tech-

nologies – HTML and JavaScript – they integrate well

in Internet-based infrastructures. Moreover, normal

browsers can be used to access and control the agents.

3 CLOUD SPACE

A key concept of our work is computing and con-

tent service called Cloud Space. Users have their own

Cloud Spaces – in essence private clouds – in which

all content is stored. Cloud Space includes the follow-

ing three parts that relate and depend on each other:

1. A data solution that provides a uniform access to

all content. Unlike typical cloud service, Cloud

Space does not enforce service-speciﬁc silos or

limit what kind of content is uploaded to the ser-

vice. All the content is synchronized automati-

cally between Cloud Space and devices and ap-

plications using the content.

2. A system that stores interaction (browsing) ses-

sions so that they can be later continued in another

CloudSpace-Web-basedSmartSpacewithManagementUI

139

device.

3. The software infrastructure for mobile agents.

3.1 Concept

Cloud Spaces can be virtualized. For instance, a

single computing resource can host several Cloud

Spaces. However, like in cloud computing, the Cloud

Spaces appear to both users and applications as a sin-

gle service. The Cloud Space hosts arbitary amount

of contexts, which represent physical locations with

devices like a kitchen, living room and mobile phone.

Each context is a view to one or more Cloud Spaces

with a user interface optimized for different screen

sizes and for the needs of the context. Mobile phone

context would need an easy access to lot of content

in user’s personal Cloud Space and Cloud Space of

the current location but with simplistic UI since most

likely, the screen size is small. Additionally to the

context user interfaces, the admin interface needs its

own UI. The admin UI handles creation of new users,

new contexts and so on.

An example conﬁguration of Cloud Space has

been presented in Figure 2.

Figure 2: Concept of Cloud Space.

It should be noted that Cloud Space contexts can

represent both physical and virtual entities. Further-

more, when user is in some physical space, for exam-

ple in a room, she can access both her own personal

Cloud Space and the Cloud Space of the room.

3.2 Implementation

Cloud Space is partly implemented as a proof-of-

concept system. User management and context cre-

ation are implemented and they are available in the

admin user interface. Currently contexts are bound to

physical locations and agent servers can be assigned

to a context. The design is implemented in Node.js,

mainly to leverage the existing agent server imple-

mentation. Hosting the user content will be exported

to backend-as-a-service platform because synchroniz-

ing data across multiple databases is out of scope of

the research.

4 MANAGEMENT UI IN 3D

As already pointed out, mobile agents can be used

for managing and monitoring devices in the spirit of

Internet-of-Things (J

arvenp

a et al., 2013). How-

ever, in our previous publications, (Syst

a et al., 2013),

arvenp

a et al., 2013) the management of the agents

has been left as future work. In the following, we

address the management of IoT environment where

Cloud Space contexts and agents are located in the

physical space.

4.1 Concept

The concept of the manager application is to provide

a tool for a user to manage her Cloud Space contexts

related to physical spaces, e.g. to a living room. Us-

ing the manager application the user can connect to

the Cloud Space, select context and toggle between

contexts. The user can monitor agent servers running

in a context and move agents from a server to another

server and to another context.

Because Cloud Space contexts are bound to physi-

cal spaces 3D user interface for the manager is a natu-

ral choice. A context can be visualized as a 3D model

of the physical space to which the context is related.

Resources related to the context and navigation wid-

gets can be visualized as 3D objects.

Cloud Space and mobile agents use browsers as

the front end. Similarly the monitor application is

based on web technologies and runs on the browser.

4.2 Implementation

We are currently working on a proof-of-concept im-

plementation of a Cloud Space context manager using

WebGL and WebWidget3D (Mattila and Mikkonen,

2013) system. WebWidget3D is a 3D widget library

that provides tools for creating 3D widgets and de-

signing associated interaction. For actual rendering,

WebWidget3D uses Three.js (Three.js, 2014) 3D en-

gine for WebGL.

While the use of WebGL enables the creation of

seemingly arbitrarily complex graphics and interac-

tions, we simply aim at demonstrating the feasibility

of our approach to the control and management tasks.

WEBIST2014-InternationalConferenceonWebInformationSystemsandTechnologies

140

Consequently, the implementation effort has been in-

vested in the creation of a simple model that can be

easily understood and interacted with.

In the present implementation the user can man-

age her Cloud Space contexts using a direct manipu-

lation 3D UI. Instead of using 3D models to visual-

ize Cloud Space contexts, panoramic image spheres

inside a 3D world are used. The agent servers and

agents as well as navigation widgets are visualized

using 3D objects. All user interaction is done using

direct manipulation of 3D content. The user can move

in the 3D world according to simple ﬂy paradigm.

The manager consists of three views:

1. Login View where user logs in to her Cloud

Space. This view is simple HTML form in 2D.

2. Context Selection View shown in Figure 3.

3. Context Management View shown in Figure 4.

Figure 3: Context selection view.

Figure 4: Context Management View.

When the user connects and logs in to her Cloud

Space the manager fetches her contexts and moves to

context selection view. The user can select the context

to manage by double clicking a context sphere.

When the user has selected the context to monitor

the Context Management View of the selected con-

text is shown. The view consists of the servers re-

lated to the context visualized as grids inside the con-

text sphere. Boxes inside grids are representations of

agents. The user can load an agent to her browser

by double clicking an agent box. Moving an agent to

another server can be done by dragging the agent to

another grid and dropping it there.

Inside the Context Management View the Selec-

tion View is also visualized. The user can toggle be-

tween Context Management Views using the Selec-

tion View. The Selection View inside a Context Man-

agement View is shown in right side of Figure 4. The

user can also drag agents from a context to another.

Moving agents are visualized in Figure 5.

Figure 5: Moving agent from a Context to another Context.

In the ﬁrst fragment of Figure 5 (marked with

number 1) the user has dragged the agent on top of

the context which she wants to move the agent. When

she releases the agent the Management View changes

to the context she chose. This is visualized in the frag-

ment 2 of Figure 5. Finally the user can drag the agent

to the server in the context and the agent is moved

there (fragement 3 in Figure 5).

5 RELATED WORK

As far as we know our HTML5 mobile agents is a

unique application of HTML technology. However,

mobile agents as such are an old invention of tech-

nologies and concepts (Carzaniga et al., 1997). Simi-

larly, Cloud Space is a unique combination, although

parts of it have been realized by commercial systems

like iCloud by Apple, which implements some parts

of the Cloud Space’s idea but is limited to a vendor-

speciﬁc ”silo”.

Visualization of the agent conﬁguration is im-

plemented, for example, in MoteLab (Werner-Allen

CloudSpace-Web-basedSmartSpacewithManagementUI

141

et al., 2005) where nodes in a sensor network can

host Java-based agents. In MoteLab a Maps Page

shows the sensor network with connections, but the

visualization is two-dimensional only and does not in-

clude management operations. Some management as-

pects have been included in the WebIoT architecture

(Castellani et al., 2012), where a heterogeneous de-

vice set can be visualized and controlled through an

extensible user interface. Similarly to our approach

the UI of WebIoT is based on the Web and runs in a

browser. However, WebIoT does not use 3D to show

the UI and does not introduce direct manipulation.

6 CONCLUSIONS

In this paper we have introduced the concept of Cloud

Spaces and a proof-of-concept 3D interface for man-

aging Cloud Spaces in the IoT context.

The concept of Cloud Spaces provides personal

clouds for user, but it is more than data storage. A

Cloud Space can also host agent servers and a Cloud

Space context can be connected to a physical space.

This makes it possible to use Cloud Spaces together

with HTML5 agents to build smart spaces for e.g.

home automation.

The 3D UI for managing contexts inside a Cloud

Space shows how a browser can host interactive 3D

user interface for monitoring and managing smart

spaces. The UI provides functionality, e.g. for mov-

ing agent from server to another server, with direct

manipulation in the 3D context. Exploring the most

feasible 3D visualizations for contexts, agent servers

and agents in a smart space are at this point left as

future work.

REFERENCES

Carzaniga, A., Picco, G. P., and Vigna, G. (1997). De-

signing Distributed Applications With Mobile Code

Paradigms. In Proceedings of the 19th international

conference on Software engineering, pages 22–32.

ACM.

Castellani, A. P., Dissegna, M., Bui, N., and Zorzi, M.

(2012). WebIoT: A Web Application Framework for

the Internet of Things. In Wireless Communications

and Networking Conference Workshops (WCNCW),

2012 IEEE, pages 202–207. IEEE.

Crockford, D. (2008). JavaScript: The Good Parts.

O’Reilly.

Ertin, E., Arora, A., Ramnath, R., Nesterenko, M., Naik, V.,

Bapat, S., Kulathumani, V., Sridharan, M., Zhang, H.,

and Cao, H. (2006). Kansei: A Testbed for Sensing at

Scale. In Proceedings of the 4th Symposium on Infor-

mation Processing in Sensor Networks (IPSN/SPOTS

TRACK, pages 399–406. ACM Press.

Fielding, R. T. (2000). Architectural Styles and the Design

of Network-Based Software Architectures. PhD thesis,

University of California.

Firebase (2013). Web page of ﬁrebase technology. Tech-

nical report. https://www.ﬁrebase.com/. Last viewed

31.12.2013.

Godfrey, W. W., Jha, S. S., and Nair, S. B. (2013). On a

Mobile Agent Framework for an Internet of Things. In

Proceedings of the 2013 International Conference on

Communication Systems and Network Technologies,

CSNT ’13, pages 345–350, Washington, DC, USA.

IEEE Computer Society.

Ingalls, D., Palacz, K., Uhler, S., Taivalsaari, A., and

Mikkonen, T. (2008). The Lively Kernel a Self-

Supporting System on a Web Page. In Self-Sustaining

Systems, pages 31–50. Springer.

arvenp

a, L., Lintinen, M., Mattila, A.-L., Mikkonen,

T., Syst

a, K., and Voutilainen, J.-P. (2013). Mobile

Agents for the Internet of Things. In System Theory,

Control and Computing (ICSTCC), 2013 17th Inter-

national Conference, pages 763–767. IEEE.

Khronos Group (2011). WebGL Speciﬁcation. Tech-

nical report. http://www.khronos.org/registry/webgl/

specs/1.0/.

Mattila, A.-L. and Mikkonen, T. (2013). Designing a 3D

Widget Library for WebGL Enabled Browsers. In pro-

ceedings of the 28th Symposium On Applied Comput-

ing, volume 1, pages 757–760. ACM.

Meteor (2013). Web page for meteor technology. Tech-

nical report. https://www.meteor.com/, Last viewed

31,12,2013.

Node.js (2013). Web page for document and down-

load of node.js technology. Technical report.

http://nodejs.org/. Last viewed 31.12.2013.

Raspberry PI (2013). Web page of raspberry pi. Techni-

cal report. http://www.raspberrypi.org/, last viewed

31.12.2013.

Silva, A., Silva, M. M. d., and Delgado, J. (1999). An

Overview of AgentSpace: A Next-Generation Mobile

Agent System. In Proceedings of the Second Inter-

national Workshop on Mobile Agents, MA ’98, pages

148–159, London, UK, UK. Springer-Verlag.

Syst

a, K., Mikkonen, T., and J

arvenp

a, L. (2013). HTML5

Agents - Mobile Agents for the Web. In WEBIST,

pages 37–44.

Taivalsaari, A., Mikkonen, T., and Syst

a, K. (2013). Cloud

Browser: Enhancing the Web Browser With Cloud

Sessions and Downloadable User Interface. In Grid

and Pervasive Computing, pages 224–233. Springer.

Taivalsaari, A. and Syst

a, K. (2012). Cloudberry: An

HTML5 Cloud Phone Platform for Mobile Devices.

Software, IEEE, 29(4):40–45.

Three.js (2014). Web page of three.js 3d engine. Technical

report. http://threejs.org/, last viewed 7.1.2014.

Werner-Allen, G., Swieskowski, P., and Welsh, M. (2005).

Motelab: A Wireless Sensor Network Testbed. In Pro-

ceedings of the 4th international symposium on Infor-

mation processing in sensor networks, page 68. IEEE

Press.

World Wide Web Consortium (2012). HTML5 Speciﬁca-

tion, candidate recommendation. Technical report.

http://www.w3.org/TR/html5/.

WEBIST2014-InternationalConferenceonWebInformationSystemsandTechnologies

142