FACULDADE DE ENGENHARIA DA UNIVERSIDADE DO PORTO

Framework para a Integrao deDispositivos Mveis na Interao

Pessoa-Computador

Wilson da Silva Oliveira

Mestrado Integrado em Engenharia Informtica e Computao

Orientador: Antnio Augusto de Sousa

Co-orientador: Diego Jesus

24 de julho de 2016

Framework para a Integrao de Dispositivos Mveis naInterao Pessoa-Computador

Wilson da Silva Oliveira

Mestrado Integrado em Engenharia Informtica e Computao

Aprovado em provas pblicas pelo Jri:

Presidente: Antnio CoelhoArguente: Luis Magalhes

Vogal: Antnio Augusto de Sousa24 de julho de 2016

Resumo

A utilizao do rato e teclado para interagir com computadores bastante comum atualmente.No entanto, estes perifricos limitam bastante o utilizador no modo como interagem com o com-putador, especialmente em tarefas mais complexas. Assim a procura por mtodos mais naturais deinterao persiste, existindo vrios trabalhos e solues que abordam desde as mesas interativasao uso e reutilizao de comandos de consola. Possveis respostas para essa limitao poderovir a criar novas formas de interagir com informao digital, seja em casos de uso especficos oumodificando o modo como as pessoas utilizam os seus computadores diariamente. frequenteencontrar utilizadores que possuam pelo menos um dispositivo mvel devido proliferao destesnos ltimos anos. Atualmente estes dispositivos so mais do que meros aparelhos para comuni-cao, estando eles prprios repletos de mtodos de interao baseados em vrios sensores comosuperfcies multi-toque, acelermetro e outros.

Numa tentativa de propor um mtodo de interao diferente, procura-se explorar a capacidadede integrar estes dispositivos como ferramentas de interao, substituindo ou complementandoo rato e teclado de hoje. Fazendo uso da capacidade de processamento destes aparelhos e dosseus diferentes meios de interao, ser possvel interagir de formas diferentes com o computador,utilizando as superfcies multi-toque e os dados fornecidos pelos diferentes sensores (p.e. giros-cpio). Para alm dos dispositivos mveis poderem ser explorados para introduzir informao emcomputadores, a presena de meios de output - como o ecr ou altifalante - permite a utilizaodos mesmos como formas adicionais de exposio de informao. Para atingir este objetivo foidesenvolvida uma framework que procura simplificar a integrao destes dispositivos na interaopessoa-computador. O desenvolvimento desta framework implicou a definio das arquiteturas autilizar, tanto por uma aplicao mvel, como por um servidor. Este servidor um componente deuma aplicao de computador e permite efetuar a comunicao com a aplicao mvel utilizandoum protocolo definido pela framework. A aplicao mvel desenvolvida capaz de interagir comqualquer servidor que implemente a framework. O servidor fica responsvel por definir a interfaceda aplicao mvel, assim como implementar a lgica necessria para interagir com a aplicao docomputador a partir dos dados transmitidos pela aplicao mvel. No contexto desta dissertao, oservidor faz parte de uma extenso para a aplicao Blender. Esta extenso permite utilizar dadosrecebidos da aplicao mvel (ecr e acelermetro) para interagir diretamente com o Blender.

Para avaliar a utilidade da soluo encontrada foi realizado um caso de estudo, utilizando aaplicao referida no pargrafo anterior. Este caso de estudo permitiu analisar a reao e efici-ncia dos utilizadores que experimentaram a soluo proposta, assim como avaliar o potencial daframework em aplicaes futuras. Nas condies em que esta avaliao foi realizada, foi possvelconcluir que a metodologia proposta com a interao por toque apresenta alguma afinidade porparte dos utilizadores, mas que o uso do rato e teclado continua a ser mais eficiente. No entanto,foi possvel identificar alguns melhoramentos facilmente integrveis na framework, que podemmelhorar o seu desempenho e aceitao por parte dos utilizadores, nomeadamente no que respeita interao por toque.

i

ii

Abstract

Computer interaction nowadays is commonly done resorting to a keyboard and mouse. Althoughthese methods are common, they present limitations in certain, more complex tasks. These diffi-culties motivate the search for new interaction methods, with various projects and solutions ran-ging from interaction tables to repurposing home console controllers. New methods that possiblysolve these problems have the possibility to completely change the way people interact with theircomputers.

With the introduction of mobile devices, specifically smartphones, in peoples daily routinesits common to find users with one or more of these devices. Today these devices are more thansimple communication devices, supporting multiple interaction methods resorting to many sensorslike accelerometers or multi-touch screens.

In an effort to propose a different solution for this problem, we seek to look into the potentialthat these devices have to be used as interaction methods complementing the common methodsused today. By exploring the processing power and different interaction methods of these devicesit will be possible to interact with computers in different ways. Although the primary focus is toexplore these devices as input methods when using computers, the presence of output methodslike the screen and the speaker allows their use as additional ways of exposing information andgiving feedback to the users.

In order to achieve this goal, a framework was developed which aims to facilitate the inte-gration of mobile devices in computer interaction. The development of this framework led to thespecification of an architecture to be implemented both by a mobile application and a server. Thisserver is one component of a computer application and is responsible to communicate with themobile device using the protocol specified by the framework. The developed mobile applicationcan interact with any server that implements this protocol. The server is responsible to specifyboth the interface and logic necessary for the mobile application to interact with the computerapplication.

For the context of this dissertation the server belongs to an add-on developed for the modelingprogram Blender. The add-on developed allows the use of the mobile application to interact withBlender.

In order to evaluate the proposed solution a case study was performed using the applicationmentioned in the last paragraph. In the evaluated scenario it was possible to conclude that the usersshowed some preference for the touch method but the use of mouse and keyboard was the mosteffective. However, it was possible to identify some improvements that can be easily integrated inthe framework and improve the performance and acceptance by the users.

iii

iv

Agradecimentos

Gostaria de agradecer ao meu orientador e professor Antnio Augusto de Sousa, assim comoao meu co-orientador Diego Jesus, por toda a ajuda e acompanhamento que disponibilizaramdurante a realizao da dissertao.

Wilson Oliveira

v

vi

In my experience there is no such thing as luck

Master Jedi Obi-Wan Kenobi

vii

viii

Contedo

1 Introduo 11.1 Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Motivao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 Problema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.5 Estrutura da Dissertao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Estado da Arte 52.1 Mtodos de Interao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Base Tecnolgica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2.1 TUIO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.2.2 Anlise de tecnologias de desenvolvimento . . . . . . . . . . . . . . . . 132.2.3 Reconhecimento de gestos . . . . . . . . . . . . . . . . . . . . . . . . . 142.2.4 Dispositivos Mveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.3 Concluses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3 Smart Device Computer Integration 213.1 Descrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.2 Arquitetura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233.3 Protocolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.3.1 Mensagens de Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.3.2 Mensagens de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . 273.3.3 Mensagens de Informao . . . . . . . . . . . . . . . . . . . . . . . . . 313.3.4 Sequncia de Mensagens . . . . . . . . . . . . . . . . . . . . . . . . . . 32

3.4 Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4 Implementao 354.1 Tecnologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.1.1 Dispositivo mvel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.1.2 Computador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2 Especificao das Mensagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.2.1 Protocolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.2.2 Reconhecimento de Gestos . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.3 Desenvolvimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.3.1 Dispositivo Mvel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.3.2 Computador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444.3.3 Fluxo de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

4.4 Funcionalidades implementadas . . . . . . . . . . . . . . . . . . . . . . . . . . 46

ix

CONTEDO

4.5 Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

5 Avaliao 535.1 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535.2 Resultados obtidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.2.1 Resultados objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565.2.2 Resultados subjetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595.2.3 Comentrios recolhidos . . . . . . . . . . . . . . . . . . . . . . . . . . 61

5.3 Concluso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

6 Concluses e Trabalho Futuro 656.1 Trabalho Futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Referncias 69

7 Anexo 737.1 Guies Aprendizagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

7.1.1 Guio Blender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737.1.2 Guio Aplicao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

7.2 Guio Principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767.3 Questionrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

x

Lista de Figuras

2.1 Sistema WallShare [VGT+10] . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.2 ActivitySpace Desk [HTB14] . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Magic Desk a ser utilizada com um computador [BGMF11] . . . . . . . . . . . . 72.4 Esquemas de controlo implementados [BFAS15] . . . . . . . . . . . . . . . . . 82.5 Esquema de controlos utilizado definido para o Wiimote [FPT12] . . . . . . . . . 102.6 Movimentos capturados pelo Kinect para a explorao do mapa [FPT12] . . . . . 102.7 Diferentes permutaes para um gesto, calculadas pelo $N . . . . . . . . . . . . 16

3.1 Representao da arquitetura implementada . . . . . . . . . . . . . . . . . . . . 243.2 Diferenas entre a mensagem addScreen e modifyScreen . . . . . . . . . . . . . 283.3 Alerta apresentado aps uma mensagem de informao com um erro . . . . . . . 31

4.1 Representao da arquitetura implementada na aplicao mvel . . . . . . . . . 434.2 Representao da arquitetura implementada no servidor . . . . . . . . . . . . . . 444.3 Ecrs iniciais da aplicao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474.4 Ecrs de operaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484.5 Ecr de reconhecimento de gestos . . . . . . . . . . . . . . . . . . . . . . . . . 494.6 Alerta para renomear um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . 494.7 Interface criada no Blender (painel do lado esquerdo) . . . . . . . . . . . . . . . 50

5.1 Modelo apresentado aos utilizadores da experincia . . . . . . . . . . . . . . . . 545.2 Grfico do tempo de execuo para cada mtodo de interao em minutos . . . . 565.3 Grfico com a mdia do nmero de operaes anuladas por mtodo de interao . 575.4 Grfico com a mdia de falhas no reconhecimento de eventos por mtodo de inte-

rao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585.5 Grfico com a mdia de delays detetados por mtodo de interao . . . . . . . . 585.6 Grfico sobre o grau de satisfao dos utilizadores com o tempo em que comple-

taram a tarefa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595.7 Grfico sobre o grau de satisfao dos utilizadores com a facilidade com que com-

pletaram a tarefa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.8 Grfico sobre o mtodo preferido dos utilizadores . . . . . . . . . . . . . . . . . 61

xi

LISTA DE FIGURAS

xii

Lista de Tabelas

2.1 Comparao dos diferentes mtodos disponveis atualmente . . . . . . . . . . . 17

3.1 Tipos de mensagens de manipulao do ecr . . . . . . . . . . . . . . . . . . . . 263.2 Propriedades implementadas nos elementos . . . . . . . . . . . . . . . . . . . . 273.3 Valores assumidos pela chave type nas mensagens relacionadas com eventos do

dispositivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.4 Chaves possiveis numa mensagem de evento . . . . . . . . . . . . . . . . . . . . 30

xiii

LISTA DE TABELAS

xiv

Abreviaturas e Smbolos

OSC Open Sound ControlTCP Transmission Control ProtocolUDP User Datagram ProtocolSDCI Smart Device Computer IntegrationHTML Hyper Text Markup LanguageXML eXtensible Markup LanguageAPI Application Programming InterfaceJSON JavaScript Object Notation

xv

Captulo 1

Introduo

A procura por diferentes e melhores mtodos de interao com computadores e informao

digital est presente desde h muito tempo [ZSS97]. Com o aumento da capacidade e complexi-

dade dos sistemas, existe uma grande necessidade de explorar novas mecnicas que facilitem esta

utilizao [Zab11].

1.1 Contexto

A utilizao do rato e teclado para interagir com computadores bastante comum atualmente.

No entanto, apesar desta utilizao ser to comum, nem sempre o teclado e o rato so os mtodos

mais indicados, como por exemplo na seleo de reas complexas em imagens [KKY+15]. A

procura por mtodos mais naturais de interao e manipulao de informao persiste, existindo

trabalhos que abordam a integrao de mesas interativas [HTB14] e at a reutilizao de coman-

dos de consola [FPT12]. Possveis respostas para esta limitao podero criar novas formas de

interagir com informao digital, seja em casos de uso especficos ou modificando o modo como

as pessoas utilizam os seus computadores diariamente.

1.2 Motivao

frequente encontrar utilizadores que possuam pelo menos um dispositivo mvel, devido

proliferao destes nos ltimos anos. Atualmente estes dispositivos so mais do que um mero

aparelho para comunicao estando eles prprios repletos de mtodos de interao baseados em

vrios sensores como superfcies multi-toque, giroscpio e outros. Procurando explorar todo o

potencial fornecido por estes dispositivos e continuar a procura por mtodos naturais de interao

surge o propsito desta dissertao.

1

Introduo

1.3 Problema

Numa tentativa de explorar a capacidade de processamento destes dispositivos e dos seus di-

ferentes meios de interao, surge a ideia de os utilizar como dispositivos de interao com com-

putadores tradicionais.

Assim surgem as questes:

Como interpretar a informao recolhida pelos sensores para controlar aes no computa-dor?

Como explorar a adaptabilidade da interface do dispositivo reconfigurando-a por via auto-mtica a partir do computador?

Como transmitir a informao recolhida dos dispositivos para os computadores?

Quais as vantagens ou desvantagens da integrao destes dispositivos na interao com com-putadores?

1.4 Objetivos

Para tentar encontrar uma resposta para as perguntas na seco anterior, esta dissertao tem

como objetivo principal o desenvolvimento de uma framework, denominada Smart Device Com-

puter Integration (SDCI), que permita a utilizao de dispositivos mveis como meios de interao

com computadores tradicionais.

Assim, com o estudo, desenvolvimento e avaliao dessa framework, pretende-se atingir os

seguintes objetivos:

Reconhecer e interpretar gestos e eventos de vrios sensores

Possibilitar, aplicao no computador, a manipulao/configurao da interface presenteno dispositivo

Desenvolver um protocolo de comunicao entre dispositivo e computador

Desenvolver uma aplicao prottipo

Avaliar a usabilidade

Fazendo uso da capacidade de processamento dos dispositivos mveis e dos seus diferentes

meios de interao, a framework Smart Device Computer Integration deve proporcionar mtodos

para interpretar os inputs dos diferentes sensores disponveis e transmitir a informao necessria

para que o computador efetue a ao pretendida. Para alm disso, a framework deve possibilitar

ao computador a manipulao da interface do dispositivo.

2

Introduo

Para possibilitar a avaliao da usabilidade deste mtodo de interao, a aplicao desenvol-

vida deve implementar todas as funcionalidades fornecidas pela framework Smart Device Com-

puter Integration, para efeitos de teste e demonstrao. Uma vez que a SDCI abrange tanto o

dispositivo mvel como o computador, a aplicao vai interagir com uma extenso para o Blen-

der, que siga as regras definidas pela Smart Device Computer Integration.

1.5 Estrutura da Dissertao

Para alm da introduo presente neste captulo, esta dissertao contm mais 5 captulos. No

captulo 2, descrito o estado da arte e so apresentados trabalhos relacionados assim como al-

gumas bases tericas. No captulo 3, apresenta-se a soluo proposta, a framework SDCI. Neste

captulo apresentada a arquitetura proposta para a framework Smart Device Computer Integra-

tion, assim como o protocolo de comunicao especificado pela mesma, desde as mensagens defi-

nidas, at interao entre os dispositivos. O captulo 4 descreve a implementao da framework

efetuada durante esta dissertao. Inclui as arquiteturas utilizadas, assim como as funcionalidades

implementadas pela aplicao. No captulo 5 descrito o caso de estudo efetuado para avaliar

a SDCI e os mtodos de interao propostos. So expostos e analisados os resultados obtidos

durante os testes.

Finalmente o captulo 6 apresenta as concluses retiradas desta dissertao, assim como indicaes

trabalho futuro e outras aplicaes possiveis da Smart Device Computer Integration.

3

Introduo

4

Captulo 2

Estado da Arte

Como descrito no capitulo 1, a pesquisa por novos meios de interao com computadores um

processo contnuo e com uma histria considervel. Esta pesquisa recai sobre a rea principal de

Interao Pessoa-Computador, assim este capitulo tem como objetivo a introduo aos princpios

desta rea assim como a exposio de outros trabalhos desenvolvidos.

2.1 Mtodos de Interao

Nesta seco vo ser referidos alguns mtodos de interao com informao, desde dispositi-

vos mveis, que no mbito desta dissertao se referem a smartphones e tablets, a mesas multi-

toque.

De seguida, apresenta-se o projeto WallShare [VGT+10] que procura explorar as capacidades

dos dispositivos mveis como mtodos de interao. Este projeto implementa um sistema de

partilha de recursos especialmente orientado a equipas.

O WallShare utiliza um computador e um projetor para criar um ecr com um ambiente de

trabalho partilhado entre todos os utilizadores. Para se ligarem ao sistema os utilizadores tm que

se conectar atravs do seu dispositivo mvel utilizando uma aplicao. O sistema, aps reconhecer

o utilizador, coloca um novo cursor na rea partilhada que pode ser controlado por gestos reali-

zados pelo utilizador e capturados pelo dispositivo. Os utilizadores podem assim disponibilizar

recursos do seu telemvel para a rea partilhada. Estes recursos podem ser visualizados por todos

os utilizadores, e podem ser adquiridos para os seus dispositivos.

De acordo com os autores [VGT+10], o WallShare traz alguns benefcios, nomeadamente:

Estende as capacidades dos dispositivos mveis

Proporciona um mtodo de interao natural

Permite a partilha de documentos entre utilizadores

5

Estado da Arte

Figura 2.1: Sistema WallShare [VGT+10]

Apesar da sua implementao no parecer complexa nem exigir muitos custos, exige pelo

menos um servidor e um ecr externo. Tambm no proporciona, neste momento, muita funcio-

nalidade para alm da partilha de ficheiros.

Quase como uma resposta introduo da tecnologia multi-toque e popularizao dos

smartphones, comeam a surgir monitores capazes de suportar a tecnologia. Atualmente existem

vrios computadores no mercado que possuem ecrs com superfcies multi-toque. Apesar da

popularizao destes computadores hibridos a utilizao de superficies verticais pode no ser a

mais adequada, uma vez que esta utilizao tem tendncia para criar mais fadiga e desconforto

[BGMF11]. De acordo com os autores, o rato parece ser mais eficaz em tarefas simples e que

exigem algum nvel de preciso [FWSB07]. Assim, uma possvel configurao para computadores

pessoais pode passar pela utilizao de mltiplos mtodos de interao [BGMF11] combinando

superfcies multi-toque, rato e teclado proporcionando mtodos de escrita [HHCC07] e interao

familiares complementados com outros paradigmas de interao.

No mbito das mesas de interao, tambm conhecidas por tabletops, comeamos por analisar

o ActivitySpace [HTB14].

O ActivitySpace um projeto que tenta unir e simplificar a utilizao de vrios dispositivos

atravs do uso de uma mesa multi-toque interativa.

6

Estado da Arte

Figura 2.2: ActivitySpace Desk [HTB14]

Para possibilitar a sua implementao, o ActivitySpace faz uso de uma mesa de interao para

ligar vrios dispositivos, e cria uma rea representativa no seu ecr. Permite assim a partilha de

recursos entre os dispositivos e a prpria mesa assim como a sua visualizao.

Magic Desk [BGMF11] assume uma abordagem diferente. Em vez de criar um sistema com

regras de interao novas, explora a integrao da tecnologia multi-toque na superfcie das mesas

de trabalho atuais.

Figura 2.3: Magic Desk a ser utilizada com um computador [BGMF11]

O Magic Desk prope a utilizao de uma superfcie multi-toque sob o teclado e o rato. Esta

superfcie tem como principal objetivo aumentar as possibilidades de interao com o computador,

desde a manipulao de janelas at interao com menus de contexto, introduzindo ainda uma

taskbar melhorada.

Na avaliao do Magic Desk os autores utilizaram vrias mtricas. Avaliaram o tempo neces-

srio para completar uma tarefa, contabilizaram o nmero de vezes que o utilizador se reposiciona

durante a tarefa e at a fadiga causada pela utilizao. Com a sua anlise destes dados foi possvel

concluir que os utilizadores utilizavam a superfcie abaixo do teclado mais eficientemente do que

7

Estado da Arte

o resto da superfcie, tanto para operaes que exigiam uma ou mesmo duas mos. Assim decidi-

ram colocar a taskbar melhorada e as funes de redimensionamento de janelas na parte inferior

da superfcie. As funes que requerem interao mais simples foram desviadas para as zonas

laterais ao teclado e ao rato.

Este sistema est limitado pela utilizao de hardware prprio, apesar de ser teoricamente pos-

svel a sua adaptao a tablets. No entanto isto reduziria consideravelmente a superfcie de toque

disponvel para a integrao completa deste sistema.

Existe tambm alguma investigao sobre a utilizao de smartphones como controlos de vi-

deojogos. Baldauf e outros implementaram, no dispositivo mvel, quatro layouts possveis para

um controlador de jogos, fazendo uso do ecr multi-toque e do acelermetro[BFAS15]. Os layouts

implementados foram baseados em esquemas utilizados em jogos de smartphones e em comandos

fsicos existentes.

Figura 2.4: Esquemas de controlo implementados [BFAS15]

A figura 2.4 representa os quatro layouts implementados, por ordem: botes direcionais;

direction pad; joystick flutuante; e finalmente controlo baseado na inclinao.

Para avaliar os diferentes mtodos implementados, os autores realizaram um caso de estudo,

onde propuseram a utilizao destes mtodos em duas tarefas diferentes. A primeira tarefa, de-

signada pelos autores como uma tarefa de controlo, consistiu em posicionar um circulo branco

sobre um circulo azul, que se deslocava ao longo do tempo. A segunda tarefa foi a utilizao dos

mtodos no controlo de dois jogos bastante conhecidos, Super Mario e Pac-Man.

Para retirar concluses deste caso de estudo, os autores recolheram vrios dados, desde a opinio

dos utilizadores a dados mais concretos, como tempo de execuo das tarefas e o nmero de vezes

8

Estado da Arte

que os utilizadores desviaram o olhar do ecr para o dispositivo.

Os autores tinham como objetivo analisar a possibilidade de utilizar os dispositivos mveis como

comandos, em situaes em que um comando fsico no est disponvel, como por exemplo, cam-

panhas publicitrias em ecrs pblicos.

Assim, os autores concluram que o maior problema dos mtodos implementados a falta de um

feedback fsico, o que leva a que os utilizadores desviem a sua ateno do ecr principal para o

dispositivo. Um mtodo que se revelou promissor foi o joystick flutuante, apresentando um bom

desempenho e reduzindo o nmero de vezes que os utilizadores desviaram o olhar do ecr princi-

pal. O esquema de controlos baseado na inclinao do dispositivo apresentou os piores resultados,

incluindo a rejeio dos utilizadores. No entanto, os autores ponderam que a sua utilizao pode

ser eficaz em tarefas diferentes das avaliadas, como por exemplo algo que exija movimento conti-

nuo.

Numa outra vertente de interao, alguns trabalhos de investigao exploram tcnicas de cap-

tura de movimentos.

A consola Nintendo Wii destacou-se pela introduo de um comando capaz de realizar captura de

movimentos, o chamado Wiimote. Apesar de no impressionar atravs do seu poder de processa-

mento teve bastante sucesso na indstria, em parte pela introduo de novos meios de interao

orientados para os jogos. Este comando permite aos utilizadores movimentarem-se para executar

aes ao contrrio de apenas pressionarem botes. Utiliza Bluetooth para comunicar com a con-

sola e capaz de detetar movimento ao longo de trs eixos. Inclui ainda um sensor infra-vermelho

para determinar a direo do comando.

Seguindo o exemplo e sucesso da Nintendo, a Sony lanou o seu prprio comando capaz de captar

movimentos e a Microsoft deu um passo mais longe com o lanamento do Kinect. Este introduziu

captura de movimentos atravs de cmaras de vdeo e sensores infra-vermelhos. Permite tambm

a utilizao de comandos de voz. Surgiu assim um novo paradigma de interao a ser pensado na

criao de jogos, que poderia trazer muitas novidades ao setor.

Aps a introduo de comandos para consolas capazes de realizar captura de movimentos, foi

possvel adaptar estes comandos para interao com computadores atravs da utilizao de SDKs

proprietrios ou de terceiros [FPT12].

Exemplo desta adaptao foi o desenvolvimento de duas aplicaes por Francese e outros

[FPT12], utilizando o comando Wiimote e o sistema Kinect. Fazendo uso da captura de movimen-

tos, os autores desenvolveram uma aplicao para a explorao da aplicao de mapas do Bing.

No caso do comando Wiimote, os controlos utilizados para controlar a explorao do mapa so

baseados nos trs eixos de rotao capturados pelo comando, como pode ser visto na figura 2.5.

Na utilizao do Kinect o controlo do movimento feito de uma maneira similar aos de um

avio em voo como pode ser visto na figura 2.6.

9

Estado da Arte

Figura 2.5: Esquema de controlos utilizado definido para o Wiimote [FPT12]

Figura 2.6: Movimentos capturados pelo Kinect para a explorao do mapa [FPT12]

A metfora entre os gestos e os movimentos de um avio levou a uma fcil aprendizagem dos

controlos e rapidamente os utilizadores executaram movimentos mais complexos [FPT12].

A avaliao subjetiva deste projeto foi feita atravs de dois questionrios, um para analisar a

satisfao dos utilizadores a facilidade com que concluram as tarefas, e outro focado em quatro

reas especificas, avaliao geral, utilidade do sistema, qualidade da informao e da interface

[FPT12].

Ambas as aplicaes tiveram bons resultados a nvel de usabilidade, mas houve uma clara

preferncia pelo sistema Kinect que obteve resultados ligeiramente superiores.

A novidade do sistema Kinect pode ter influenciado a preferncia dos utilizadores [FPT12] mas foi

possvel concluir que a utilizao deste sistema neste tipo de aplicaes prefervel. Apesar disso,

o mesmo pode no acontecer noutras aplicaes que necessitem de gestos ou operaes mais com-

plexas. O uso prolongado do sistema tambm pode aumentar a fadiga dos utilizadores devido ao

esforo fsico necessrio. A integrao deste sistema no uso tradicional tambm se complica pela

necessidade de adquirir o hardware necessrio para a sua utilizao.

Esta seco descreveu alguns projetos atuais que procuram implementar novos mtodos de

interao, fazendo uso de superfcies multi-toque e captura de movimentos. A utilizao de dispo-

sitivos mveis como mtodos de interao permite a utilizao conjunta destas duas tecnologias,

uma vez que os dispositivos atuais possuem ecrs multi-toque e sensores capazes de detetar o

10

Estado da Arte

movimento do dispositivo.

2.2 Base Tecnolgica

O crescimento e proliferao da utilizao dos computadores tanto em ambientes profissionais

como pessoais fizeram da rea de Interao Pessoa-Computador uma rea de constante investiga-

o. A necessidade de fornecer aos utilizadores sistemas simples de usar, com curvas rpidas de

aprendizagem, torna-se muito importante, de forma a permitir o aumento da produtividade e a re-

duo da frustrao dos utilizadores [BJJ98]. O desenho de uma interface uma tarefa complexa

que reutiliza informao de vrias reas cientificas, incluindo da psicologia. Tem como objetivo

no s apresentar e recolher informao do utilizador de uma forma simples, mas tambm simular

a manipulao de objetos [BJJ98]. A evoluo desta rea procura tornar as interfaces mais simples

de aprender e fceis de utilizar. Isto tem como consequencia o aumento da complexidade e dificul-

dade da sua implementao, uma vez que o nmero de opes e possibilidades disponibilizadas

para desempenhar uma tarefa aumenta [BJJ98].

Surgem mais recentemente as interfaces naturais, que se distinguem das interfaces comuns

pela utilizao de meios de interao inerentes aos humanos, como toques, gestos e fala [SAL14].

Uma interface grfica tradicional tem em mente a utilizao de um rato e teclado e assenta

no paradigma WIMP - Windows, icons, menus, pointer, que como o nome pode indicar, introduz

o conceito de janelas e cones, com os quais o utilizador pode interagir diretamente ou indireta-

mente atravs de menus, tipicamente utilizando o rato [Liu10]. Com a introduo das superfcies

multi-toque, este tipo de interfaces continua a ser funcional, mas pode no ser o mais adequado

para a introduo de gestos. Existem at algumas aplicaes que j adaptam a sua interface, como

a suite Office da Microsoft que, nas suas ltimas verses, apresenta uma interface mais compatvel

com interao por toque[MN13].

A introduo recente de dispositivos capazes de captura de movimentos levou pesquisa de in-

terfaces de interao natural. Este tipo de interfaces usa como principal meio de interao gestos,

movimentos e comandos de voz, permitindo uma interface grfica simplificada mas com toda a

funcionalidade [FPT12].

Em alguns casos, as interfaces naturais exigem uma fase algo prolongada de adaptao inicial. No

entanto isto nem sempre sucede, pois, dependendo da tarefa a ser executada, a sua aprendizagem

pode ser bastante simples como se mostra em [FPT12].

Foi identificado por Foley e outros [FWC84] um conjunto de tarefas simples que os utilizado-

res podem efetuar em aplicaes grficas [BBRS06]:

Posicionar

Orientar

11

Estado da Arte

Selecionar

Especificar um movimento (exemplo, desenhar uma linha)

Quantificar

Introduzir texto

Existem algumas aplicaes que tentam usar dispositivos mveis para efetuar estas tarefas em

computadores, como podemos ver em [JHKB06]. Mas como vimos em [FWSB07], o rato pode

ser mais eficiente em tarefas simples como a seleo de objetos. Assim porque no manter a

utilizao do rato para estas tarefas de preciso, enquanto se utiliza a tecnologia multi-toque para

tarefas mais complexas de efetuar com o rato, como posicionar objetos ou desenhar uma linha.

2.2.1 TUIO

TUIO [KBBC05] um protocolo criado para ligar mesas de interao entre si, com o objetivo

de manter a posio de objetos e gestos sincronizados entre diferentes mesas de interao ou ecrs.

O protocolo define dois tipos principais de mensagens: Set e Alive. Mensagens Set so utilizadas

quando um novo objeto ou toque detetado e contm a informao da sua posio e orientao.

Mensagens Alive so mensagens peridicas que contm informao dos objetos detetados num

determinado momento na superfcie. No definido nenhum tipo de mensagens para a remoo

de objetos, sendo o cliente responsvel por detetar a sua remoo atravs das mensagens Alive.

Para obter uma menor latncia no uso do protocolo, este utiliza o protocolo de transporte UDP.

No entanto, o protocolo UDP no previne contra a perda de informao na rede, pelo que para

contrariar a possvel perda de mensagens e garantir fiabilidade na informao o TUIO tem alguma

redundncia nas suas mensagens.

O TUIO implementado utilizando o Open Sound Control e segue a sintaxe proposta pelo mesmo.

O Open Sound Control - OSC define um protocolo de comunicao entre dispositivos baseado em

mensagens que seguem uma estrutura definida pelo OSC e so independentes do tipo de trans-

porte utilizado. Assim, a implementao do protocolo TUIO est dependente de uma biblioteca

capaz de interpretar e manipular os pacotes definidos pelo OSC. O TUIO pode ser implementado

em dispositivos com ecrs multi-toque e transmitir para outros dispositivos a informao detetada

pelo ecr como coordenadas e orientao do objeto, assim como outros parmetros calculados

pelo TUIO como acelerao, rotao e o vetor de movimento.

Apesar do TUIO ser um protocolo bastante completo, apenas define o transporte dos dados bsicos

de um movimento, como posio e orientao. Isto deixa para o cliente a interpretao dos gestos.

Seria interessante que o protocolo permitisse o envio de gestos j processados como a identifica-

o de um swipe ou de um pinch.

12

Estado da Arte

2.2.2 Anlise de tecnologias de desenvolvimento

Esta seco refere algumas das tecnologias que podem ser utilizadas para auxiliar o desenvol-

vimento da aplicao proposta.

A manipulao da interface do dispositivo por parte do servidor uma funcionalidade impor-

tante que se pretende explorar durante o desenvolvimento desta dissertao. Para cumprir este

objetivo, foram analisadas algumas frameworks de desenvolvimento de aplicaes mveis que

permitissem acesso a funes nativas disponibilizadas pelos sistemas do dispositivo mvel, mas

que ao mesmo tempo disponibilizassem um maior controlo durante a execuo sobre a interface

apresentada no dispositivo. A possibilidade da aplicao poder ser compilada para vrias plata-

formas ao mesmo tempo tambm um fator de interesse, permitindo possuir rapidamente uma

aplicao multi plataforma sem necessidade de efetuar duas implementaes.

Por estes dois motivos a implementao da aplicao utilizando as ferramentas nativas dos

sistemas operativos mveis foi excluda. Para alm de ser necessrio implementaes diferentes

para obter uma aplicao multi plataforma a manipulao da interface tambm mais difcil uma

vez que exige que os elementos de interface sejam desenhados antes da compilao da aplicao.

Uma das ferramentas analisadas foi o Unity - Game Engine. O Unity uma ferramenta de

desenvolvimento de jogos, que permite exportar as aplicaes desenvolvidas para vinte e uma pla-

taformas diferentes, incluindo android e iOS [Tec16].

A utilizao do unity permite criar interfaces a partir de imagens e objetos criados na ferra-

menta de desenvolvimento. O desenvolvimento com unity suporta tambm o uso de toque e do

acelermetro como mtodos de interao com a aplicao[Tec16]. Para possibilitar a manipula-

o da interface utilizando o unity podem ser utilizadas imagens para criar a interface, e seriam

especificadas no protocolo as coordenadas sobre as quais os eventos eram registados.

Este processo traria complicaes, principalmente na criao de interfaces. A utilizao de

imagens tornaria mais complicada a implementao de interfaces responsivas para dispositivos de

diferentes tamanhos.

A utilizao do unity permite a implementao do protocolo de comunicao com TCP e UDP.

Para alm do unity, uma das frameworks de desenvolvimento testadas foi Ionic. A utilizao

de Ionic permite o desenvolvimento de aplicaes web multi-plataforma. construida sobre a fra-

mework Angular e permite o desenvolvimento de aplicaes utilizando HTML, Javascript e CSS.

As aplicaes desenvolvidas com Ionic permitem a exportao para web e dispositivos mveis

13

Estado da Arte

com android e iOS[Co16].

A utilizao de ionic obriga implementao do protocolo de comunicao com websockets,

uma vez que este o nico protocolo suportado por javascript na web.

Para permitir a manipulao da interface a utilizao de html e javascript fornece algumas

facilidades, uma vez que javascript permite a manipulao direta da interface. Assim, possvel,

para modificar a interface presente no dispositivo, receber uma string html, converte-la para um

elemento vlido de html e adicionar diretamente este elemento.

A utilizao de html e javascript tambm facilita a subscrio de eventos dos sensores, uma

vez que possvel associar um evento a um elemento, independentemente das suas coordenadas

no ecr.

Existem mais algumas frameworks, como Xamarin1 ou libGDX2, que poderiam ser utilizadas

durante a realizao desta dissertao, mas devido a restries de tempo no puderam ser analisa-

das.

Uma vez que a utilizao de html e javascript parece fornecer algumas vantagens face uti-

lizao de unity, como uma manipulao mais simples da interface, um melhor processo para

implementar a subscrio de eventos e ainda ser uma tecnologia mais familiar, optou-se pela utili-

zao de Ionic no processo de desenvolvimento desta dissertao.

2.2.3 Reconhecimento de gestos

Devido deciso de utilizar Ionic para o desenvolvimento da aplicao mvel, nesta seco

so apresentadas bibliotecas que auxiliem no reconhecimento de gestos sobre o ecr multi-toque

e que possuam implementaes na linguagem javascript.

Existem dois tipos de gestos que interessam no desenvolvimento da framework proposta. Em

primeiro lugar, temos o reconhecimento de gestos tpicos de ecrs multi-toque, como swipe, pinch

ou rotate, que sero identificados daqui para a frente como eventos multi-toque. Em segundo lugar,

temos o reconhecimento de gestos livres sobre uma rea do ecr. Esta funcionalidade permite a

especificao de gestos compostos por um ou mais traos e, posteriormente, o seu reconhecimento

quando efetuados sobre o ecr para despoletarem aes.

1https://www.xamarin.com/2https://libgdx.badlogicgames.com/

14

https://www.xamarin.com/https://libgdx.badlogicgames.com/

Estado da Arte

2.2.3.1 Reconhecimento de Eventos Multi-toque

Primeiro temos o Touchy.js, uma biblioteca de javascript que permite algum controlo sobre os

eventos de toque sobre o ecr. O Touchy.js fornece algumas funes teis, como definir eventos

com um nmero mnimo de toques sobre a superfcie [Set16]. No entanto no suporta o reconhe-

cimento de eventos como swipe ou pinch e portanto no pode ser utilizada no desenvolvimento da

framework.

De seguida temos tambm o Zepto.js, outra biblioteca de javascript que tem como objetivo

fornecer vrias funcionalidades aos programadores, como funes para realizar pedidos ou mani-

pular formulrios de pginas web. Possui ainda um mdulo capaz de reconhecer eventos de toque.

Este mdulo permite o reconhecimento de eventos como duplo toque ou swipe. No entanto no

tem suporte para eventos de multi-toque como pinch ou rotate [Fuc16].

Finalmente, a biblioteca Hammer.js disponibiliza funes para subscrever vrios eventos multi-

toque, como swipe e pinch [AS16], e retorna vrios parmetros sobre os eventos, como por exem-

plo a quantidade de zoom aplicada num gesto pinch. Permite ainda uma serie de configuraes,

como tempo mnimo e distncia mnima para o reconhecimento de um evento, assim como a

definio de novos eventos a serem processados pela biblioteca. Ou seja, para alm dos gestos

suportados, seria possvel definir novos tipos de eventos a serem reconhecidos. Para alm disso

uma biblioteca open-source bastante simples, sem dependncias extra.

Aps a anlise destas trs bibliotecas apresentadas, decidiu-se utilizar o Hammer.js na imple-

mentao da framework por duas razes. Primeiro, suporta, sem configuraes adicionais, todos

os eventos de interesse para a framework. Segundo, permite uma grande quantidade de configura-

es sobre a biblioteca e os eventos que podem ser reconhecidos.

2.2.3.2 Reconhecimento de Gestos livres

O $N Multistroke Recognizer uma biblioteca simples e eficiente, que utiliza geometria e

trigonometria bsica para efetuar o reconhecimento de desenhos sobre um ecr multi-toque. O

$N tem como objetivo permitir o desenho de interfaces baseadas em gestos. Esta biblioteca a

evoluo do trabalho apresentado pela biblioteca $1 Unistroke Recognizer[AW10].

A biblioteca $1 permite o reconhecimento de gestos com um nico trao e efetuados na mesma

direo que o gesto base especificado. Por outro lado, o $N permite a especificao de gestos com

mltiplos traos. Assim, o $N, capaz de reconhecer desenhos com mltiplos traos, independen-

temente da ordem e direo em que so desenhados pelo utilizador no ecr.

15

Estado da Arte

Tanto o $N3 como o $14 fornecem uma aplicao de teste na sua pgina web.

Um gesto definido com mltiplos traos pode ser desenhado pelo utilizador de vrias maneiras

diferentes, uma vez que a ordem de desenho deste gesto pode sofrer permutaes ao nvel da ordem

dos traos, como na direo dos mesmos. Assim para permitir o reconhecimento de gestos com

mltiplos traos, o $N cria e guarda todas as permutaes possveis do gesto, para poderem mais

tarde ser comparadas com o desenho efetuado. Isto permite ao $N utilizar algum do trabalho

efetuado para o $1, uma vez que na realidade compara gestos com um nico trao, obtidos a partir

da permutao do gesto definido[AW10].

(a) Diferentes permutaes para um gesto "X"de dois traos

(b) Gestos com um trao criados pela biblioteca $N

Figura 2.7: Diferentes permutaes para um gesto, calculadas pelo $N

Como possivel observar na figura 2.7 [AW10], para um gesto "X" definido com dois traos

so possveis oito permutaes possveis do gesto. A figura 2.7b representa os oito gestos guar-

dados pela biblioteca, que vo ser comparados com o gesto desenhado pelo utilizador, quando for

efetuado o reconhecimento.

Devido simplicidade da implementao do $N, existem algumas limitaes. Devido utili-

zao de permutaes com um nico trao para efetuar o reconhecimento, o $N permite o reco-

nhecimento de gestos efetuados com menos traos do que o original, mas pode falhar quando o

gesto do utilizador utilizar mais traos do que a especificao original[AW10].

Tambm foi analisado o GestRec[uwd16], uma implementao javascript do algoritmo de

reconhecimento de gestos Protractor[LV10] desenvolvido por Yang Li. Este algoritmo procura3Demo: http://depts.washington.edu/aimgroup/proj/dollar/ndollar.html4Demo: http://depts.washington.edu/aimgroup/proj/dollar/index.html

16

http://depts.washington.edu/aimgroup/proj/dollar/ndollar.htmlhttp://depts.washington.edu/aimgroup/proj/dollar/index.html

Estado da Arte

atingir os mesmos objetivos que o $N.

O GestRec disponibiliza uma aplicao para testes5. Aps experimentar com as demos dispo-

nibilizadas por ambas as bibliotecas, optou-se por utilizar o $N na implementao da framework.

Esta biblioteca parece apresentar melhor eficincia no reconhecimento de gestos, principalmente

quando estes so desenhados utilizando diferentes permutaes do original.

2.2.4 Dispositivos Mveis

Os dispositivos mveis so bastante comuns hoje em dia. Possuem ecrs multi-toque que

permitem no s input de gestos, mas tambm output de informao. Para alm disto possuem

vrios sensores como acelermetro, gps, camera e permitem a ligao a outros aparelhos atravs

de antenas Wifi e Bluetooth [BTE11]. Todos eles integram um tipo de sistema operativo sendo um

dos mais comuns o sistema Android. Os sistemas operativos atuais permitem vrias manipulaes

destes sensores desde a sua leitura at combinao das suas medies para a criao de novos

sensores virtuais [Gui16].

2.3 Concluses

A tabela 2.1 apresenta uma breve comparao dos diferentes mtodos apresentados neste

captulo sobre as propriedades mais relevantes para o desenvolvimento desta dissertao.

ActivitySpace WallShare Magic Desk Wiimote and KinectSuporte Multi-toque Sim Sim Sim NoSuporte Captura Movimento No No No SimSuporte Output Sim Sim Sim SimMultiplos Dispositivos Sim Sim No NoHardware Especifico Sim Sim Sim SimIntegrao com Smartphones Sim Sim No NoColaborativo Sim Sim No Sim

Tabela 2.1: Comparao dos diferentes mtodos disponveis atualmente

Observando a tabela possvel verificar que o multi-toque bem suportado por estes mto-

dos, uma vez que o nico mtodo sem suporte a implementao do Wiimote e do Kinect. Pelo

contrrio, estes destacam-se por serem os nicos capazes de utilizar captura de movimento como

mtodo de interao.

O suporte a output de informao est relacionado com a capacidade do mtodo de controlo trans-

mitir feedback ao utilizador, seja por imagem ou por udio. Neste caso, o Wiimote capaz de

fornecer algum feedback ao utilizador, atravs de um motor de vibrao e de uma pequena coluna,

para alm de possuir quatro leds que podem ser controlados. Por outro lado o Kinect necessita da

5Demo: http://uwdata.github.io/gestrec/

17

http://uwdata.github.io/gestrec/

Estado da Arte

utilizao do ecr para transmitir informao ao utilizador.

O suporte utilizao de mltiplos dispositivos apenas suportado pelo ActivitySpace e pelo

WallShare. Contudo, o Magic Desk prope que a utilizao de dispositivos mveis pode ser inte-

grada no seu sistema.

Todos os mtodos requerem hardware especfico, como mesas de interao ou comandos, mas

necessrio mencionar que os requisitos de hardware do WallShare so os mais simples, necessi-

tando apenas de um servidor e de um ecr externo. O ActivitySpace proporciona a integrao de

dispositivos mveis, mas apenas para efetuar partilha de documentos. Pelo contrrio, o WallShare

integra a sua utilizao como mtodo de interao e controlo.

Finalmente, todos estes mtodos, exceto o Magic Desk, tm algum tipo de suporte para traba-

lho colaborativo.

O TUIO excludo da tabela 2.1, uma vez que se enquadra numa rea ligeiramente diferente dos

restantes. O TUIO no em si um mtodo de interao, mas a sua implementao possibilita a

ligao e interao entre vrios ecrs multi-toque e dispositivos, incluindo smartphones. Por este

motivo, talvez a tecnologia analisada at ao momento que mais se relaciona com os objetivos

desta dissertao.

Como tecnologias possveis de serem utilizadas durante o desenvolvimento da framework

foram analisadas o Unity e o Ionic. O Unity permite o desenvolvimento de aplicaes multi-

plataforma, com suporte para multi-toque e o acelermetro, especialmente orientado para jogos.

O Ionic permite o desenvolvimento de aplicaes multi-plataforma, utilizando tecnologias web. A

utilizao de Ionic foi a escolhida para a implementao da framework, por ser a tecnologia mais

familiar e tambm por permitir algumas simplificaes na manipulao da interface, assim como

na subscrio de eventos.

Escolhida a tecnologia a ser utilizada no desenvolvimento da framework, foram procuradas

bibliotecas que auxiliassem o tratamento de eventos multi-toque e o reconhecimento de gestos.

Para o reconhecimento de eventos multi-toque, como pinch e swipe, foram analisadas vrias bibli-

otecas. De entre estas bibliotecas foi escolhida o Hammer.js, que possui suporte para este tipo de

eventos, como permite ainda a configurao de novos eventos.

Para possibilitar o reconhecimento de desenhos no ecr foi analisado o $N Multistroke Recognizer

e o Gestrec. De entre estes dois optou-se pela utilizao do $N para a implementao da fra-

mework. O $N permite o reconhecimento de desenhos, previamente especificados, sobre o ecr

multi-toque. A vantagem do $N a possibilidade de especificar e reconhecer gestos com mltiplos

traos, incluindo as diferentes permutaes que estes desenhos podem assumir quando efetuados

pelo utilizador.

Com o objetivo de distinguir o trabalho desta dissertao, dos trabalhos apresentados neste

captulo, o foco da implementao da framework incide sobre a utilizao dos vrios sensores

18

Estado da Arte

disponveis nos dispositivos mveis, assim como a possibilidade de controlar a interface do dispo-

sitivo.

A utilizao conjunta do ecr multi-toque e dos sensores, como o acelermetro, permite a incluso

de novas funcionalidades em aplicaes, assim como uma interao possivelmente mais imersiva.

19

Estado da Arte

20

Captulo 3

Smart Device Computer Integration

Neste captulo so apresentados os conceitos principais da soluo proposta por esta disser-

tao para o problema exposto na seco 1.3. Este captulo descreve a framework Smart De-

vice Computer Integration (SDCI). So abordadas as componentes principais da arquitetura assim

como o protocolo de comunicao entre o servidor e o dispositivo mvel.

3.1 Descrio

Os dispositivos mveis atuais fornecem aos utilizadores vrios mtodos de interao com o

prprio dispositivo, atravs dos vrios sensores que contm. Estes dispositivos contm vrios

sensores, como acelermetro/giroscpio ou sensor de luz ambiente, que esto constantemente a

recolher uma vasta quantidade de informao. O acelermetro, por exemplo, permite a recolha de

informao como a orientao do dispositivo, acelerao linear do dispositivo e at a quantidade

de rotao efetuada num determinado momento. Para alm disso, estes dispositivos, tipicamente

possuem um ecr multi-toque. Estes ecrs permitem a interao com o dispositivo, atravs da

seleo direta de elementos da interface, ou atravs de operaes mais complexas, como um mo-

vimento pinch de dois dedos para ampliar uma fotografia.

Uma aplicao tpica de computador poderia explorar estes sensores e o ecr multi-toque para

possibilitar a interao com a mesma. Por exemplo, uma utilizao comum do acelermetro em

jogos de dispositivos mveis a utilizao da rotao do dispositivo para deslocar um objeto.

Assim, uma aplicao de modelao 3D, poderia utilizar o acelermetro para mover ou rodar um

objeto selecionado. Seguindo a mesma linha de pensamento, porque no a mesma aplicao uti-

lizar um gesto de pinch para ampliar o objeto, ou ainda, um browser web do computador utilizar

swipes para navegar por uma pgina, explorando assim o potencial do ecr multi-toque.

Para alm de explorar o dispositivo mvel como um meio de introduo de dados na aplicao,

tambm possvel utilizar o mesmo como um meio de exposio de informao ao utilizador. O

ecr pode ser utilizado para apresentar informao contextual da aplicao do computador, ou at

21

Smart Device Computer Integration

uma interface mais apropriada tarefa que estiver a ser efetuada no momento. Por exemplo, uma

aplicao como o Paint poderia apresentar a tabela de cores no dispositivo, quando uma ferramenta

com essa possibilidade est a ser utilizada.

Para tentar explorar este tipo de interaes surge a ideia de desenvolver uma framework, de-

signada por Smart Device Computer Integration, que permita facilmente a explorao dos meios

de interao dos dispositivos mveis por parte de um computador. A SDCI uma framework que

tem como objetivo principal facilitar a integrao dos dispositivos mveis como meio de interao

com computadores.

Assim, a SDCI disponibiliza uma aplicao mvel capaz de interagir com qualquer aplicao de

computador que implemente as regras especificadas pela framework. Uma aplicao de computa-

dor que utilize a aplicao mvel tem acesso a vrias funcionalidades disponibilizadas pela SDCI:

Utilizao do acelermetro/giroscpio como meio de input

Deteo de vrios eventos comuns em ecrs multi-toque (pinch, rotate entre outros)

Reconhecimento de gestos sobre o ecr multi-toque

Manipulao da interface do dispositivo

A utilizao do acelermetro como mtodo de input permite a utilizao dos eventos gerados

por este sensor pela aplicao de computador. Os valores gerados por este sensor permitem im-

plementar funcionalidades em aplicaes do computador como aumento de valores ou deslocar

objetos. A deteo de eventos como pinch permite a introduo de funes tpicas de dispositi-

vos mveis, como ampliar uma fotografia, em computadores que no possuam um ecr ttil. O

reconhecimento de gestos livres sobre o ecr multi-toque permite ao computador definir gestos

para serem posteriormente reconhecidos pela aplicao mvel. Esta funcionalidade permite ao

computador introduzir novos mtodos de interao, como utilizar gestos para atalhos na aplicao

ou at possibilitar desenho livre sobre um canvas, sem a necessidade de dispositivos especficos

como um tablet de desenho ou uma caneta. A manipulao da interface do dispositivo permite

a um servidor externo fornecer e modificar a interface presente na aplicao do dispositivo. Isto

permite aplicao do computador controlar os elementos que so apresentados no dispositivo

assim como o tipo de eventos que subscreve, como toques num boto ou gestos sobre o ecr.

Estas funcionalidades foram implementadas durante a realizao desta dissertao. Poderiam

ser desenvolvidas outras funcionalidades, como o controlo do sensor de luz ambiente, ou at in-

vestigar a utilizao do acelermetro do dispositivo como um comando similar ao Wiimote, no

entanto, optou-se por estas funcionalidades por permitirem criar uma base slida para a SDCI

assim como possibilitar a criao de uma aplicao de teste mais interativa e com mais funciona-

lidades.

22

Smart Device Computer Integration

Para possibilitar toda esta interao entre o dispositivo mvel e o computador necessrio

manter um canal de comunicao constante entre ambos os dispositivos. Este canal de comu-

nicao vai possibilitar o envio, para o computador, da informao recolhida pelos sensores do

dispositivo, assim como o envio da interface especificada pelo computador para o dispositivo. As-

sim, a SDCI define uma arquitetura e um protocolo de comunicao a ser implementado por uma

aplicao mvel e por uma aplicao de computador que pretenda explorar as funcionalidades

apresentadas nesta seco.

Nas seces seguintes explicado como se pode tirar partido destas funcionalidades, assim

como so especificadas componentes essenciais como o protocolo de comunicao, o reconheci-

mento de gestos e a arquitetura proposta.

3.2 Arquitetura

A arquitetura especificada pela SDCI estende-se aos dois dispositivos necessrios, o computa-

dor e o dispositivo mvel.

Na figura 3.1 possvel visualizar uma representao dos principais componentes da arquite-

tura especificada.

Ambas as partes esto dividas em vrios componentes, alguns similares nas tarefas que exe-

cutam.

O componente Communication tem como tarefa principal a receo e envio de mensagens entre

os dois dispositivos. um componente essencial para manter a transmisso de informao entre

os dois dispositivos durante a utilizao do dispositivo mvel como meio de interao.

O componente Parser responsvel pela validao das mensagens recebidas, incluindo a ve-

rificao de parmetros obrigatrios, para permitir que os restantes componentes faam uso da

informao transmitida com garantias da sua regularidade e sem necessidade de verificaes adi-

cionais.

No dispositivo mvel, a componente EventHandler responsvel por subscrever os eventos

dos sensores suportados pela framework, ecr multi-toque e acelermetro. Os handlers registados

para estes eventos devem processar os dados recebidos pelo sensor e criar as mensagens especifi-

cadas pelo protocolo para enviar para o servidor. Estas mensagens identificam no seu contedo o

evento detetado e os elementos que despoletaram o mesmo.

Por outro lado, o EventHandler da aplicao do computador deve registar handlers para os

diferentes elementos que subscrevem eventos no dispositivo. Estes handlers so executados a

partir da informao contida na mensagem e devem invocar o ApplicationHandler assim como

responder ao dispositivo mvel, seguindo as especificaes do protocolo.

O componente ApplicationHandler deve implementar a lgica necessria para interagir com a

aplicao do computador.

23

Smart Device Computer Integration

Figura 3.1: Representao da arquitetura implementada

3.3 Protocolo

Esta seco descreve o protocolo de comunicao a utilizar na implementao da SDCI. Apre-

senta as diferentes mensagens utilizadas pela framework assim como as palavras chave utilizadas

nas mensagens, e a ordem pela qual as mesmas devem ser transmitidas entre o servidor e o dispo-

sitivo mvel.

As mensagens definidas pela SDCI utilizam uma estrutura baseada em JSON1. A utilizao de

JSON deve-se simplicidade e acessibilidade que este tipo de estrutura permite tanto na leitura,

1JSON (Javascript Object Notation) um formato simples de troca de dados [eI16]

24

Smart Device Computer Integration

como na manipulao da informao transmitida [eI16]. tambm uma estrutura de dados bas-

tante comum e implementada em vrias linguagens de programao.

Analisando as funcionalidades propostas pela framework SDCI na seco 3.1 foram definidos

vrios tipos de mensagens que possibilitem a sua implementao. Assim, foram definidos trs

tipos principais de mensagens: mensagens de interface, mensagens de eventos e finalmente men-

sagens de informao.

As mensagens de interface so utilizadas pelo computador para permitir a manipulao da

interface do dispositivo. Permitem a definio de interfaces novas, a adio de elementos a uma

interface previamente definida e ainda a modificao de propriedades de elementos da interface

atual. Para alm disso, permitem ainda ao computador, subscrever eventos sobre os elementos

da interface. Esta subscrio de eventos o que permite aplicao funcionar. Subscrever um

evento sobre um elemento da interface faz com que o dispositivo mvel envie para o computador a

informao retornada pelo evento para o computador. Este tipo de mensagens descrito em mais

detalhe na seco 3.3.1.

Para possibilitar o envio das informaes retornadas pelos eventos dos sensores para o ser-

vidor, foram definidas as mensagens de eventos. Este tipo de mensagens identificam o tipo de

evento detetado pelo dispositivo mvel, assim como outras informaes relevantes que permitem

ao computador efetuar aes sobre a aplicao.Este tipo de mensagens descrito em mais detalhe

na seco 3.3.2.

Finalmente foram definidas as mensagens de informao. Estas mensagens servem para trans-

mitir informao entre os dispositivos, como informao de sucesso ou de erros durante a execuo

de operaes. Este tipo de mensagens descrito em mais detalhe na seco 3.3.3.

3.3.1 Mensagens de Interface

Existem trs tarefas principais na manipulao de uma interface. Para manipular corretamente

uma interface, deve ser possvel definir uma interface nova, adicionar elementos a uma interface

criada, e modificar elementos de uma interface definida. Assim, para suportar estas trs aes, fo-

ram definidos trs tipos de mensagens que constituem as mensagens de interface. Estas mensagens

so do tipo apresentado na tabela 3.1.

25

Smart Device Computer Integration

Tabela 3.1: Tipos de mensagens de manipulao do ecr

Tipo Descrio

newScreen Este valor representa uma mensagem que transmite

uma interface nova para o dispositivo

addScreen Este valor representa uma mensagem que transmite

elementos a adicionar interface atual do dispositivo

modifyScreen Este valor representa uma mensagem que transmite

um conjunto de regras para modificar a interface pre-

sente no dispositivo

As mensagens newScreen permitem a criao de interfaces no dispositivo. Estas mensagens fa-

zem com que o dispositivo mvel apresente apenas a interface recebida na mensagem, eliminando

primeiro qualquer interface que esteja a ser apresentada naquele momento. Para possibilitar o uso

destas mensagens, estas devem conter a informao da interface a ser criada, assim como um nome

que identifique a interface.

As mensagens addScreen permitem adicionar elementos a uma interface previamente definida,

isto , permitem a criao de interfaces no dispositivo, que tm como base interfaces criadas pre-

viamente. Assim, para possibilitar o uso destas mensagens, estas devem conter a informao dos

elementos que vo ser adicionados, assim como um nome que identifique a nova interface. Uma

vez que esta interface construida tendo outra interface como base, este nome deve ser um sub-

nome de uma interface criada. Isto , se uma mensagem addScreen tem como objetivo adicionar

elementos a uma interface identificada por "MainInterface", o identificador utilizado para a nova

interface deve ser algo tipo "MainInterface.AddedInterface". Isto permite aplicao identificar

qual a interface base a que devem ser adicionados os novos elementos recebidos.

De seguida, temos as mensagens modifyScreen que permitem modificar atributos dos elemen-

tos da interface atual. Os elementos de uma interface possuem vrios atributos que podem ser

configurados aps a sua criao, como cores ou texto apresentado. Na verso atual da SDCI pos-

svel configurar os atributos presentes na tabela 3.2. Assim, possvel, utilizando a framework,

esconder e desativar elementos, assim como modificar a cor de fundo e o texto apresentado. Para

possibilitar o uso destas mensagens, estas mensagens devem conter uma lista com os identificado-

res dos elementos que vo ser modificados, assim como as propriedades que vo ser modificadas

como apresentado na tabela 3.2.

26

Smart Device Computer Integration

Tabela 3.2: Propriedades implementadas nos elementos

Propriedade Valor Descrio

hidden true/false Propriedade utilizada para esconder um elemento

disabled true/false Propriedade utilizada para desativar um elemento

background #555555 Propriedade utilizada para modificar a cor de um

elemento

text "texto" Propriedade utilizada para modificar o texto contido

num elemento

Para alm destes tipos de mensagens de interface existe ainda um outro tipo, mensagem redu-

zida de interface. Estas mensagens reduzidas, permitem a transio entre interfaces previamente

criadas no dispositivo, sem a necessidade de enviar novamente toda a interface. Por exemplo, aps

a criao de uma interface identificada por "MainInterface" com uma mensagem newScreen, o

computador pode indicar aplicao mvel para apresentar esta interface com uma mensagem re-

duzida. Esta mensagem reduzida contm apenas o identificador do ecr que deve ser apresentado.

Estas mensagens tm como objetivo principal reduzir a quantidade de informao transmitida en-

tre os dispositivos, assim como melhorar a eficincia da aplicao.

Para ajudar a distinguir a funcionalidade da mensagem modifyScreen e addScreen podemos

analisar a figura presente em 3.2.

Iniciando a interao a partir do primeiro ecr apresentado na figura 3.2, aps o utilizador

clicar no boto Scale, o servidor envia uma mensagem addScreen. Esta mensagem mantm a in-

terface do ecr anterior e adiciona os controlos necessrios para efetuar a operao de escalamento.

Aps o utilizador clicar no boto Start using accelerometer, o servidor responde com uma mensa-

gem de modifyScreen, mantendo a interface com os mesmos componentes, mas modificando a cor

e texto do boto clicado.

Para alm da especificao de ecrs, as mensagens de interface permitem tambm realizar a

subscrio de eventos no dispositivo mvel. Para poder subscrever ou cancelar a subscrio de

um evento, as mensagens de interface devem conter uma lista com os identificadores dos elemen-

tos que vo subscrever os eventos, assim como os eventos que cada elemento deve subscrever.

Esta subscrio de eventos vai despoletar no dispositivo mvel o envio de mensagens de eventos,

quando estes forem detetados.

3.3.2 Mensagens de Eventos

Quando um evento, do ecr ou dos sensores, detetado pelo dispositivo mvel, a informao

obtida deve ser enviada para o computador. Assim, foram definidas as mensagens de eventos.

27

Smart Device Computer Integration

Figura3.2:D

iferenasentre

am

ensagemaddScreen

em

odifyScreen

28

Smart Device Computer Integration

Estas mensagens contm a informao relevante de um evento detetado e so transmitidas do dis-

positivo mvel para o computador.

Para possibilitar ao computador efetuar aes com os eventos detetados, este necessita de duas

informaes importantes. Primeiro, necessrio identificar o tipo de evento que ocorreu. O tra-

tamento de uma mensagem pode ser diferente consoante o evento ocorrido. Por exemplo, a ao

para um toque sobre um elemento , provavelmente, diferente para a ao de um swipe sobre o

mesmo elemento. Segundo, a mensagem deve identificar o elemento que despoletou o evento. Isto

porque, a ao para um toque sobre um elemento, no a mesma que a ao para um toque sobre

outro elemento diferente. Assim todas as mensagens de eventos contm a identificao do evento

ocorrido e do elemento que o despoletou.

A verso atual da framework SDCI suporta vrios tipos de eventos, do ecr multi-toque e do

acelermetro. Os valores definidos para identificar estes eventos so apresentados na tabela 3.3.

Os valores desta tabela, para alm de utilizados nas mensagens de eventos, so utilizados pelas

mensagens de interface para efetuar a subscrio dos eventos sobre um elemento.

Tabela 3.3: Valores assumidos pela chave type nas mensagens relacionadas com eventos do dispo-sitivo

Valor Descrio

tap Utilizado para subscrever/representar um evento de

toque num elemento

swipe Utilizado para subscrever/representar um evento de

arrastar sobre um elemento

pinch Utilizado para subscrever/representar um evento

multi-toque de pinch com dois dedos

rotate Utilizado para subscrever/representar um evento

multi-toque de rotao com dois dedos

free-draw Utilizado para subscrever/representar um evento de

toque livre no elemento

draw Utilizado para subscrever/representar a funcionali-

dade de reconhecimento de gestos sobre um ele-

mento

acceleration Utilizado para subscrever/representar um evento do

acelermetro

stop-acceleration Utilizado para remover a subscrio de eventos do

acelermetro

alert-text Utilizado para mostrar, aps um toque, um alerta

com uma caixa de texto

29

Smart Device Computer Integration

Tabela 3.4: Chaves possiveis numa mensagem de evento

Chave Exemplo Tipo de eventos Descrio

totalTouches 1 tap, swipe, pinch, rotate,

free-draw, pan

Numero de toques detetado no

ecr

targetIDs "idElemento" Presente em todas as men-

sagens

Array com os ids que despoleta-

ram os eventos

coordinate [{x: 100, y: 150}] tap, swipe, pinch, rotate,

pan

Array com as coordenadas dos

toques detetados

direction 2 swipe Direo do movimento no caso

de um evento swipe

scale 1.5 pinch, rotate, pan Quantidade de ampliao efetu-

ada

rotation 100 pinch, rotate, pan Rotao efetuada num evento

multi-toque em graus

deltaTime 113 swipe, pinch, rotate, acce-

leration, pan

Tempo em ms desde que o mo-

vimento foi iniciado

gestureName "square" draw Nome do gesto reconhecido

gestureScore 0.88 draw Grau de confiana no gesto reco-

nhecido 0-1

acceleration [0.3, 0.1, -0.5] acceleration Array com os valores de acelera-

o recolhidos do sensor

rotationVelocity [3, 1, 6] acceleration Array com os valores da veloci-

dade de rotao

rotationRate [48, 16, 96] acceleration Array com a distancia da rotao

efetuada

velocity [4.8, 1.6, -8] acceleration, pan Array com a velocidade do mo-

vimento efetuado

distance [76.8, 25.6, 128] acceleration, pan Array com a distancia do movi-

mento efetuado

textValue "Texto" alert-text Texto introduzido na caixa de

texto do alerta

path "[{x: 100, y:

150}...{x: 200, y:

280}]"

free-draw Trajeto efetuado pelo utilizador

sobre o ecr

As mensagens de eventos, para alm da identificao do evento e do elemento possuem outras

informaes. Estas informaes variam consoante o evento representado pela mensagem. Por

exemplo, uma mensagem de pinch possui informao sobre o nmero de toques detetados no

ecr assim como a quantidade de escala efetuada durante o movimento de pinch. No entanto,

30

Smart Device Computer Integration

uma mensagem de toque (representada por tap na mensagem) possui apenas a informao do

nmero de toques detetados e das coordenadas no ecr do toque, uma vez que num evento de

tap no possvel calcular um valor para a escala efetuada. Os diferentes valores encontrados

numa mensagem, para cada evento, podem ser vistos na tabela 3.4. Esta tabela identifica o nome

utilizado para descrever a informao na mensagem, assim como exemplos do contedo e o tipo

de eventos em que pode ser encontrada.

3.3.3 Mensagens de Informao

Para alm das mensagens definidas nas seces anteriores, foram definidas ainda mensagens

de informao. As mensagens de informao surgem da necessidade de transmitir entre os dispo-

sitivos informao sobre o sucesso ou insucesso das operaes efetuadas, assim como confirmar a

receo de mensagens.

Estas mensagens podem ser utilizadas como simples mensagens de confirmao de uma ope-

rao, ou ento para apresentar um erro ao utilizador como vemos na figura 3.3.

Figura 3.3: Alerta apresentado aps uma mensagem de informao com um erro

Na figura 3.3, vemos a mensagem de erro "Gesture not recognized". Esta mensagem trans-

mitida atravs de uma mensagem de informao. O dispositivo quando deteta uma mensagem de

informao que contm um erro, alerta o utilizador mostrando um texto contido na mensagem.

31

Smart Device Computer Integration

3.3.4 Sequncia de Mensagens

Estabelecida a conexo entre o servidor e o dispositivo mvel, o envio de mensagens sempre

iniciado pelo dispositivo mvel.

A primeira mensagem a ser enviada uma mensagem de informao especial, identificada por

FirstConfiguration. Esta mensagem utilizada pelo dispositivo para receber a sua primeira inter-

face, disponibilizada pelo computador. Assim, a resposta uma mensagem de interface, do tipo

newScreen, enviada pelo computador. Esta resposta deve ser obrigatoriamente deste tipo, uma vez

que define o primeiro ecr base da aplicao.

Aps esta primeira interao, a aplicao do dispositivo mvel est pronta a ser utilizada. A

mensagem de interface recebida, para alm de definir a interface do dispositivo, define os eventos

que so detetados pelo dispositivo quando o utilizador interage com a aplicao. Assim, quando

um evento detetado, uma mensagem de evento criada e enviada para o servidor.

Uma vez recebida e processada no servidor uma mensagem de evento, este responde ao dis-

positivo. Esta resposta pode assumir dois tipos de mensagem, uma mensagem de informao a

confirmar a ao efetuada ou uma mensagem de interface, para modificar o ecr apresentado no

dispositivo.

A troca de mensagens entre os dois dispositivos deve terminar sempre com uma mensagem de

informao, que garante que ambos os intervenientes receberam todas as mensagens e efetuaram

as aes pedidas.

Esta a interao principal entre as aplicaes dos dois dispositivos. No entanto, a utilizao

de mensagens reduzidas de interface exige o tratamento de uma mensagem de informao espe-

cial.

Quando um ecr, requisitado por uma mensagem reduzida de interface, no encontrado no dis-

positivo, este envia ao servidor uma mensagem de informao a requisitar a interface completa

do ecr. O servidor deve estar preparado, para quando receber esta mensagem, reenviar para o

dispositivo o ecr completo requisitado.

3.4 Concluso

Neste capitulo foram apresentadas os conceitos principais da framework SDCI desenvolvida

ao longo da dissertao.

Iniciou-se por apresentar uma descrio das funcionalidades principais da framework seguida

de uma viso das componentes principais da arquitetura da SDCI.

32

Smart Device Computer Integration

Foi tambm especificado o protocolo desenvolvido durante esta dissertao. O protocolo uti-

liza mensagens com uma estrutura de dados similar a um dicionrio. Foram apresentados exem-

plos das vrias mensagens definidas pelo protocolo, desde mensagens simples de acknowledge-

ment a mensagens mais complexas como a manipulao da interface do dispositivo.

Para alm disto foram exemplificadas as mensagens que devem ser enviadas pelo dispositivo,

aps eventos dos sensores ou ecr multi-toque serem despoletados pelo utilizador. So tambm

apresentados os vrios parmetros que devem ser includos nestas mensagens, desde a identifi-

cao do elemento subscrito ao evento at informao especfica retornada pelo sensor. Estes

parmetros devem ser includos nestas mensagens para possibilitar ao servidor o seu tratamento e

despoletar aes na aplicao que est a beneficiar deste mtodo de interao.

33

Smart Device Computer Integration

34

Captulo 4

Implementao

Neste capitulo detalhadamente apresentada uma implementao da framework SDCI espe-

cificada no captulo 3. Para tornar possvel a realizao de um caso de estudo com o objetivo de

avaliar a usabilidade e viabilidade da framework sugerida, foi desenvolvida uma aplicao cliente-

servidor, implementando a framework.

4.1 Tecnologia

Esta seco apresenta as tecnologias utilizadas na implementao da SDCI com o objetivo de

implementar a estrutura especificada no captulo 3.

4.1.1 Dispositivo mvel

A aplicao para o dispositivo mvel foi desenvolvida utilizando a framework Ionic, uma fra-

mework que permite o desenvolvimento de aplicaes web multi-plataforma. construida sobre

a framework Angular e permite o desenvolvimento de aplicaes utilizando HTML, Javascript e

CSS [Co16]. As aplicaes desenvolvidas sobre esta framework podem ser utilizadas num nave-

gador web ou exportadas para os sistemas mveis nativos, Android e iOS.

Devido utilizao de Javascript na implementao da aplicao mvel, a tecnologia utilizada

para implementar o protocolo de comunicao foi a Websocket. Esta tecnologia corresponde a um

protocolo de comunicao por sockets, baseado em TCP e desenvolvido especificamente para a

web [IF16]. A utilizao de websockets deve-se a este ser o nico protocolo de comunicao por

sockets suportado pelos browsers ou por webviews, sendo estas ltimas utilizadas pelo Ionic na

exportao da aplicao mvel.

Para tornar possvel o reconhecimento de gestos ao nvel do dispositivo mvel, utilizada a

biblioteca $N Multistroke Recognizer. Esta biblioteca permite o reconhecimento de gestos com

35

Implementao

mltiplos traos. Para alm disso possui implementaes em vrias linguagens, incluindo javas-

cript [LA16]. Para auxiliar na identificao e manipulao de eventos multi-toque, como pan ou

rotate, foi utilizada a biblioteca de javascript Hammer.js, que fornece mtodos para subscrever

este tipo de eventos, sem ser necessrio processar diretamente os dados dos sensores para cada

evento [AS16].

4.1.2 Computador

Para possibilitar a utilizao da framework SDCI necessrio uma aplicao de computador

que tire partido das funcionalidades disponibilizadas pela framework. Esta aplicao deve imple-

mentar um servidor, seguindo a arquitetura especificada pela SDCI, e deve suportar o protocolo

Websocket para funcionar em conjunto com a aplicao do dispositivo mvel. Assim, para evitar

o desenvolvimento de raiz de uma aplicao de computador, procurou-se uma aplicao que per-

mitisse a extenso das suas funcionalidades, assim como beneficiar das funcionalidades da Smart

Device Computer Integration.

Por este motivo, foi decidido utilizar a aplicao Blender. O Blender uma aplicao de mo-

delao 3D open source que permite a extenso das suas funcionalidades atravs da criao de

add-ons desenvolvidos em Python [Fou16]. Sendo o Blender uma aplicao de modelao 3D,

fornece vrias funes, como deslocar ou escalar objetos, que podem beneficiar das funcionalida-

des da framework de vrias maneiras. Por exemplo, o acelermetro pode ser utilizado para mover

um objeto, ou ainda, utilizar um gesto multi-toque de pinch para escalar um objeto.

A extenso desenvolvida implementa a estrutura da SDCI, e interage diretamente com a API

do Blender. Para ser possvel a extenso suportar websockets, foi utilizada uma biblioteca externa

de Python [Aug16].

4.2 Especificao das Mensagens

Esta seco apresenta a especificao utilizada para o protocolo apresentado na seco 3.3,

assim como uma especificao para os gestos utilizados pela framework para o reconhecimento de

gestos.

4.2.1 Protocolo

O protocolo proposto na seco 3.3 utiliza uma estrutura de dicionrio chave-valor para as suas

mensagens, assim optou-se pela utilizao de json para a especificao do protocolo. Assim, todas

as mensagens definidas pelo protocolo possuem uma chave type. Esta chave permite identificar

rapidamente o tipo de mensagem transmitido assim como os parmetros que so esperados nessa

36

Implementao

mensagem. Esta chave pode assumir os valores apresentados nas tabelas 3.1 e 3.3 assim como o

valor info e FirstConfiguration.Na seco seguinte so especificadas as mensagens apresentadas no captulo anterior (mensa-

gens de interface, de eventos e de informao), assim como explicada a utilizao das mensagens

para efetuar a subscrio de eventos.

4.2.1.1 Mensagens de interface

Para permitir aplicao do computador manipular a interface do dispositivo, so utilizados

os trs tipos de mensagem presentes na tabela 3.1.

As mensagens do tipo newScreen e addScreen apresentam uma estrutura semelhante, exem-

plificada na listagem 4.1.

A chave html contm a interface a ser criada ou adicionada ao dispositivo. A interface trans-

mitida consiste numa string de html vlido, que permita a sua reconstruo na aplicao mvel.

1 {

2 type: "newScreen",

3 mode: "MainMode",

4 html: "...",

5 ids: ["rotateButton", "transformButton", "scaleButton"],

6 events: {

7 rotateButton: ["swipe", "pinch"]

8 },

9 property: {

10 "transformButton": {

11 "hidden": "true"

12 },

13 "scaleButton": {

14 "disabled": "true",

15 "background": "#555555"

16 }

17 }

18 }

Listagem 4.1: Exemplo de mensagem de novo ecr

A chave ids contm um array, cujos objetos identificam elementos de interesse para efetuar

a manipulao da interface. Os valores presentes nesta chave so utilizados para aceder aos ele-

mentos contidos nos dicionrios encontrados na chave events e property. Esta redundncia de

informao existe para simplificar o acesso aos valores contidos nos dicionrios de events e pro-

perty reduzindo o nmero de ciclos necessrios para processar ambos os dicionrios, assim como

permitir um processamento ordenado dos valores dos dicionrios, uma vez que no existe garan-

tias de um dicionrio manter a ordem das suas chaves.

37

Implementao

A chave events utilizada para efetuar a subscrio de eventos, associando os elementos da in-

terface transmitida pela mensagem aos eventos que devem despoletar no dispositivo. A utilizao

desta chave explicada em detalhe na seco 4.2.1.4.

A chave property possui um dicionrio com um subconjunto dos valores contidos no array de

ids. Cada uma destas chaves possui um dicionrio com propriedades que podem ser manipuladas

pela aplicao no dispositivo. A tabela 3.2 contm o exemplo dos valores implementados no de-

senvolvimento desta dissertao.

A chave mode pode assumir qualquer valor e serve para identificar o ecr transmitido para o

dispositivo mvel. A utilizao deste valor permite efetuar a cache dos ecrs transmitidos. Isto ,

aps a primeira transmisso de um ecr, possvel enviar uma mensagem reduzida de interface,

apenas com o modo e tipo de mensagem (listagem 4.2), uma vez que o dispositivo j tem guardada

a interface a adicionar. Isto torna a comunicao mais eficiente, uma vez que reduz a quantidade

de informao transmitida nas mensagens de manipulao da interface.

1 {

2 type: "addScreen",

3 mode: "MainMode.SubMode1"

4 }

Listagem 4.2: Exemplo de mensagem reduzida de interface

Para alm destas duas mensagens, o servidor tem ainda acesso a mensagens do tipo modifyS-

creen, exemplificada na listagem 4.3.

1 {

2 type: "modifyScreen",

3 ids: ["rotateButton", "transformButton", "scaleButton"],

4 events: {

5 rotateButton: ["swipe"]

6 },

7 property: {

8 "transformButton": {

9 "hidden": "false"

10 },

11 "scaleButton": {

12 "disabled": "false",

13 "background": "#555555"

14 }

15 }

16 }

Listagem 4.3: Exemplo de mensagem utilizada para modificar o ecr

38

Implementao

Esta mensagem, para alm da chave type e ids, define as chaves events e property explicadas

nos pargrafos anteriores.

4.2.1.2 Mensagens de eventos

Aps um elemento subscrever um evento, a aplicao mvel informa o servidor quando o

evento despoletado. Estas mensagens assumem a estrutura apresentada na listagem 4.4.

Nestas mensagens, a chave type assume um dos valores apresentados na tabela 3.3 para identifi-

car o evento em questo. Para alm disso enviado no corpo da mensagem o id que despoletou o

evento, assim como a informao relevante que permite ao servidor executar a funo de proces-

samento correta.

1 {

2 type: "tap",

3 totalTouches: 1,

4 targetIDs: ["elementID"],

5 coordinate: [{x: 100, y: 150}],

6 direction: 2,

7 scale: 1.5,

8 rotation: 100,

9 deltaTime: 100

10 }

Listagem 4.4: Exemplo de mensagem de um evento tap

4.2.1.3 Mensagens de informao

As mensagens de informao, especificadas na listagem 4.5 garantem o sucesso ou insucesso

da transmisso de informao entre o servidor e o dispositivo mvel. Esta mensagem utilizada

por ambos os participantes, seja como confirmao de receo ou para transmitir informao sobre

erros encontrados durante o processamento da ultima mensagem recebida.

1 {

2 type : "info",

3 error : "true", //ou "false"

4 errorDescription : "Mensagem Invalida"

5 }

Listagem 4.5: Exemplo de mensagem de confirmao

39

Implementao

4.2.1.4 Subscrio de eventos

A subscrio de eventos possvel utilizando a chave events das mensagens de manipulao

de interface especificadas na seco 4.2.1.1.

A chave events contm um dicionrio cujas chaves so os ids dos elementos que vo subscrever

os eventos. Cada uma destas chaves contm um array com o tipo de eventos a que o objeto

deve subscrever. Os valores que podem ser utilizados para subscrever eventos so os valores

apresentados na tabela 3.3.

Para desativar a subscrio de eventos existem dois mtodos diferentes. No caso do aceler-

metro, uma vez que o sensor est continuamente a enviar informao para a aplicao e exige um

maior processamento de dados1, foi definido o evento stop-aceleration. Se a aplicao encontrar

numa mensagem este evento associado a um elemento da interface, remove a subscrio de even-

tos do acelermetro.

Para os eventos do ecr multi-toque, a anulao da subscrio do evento feita a partir da

property disabled. Quando um elemento colocado como disabled o servidor deixa de ser no-

tificado sobre eventos de toque. Isto torna a aplicao mais rpida, no necessitando de estar

constantemente a subscrever (ou cancelar a subscrio) o handler do evento.

4.2.2 Reconhecimento de Gestos

A SDCI capaz de efetuar reconhecimento de gestos efetuados sobre o ecr multi-toque. Para

ser capaz de executar esta funcionalidade, foi utilizado o $N Multistroke Recognizer ($N) [LA16].

O $N permite o reconhecimento de gestos com mltiplos traos desenhados numa sequncia arbi-

trria.

Para o $N poder efetuar o reconhecimento de gestos, a especifica