institutionen för datavetenskapliu.diva-portal.org/smash/get/diva2:589849/fulltext01.pdf ·...

Institutionen för datavetenskapDepartment of Computer and Information Science

Final thesis

Smart TV front-end application for cloud computing

by

Jaime Miguel Montero

LITH-IDA/ERASMUS-A—12/004—SE

2012-12-14

Linköpings universitet

SE-581 83 Linköping, Sweden

Linköpings universitet

581 83 Linköping

Final thesis

Smart TV front-end application forcloud computing

by

Jaime Miguel Montero

LITH-IDA/ERASMUS-A–12/004–SE

2012-12-14

Supervisor at the company: Daniel Arthursson

Supervisor: Maria Vasilevskaya

Examiner: Simin Nadjm-Tehrani

På svenska

Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under en längre tid från publiceringsdatum under förutsättning att inga extra-ordinära omständigheter uppstår.

Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ art.

Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart.

För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/

In English

The publishers will keep this document online on the Internet - or its possible replacement - for a considerable time from the date of publication barring exceptional circumstances.

The online availability of the document implies a permanent permission for anyone to read, to download, to print out single copies for your own use and to use it unchanged for any non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional on the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility.

According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement.

For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its WWW home page: http://www.ep.liu.se/

© Jaime Miguel Montero

http://www.ep.liu.se/

Abstract

This master project focuses on the development of a front-end applicationfor cloud computing. Traditionally, televisions have been excluded from thealways connected world. With the appearance of the smart televisions it isnow possible to connect them to the Internet. However, there still exists agap between televisions and services in the cloud.To solve the problem,we have developed a JavaScript application. This ap-plication allows the user to log into their CloudMe account from a SamsungSmartTV with multimedia support. This application is centered on improv-ing the responsiveness performance of a cloud computing application. It alsoenhances the user experience by creating a user-friendly UI for a television.During the course of this thesis, the application and its functionalities havebeen studied, designed, developed, optimized and finally tested. We havealso done a set of measurements to validate the responsiveness of the pro-posed design.The development of this TV application shows the TV is a potential targetdevice for cloud computing services due to its better resources and capabil-ities in di↵erent areas such as multimedia reproduction.

iii

Acknowledgements

First of all, I would like to thank my examiner Simin Nadjm-Tehrani andmy supervisor Maria Vasilevskaya for their patience and support during therealization of this thesis. Your feedback has been really helpful.I would also like to thank all the people of CloudMe, who helped and guidedme when I most needed it. Specially, I would like to thank Daniel Arthurs-son, for believing in me and giving me the opportunity to carry out thisthesis in CloudMe.Finally, I would like to thank my family and friends for their unconditionalsupport.

v

Contents

1 Introduction 21.1 Problem description . . . . . . . . . . . . . . . . . . . . . . . 21.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.4 Evaluation criteria . . . . . . . . . . . . . . . . . . . . . . . . 41.5 Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.6 Thesis outline . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 Background 72.1 CloudMe system description . . . . . . . . . . . . . . . . . . . 7

2.1.1 Software architecture . . . . . . . . . . . . . . . . . . . 72.2 Samsung SmartTV . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.3.1 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 92.3.2 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3.3 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3.4 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3.5 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.3.6 Model View Controller . . . . . . . . . . . . . . . . . . 112.3.7 Digest access authentication . . . . . . . . . . . . . . . 112.3.8 Simple Object Access Protocol . . . . . . . . . . . . . 11

3 Design 133.1 Functional requirements . . . . . . . . . . . . . . . . . . . . . 13

3.1.1 Navigation . . . . . . . . . . . . . . . . . . . . . . . . 133.1.2 Login and Logout . . . . . . . . . . . . . . . . . . . . 133.1.3 Create account . . . . . . . . . . . . . . . . . . . . . . 143.1.4 Open media file . . . . . . . . . . . . . . . . . . . . . . 15

3.2 Design goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.3 Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.4 User interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.5 Responsiveness improvement . . . . . . . . . . . . . . . . . . 24

3.5.1 Separate the JavaScript files . . . . . . . . . . . . . . . 243.5.2 Reproduction bu↵er size . . . . . . . . . . . . . . . . . 24

vii

CONTENTS CONTENTS

3.5.3 Number of files ordered to server . . . . . . . . . . . . 253.5.4 Pre-load of images . . . . . . . . . . . . . . . . . . . . 263.5.5 Minify . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4 Implementation 284.1 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.1.1 Estimation of the network throughput . . . . . . . . . 284.1.2 Login and Logout . . . . . . . . . . . . . . . . . . . . 294.1.3 Handle files . . . . . . . . . . . . . . . . . . . . . . . . 304.1.4 Play music . . . . . . . . . . . . . . . . . . . . . . . . 30

4.2 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.3 Scenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.3.1 Drive scene . . . . . . . . . . . . . . . . . . . . . . . . 324.3.2 Folder scene . . . . . . . . . . . . . . . . . . . . . . . . 334.3.3 Image scene . . . . . . . . . . . . . . . . . . . . . . . . 344.3.4 Login scene . . . . . . . . . . . . . . . . . . . . . . . . 364.3.5 Sign up scene . . . . . . . . . . . . . . . . . . . . . . . 364.3.6 Video scene . . . . . . . . . . . . . . . . . . . . . . . . 37

4.4 Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.4.1 Authentication . . . . . . . . . . . . . . . . . . . . . . 384.4.2 Loading images in the 2011 model . . . . . . . . . . . 394.4.3 Fetching data from a XML response . . . . . . . . . . 394.4.4 Download and upload from an USB disk . . . . . . . . 404.4.5 Open PDF file . . . . . . . . . . . . . . . . . . . . . . 40

4.5 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

5 Testing 425.1 Functional tests . . . . . . . . . . . . . . . . . . . . . . . . . . 42

5.1.1 Login and Logout test . . . . . . . . . . . . . . . . . . 425.1.2 Sign up test . . . . . . . . . . . . . . . . . . . . . . . . 425.1.3 Open file test . . . . . . . . . . . . . . . . . . . . . . . 445.1.4 Navigation test . . . . . . . . . . . . . . . . . . . . . . 455.1.5 Language test . . . . . . . . . . . . . . . . . . . . . . . 465.1.6 Print image test . . . . . . . . . . . . . . . . . . . . . 46

5.2 Non-functional tests . . . . . . . . . . . . . . . . . . . . . . . 465.2.1 Usability test . . . . . . . . . . . . . . . . . . . . . . . 475.2.2 Memory usage test . . . . . . . . . . . . . . . . . . . . 47

5.3 Samsung tests . . . . . . . . . . . . . . . . . . . . . . . . . . . 485.4 Test results . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6 Validation of design decisions 496.1 On demand load of JavaScript files . . . . . . . . . . . . . . . 496.2 Dynamic HTTP requests . . . . . . . . . . . . . . . . . . . . 496.3 Minify . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

7 Conclusion 52

viii

CONTENTS CONTENTS

A Comparison between CloudMe’s user interfaces 57

ix

CONTENTS CONTENTS

x

CONTENTS CONTENTS

List of Acronyms

AJAX Asynchronous JavaScript And XMLAPI Application Programming InterfaceCSS Cascading Style SheetGNU GNU’s Not UnixHTML HyperText Markup LanguageHTTP HyperText Transfer ProtocolHTTPS HyperText Transfer Protocol SecureJS JavaScriptMD5 Message-Digest Algorithm 5MIT Massachusetts Institute of TechnologyMP3 MPEG Audio layer IIIMVC Model View ControllerPDF Portable Document FormatSDK Software Developer KitSOAP Simple Object Access ProtocolTV TelevisionUI User InterfaceUSB Universal Series BusXML eXtensible Markup Language

1

Chapter 1

Introduction

Nowadays, with the increasing number of devices that can run third partiesapplications available in the market and the improvement of telecommuni-cation networks, users expect to have all their data accessible any time andanywhere. As the users’ demand increases, the companies have to innovatewith new devices and new applications. One example of these new devicesare the smart televisions: a television which can be connected to the Internetand in which applications can be installed [25, 8]. To that extent, most ofthe major manufacturers (such as LG, Panasonic, Philips, Samsung) alreadyo↵er the possibility to develop applications for their own platforms [39].

1.1 Problem description

In this thesis, we study a set of technologies and specify requirements inorder to design and develop a multimedia application for these new devices.Additionally, the viability and success of the application is checked by run-ning tests during the development process.

This thesis is centered on two main aspects. First, how to develop agood user interface for a television. Secondly how to build a multimediaapplication for cloud computing e�cient in responsiveness terms. It alsopresents some interesting aspects about how to authenticate to a server us-ing a suitable authentication method and using standard web protocols tocommunicate to the server.

1.2 Objectives

The objective is to create an application which will be able to connect aSamsung SmartTV (the smart television of Samsung) with a user’s CloudMe

2

1.3. APPROACH CHAPTER 1. INTRODUCTION

account which fulfills the following requirements:

• The application must provide a UI that allows the user to browse theirCloudMe file system.

• The application must be able to play video, display images and repro-duce audio.

• The application has to be ”fast enough” to be usable. By ”fast enough”we mean that the booting time has to be at least the same time asthe web browser application needs (around 8 seconds). It also hasto be fluid, or in other words, the waiting time inside the applicationitself should be minimal. By minimal we mean that the time to open afolder when no network congestion occurs and the network throughputof above 1Mbps is below 0.5 seconds.

• The UI has to be user-friendly for TV, that means, for example, thatit has to fit a TV screen and have to be controlled by a remote. It willalso follow Samsung user experience guideline [30].

• In order to internationalize the application, multi-language supportshould be added.

• The application should be able to print directly from the TV.

• To deploy the application and upload it on the Samsung market [10].

The starting point of this thesis is the existing HTML 5 and Ajax-basedweb client from CloudMe, which in certain occasions is going to be usedas a model. However, this thesis is the first approach to create a SamsungSmartTV application.As for the last three points, they will be done if time allows its realiza-tion. On the contrary, all of the other points are considered as minimumrequirements for this thesis.

1.3 Approach

Given the preceding problems, the approach adopted is to split the work indi↵erent phases each one with di↵erent tasks:

1. Software requirements

2. Planning

(a) Installing the programs needed, configuring the working environ-ment (TV and laptop) to make it work together.

(b) Getting used to the Samsung Developer Kit (SDK) and the work-ing environment to learn how the applications work in the TV.

3

1.4. EVALUATION CRITERIA CHAPTER 1. INTRODUCTION

(c) Getting familiar with the CloudMe environment and studyinghow the communication between the application and the serveris possible.

(d) Planning and designing the application, and describing the ratio-nale for the design choices made.

3. Developing

(a) Developing a first prototype of the application: it should be ableto login to the CloudMe account and to navigate through the filesystem as specified in Section 3.1.2.

(b) Improving the user’s interface (see objectives, Section 1.2).

(c) Adding the multimedia reproduction feature (see use case 3.1.4).

(d) Developing the create account functionality described in use case3.1.3.

(e) Adding extra requirements, such as multi language support andimage printer.

4. Testing

(a) Testing the prototype in the Samsung’s TV emulator.

(b) Testing the visualization in the real Samsung SmartTV that CloudMehas provided. This is possible by connecting the TV to the localnetwork.

(c) Running a battery of tests to check that the application is workingin a proper way.

5. Deployment

(a) Packaging the application and upload it to the Samsung market.

1.4 Evaluation criteria

In order to measure the success of the application, the following tests arecarried out. These tests are done manually, since the automation of thetests is not an easy task and due to the time limit of this project, is notfeasible. However, Samsung will expose the application to the procedure ofautomatic and manual testing before uploading it to the market. The testingenvironment is the emulator provided by Samsung for both 2011 and 2012models and a real 2011 TV (model UE40D8005YUXXE). The applicationis considered as successful if it passes the following tests.

• Login test: Given a user name and a password, the application hasto be able to login to the CloudMe server. It also has to check thecredentials introduced.

4

1.5. LIMITATIONS CHAPTER 1. INTRODUCTION

• Logout test: The application has to be able to log out from the useraccount.

• Sign up test: The application has to be able to create a user accountin CloudMe.

• Remember me test: The application has to be able to remember theuser credentials and log in automatically.

• UI test: The application has to fulfill the Samsung guideline to designa good UI.

• Navigation test: The application has to be able to navigate betweenfiles.

• Video test: The application has to be able to play a video file in full-screen.

• Image test: The application has to be able to display an image file infull-screen and in slide show mode.

• Responsiveness test: The application has to fulfill the time require-ments described in the problem description in Section 1.2.

• Print test: The application should be able to print an image if acompatible printer exists.

• Language test: The application has to be developed in di↵erent lan-guages (for now, English and Spanish) and it has to check that it canbe changed.

1.5 Limitations

There are some limitations in the use of this application:

• The application only works in 2011 and 2012 models of the TV.

• A television needs to be connected to the Internet in order to login tothe application.

• If the network throughput is not good enough, video playing will notwork.

• The application has to be compatible with CloudMe web interface.

• The number of languages is limited, but can be extended easily bytranslating the language file.

5

1.6. THESIS OUTLINE CHAPTER 1. INTRODUCTION

1.6 Thesis outline

In this section we explain how this thesis is structured. There are sevenchapters: introduction, background, design, implementation, tests valida-tion of design decisions and conclusion. The background gives informationabout the CloudMe service, the Samsung SmartTV and the technologiesused to develop the application. The design chapter describes the key con-cepts used to design the application. The implementation points out someimportant aspects about how the application is developed. The tests chap-ter presents the tests done and the results to check that the applicationworks as expected. In the validation of design decisions chapter we showmeasurements to check whether the design decisions made where good ornot. Finally, the conclusion section is centered on what has been achieved.

6

Chapter 2

Background

In this section background information necessary for a better understandingof the thesis is given.

2.1 CloudMe system description

CloudMe is a cloud computing service that focuses on storing, sharing andaccessing information. Inside all the cloud computing services, it belongsto the group Data as a Service, (DaaS) [21]. This means that the userscan access their (or shared) data over a network. The concept of cloudcomputing o↵ers some advantages. It is scalable because it can be accessedfrom anywhere with an internet connection. This is possible because theinformation is located in a data center. Moreover, it can be accessed withmultiple devices, not only web browsers. Cloud computing is flexible becauseit can be shared between multiple users. It is an autonomous system which ismanaged transparently to the user. It can also be used as a backup service.

2.1.1 Software architecture

The CloudMe system consists of a back-end, the server where all the infor-mation is stored, and multiple front-end applications, such as a websites,iPhone and android applications, used to access an account, as seen in Fig-ure 2.1. To access an account, the user has to be authenticated by providinga valid user name and a password.

2.2 Samsung SmartTV

The new generation of televisions, called SmartTV [37], o↵er the possibilityto connect a television to a network and to install third parties applications

7

2.2. SAMSUNG SMARTTV CHAPTER 2. BACKGROUND

Figure 2.1: CloudMe client applications

Figure 2.2: Application on a SmartTV [34].

[39].With the release of the SmartTV, Samsung launched a Software Devel-oper Kit (SDK). By using this SDK, a external developer has the possibil-ity to create applications for Samsung’s television. The applications for aSamsung’s SmartTV are web-based and are developed in HTML, CSS andJavaScript or Flash. However, even though they are web based, they presentsome specific aspects which make them di↵erent to traditional web applica-tions. These aspects are for example, the way the user interacts with theapplication and the available memory compared to a PC.

As seen in Figure 2.2, the application runs in a browser in the TV screen.Every application developed for the SmartTV consists of: HTML files, CSSfiles for visualization, JavaScript files to control the behavior and some con-figuration files. Moreover, these files are grouped to form scenes. Each scenecan have one or multiple tasks.

All SmartTV users can download applications if they have an internetconnection. These applications are stored in the television internal memory.

8

2.3. TECHNOLOGIES CHAPTER 2. BACKGROUND

The main screen of the Samsung SmartTV is the Smart Hub, where all theinstalled applications are located.

2.3 Technologies

In this section, some of the technologies used in the application are brieflyexplained for better understanding of the design and implementation pro-cess. These technologies are: JavaScript, CSS, HTML, jQuery and Ajax.Additionally, we will also explain the model view controller paradigm, thedigest authentication method and the simple object access protocol.

2.3.1 JavaScript

JavaScript [9] is an interpreted programming language. This means that ithas to be executed using an interpreter, instead of using a compiler as thecompiled languages. This kind of language o↵ers some advantages:

• It is platform-independent.

• The program’s size is smaller.

• The memory management is done automatically using a garbage col-lector.

However, it also has some drawbacks:

• The execution time using an interpreter is greater.

• The necessity of having an interpreter locally.

Additionally, JavaScript o↵ers object-oriented capabilities. The mainissue about using JavaScript is that some parts of JavaScript’s core are spe-cific to the browser extension. This makes cross-browser compatibility aproblem for developers [9].JavaScript is the main language used in the development of a SamsungSmartTV application. Additionally, we have used jQuery library (see Sec-tion 2.3.2).

2.3.2 jQuery

jQuery [18] is a JavaScript library created by John Resig. Its purpose is tosimplify the way JavaScript is used. It basically o↵ers multiple functionsthat would need much more coding if JavaScript is used instead. One ofits advantages is that it is free and open source licensed with both MITlicense and GNU license. It also has cross-browser compatibility [20]. Thus,jQuery deals with the cross-browser compatibility problem of the JavaScriptlanguage.

9


jQuery can be used in two ways: via the $ or via $. functions. The first oneis used to modify the the content of the DOM (Document Object Model).The result of this function is an object that matches HTML elements. Theseobjects can then be modified. The second one alters global properties.

2.3.3 Ajax

Asynchronous JavaScript and XML (Ajax) [2] is a technique used in webapplications. It consists of performing requests to the server asynchronously.These requests can modify the displayed content without reloading the entirepage. This technique di↵ers from the classical way of programming webapplications. In the classical way, the HTTP request is sent to the serverwhich responds with an entire HTML page to the client. Even if only onesmall part of the whole page has to be changed, it will be reloaded entirely.With this approach, time is gained as the application can perform othertasks while waiting for a response.

2.3.4 HTML

HyperText Markup Language (HTML) [13] is the main language to elabo-rate web pages. The HTML files are text files with a .html extension. Insidethis file, there are multiple tags, normally in pairs (one to start and one toend the instruction) and between them the content is written. An exampleof an HTML document can be seen in Figure 2.3. In this figure, a simplehello world message is displayed. It can be observed that the content isembedded between html tags. Inside this tag, the tags head and body canbe seen. These files are opened by web browsers, which read the HTML tagsand generate the layout of the web site. Additionally to HTML several othertechnologies can be used. For example, JavaScript can be used to make theweb site dynamic by changing content without reloading the entire page.Also, CSS can be used to separate the content from the view.

Figure 2.3: HTML tags.

10


2.3.5 CSS

Cascading style sheets (CSS) [6] is a language used to define the appearanceof a document written in a markup language, such as HTML. The CSS filehelps to separate the structure from the presentation of a document. Theversion used in this thesis is CSS3. However, CSS3 is not fully supported inSamsung’s televisions [7]. The elements inside the HTML files are organizedin tags (see Figure 2.3). These divisions are positioned in the screen layoutusing the position CSS tag.

2.3.6 Model View Controller

The Model View Controller (MVC) [11] architecture is a technology usedto divide the application into di↵erent components to separate data struc-ture, presentation and logic of an application. This modularity o↵ers twoadvantages [11] [3]. It is easy to read and easy to modify because the codeis not mixed. In the following, we explain the function of the model theview and the controller. The model groups all the classes belonging to thecore of the application. The view gathers all the classes that are related tothe presentation of the information to the user (or, in other words, the userinterface). The controller groups all the classes managing the interactionbetween the view and the model.

2.3.7 Digest access authentication

The digest access authentication is an agreed-upon method to negotiate cre-dentials used in the HyperText Transfer Protocol (HTTP) [14]. It checksthat both parties know a password without the password being sent clearthrough the network. A sequence diagram of the process of authenticationusing digest is shown in Figure 2.4 The www-authenticate header containsthe nonce value, which is generated in the server, and is needed to au-thenticate. This value is then read by the client, which creates the digestauthentication header. The most important part of this header is the re-sponse, which is a string created by hashing the user name, the password, thenonce value, the HTTP method and the Uniform Resource Identifier (URI).Normally the MD5 algorithm is used as the cryptographic hash function.

2.3.8 Simple Object Access Protocol

The Simple Object Access Protocol (SOAP) [33] is a protocol which defineshow two nodes in a network can communicate by using extensible markuplanguage (XML) data over HTTP. Every SOAP message is comprised of anenvelope, which contains the header and the body. It also needs to specifythe encoding rule used in the message [31]. The messages that are sent toand received from the server are SOAP messages.

11


Figure 2.4: Digest authentication sequence diagram

12

Chapter 3

Design

In this chapter the design of the application is explained. It has five sections:functional requirements, design goals, architecture, user interface and designdecisions made to improve responsiveness.

3.1 Functional requirements

In this section the requirements of the application are explained.

3.1.1 Navigation

This requirement describes one of the main functionalities of the application:navigation within the CloudMe file system, as specified in the first objective.Therefore, this is a primary use case. This use case has a prerequisite: theuser must be logged in to be able to navigate through their files.

Basic flow

The user moves between the di↵erent files and folders using the arrow keysof the remote controller. Also, he/she can open any folder by pressing an-other button.

Alternate flow: Sort folder and files

Additionally, the user can sort the files in each folder, for an easier naviga-tion.

3.1.2 Login and Logout

The purpose of this use case is to describe how the user connects to theapplication. It is a primary use case since it is needed in order to achieve

13

3.1. FUNCTIONAL REQUIREMENTS CHAPTER 3. DESIGN

the previous requirements. The actors involved in this use case are the user,who has to enter their credentials, and the server, which performs the au-thentication.

Basic flow

The fist scene shown in the application is the login scene. Once it is dis-played, the user types his user name and password into two input fields forthat purpose. There are also two buttons, one to log in and the other oneto create a new account. To log in, he/she selects the sign in button andpress enter. A request then is sent to the server asking for authentication.If the authentication succeeds, another request is sent to the server askingfor the folders and files of the root drive. When the response is received, thedrive scene must be shown. Finally, once in the drive scene, the user mustbe able to log out and then redirected to the login scene.

Alternate flow: Invalid credentials

Additionally to the basic flow, there is a chance of failure in the authentica-tion process. In this case, a pop up window should appear warning about thefailure and informing the user why it happened. Some reasons explainingthis issue could be, for example, that the introduced credentials are wrongor blank, or that the server could not be reached.

Alternate flow: Keep signed in option

In the login scene, there should be also a check box which will keep the usersigned in for the next time, if the validation succeeds. In other words, nexttime the application starts, the user will be logged in automatically andredirected directly to the drive scene. This should remain this way until theuser chooses to log out in the drive scene.

3.1.3 Create account

This is a secondary use case that describes how a user that does not havean account can create one within the application. This is not a necessaryrequirement, since the objectives can be achieved without it (see Section1.2), but it will be useful for a client that launches the application for thefirst time. This use case and the login and logout one can be seen in detailin the flow diagram in Figure 3.1.

14


Basic flow

As seen in Section 3.1.2, in the login scene, there is a button to create anaccount. When pressed, the view should switch to the sign up scene. Thisscene must show di↵erent fields that the user has to fill in order to get anaccount and a button to submit the data. When all the necessary fields arefilled and the button is pressed, the request to the server is sent. However,before being able to send the request to server, it has to provide validationin order to avoid sending unnecessary HTML requests. The validator needsto check the following points:

• The user-name is not already taken (a request to the server is neededfor this).

• The password is long enough (at least five characters).

• The format of the email is correct.

• The user has accepted the user agreement.

If the validator fails, then a pop up message will appear, mentioning all thevalidators that are creating the error. When the account is created, the useris redirected to the drive scene.

Alternate flow: Error creating the account

If any error is produced in the server while creating the account, the usershould be noticed by displaying a pop up.

Alternate flow: Open user agreement

To create a new account, the CloudMe’s user agreement must be accepted.Therefore, the user has to be able to read the user agreement within theapplication. By pressing a button in the remote, the user agreement shouldappear/disappear on top of the screen.

3.1.4 Open media file

This is a primary use case and is one of the main features of the application,since achieves the second objective. This use case has a prerequisite: theuser has to be logged in.

15


Figure 3.1: Login, logout and create account flow diagram

16

3.2. DESIGN GOALS CHAPTER 3. DESIGN

Basic flow

When the user selects a media file the application has to run the followingtype of files according to the specifications of each type:

• Audio FileIt must start the reproduction of the file in the same scene. It alsoneeds to display in the scene the volume, which song is playing andthe current duration of the reproduction. When the file is playing, itmust provide buttons to control the reproduction. The user has to beable to stop the music, control the volume, play next song or pause it.

• Video FileIt has to be opened in full screen mode and start playing the file.It has to provide buttons to control the reproduction. The controlsneeded are volume control, play, pause, stop, fast forward and rewind.Additionally, the file name and the current duration must be displayed.

• Image FileAs the video file, it has to be opened in full screen in a new scene.

Alternate flow: Image slide show

It has to provide a slide show functionality, that is, when selected, it has todisplay all the images in the folder until stopped by the user. It should alsobe possible to move to the next or previous image by pressing one buttonin the remote.

Alternate flow: Printing an image

The image scene should provide a button to print the current displayedimage. However, the printing functionality is optional as it is not supportedby every TV and printer.

3.2 Design goals

In the following paragraphs we will explain the main issues that have beentaken into account while designing this application.

The main goal is to develop an application that provides a good user ex-perience. Two important aspects to achieve a good user experience are theresponsiveness and the ease of use. If it takes to long to perform a desiredtask, it is highly probable that the user would get bored and stop using it.A more detailed design of the responsiveness is o↵ered in Section 3.5. Toimplement an easy to use application, the user interface has to be clear.In other words, the user interface has to be so that a user knows at everymoment what he/she has to do to perform a task. The user interface is

17

3.3. ARCHITECTURE CHAPTER 3. DESIGN

detailed in Section 3.4.

CloudMe is already ready to be used in multiple platforms. In order togive a user a di↵erent experience, we have to focus on the advantages of aTV. The main advantage of a television is the screen size. Therefore, theapplication will be focused on multimedia. Hence, special attention is goingto be given to audio and video reproduction and also to the display of images.

Another important aspect is the compatibility. Since Samsung changed theinternal rendering engine from Gecko [12] to WebKit [36] in the 2012 ver-sion of the television, a special care has to be taken in compatibility betweenthis two models, as probably most of the users will not have a 2012 model.Therefore, it has to be compatible with both 2012 and 2011 TV devices.

The modularity and extensibility of the application is also important be-cause this is not the final version of the application. This will make theapplication easier to maintain and to add new features. Therefore, it is es-sential to structure the application into modules to make it is easier to addnew functionalities. Thus, the scene based architecture for the views hasbeen chosen, as each scene performs a limited number of tasks. Adding newscenes with new functionalities to the current application does not interferewith the previous system.

It is absolutely essential to build a secure application. To improve the secu-rity of the application, some design decisions have been made. For example,when it is not possible to use digest authentication due to limitations ofthe web engine, HTTPS (secure HTTP) [15] is going to be used instead ofHTTP, so the communication with the server is encrypted.

3.3 Architecture

The application for the Samsung SmartTV has to follow the Samsung’sAppsFramework [29] to be able to use the scenes. This framework providesa high level API which provides a set of features to the application. Thearchitecture is detailed in Figure 3.2. In this figure we can see that the Apps-Framework (highlighted with the red border) contains a framework API, UIcomponent API and a service API. The framework API is used to controlthe basic and core functionalities for the applications. UI component APIis used to add components such us buttons or scroll bars to the application.It is based on a modified jQuery version. Service API is used for specificTV functionalities. These can be image or video viewing, opening USB diskor using a di↵erent kind of remote controller. In Figure 3.2 we can also seethe methods onStart and onDestroy which belong to the application (high-

18

3.3. ARCHITECTURE CHAPTER 3. DESIGN

lighted with the green border). These methods are the entry and exit pointof the application (the first and last methods to execute).

Figure 3.2: Application framework structure [29].

The user interface is based on scenes (see Section 3.2). A scene is alayer, which consists of a JavaScript file, a HTML file and a CSS file, thatcan be displayed in the TV. The scene manager (inside Framework API inFigure 3.2) is in charge of showing or hiding each of the scenes, so only oneof them is focused at a time. Each scene is in charge of a particular task,so there are scenes to login, to sign up, to view the user’s drive, to displayimages, to play video. The use of scenes also helps to the extensibility ofthe application, as it is easy to add a scene with a particular task, withoutmodifying the previous system.

Even though the MVC architecture (see Section 2.3.6) is one of the mostpopular architectures for web applications, and had been considered as apossible technology for design, due to the usage of the AppFramework andits scenes, it has not been completely followed. Nevertheless, since it o↵ersgood features to web applications, the application is divided in a similar way.

The similarity with the MVC architecture comes as follows. In our archi-tecture, the views are the scenes, as they contain the files related to the user

19

3.4. USER INTERFACE CHAPTER 3. DESIGN

interface and how the user interacts with the application. The controller isdivided in two modules controller.js and storage.js. The controller.js mod-ule is in charge of displaying the corresponding scene and to communicatewith di↵erent modules to perform operations. The storage.js module is incharge of storing the application data. Finally, there is one module in chargeof performing the queries to the server (similar to the model in a MVC ar-chitecture).However, there are also some di↵erences between our architecture and theMVC paradigm. For example, in our application, the scenes also managescene-specific functions. This means that the scenes have two purposes.First, they are in charge of the layout of the application. Secondly, they arein charge of some operations that take place within the scene. Regardingthe model, instead of communicating directly with the database, it commu-nicates with another model in the server side.An image of the architecture of the application can be seen in Figure 3.3. Inthis figure, the arrows mean that the modules communicate with each other.We can also observe that each scene contains its view (.html file), its viewformat (.css file) and scene-specific functions (the .js file).These functionsinclude a handler for button pressing, functions to change the view content,and functions called when the scene is shown or hidden. The non-specificfunctions are in the controller and can be accessed from any scene. Finallythe model performs all the queries to the database through HTTP requestswhen requested by the controller.

One of the reasons to imitate the MVC architecture is that is makeseasier to maintain the application by o↵ering a great modularity. For ex-ample, in this kind of application, where the user interface is one of themost important features, it o↵ers the possibility to change it easily withoutmodifying the rest of the code.

3.4 User interface

The design of the user interface for a TV application presents some uniqueaspects that have to be considered. Some of the most important ones thatmake the UI of a TV application di↵erent from classical web UI, is the factthat the user has to navigate through the application using a remote con-troller. In a TV application, the navigation with the remote controller isbased on four directional arrow buttons. In the following paragraphs we willexplain some other aspects to keep in mind while developing the UI.

Giving feedback to the user is necessary to make the usage of the appli-cation easier. One way that this feedback is given is by letting the user

20


Figure 3.3: Application architecture

know in which element the focus is set. This will be done by adding someborder to the element, changing the background color or changing the fontcolor. It is also important to give feedback when the application is perform-ing an action and has to wait. This can happen, for example, when waitingfor the data from the server to arrive. In this case an animated image willappear in the middle of the TV and will remain until the action is finished.Finally, in order to help the user not to get lost throughout the application,the folder route is always displayed in the screen. If this feedback is notgiven, the user would not know in which point of the folder structure is.This may lead to a misuse of the application and in the end not been usedat all.

As said before, the application is controlled by a remote. Hence, comparedto a web application controlled by a mouse, there are more buttons that canbe used. The usage of these buttons has to be consistent with the knowledge

21


the user may have (for example, the play button should reproduce some kindof media). They also have to be consistent with the Smart Hub environment[28], in the sense that identical buttons should perform the same task in theSmart Hub and in every application. This is essential to improve the appli-cation usage learning curve. If a button is used to perform a task with nopossible common prior knowledge, its function has to be clearly defined bystating its functionality on the screen. Normally, in the Samsung SmartTV,these buttons are defined in the helper bar of the application which is lo-cated in the footer. Nevertheless, as more buttons than can be fitted in thebar are planned to be used, a special menu is displayed with extra buttonsfunctions, as it can be seen in Figure 4.4.

As this application is intended to display multimedia content, a HD res-olution will be selected. Since 1080p resolution needs more bandwidth andsome televisions do not support it, a 720p resolution has been chosen. Thisresolution may be changed in future versions, when greater bandwidths willbe available. It is important to adapt also the size of the elements to makeit legible.

The Samsung guide-line defines some mandatory items that the applica-tion must contain. One of these items is, for example, displaying the username in the left side of the help bar.

As the user will be sitting at around 2-3 meters from the TV, instead ofthe normal distance to mobile phones or computer screens, the legibility ofthe application has to be strongly considered. The font size and images usedhave to be big enough to be seen perfectly by a person with normal sight. Tofulfill these requirements match with Samsung requisites, a minimum fontof 21 pixels is going to be used.

As the users may be familiar with using the web version of CloudMe [5],it is necessary to maintain certain similarities to make the learning processof the application faster and easier (see appendix A).

The navigation within the scenes is detailed in Figure 3.4. In this flowdiagram, we can observe which scene is shown when a particular button ispressed. The button is specified in the arrows. To emphasize the color ofthe button, some arrows have been drawer in the same color as the button.The most important scene is the drive scene because from this scene the usercan move to any of the scenes except the sign up one. We can observe alsothat the folder navigation is controlled by the buttons Enter and Return.

22


Figure 3.4: Scenes flow chart

23

3.5. RESPONSIVENESS IMPROVEMENT CHAPTER 3. DESIGN

3.5 Approaches to responsiveness improvement

In order to build the application suitable in term of responsiveness, the fol-lowing decisions have been made.

3.5.1 Separate the JavaScript files

With this decision, we try to reduce the booting time of the application.To achieve it, the JavaScript files have been separated into modules. Theapplication only loads dynamically those files that are needed. Therefore,the application booting time is decreased as it does not need to load all thefiles before the screen is rendered. This is done in two ways:

• Since the first scene to show is the login scene, it is the one that willa↵ect the booting time. Most of the files are needed to perform thelogin operation, but these files are needed after the user actually pressthe login button. These files are not needed to display the login sceneitself. Given this fact, the following decision has been made to improvethe booting time. The application shows the login scene and then itloads the needed JavaScript files to login asynchronously. This canbe done because the user needs time to insert their user name andpassword and this time is greater than the time needed to load thesefiles, specially because it has to be introduced using the remote con-troller. In other words, while the user is typing their credentials, theapplication is loading the needed files to perform the login operation.However this method can only be done if the user needs to providetheir credentials. If the credentials are stored from previous login, thefiles need to be loaded in advance.

• The part of the code that is needed to create an account is not normallyused (the user is not supposed to create an account every day). Thus,it is only loaded if the sign up scene is shown. In the same way as theprevious point, it loads the files while the user is typing.

A test is going to be performed in Section 6.1 to calculate the improvementof the booting time by using these techniques.

3.5.2 Reproduction bu↵er size

It is essential to set the reproduction bu↵er to a correct value to avoidthe video stop to many times and to avoid to wait too long before thereproduction starts. The bu↵er size is determined by the network jitter,that is, the variation of the network throughput. According to Ozbek and

24


Tunali [24], a bu↵er size to hold data that is transmitted within 5 secondsis suggested when the network jitter can not be known. To calculate thebu↵er size, the duration of the video and its size is needed. However, theapplication does not know the duration of the video in advance. Thereforethere is a initial bu↵er that is estimated by using the throughput. Thenetwork throughput is estimated when the application starts. For example,if the video should start within the next 5 seconds, the initial bu↵er size hasto be 5 times the network throughput. Additionally a limit is set to avoidvery large initial bu↵ers when the throughput is big.

initialbu↵ersize = networkthroughput ⇤ 5s

Then, when the information of the video is fetched, the video bit rate iscalculated using this formula:

bitrate =videosize

videoduration

The total bu↵er size is recalculated to 5 seconds with the formula:

bu↵ersize = bitrate ⇤ 5s

3.5.3 Number of files ordered to server

The sequence of actions that occur when a user opens a folder is the follow-ing. First, a request is sent to the server asking for the folders inside thecurrent folder that is being opened. Second, another request is sent askingfor the files in that folder. The second request has a parameter that is thenumber of files requested from the server. If the total number of files inthe folder is very large, the time needed to get all that data is quite large.Therefore, the number of requested files is changed according to the user’snetwork throughput. The objective is to make the loading time of the filesless than 0.5 seconds, as stated in the objectives in Section 1.2.However, following this approach, more requests are sent and it would ac-tually take more time to load the images. Thus, to make the applicationmore fluid, when the first response from the server reaches the television,its content will be displayed. The remaining requests then are sent in thebackground and are added to the files grid when their response is received.The advantage of using this method is that the user can navigate betweenfiles before all of them are loaded. A sequence diagram of this process canbe seen in Figure 3.5

25


Figure 3.5: Open folder sequence diagram

3.5.4 Pre-load of images

For a correct and quick visualization of images, specially in the slide show,two approaches have been followed.

• Loading the images before displaying them:The time needed to download an image from the server varies depend-ing the size of the image and the network throughput. Therefore, ifthe network throughput is slow, more images will be pre loaded sinceit needs more time to download. The number of images to pre loadis set when the network throughput is estimated. When an imageis opened, the application pre loads the number of images previouslysettled.

• Select a suitable image to download:CloudMe’s back-end not only stores the original image but also dif-ferent copies of itself in di↵erent sizes. The maximum resolution ofthe application is 1280x720 pixels (see Section 3.4). This implies thatimages can not be larger than that. However, if an smaller image ischosen, the quality will be worse. Therefore, an image of 1280x720pixels is preferred. Since the server does not have a 1280x720 imagewe are going to use the smallest image stored in the server which is big-ger than the application resolution. In this case, the image resolutionis 1600x1200 pixels.

26


Table 3.1: Number of images pre-loaded

Network throughput (Mbps) Download time (s) Images needed0.5 32 71 16 42 8 25 3,2 18 2 110 1.6 1

We have assumed that a user spends an average time per image of 5 secondsand an average file size of 2MB for the given resolution (1600x1200 pixels).Considering given the previous approaches, we have calculated the numberof files that are pre loaded for di↵erent network throughputs. The resultscan be observed in Table 3.1.

3.5.5 Minify

Minify is the process of getting rid of all unnecessary characters from thecode, such as white spaces or comments. The files are going to be minifiedfor deployment. This reduces considerably the size of the application, andtherefore makes it faster to load. The tool chosen to minify the applicationis JS Minifier [17].

27

Chapter 4

Implementation

In this chapter aspects from the implementation are explained.

4.1 Controller

The controller performs multiple operations within the application. Someof these operations are the estimation of the network throughput, login andlogout operations, handle the files and play music. The handling of filesrefers to choose what to do when the user press the enter button in a file.

4.1.1 Estimation of the network throughput

As seen before, the network throughput is needed to set some parameters inthe application. To get an estimation of it, the following approach has beenfollowed. An image whose file size is known is downloaded from the CloudMeserver. The time needed to download it is measured. Algorithm 1 explainshow the estimation of the network throughput is calculated. Additionally,the steps to estimate the network throughput are:

1. A random number is added at the end of the image address. Thereason to do this is to avoid the browser to use a previously cachedimage.

2. A new image variable is created.

3. The source of this image is assigned to the address generated in thefirst step. Once is done, the request to the server is sent. Therefore,the initial downloading time is set.

4. When the image is received, the onload method of the image is called.

5. The end time is set.

28

4.1. CONTROLLER CHAPTER 4. IMPLEMENTATION

6. The download time is calculated by subtracting the end time and theinitial time.

7. Then, the network throughput in bits per second is calculated by usingthis formula:

networkthroughput =imagesize(bits)

downloadtime(s)

Algorithm 1 Estimation of the network throughput

url imgUrl + randomimg NewImageimg.src urlstartT ime timeNowwhile img not received dowait

end whileendT ime timeNowdownloadT ime endT ime� startT imenetworkSpeed imageSize(bits)/downloadT ime(s)

This whole process is repeated 20 times and then the average time iscalculated. The reason to do this is because there can be network errors,for example, produced by network congestion. Therefore, if it is only calcu-lated once, it can lead to an erroneous estimation of the network throughput.

Once the estimation is done, it assigns values to the necessary param-eters. The network throughput has been separated in 5 intervals: below1Mbps, from 1 to 3 Mbps, from 3 to 6 Mbps, from 6 to 10Mbps and over10Mbps. The reason to discretize the network throughput is because wehave to assign values to the number of files fetched (as specified in Section3.5.3).

4.1.2 Login and Logout

The user name and the password introduced by the user in the drive sceneare received by the controller. The controller then encrypts the passwordusing a hash function. The hashed password and the username are given tothe model. The model creates a request with a login SOAP action to theserver to check the credentials. If the authentication succeeds, the controllerasks the model for the content of the root folder and send that informationto the drive scene to display it.

29

4.1. CONTROLLER CHAPTER 4. IMPLEMENTATION

To logout, the controller erases all the variables that have been used andall the user data for security and memory usage reasons. Then, it sends amessage to inform the server that the user is logged out. Finally, it redirectsthe user to the login scene.

4.1.3 Handle files

The controller decides what to do when a user press the enter button toopen a file. Firstly, it reads the mime type of the file and then compares itto check if it can be opened. There are multiple options:

• MP3 audio fileIt plays the file as shown in the next subsection.

• Video fileCalls the video scene with the file.

• Image fileCalls the image scene with the file.

• Other fileIf the user tries to open an unsupported file type, a message is displayedin a pop-up. This gives feedback to the user.

This process is explained in Figure 4.1.

4.1.4 Play music

If an audio file is selected, the controller creates a play list. This play list isan array which contains the file info (url, song name, artist, album) receivedfrom the server of each song in the current folder. Then an instance of theplayer plug-in (which belongs to SEF Plugin [26]) is created and the repro-duction of the song starts. Additionally, the file name is displayed in thedrive scene to know which song is being played. To view the reproductiontime, the player has a method (onCurrentPlayTime) that is called everysecond. This method returns the time in milliseconds the audio has beenplayed. The controller formats this number into hours, minutes and seconds,i.e., HH:MM:SS, to improve the visualization. Additionally, a progress barof the reproduction time is displayed. To create the progress bar, we proceedas follows.Firstly, two div elements have been superposed in CSS with the same height,one with white background and the other with blue. The audio controls canbe seen in detail in Figure 4.1.4. When the reproduction time is fetched, itis calculated as a percentage of the total. Then the width of the blue bar,initially set to zero, is changed using this percentage adapted to the length

30

4.2. MODEL CHAPTER 4. IMPLEMENTATION

Figure 4.1: Open file flow diagram

Figure 4.2: Music player UI

of the bar.

The reason that the play list is created is that when the song finishes,the next one is played. In this way, the user can still listen to the songsbelonging to one folder even if he/she moved to another folder. This playlist is maintained until it is overwritten by playing another audio file inanother folder.

4.2 Model

Every time a request is needed to be sent to the server the model is called.These HTTP requests need to contain the authentication header which isconstructed among others with the user name and the password. Otherwise,

31

4.3. SCENES CHAPTER 4. IMPLEMENTATION

an unauthorized message will be received from the server. Therefore, whenthe user logs in, the model needs to store the user name and password.There are two possible ways of doing this: storing them in a global variableor inside another function. The first approach is not safe, since its value canbe overwritten any time. Thus, the second approach has been followed.One function has been created (called outer function) which has the username and the password as attributes. Then, the functions (inner functions)that make the query to the server are inside the outer function. Therefore,the user name and password are only accessible inside the outer function,which is safer. When the user logs in the outer function is called and whena query is needed, one of the inner functions is called.Before a request is sent to the server, a SOAP message [31] has to be created.In the same way, when the response is received, the model has to unsoapthe message and then send the XML information to the controller.

4.3 Scenes

In this section the di↵erent scenes used are explained.

4.3.1 Drive scene

This scene is divided in three parts: in the left side there is a grid with thefolder and files, on the right side there is an options menu and below themenu there are the audio controls. An image of the drive scene can be seenin Figure 4.3.1. Additionally, on the top-left corner the user account info isdisplayed. In the rest of the section, we will explain the grid and the menuin more detail.

The drive scene shows the folder and files in a grid. When a folder isopened and the response is received from the server, the controller sendstwo arrays to the drive scene containing the name of the folders and the filesin the current folder. Firstly, the scene goes over the folders and then overthe files. For each file or folder, the scene selects the icon that correspondsto its file type and draws it in its position in the grid. The position in thegrid is the position of the array, drawing first the folders and then the files.Each row contains seven items (folders or files). If the file is an image, thethumbnail is requested from the server. Finally, since the user needs to knowwhich element is the focus set on, a border is going to be drawn around theposition of the element in the grid.

The navigation inside the drive scene is done using the arrows buttonsfrom the remote controller. The main drawback of any remote controlleris that the user needs to go through all the elements one by one. As themenu is located in the right side, the user may have to go through all the

32


Figure 4.3: Drive Scene UI description

files in a row to reach it. Therefore, we have developed a di↵erent approachto facilitate using the menu. In particular, this approach takes advantageof the number of buttons in a remote controller. To use the menu, the userneeds to press the numbers from 1 to 6, instead of moving the focus to themenu. Each number corresponds to one task. The menu with the numbersassigned to the task can be seen in detail in Figure 4.4. In the same way,to use the audio controls, the buttons play, pause, fast forward and rewindare used. However, these buttons do not need to be specified because arepresent on the Samsung remote controller.

4.3.2 Folder scene

This scene lets the user select the folder in which the previously selecteditems are going to be copied or moved. It provides a folder tree. To displaythis folder tree a request needs to be sent to the server in order to knowwhich folders belong to the current folder. When the scene is first shown,the folders belonging to the current folder are displayed. The user cannavigate in the folder tree by pressing the left button, to open the parentfolder and the right button to open the selected folder. This scene is shown

33


Figure 4.4: Menu detail

when copy or move functions are selected. Therefore, a variable is neededto know which action it should perform when pressed enter in a folder. Thisscene can be seen in Figure 4.5.

4.3.3 Image scene

This scene is in charge of image displaying. There are two significant aspectsabout the image scene: image loading and its displaying. In the followingwe discuss these aspects in detail.

First, before the image is displayed, it has to be loaded. To get theimage, a request to the server is needed. During the time that the imageis fetched from the server, the user needs to know that it is actually beingdownloaded. Thus, a loading image is displayed until the image is loaded.Afterwards, the image is displayed at a full screen size if it is bigger than thescreen or at its maximum possible size. Once it is displayed, the process ofpre loading the next images starts. This is done to let the user visualize therest of the images quicker. The requests for these images are sent in parallelto the server and when downloaded, the images are stored in an array. If theuser moves to the next or previous image, the application gets the followingimage. Therefore, when the user reaches its position, it is already loaded.For example, if the user opens the image number 5, when displayed, it willpre load number 6, 7 and 8. If then the user moves to number 6, the serverwill ask for the ninth.

Secondly, when an image is displayed, both horizontal and vertical align-ment is required to improve the appearance of the application. This is aproblem because the size of the image is not known in advance (before theimage is completely loaded). In addition, the image has to be displayed inthe maximum dimension. This means that if the image is bigger than thescreen it will be scaled to fit the screen’s width or height, maintaining the

34


Figure 4.5: Folder scene description

image width/height ratio. To do this, the max-width and max-height CSSproperties [22] of the image has to be set to 100%. To center the image,jQuery and CSS has been used. To center the image horizontally the CSSproperty margin is set to auto. This makes that the distance from the imageto the border from both sides is the same. A excerpt from the CSS centeringcode can be seen in Listing 4.1.

Listing 4.1: Excerpt of centering code

#SceneImageScene img{

display:block;

margin:auto;

max-width:100%;

max-height:100%;

}

To center the image vertically the height of the image is needed, butthis is not known until the image is actually displayed. Therefore, the onlypossibility if the height is not known, is displaying the image at the top ofthe screen and then moved to the center. This presents an issue becausethe user would see the image moving. To avoid it, the image is displayedhidden, that is, the div visibility CSS property is set to hidden. Then, theimage’s height and width is read using jQuery. With these values, the aspectratio (width / height) is calculated and compared to the screen’s one (16:9for panoramic screens). To know if the image has to be repositioned, thepseudo-code in Algorithm 2 has been used. Finally the image’s top position

35


is changed using jQuery and its div is set to visible.

Algorithm 2 Calculate Distance to top

if 16/9 < ratio AND (height > 720 OR width > 1280) thentop (720� (height ⇤ 1280/width))/2

elseif height < 720 thentop (720� height)/2

elsetop 0

end ifend if

4.3.4 Login scene

The login scene is in charge of getting the user name and the passwordfrom the user to perform the authentication. Before sending any data tothe controller, the log in scene performs a validation process. This helpsin order to avoid sending already known wrong login requests to the serverand congesting the network. The validator checks that the user name or thepassword are not blank and if there is a valid network connection, that is,if the television’s wireless or Ethernet cable is connected. This is done byusing the network plug-in provided by Samsung SDK. If the validator fails,a pop up shows and the request is not sent. On the other hand, if it succeedsthe user name and password is sent to the controller which processes theinformation.

4.3.5 Sign up scene

This scene is in charge of getting the user’s data to create an account.Thus, it shows input fields that the user has to fill. The user can move fromone input field to another by pressing up or down buttons on the remotecontroller. The focus is then moved to the next or previous element. Thedata from the filled fields is validated each time the user presses a button inan input field. In the case of the email, a validator checks that @ sign anda dot are present and that is something written before the @ and after thedot. This validator can be seen in Algorithm 3.In the case of the user name, it has to send a request to the server to know ifit is already in use. This may seem a waste of network bandwidth, as moreHTTP requests are needed and the server already validates the user name.However, this has been done in order to let the user know in real time if theselected user name is available. The sign up scene can be seen in Figure 4.6.

36


Figure 4.6: Sign up scene description

4.3.6 Video scene

This scene handles the reproduction of videos.To control the reproductionof videos there are some buttons in the remote controller, such us play andpause that have been used. Additionally, these controls have been displayedin the screen to give feedback to the user with some information about thestatus of the reproduction. Finally, to avoid disturbing the visualization ofthe video, the on screen controls are going to be hidden five seconds after thelast button is pressed. To be able to achieve this, the method setTimeout

[35] from JavaScript has been used. This method executes a certain actionafter some time has passed. To prevent the controls disappear after fiveseconds any button is pressed Algorithm 4 has been implemented. Thereis a variable startTime that records the last time any button was pressed.If the variable startTime minus the current time is greater than 5 seconds,the on screen controls are hidden. The variable startTime is updated everytime a button is pressed.

Fast forwarding and rewinding the video are two features that are nec-essary in video reproduction. Since the application only stores five secondsof reproduction in the bu↵er, implement them in video streaming is not aneasy task: the video has to be received from the server. Therefore, instead

37

4.4. PROBLEMS CHAPTER 4. IMPLEMENTATION

Algorithm 3 Email validator

lastAtPos lastpositionof@lastAtDot lastpositionofdotif lastAtPos < lastDotPos AND lastAtPos > 0 AND lastDotPos > 2AND (length� lastDotPos) > 2 thenreturn TRUE

elsereturn FALSE

end if

Algorithm 4 Hide video controls

if AnyButtonPressed thenreturn startT imer

end ifwhile currentT ime� startT imer < 5 doWait

end whileHideOnScreenControl

of implementing real fast forwarding and rewinding, the e↵ects of these op-erations are going to be imitated. To accomplish it, a method from the TV(jumpForward) that can move the position of the reproduction is used. Thismethod is called every 100ms as long as the user does not press another but-ton in the remote. The reproduction time will move then from the currenttime some seconds forward or backward. Additionally, the user can controlthe number of seconds the video is moved by pressing FF or RW buttonsmultiple times.

4.4 Problems and workarounds

In this section some problems that have been found out during the devel-opment of the application are pointed out. Also, if a workaround has beenimplemented it will be explained as well.

4.4.1 Authentication

A problem has been found when implementing the authentication in the2011 television model. In order to authenticate an HTTP message is sentto the server. This message is generated using the jQuery.ajax method [19].The server then responses with a 401 unauthorized message which containsa www-authentication header. This header has the information necessaryto create a digest authentication header.

38

4.4. PROBLEMS CHAPTER 4. IMPLEMENTATION

In the 2012 television model, when this message is received by the televi-sion, it reads the header and automatically adds the authentication headerto another message. As this message contains the authentication, the serverresponds with a 200 Ok message. However, we have observed that in the2011 television model this answer is not generated.Therefore, another approach has been taken in this model: instead of us-ing the jQuery.ajax method, which internally uses XMLHttpRequests, theXMLHTTPRequests are going to be generated manually. When the unau-thorized response is received from the server, the www-authentication headeris read and its information parsed to generate a digest authentication header.Once it is created, it is sent back to the server, which now responds with anOK message. This authentication method needs two request-response mes-sages to succeed. However, as we already know the authentication header,every time a request is sent to the server the authentication header is added.This is done pre-emptively to avoid congesting the network. Therefore, theauthentication header is stored. It can happen that the authentication cre-dentials from the server have changed. In these cases, another query will besent with the updated header.

The authentication header has to be sent in every request to the server.This presented some di�culties in the fetching of images, video and audiofiles from the server, because we needed to send this header somehow. In webbrowsers, the authentication header is added automatically or the browserprompts the user for the user name and password. The solution found tothis problem is to use an url in the form http://username:[email protected] type of URL is interpreted by the browser and the user name and thepassword are introduced in a digest authentication header after the serverresponses with the www-authenticate header.

4.4.2 Loading images in the 2011 model

While implementing the image scene, it has been found out that in the 2011TV models the maximum number of files than can be loaded is 5. Thislimitation does not allow some images to be displayed as they can not beloaded. We have approached this issue as follows. When an image is goingto be displayed, it first checks whether the application has already tried tofetch the image or not. If this is the case, the array containing the images isdestroyed and created again. Then, the next 5 images are preloaded. How-ever, this solution is not perfect as the application will not be as fluid as itshould, since it has to wait before an image is loaded every five images.

4.4.3 Fetching data from a XML response

There are also some di↵erences in the behavior of the 2011 and 2012 TVmodels in how they fetch the data from a XML response. In the 2011 TV

39

4.5. OVERVIEW CHAPTER 4. IMPLEMENTATION

model, which is based in a Gecko [12] engine the data could be read usingthe children and the node name:files[index].title = $(value).children(”[nodeName=’atom:title’]”).text();

On the other hand, in the 2012 TV models, which is based on WebKit[36], the method children does not work. Therefore the find method has tobe used instead. Also instead of searching for the node name and the atomfield, we have to search for the title.files[index].title = $(value).find(”title”).text();

4.4.4 Download and upload from an USB disk

This feature consists of uploading and downloading from an USB disk con-nected to the TV to the user’s CloudMe account. However, this featurehas not been implemented due to permission problems (writing on the USBis forbidden by Samsung). Finally it was discarded. Nevertheless, if Sam-sung’s policy changes in the future the development of this functionality willbe added.

4.4.5 Open PDF file

This feature consists of displaying PDF files. We experienced some au-thentication and displaying problems while developing this feature. Theauthentication problem was solved by generating the url as done in Section4.4.1.To display the PDF file, the only way was to embedd it into an iframe HTMLtag [16]. An iframe tag permits embedding another HTML document insidethe current document. However, the correct visualization of the PDF couldnot be achieved. The pdf file appeared in the iframe, but it could not bescrolled down. The reason of the failure is that the iframe can not be fo-cused. Therefore, only the first page of the file could be visualized.Thus, a di↵erent approach was followed: instead of scrolling the iframe, wetried to make the size of the iframe window as big as the PDF document.Then, instead of scrolling the iframe, we scroll the screen. To get the PDFsize di↵erent methods were tried:

• Estimate the length of the PDF by knowing its size in bytes.

• Reading the length of the PDF container using jQuery.

None of these methods worked so at the end this feature was also discarded.

4.5 Overview of the application

In this section, an overall view of the application, such as number of files,is given. The application consists of HTML files, CSS files, JavaScript files,

40

4.5. OVERVIEW CHAPTER 4. IMPLEMENTATION

configuration files and images. In our case, it has:

• 15 JavaScript files divided as follow: 6 files for the scenes, 2 files forthe language support (English and Spanish), 1 file that is the initialand the rest for the controller and the model.

• 6 CSS files for the scenes.

• 7 HTML files: 6 files for the scenes and 1 file for the index.

• Configuration files.

• 22 Images

In total, the JavaScript files consist of around 6200 lines of code beforeminifying. All these files have been packaged in a zip file for deployment.This zip file occupies around 1.2MB.

41

Chapter 5

Testing

The tests are going to be realized in a real 2011 TV (model UE40D8005YUXXE)and in both 2011 and 2012 TV model Samsung SDK emulator. These tests(described in Section 1.4) are done manually. Additionally, each test will bedetailed with a set of test cases.

5.1 Functional tests

5.1.1 Login and Logout test

The user has to be authenticated to access the data, providing a user nameand a password. To avoid unnecessary HTTP requests, it has to checkbeforehand whether the user name or the password is blank. If an erroroccurs, it has to display it to the user in a pop up. The user can selectthe remember me option so he/she does not need to authenticate the nexttime the application is opened. It has to remember the user until he/shespecifically logs out. The performed tests cases are shown in Table 5.1.

All tests have been passed successfully in the 2012 system. In 2011an error was found while performing tests 001 and 002, since when the username or password was not correct, it did not display the error message. Theerror was solved and tested again. This time it was completed successfully.The connection error could not be tested in the emulator as this function isonly implemented in real televisions.

5.1.2 Sign up test

The user has to be able to create an account within the application. Theapplication also has to o↵er validation. Therefore, an error message shouldbe displayed if: the user-name is already taken, the password is not longenough, the format of the email is not correct or if the user has not accepted

42

5.1. FUNCTIONAL TESTS CHAPTER 5. TESTING

Table 5.1: Login and logout testsTest ID Test case Expected result001 Send request with invalid pass-

wordPop up message shows displayingthe error

002 Send request with invalid username

Pop up message shows displayingthe error

003 Send request with user name orpassword blank


004 Send request when no connectedto the Internet


005 Send request and after that dis-connect the network cable


006 Login with the ”remember me”option and restart the applica-tion

The drive scene is shown

007 Logout from application The Login scene is shown008 Logout when the ”remember

me” option was checked andrestart the application

The Login scene is shown

the user agreement. When the user account is created, the applicationshould login the user and redirect to its drive. The tests from Table 5.2have been performed.

Table 5.2: Sign up testsTest ID Test case Expected result009 Create an account with a user

name already takenPop up message shows displayingthe error

010 Create an account with an emptyfield


011 Create an account when the useragreement has not been accepted


012 Create an account with a wrongemail address


013 Create an account with a shortpassword


014 Create an account with validdata

The user is logged in and thedrive scene is shown

015 Open and close the user agree-ment

The user agreement is displayedon the screen and then back tothe sign up scene

43


These tests were completed successfully in both systems.

5.1.3 Open file test

The user has to be able to open media files, such as video, audio and images.

Video test

Check that a user can open a video and use the basic controls. The test canbe seen in Table 5.3.

Table 5.3: Video testsTest ID Test case Expected result016 Play a video The reproduction of the video

starts017 Pause the video The reproduction of the video

pauses018 Fast forward and rewind the

videoThe video moves forward orbackward

019 Stop the video The video is stopped and thevideo scene is closed

020 Turn up or down the volume The volume changes021 Mute the volume The audio is disabled022 Press return in the video scene The video scene is hidden and

the drive scene is shown023 Open a video while music is play-

ingThe music stops and the repro-duction of the video starts

All the tests have been passed successfully.

Audio test

Check that a user can open a song and use the basic controls. The tests canbe seen in Table 5.4

All the tests have been passed successfully.

Image test

Check that a user can open an image and use the basic controls. Theperformed tests can be seen in Table 5.5.

The test number 033 sometimes failed in 2011 televisions because as saidin Section 4.3.2 only 5 images can be loaded. The remaining tests passedsuccessfully.

44


Table 5.4: Audio testsTest ID Test case Expected result024 Play a song The song starts and the play im-

age in the music control changescolor

025 Pause the song and resume it The song is paused and theplay image in the music controlchanges color. Then continuesfrom where it was paused

026 Move to next or previous song inthe play list

The current song stops and thenext or previous starts

027 Play multiple songs When one song is finished, thenext one starts

028 Stop the song The song stops and goes back tothe beginning

029 Turn up or down the volume The volume changes030 Mute the volume The audio is disabled

Table 5.5: Image testsTest ID Test case Expected result031 Open an image The image is displayed in full

screen032 Move to the next or previous im-

ageThe next or previous image inthe folder is shown

033 Slide show the images The next image is shown auto-matically after five seconds

5.1.4 Navigation test

This test checks whether the user can navigate through the file system. Theuser has to be able to navigate between the folders of its cloud drive. Thetests from Table 5.6 have been performed.

Table 5.6: Navigation testsTest ID Test case Expected result034 Open a folder The folder is opened and its fold-

ers and files displayed035 Go to parent folder The parent folder is opened when

the return button is pressed andthe folder is selected

The test 034 passed successfully in both TV versions. The test 035

45

5.2. NON-FUNCTIONAL TESTS CHAPTER 5. TESTING

showed errors when the return button was pressed before all the files whereloaded. Two possible solutions have been developed to solve this drawback:

• Forbid pressing return before files are loaded

• Check whether the files belong to the current folder or not beforeadding them.

The second option has been chosen because the first one does not meet theresponsiveness requirements, as the user has to wait to load all the filesbefore going backward. Moreover, if there is any problem in the networkconnection the application would not be able to go backwards. After thisfix the test passed successfully.

5.1.5 Language test

This test checks if the language of the application changes when the televi-sion’s language is changed. The performed test cases can be seen in Table5.7. These tests could only be performed in the TV as the emulator lan-

Table 5.7: Language testsTest ID Test case Expected result036 Set the television language to

English and start the applicationThe application is in English

037 Set the television language toSpanish and start the application

The application is in Spanish

038 Set the television language toother language and start the ap-plication

The application is in English

guage can not be changed. The three tests have been passed successfully inthe television.

5.1.6 Print image test

This test could not be executed because a compatible printer was not avail-able. Moreover, the printing functionality only works in 2012 televisionsmodel [27].

5.2 Non-functional tests

In this section we test the usability and the memory usage of the application.

46

5.2. NON-FUNCTIONAL TESTS CHAPTER 5. TESTING

5.2.1 Usability test

The purpose of this test is to find usability and design errors within theapplication. For this test, five people have been asked to perform sometasks and to give feedback. These people were from the company, so theyknew the product. However, they did not know how the application works.Additionally, they did not receive any comments on how it works. Thebuttons they pressed have been recorded and checked if were used in thecorrect way.The tested tasks are the following:

• Log in to a predefined test account so its the same for all testers.

• Show the information of the file test.txt in CloudMe Drive/Documents.

• Open a specific image which is in CloudMe Drive/Documents/Pic-tures.

• View all the images in that folder.

• Create a new folder.

• Rename a folder

• Open a video file and use the reproduction controls.

• Delete a folder or a file.

• Copy a folder or a file.

• Play a song in CloudMe Drive/Documents/Music.

• Log out of the test account.

The result of this test has been satisfactory as all the tasks were per-formed correctly. Nevertheless, some design issues were found. For example,before the test, the audio file was opened only with the enter button. Sincesome of the users tried to open the audio file with the play button. We addedthat possibility because it is more intuitive. Until now, the play button onlyplayed a previously paused audio file.

5.2.2 Memory usage test

The purpose of this test is to check the memory consumption to avoid anout of memory error due to memory leakage. To test the memory usage, thedebugging utility of the Samsung SDK is used. It is tested with the 2012emulator, as the memory usage for the 2011 model is not available. Theapplication is used for some time and the memory consumption is checked.While testing the application, every functionality is going to be used.

47

5.3. SAMSUNG TESTS CHAPTER 5. TESTING

Results

After 5 minutes of usage, the application reached the maximum memoryconsumption: 35MB. This peak is reached while playing video. Then, theapplication stabilizes and does not exceed that limit. After 15 minutes,we detected that the memory was stable so we stopped. Some of the ac-tions performed during this time were opening videos, audio and image files.Additionally, folders operations such us create, move and delete were alsoexecuted.

5.3 Samsung tests

Finally, when the application is sent to the Samsung market, it has to gothrough an approval process. During this process, the application is alsotested in multiple use case scenarios and real televisions. Due to the largernumber of devices that the application is tested in, it is possible that someerrors arise.

5.4 Test results

With the tests performed we have been able to find and solve bugs. Ad-ditionally, we have seen design issues regarding the user interaction withthe application and we have solved them. Therefore the tests have beensuccessful.

48

Chapter 6

Validation of designdecisions

In this chapter some measurements are made in order to check whether thedesign decisions made in chapter 3 are correct or not.

6.1 On demand load of JavaScript files

As mentioned before, when the login scene is shown, only the needed JavaScriptfiles are loaded. Then, asynchronously, the rest of the JavaScript files areloaded. To check if this design decision is a correct one, a test is goingto be performed. Some measurements were taken to calculate the bootingtime in two di↵erent scenarios: loading only the needed JavaScript files andloading all the JavaScript files. The application started 10 times and itsbooting time written down with each case. Then, the average booting timewas calculated and compared. For the first case, the average booting timeis 2223,5ms and for the second 2340,5ms. This data shows an approximateimprovement of 5%. The results of the measurements can be seen in Table6.1.

The same measurements (see Table 6.1) have been repeated when thesign up code is not loaded. As this part of the code is smaller than theone needed for log in, the expected improvement of the booting time is less.With just 10 measurements we can appreciate a slight improvement.

6.2 Dynamic HTTP requests

When the user opens a folder, first he/she gets the folders inside it and thenthe files. The server has an option in which the number of requested filescan change. In order to keep the opening time of a folder as low as possible,

49

6.3. MINIFY CHAPTER 6. VALIDATION OF DESIGN DECISIONS

Table 6.1: Comparison of booting time in ms

Not separated Log in separated Log in and Sign up separated1 2452 2447 20752 3183 2073 21203 2181 2086 20844 2288 2091 22175 2185 2067 25996 2258 2124 21137 2296 2149 20808 2172 2125 21119 2206 2171 208310 2183 2902 2104

Average 2340.5 2223.5 2158.6Std. deviation 308.2 262.8 160.1

the number of files requested will change based on the network throughput.The next set of tests performs 20 measurements of the time needed to loadthe files. The test has been performed with the following number of filesloaded: 100, 50 and 20. The aim is to check whether the number of filesloaded a↵ects the loading time of a folder, and if this is true, then find valuesto make the average loading time of the files to around 500ms. The networkthroughput for this test was 1Mbps, according to the estimation describedin Section 4.1.1. The results can be seen in Table 6.2.

6.3 Minify

JS Minifier has reduced the original size of the application code to approx-imately 70% of its value. The booting time is going to be calculated againto check the improvement made by minifying the application.

By minifying an improvement of around 60% in booting time of the loginscene has been achieved. The measurements can be seen in Table 6.3.

50

6.3. MINIFY CHAPTER 6. VALIDATION OF DESIGN DECISIONS

Table 6.2: Comparison of number of files loading time in ms

100 Files 50 Files 20 Files1 6645 3324 13592 6680 3323 13973 6710 3237 14664 6754 3331 13545 6844 5012 13436 6706 3297 13527 6690 3273 14278 8215 3264 14729 6672 3274 135410 6677 3248 134611 6680 3268 135512 6704 3317 135613 6587 3284 134614 6675 3253 137515 6578 3278 1355

Average 6778.0 3377.4 1375.3Standard deviation 399.7 447.2 43.7

Table 6.3: Measurement of booting time in ms after minifying

Booting time(ms)1 7622 7643 10744 7025 7696 8457 9938 7619 103410 1134

Average 883.8Standard deviation 158.2

51

Chapter 7

Conclusion

The problem solved by this thesis is to put together cloud services and televi-sions. To address this need we developed an application that provides accessto the CloudMe service through a Samsung SmartTV. We started elicitingrequirements, continued with designing and implementing the applicationand concluded with system testing. The technologies used to develop theapplication were JavaScript, HTML and CSS.

The design goals were fulfilled since the application is working in a realtelevision. The design decisions made and implemented have helped to im-prove responsiveness of the application as it is shown by tests. We facedsome authentication and memory issues that were solved. To improve theusers’ experience we have worked on a set of optimizations to ensure theuninterrupted flow of the application. The developed test cases allowed usto improve the application by fixing bugs and changing the functions of thebuttons of the remote controller to make it more intuitive to the user.

Currently, the application is in process of being approved by Samsung.When this process is finished, the application will be available in the Sam-sung Market. However, more features can be added to the application toimprove its service. For example, adding favorites and sharing support.Sharing is one of the main features of CloudMe. Favorites lets the user addshared content to their account. Therefore, this feature need to be imple-mented in future versions. Finally, the video resolution should be modifiedin the server side to limit the network bandwidth. These features were dis-carded due to time limit or because they were out of the scope of this thesis.

During this time, I have improved my knowledge about networks, spe-cially HTTP requests and JavaScript. Additionally, the development of thepresented application resulted in gaining knowledge about cloud computingservices.

52

CHAPTER 7. CONCLUSION

53

Bibliography

[1] Ajax: a new approach to web applications.http://www.adaptivepath.com/ideas/

ajax-new-approach-web-applicationsl, 2012-10-29.

[2] Ajax.http://www.w3schools.com/ajax/default.asp, 2012-10-29.

[3] J. T. Rayfield A.Le↵. Web-application development using the mod-el/view/controller design paradigm. IBM T.J.

[4] Application development process.http://www.samsungdforum.com/upload_files/files/guide/

data/html/html_3/getting_started/overview_of_app_dev.html.

[5] CloudMe.http://www.cloudme.com.

[6] Cascading Style Sheets.http://www.w3.org/Style/CSS/, 2012-10-29.

[7] CSS3 browser specifications.http://www.samsungdforum.com/Guide/art00065/index.html,2012-10-29.

[8] D. Hardawar. Why your TV is the new app battleground.http://venturebeat.com/2010/12/08/

why-your-tv-is-the-new-app-battleground/, 2012-10-29.

[9] David Flanagan. JavaScript The definitive guide. O’Reilly, 5 edition,2006.

[10] Deployment of Samsung SmartTV applications.http://www.samsungdforum.com/upload_files/files/guide/

data/html/html_3/getting_started/packaging_launch_app.html,2012-10-29.

[11] S. T. Pope G. E. Krasner. A description of the model-view-controlleruser interface paradigm in the smalltalk-80 system. ParcPlace Systems,

Inc, 1988.

[12] Gecko.https://developer.mozilla.org/en-US/docs/Gecko_FAQ, 2012-10-29.

[13] HTML 4.01 specification.http://www.w3.org/TR/1999/REC-html401-19991224/, 2012-10-29.

[14] HTTP.http://www.ietf.org/rfc/rfc2616, 2012-10-29.

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applicationsl

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applicationsl

http://www.w3schools.com/ajax/default.asp

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/getting_started/overview_of_app_dev.html

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/getting_started/overview_of_app_dev.html

http://www.cloudme.com

http://www.w3.org/Style/CSS/

http://www.samsungdforum.com/Guide/art00065/index.html

http://venturebeat.com/2010/12/08/why-your-tv-is-the-new-app-battleground/

http://venturebeat.com/2010/12/08/why-your-tv-is-the-new-app-battleground/

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/getting_started/packaging_launch_app.html

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/getting_started/packaging_launch_app.html

https://developer.mozilla.org/en-US/docs/Gecko_FAQ%20

http://www.w3.org/TR/1999/REC-html401-19991224/

http://www.ietf.org/rfc/rfc2616

BIBLIOGRAPHY BIBLIOGRAPHY

[15] HTTPS.https://tools.ietf.org/html/rfc2818, 2012-10-29.

[16] Iframe tag.http://www.w3schools.com/tags/tag_iframe.asp, 2012-10-29.

[17] JavaScript Minifier.http://fmarcia.info/jsmin/test.html, 2012-10-29.

[18] jQuery.http://www.jquery.com, 2012-10-29.

[19] jQuery Ajax method.http://api.jquery.com/jQuery.ajax/, 2012-10-29.

[20] jQuery browser compatibility.http://docs.jquery.com/Browser_Compatibility, 2012-10-29.

[21] L. Wang, G. Von Laszewski, M.Kunze, J. Tao. Cloud computing: aPerspective Study. 2008.

[22] Max Width CSS property.http://www.w3schools.com/cssref/pr_dim_max-width.asp, 2012-10-29.

[23] MD5.http://www.ietf.org/rfc/rfc1321.

[24] N. Ozbek, T. Tunali E. On optimal receiver bu↵er size in adaptiveInternet video streaming. Journal of Zhejiang University SCIENCE A,2006.

[25] P. Tapp. Is Smart TV the Most Significant Change in TV History? ,2010.http://scoop.intel.com/smart-tv-most-significant-change-tv-history/,2012-10-29.

[26] Player plugin.http://www.samsungdforum.com/Guide/ref00014/sef_plugin_

player.html, 2012-10-29.

[27] Printer module.http://www.samsungdforum.com/upload_files/files/guide/

data/html/html_3/api_reference/javascript_apis/web_device_

api/dtv_web_device_api/dtv_printer_module.html, 2012-10-29.

[28] Samsung Smart Hub.http://www.samsungdforum.com/upload_files/files/guide/

data/html/ux_guideline20/02_smart_hub/smart_hub_cover.html,2012-10-29.

55

https://tools.ietf.org/html/rfc2818

http://www.w3schools.com/tags/tag_iframe.asp

http://fmarcia.info/jsmin/test.html

http://www.jquery.com

http://api.jquery.com/jQuery.ajax/%20

http://docs.jquery.com/Browser_Compatibility

http://www.w3schools.com/cssref/pr_dim_max-width.asp

http://www.ietf.org/rfc/rfc1321

http://scoop.intel.com/smart-tv-most-significant-change-tv-history/

http://www.samsungdforum.com/Guide/ref00014/sef_plugin_player.html

http://www.samsungdforum.com/Guide/ref00014/sef_plugin_player.html

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/api_reference/javascript_apis/web_device_api/dtv_web_device_api/dtv_printer_module.html



http://www.samsungdforum.com/upload_files/files/guide/data/html/ux_guideline20/02_smart_hub/smart_hub_cover.html

http://www.samsungdforum.com/upload_files/files/guide/data/html/ux_guideline20/02_smart_hub/smart_hub_cover.html

BIBLIOGRAPHY BIBLIOGRAPHY

[29] Samsung’s application framework.http://www.samsungdforum.com/Guide/art00017/index.html,2012-10-29.

[30] Samsung’s user experience guideline.http://www.samsungdforum.com/upload_files/files/guide/

data/html/html_3/javascript/ui/ux_guidelines.html, 2012-10-06.

[31] Simple object access protocol.http://www.w3schools.com/soap/default.asp, 2012-10-29.

[32] Simple object access protocol .http://www.w3.org/TR/2000/NOTE-SOAP-20000508/, 2012-10-29.

[33] SOAP specifications.http://www.w3.org/TR/soap/, 2012-10-29.

[34] Smart TV applications.http://www.samsungdforum.com/upload_files/files/guide/

data/html/html_3/getting_started/intro_to_samsung_smarttv_

apps.html, 2012-10-29.

[35] Timeout function.http://www.w3schools.com/jsref/met_win_settimeout.asp, 2012-10-29.

[36] WebKit.http://www.webkit.org/, 2012-10-29.

[37] What is Smart TV.http://www.intel.com/content/www/us/en/

tech-tips-and-tricks/an-introduction-to-smart-tvs.html,2012-10-29.

[38] Xcerion.http://www.xcerion.com/.

[39] H. Chang Y. Bae. Adoption of smart tvs: a Bayesian network approach.Industrial Management and Data Systems, 2012.

56

http://www.samsungdforum.com/Guide/art00017/index.html

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/javascript/ui/ux_guidelines.html

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/javascript/ui/ux_guidelines.html

http://www.w3schools.com/soap/default.asp

http://www.w3.org/TR/2000/NOTE-SOAP-20000508/

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

http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/getting_started/intro_to_samsung_smarttv_apps.html



http://www.w3schools.com/jsref/met_win_settimeout.asp

http://www.webkit.org/

http://www.intel.com/content/www/us/en/tech-tips-and-tricks/an-introduction-to-smart-tvs.html

http://www.intel.com/content/www/us/en/tech-tips-and-tricks/an-introduction-to-smart-tvs.html

http://www.xcerion.com/

Appendix A

Comparison betweenCloudMe’s user interfaces

In this appendix we are going to compare the web UI and the smartTVUI, which can be seen in figures A.1 and A.2. The UI has three parts:the header, the items (files and folders) grid and the menu on the right.Additionally, the television UI has a footer which is a mandatory help bar.In the web UI, between the header and the grid, we can observe four tabswhich do not appear in the TV UI. This tabs correspond to the favorites,web shares and the account settings, and this options are not available inthe TV.

57

APPENDIX A. COMPARISON BETWEEN CLOUDME’S USERINTERFACES

Figure A.1: Web user interface

Figure A.2: TV user interface

58