lousa digital interativa por meio de vis~ao...

63
arliton Basso de Godoy Lousa Digital Interativa Por Meio De Vis˜ ao Computacional - Um Estudo Inicial Joinville 2015

Upload: others

Post on 21-Jul-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Tarliton Basso de Godoy

Lousa Digital Interativa Por Meio De Visao Computacional -

Um Estudo Inicial

Joinville

2015

Page 2: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

UNIVERSIDADE DO ESTADO DE SANTA CATARINA

BACHARELADO EM CIENCIA DA COMPUTACAO

Tarliton Basso de Godoy

LOUSA DIGITAL INTERATIVA POR MEIO DE VISAO

COMPUTACIONAL - UM ESTUDO INICIAL

Trabalho de conclusao de curso submetido a Universidade do Estado de Santa Catarina

como parte dos requisitos para a obtencao do grau de Bacharel em Ciencia da Computacao

Isabela Gasparini

Orientador

Alexandre Goncalves Silva

Coorientador

Joinville, Junho de 2015

Page 3: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

LOUSA DIGITAL INTERATIVA POR MEIO DE VISAO

COMPUTACIONAL - UM ESTUDO INICIAL

Tarliton Basso de Godoy

Este Trabalho de Conclusao de Curso foi julgado adequado para a obtencao do tıtulo de

Bacharel em Ciencia da Computacao e aprovado em sua forma final pelo Curso de Ciencia

da Computacao Integral do CCT/UDESC.

Banca Examinadora

Isabela Gasparini - Doutor (orientador)

Alexandre Goncalves Silva - Doutor

(coorientador)

Andre Tavares da Silva - Doutor

Gilmario Barbosa dos Santos - Doutor

Page 4: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Resumo

Lousas ou quadros disponibilizam um meio para usuarios explanar questoes ou ideias visu-

almente, aumentando a comunicacao com os demais. As tecnologias digitais tem avancado

rapidamente, permitindo que diferentes dispositivos (tais como cameras, projetores, etc)

tenham menor custo, facilitando o desenvolvimento de novas ferramentas. Este traba-

lho tem como objetivo apresentar uma solucao para lousas digitais interativas com visao

computacional e o uso de smartphones. A aplicacao de lousa digital e o controle utilizam

conceitos de Interacao Humano Computador no seu desenvolvimento. O algoritmo de

identificacao de interacao tem como base a segmentacao por cor e identifica a posicao

relativa de um marcador em um quadro disposto em perspectiva. Com testes realizados

com usuarios, foi concluıdo que o trabalho esta em estagio inicial, porem, o objetivo de

uma solucao para a lousa digital foi alcancado.

Palavras-chaves: lousa interativa, visao computacional, design de interacao

Page 5: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Abstract

Boards or whiteboards provide a means for users to explain questions or ideas visually,

increasing communication with others. Digital technologies have advanced rapidly, al-

lowing different devices (such as cameras, projectors, etc.) have lower cost, facilitating

the development of new tools. This work aims to present a solution for interactive digital

whiteboards with computer vision and the use of smartphones. The application of digital

board and it control use Computer Human Interaction concepts in its development. The

algorithm for identifying interaction is based on segmentation by color and identifies the

relative position of a marker in a frame disposed in perspective. With tests with users, it

was concluded that work is at an early stage, however, the goal of a solution to the digital

whiteboard has been reached.

Keywords: whiteboard, computer vision, interaction design

Page 6: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Lista de Figuras

1.1 Aplicacao de lousa digital sendo executada em um dispositivo touchscreen. 9

1.2 Sistema Mimio (borracha, barra de captura e canetas com sensores). . . . . 10

1.3 Mapeamento da posicao da caneta. A esquerda imagem da lousa em pers-

pectiva e a direita o ponto mapeado na nova perspectiva. . . . . . . . . . . 11

1.4 Processo de transformacao de perspectiva. Identificacao dos pontos da

lousa (esquerda) e pontos da nova lousa (direita). . . . . . . . . . . . . . . 12

2.1 Exemplos de elementos estruturantes. . . . . . . . . . . . . . . . . . . . . . 16

2.2 Erosao: Imagem original (a), elemento estruturante (b) e resultado (c). . . 17

2.3 Dilatacao: Imagem original (a), elemento estruturante (b) e resultado (c). . 18

2.4 Abertura: Imagem original (a), elemento estruturante (b) e resultado (c). . 19

2.5 Fechamento: Imagem original (a), elemento estruturante (b) e resultado (c). 20

2.6 Transformacao de perspectiva. (a) Imagem original. (b) Imagem com a

perspectiva do objeto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.7 Cores primarias e secundarias de luz e pigmentos. . . . . . . . . . . . . . . 22

2.8 Esquema do cubo de cores RGB. . . . . . . . . . . . . . . . . . . . . . . . 23

2.9 Modelo HSV. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4.1 Diagrama do algoritmo desenvolvido. . . . . . . . . . . . . . . . . . . . . . 40

4.2 (a): imagem do objeto identificado, (b): mascara construida pelo algoritmo. 41

4.3 (a): imagem capturada pela camera, (b): imagem com a tranformacao de

perspectiva. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.4 Estrutura do projeto da lousa digital. . . . . . . . . . . . . . . . . . . . . . 44

4.5 Exemplo de uso da lousa, textos sublinhados. . . . . . . . . . . . . . . . . 45

4.6 Estrutura do controle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Page 7: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

C.1 Visao da camera: projetor ou monitor em perspectiva. . . . . . . . . . . . 57

C.2 Imagem com a perspectiva corrigida. . . . . . . . . . . . . . . . . . . . . . 57

C.3 Apresentacao exemplo carregada. . . . . . . . . . . . . . . . . . . . . . . . 58

C.4 Controle da lousa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

C.5 (a) Captura de tela do aplicativo. (b) Imagem da camera do aplicativo. . . 59

C.6 Anotacoes em outra cor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Page 8: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Lista de Tabelas

4.1 Tabela das mensagens enviada pelo controle . . . . . . . . . . . . . . . . . 46

4.2 Tabela com as perguntas do estudo de caso. . . . . . . . . . . . . . . . . . 48

4.3 Tabela com o tempo e respostas dos participantes do estudo de caso. . . . 49

Page 9: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Lista de Abreviaturas

KPCB Kleiner, Perkins, Caufield e Byers

2-D 2 Dimensoes

RGB Red, Green, Blue

CMY Cyan, Magenta, Yellow

CMYK Cyan, Magenta, Yellow, Key

HSV Hue, Saturation, Value

IHC Interacao Humano Computador

WIMP Windows, Icons, Menu, Pointer

UDP User Datagram Protocol

API Application Programming Interface

SDK Software Development Kit

Page 10: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Sumario

Lista de Figuras 3

Lista de Tabelas 5

Lista de Abreviaturas 6

1 Introducao 9

1.1 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1.2 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1.3 Estrutura do Trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2 Fundamentacao Teorica 15

2.1 Morfologia Matematica Binaria . . . . . . . . . . . . . . . . . . . . . . . . 15

2.1.1 Erosao e Dilatacao . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.1.2 Abertura e fechamento . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.2 Transformacoes Geometricas em Imagens . . . . . . . . . . . . . . . . . . . 19

2.3 Fundamentacao das Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.3.1 Modelo de Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.4 Design de Interacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2.4.1 Metas de Usabilidade . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.4.2 Tipos de Interacao . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.4.3 Estilos de interacao . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.4.4 Processo de Design de Interacao . . . . . . . . . . . . . . . . . . . . 31

2.5 Consideracoes do Capıtulo . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Page 11: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3 Trabalhos Relacionados 33

3.1 Controle com smartphone . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.2 Aplicacoes de Lousa Digital . . . . . . . . . . . . . . . . . . . . . . . . . . 36

3.3 Consideracoes do Capıtulo . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

4 Lousa Digital Interativa 40

4.1 O algoritmo de visao computacional . . . . . . . . . . . . . . . . . . . . . . 40

4.2 Projeto e Desenvolvimento . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.3 Estudo de caso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4.4 Consideracoes do Capıtulo . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

5 Conclusao 50

Referencias 52

A Termo de Consentimento Livre e Esclarecido 54

B Procedimentos do estudo de caso 55

C Exemplo de uso 57

Page 12: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

9

1 Introducao

Segundo Chery (2000), lousas ou quadros disponibilizam um meio de aumentar a fidelidade

da comunicacao entre as pessoas. Isso ocorre pois algumas ideias tornam-se mais claras

quando sao explicadas com esbocos em vez de apenas palavras, como por exemplo, com a

utilizacao de uma lousa. As lousas digitais interativas possuem a capacidade de realizar

outras tarefas alem da escrita, tais como o controle da aplicacao e o armazenamento digital

do que foi realizado, porque utilizam um sistema computacional com sua capacidade

de processamento. Dentre os tipos de lousas digitais existentes e possıvel classifica-las,

segundo o tipo de dispositivo utilizado na captura da entrada do usuario:

1. Lousas cujo sistema e baseado no quadro utilizado: esse tipo de lousa necessita de

um quadro sensıvel ao toque, grande e pesado, cuja tecnologia e cara (CHERY, 2000),

alem de ser de difıcil mobilidade. A Figura 1.1 contem um exemplo de uma lousa

desta categoria. Pode-se perceber dois usuarios interagindo em ambientes separados

por meio de uma aplicacao de lousas compartilhadas.

Figura 1.1: Aplicacao de lousa digital sendo executada em um dispositivo touchscreen.

Fonte: (KUNZ; NESCHER; KUCHLER, 2010).

2. Lousas que utilizam um sistema de captura portatil: tem a capacidade de digitalizar

Page 13: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

1 Introducao 10

o que e escrito em uma lousa comum atraves de sensores. Um exemplo deste tipo

de sistema e o Mimio (LI et al., 2006), que possui uma barra de captura instalada ao

lado de uma lousa fısica comum. Suas canetas emitem sinais ultrassonicos que sao

capturados pela barra de captura quando um usuario escreve. Permite a instalacao

de plug-ins aumentando sua capacidade de realizacao de tarefas, como por exemplo,

o suporte a web conferencias. Na Figura 1.2 e possıvel identificar o sensor principal

do Mimio ao centro e seus demais itens espalhados, tais como as canetas e sua

borracha especial.

Figura 1.2: Sistema Mimio (borracha, barra de captura e canetas com sensores).

Fonte: (CHERY, 2000).

3. Sistema de captura baseado em cameras: capacidade de capturar com eficiencia

(atraves de algoritmos capazes de identificar apenas as palavras escritas na lousa,

ignorando pessoas e outros ruıdos como diferente iluminacao) o conteudo escrito na

lousa. Esta interacao pode ser realizada em conjunto com dispositivos do grupo

2 (ZHANG, 2005). A Figura 1.3 representa um sistema desta categoria. Nele um

usuario escreve as anotacoes no quadro, Figura 1.3 (a), e o algoritmo identifica

exatamente o que foi escrito, Figura 1.3 (b).

Os grupos supracitados referem-se aos principais tipos de dispositivos de en-

trada. No grupo 3 ha uma grande variedade de lousas possıveis, visto que a interpretacao

das imagens capturadas por uma camera depende do objetivo da lousa. Dentre os traba-

lhos anteriores estudados, o principal objetivo desse tipo de lousa e capturar o conteudo

para que este permaneca disponıvel digitalmente (OLIVEIRA; LINS, 2010). Com isto, a

interacao com o usuario pode ser realizada combinando uma aplicacao do grupo 3 com

Page 14: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

1 Introducao 11

Figura 1.3: Mapeamento da posicao da caneta. A esquerda imagem da lousa em perspec-

tiva e a direita o ponto mapeado na nova perspectiva.

(a) (b)

Fonte: Adaptado de (ZHANG, 2005).

algum dispositivo do grupo 1 ou do grupo 2 que realiza a interacao com o computador

(LI et al., 2006).

Nos grupo 1 e grupo 2 a maioria dos trabalhos realizados utilizam dispositivos

dedicados de hardware (que vao muito alem das cameras, por exemplo, atraves de quadro

sensıvel ao toque ou o Mimio) para capturar a posicao da caneta na tela do projetor.

Em outras palavras, a lousa e um periferico de entrada analogo a um mouse, pois os

dois controlam o cursor do sistema operacional, porem com uma capacidade superior de

interacao visto que escrever com um mouse e uma tarefa que requer aprendizado e nao

e tao natural quanto o uso de uma caneta. O suporte a plug-ins permite uma melhor

utilizacao do sensor como lousa(CHERY, 2000).

Para Solem (2012), a visao computacional e a extracao de informacoes au-

tomatica de imagens. Para este trabalho, a informacao requerida e a sequencia de posicoes

da caneta sobre a lousa. Com esta informacao, que e extraıda das imagens capturadas por

uma camera digital, e possıvel identificar o local onde um usuario deseja, por exemplo,

escrever. A Figura 1.4 exemplifica este processo. As linhas em vermelho correspondem

onde cada um dos quatro cantos da lousa e mapeado para a nova perspectiva. O ponto

em azul exemplifica onde a posicao da caneta foi mapeada.

Page 15: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

1 Introducao 12

Figura 1.4: Processo de transformacao de perspectiva. Identificacao dos pontos da lousa

(esquerda) e pontos da nova lousa (direita).

Fonte: producao do proprio autor.

Para garantir a interatividade do sistema e necessario que a interface utilizada

realize as operacoes basicas de uma lousa digital interativa de uma forma eficiente. Para

esses sistemas a interface predominante e a baseada em caneta e pode ser implementada

de diferentes maneiras. A caneta pode ser apenas um objeto imitando uma caneta (sem

tinta) ou uma caneta comum com um emissor ultrassonico para ser capturado pelo sensor.

Ela pode ser utilizada para interagir com a lousa a fim de substituir o controle do cursor

que e realizado por um mouse. Porem, em telas muito grandes, existe a possibilidade do

usuario nao alcancar alguma area de interesse. Uma interface multimodal garante que a

experiencia humano-computador seja mais eficiente, expressiva e flexıvel porque combina

uma ou mais interfaces diferentes (ROGERS; SHARP; PREECE, 2013).

Se a interacao for apenas com uma caneta ha o problema de que o controle

devera estar na lousa podendo dificultar a facilidade de uso. Com o controle em um

dispositivo movel nao ha necessidade de ocupar uma area da lousa para ele.

Um Smartphone, cuja traducao significa telefone inteligente, e um telefone

movel que possui mais funcionalidades que um telefone movel comum. O aparelho e con-

duzido por um sistema operacional, similar a um computador. Alem de atender chamadas

e mensagens, o smartphone tem acesso a Internet e e capaz de ser programado.

O Brasil e um dos paıses com o maior crescimento de uso de smartphones.

Segundo o relatorio da KPCB (Kleiner Perkins Caufield & Byers, 2013), o paıs e o terceiro

em numero de usuarios de smartphones ao registrar 72 milhoes de usuarios em 2013,

Page 16: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

1.1 Objetivos 13

expansao de 38% em relacao a 2012, ficando atras apenas da China, em primeiro lugar,

com 422 milhoes, e da India, na segunda colocacao, com 117 milhoes de usuarios.

Em pesquisa realizada em 2012 pela consultoria especializada em tendencias

de consumo globais, TrendWatching, a presenca das plataformas moveis em todos os

momentos do consumo ja e apontada como uma forte tendencia em crescente expansao

mundo afora. Os telefones celulares se tornam, ao mesmo tempo, objetos de consumo

e ferramenta mediadora desse processo. Tambem de acordo com as pesquisadoras, essa

nova configuracao da sociedade de informacao e caracterizada por um mundo conectado

em redes, onde os fluxos da informacao remodelam as formas de interacao entre os sujeitos

(AMARAL, 2013).

Desta forma, este trabalho tem como objetivo o desenvolvimento de uma

solucao alternativa que utiliza a visao computacional para as lousas digitais interativas,

focando na facilidade de interacao com o usuario por meio de uma interface multimodal.

1.1 Objetivos

Investigar uma solucao para a lousa digital por meio de visao computacional, focando no

baixo custo e na facilidade de interacao com o usuario.

• Estudo da aquisicao dos dados por visao computacional;

• Estudo das formas de interacao;

• Implementacao da solucao;

• Testes funcionais.

1.2 Metodologia

Este trabalho de conclusao de curso possui natureza aplicada, visto que o objetivo e

implementar uma solucao para a lousa digital, utilizando visao computacional e formas

de interacao com o usuario estudadas durante a pesquisa. O problema sera abordado

de forma qualitativa devido a necessidade de definir as variaveis a serem utilizadas e da

analise das formas de interacao utilizadas no trabalho a ser implementado. O trabalho

Page 17: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

1.3 Estrutura do Trabalho 14

e classificado como exploratorio quanto aos objetivos, pois sera realizada uma pesquisa

bibliografica a fim de definir a aquisicao dos dados por visao computacional e a melhor

forma de interacao entre o usuario e a lousa. Por fim, sera feito um estudo de caso para

analisar a funcionalidade e usabilidade do sistema.

1.3 Estrutura do Trabalho

Este trabalho esta dividido em cinco capıtulos. A Introducao (Capıtulo 1) especifica os

tipos de lousas existentes atualmente. No Capıtulo 2 sao apresentados os fundamentos

necessarios para o desenvolvimento do trabalho. O Capıtulo 3 descreve os trabalhos

relacionados. Alguns dividem-se em aplicacoes que utilizam um dispositivo movel como

controle e outros em trabalhos que apresentam lousas digitais. O Capıtulo 4 apresenta

o algoritmo de deteccao, o projeto e desenvolvimento da lousa digital e seu controle no

smartphone e um estudo de caso com o prototipo desenvolvido.

Page 18: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

15

2 Fundamentacao Teorica

Neste capıtulo sao apresentados os conceitos fundamentais utilizados neste trabalho. A

secao 2.1 apresenta conceitos e definicoes da estrutura geometrica das imagens, como

por exemplo, a tematica das imagens. A secao 2.2 tem como objetivo o estudo das

transformacoes em imagens como, por exemplo, a de perspectiva. Ja a secao 2.3 aborda

os modelos de cores utilizados. A secao 2.4 apresenta definioes do Design de Interacao

com destaque para as metas de usabilidade.

2.1 Morfologia Matematica Binaria

Morfologia e a palavra que denota um ramo da biologia onde e estudado a forma e a es-

trutura dos animais e das plantas. Conforme Gonzalez e Woods (2010), ferramentas como

a morfologia e seus conceitos relacionados sao a base da fundamentacao matematica uti-

lizada para a extracao de “significados” de uma imagem. Em processamento de imagens

a morfologia matematica concentra-se no estudo das estruturas geometricas das imagens.

A linguagem utilizada e a teoria dos conjuntos. Alem das operacoes basicas de conjuntos

(uniao, intersecao, complemento e diferenca), os conceitos de reflexao e de translacao de-

finidos nas equacoes a seguir, sao vastamente utilizados em outras operacoes (GONZALEZ;

WOODS, 2010).

Nas imagens binarias os conjuntos sao membros do espaco 2-D (2 Dimensoes)

de numeros inteiros Z2 onde cada elemento e um vetor bidimensional de coordenadas

(x, y) de um pixel branco ou preto. Sendo A e B conjuntos pertencentes a Z2, a reflexao

e a translacao podem ser definidas de acordo com as equacoes a seguir:

Reflexao de B, indicada por B′

B′ = {w|w = −b, para b ∈ B} (2.1)

Translacao de B no ponto z, indicada por (B)z

(B)z = {c|c = b + z, para b ∈ B} (2.2)

Conforme Pedrini e Schwartz (2008), um operador morfologico e um mapeamento entre

Page 19: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.1 Morfologia Matematica Binaria 16

o conjunto A que define a imagem e um conjunto B, chamado elemento estruturante

tambem definido em Z2. Um elemento estruturante possui uma origem geralmente cen-

tralizada. Pode apresentar diversos tamanhos e formas e e usado para examinar uma

imagem buscando por propriedades de interesse. Na Figura 2.1 sao apresentados alguns

exemplos tıpicos de elementos estruturantes. Com estes conceitos e possıvel formular duas

operacoes primitivas da morfologia: erosao e dilatacao. A Figura 2.1 (a) representa um

elementro estruturante cujo valor e representado de acordo com a matriz 2.3, ou seja,

elementos com o valor 1 sao representados pela cor preta. Ja elementos com o valor 0 sao

representados com a cor branca.

Figura 2.1: Exemplos de elementos estruturantes.

(a) (b)

(c)

Fonte: producao do proprio autor.

(a) =

1 1 1

1 1 1

1 1 1

(2.3)

2.1.1 Erosao e Dilatacao

De acordo com Gonzalez e Woods (2010), erosao e dilatacao sao fundamentais para o

processamento morfologico, pois muitos dos algoritmos morfologicos se baseiam nestas

duas operacoes primitivas. A erosao de A por B, sendo os mesmos conjuntos definidos na

secao anteior, e definida como:

AB = {z|(B)z ⊆ A} (2.4)

Page 20: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.1 Morfologia Matematica Binaria 17

A equacao (2.4) indica que a erosao de A por B e o conjunto de todos os pontos de z

de forma que B, transladado por z, esta contido em A. A erosao e usada para remover

componentes de imagem a partir de um elemento estruturante. Conforme Gonzalez e

Woods (2010), pode-se ver a erosao como uma operacao de filtragem morfologica em que

os detalhes da imagem, menores que o elemento estruturante, sao filtrados (removidos)

da imagem. Neste trabalho de conclusao de curso os detalhes removidos serao os ruıdos

gerados pelo processo de segmentacao.

A Figura 2.2 demonstra a erosao de (a) pelo elemento estruturante (b) resul-

tando na imagem (c). Observe que a parte branca da Figura (a) foram erodidas conforme

a Figura (c).

Figura 2.2: Erosao: Imagem original (a), elemento estruturante (b) e resultado (c).

(a) (b)

(c)

Fonte: producao do proprio autor.

Confome Pedrini e Schwartz (2008), a operacao de dilatacao pode ser vista

como o deslocamento do elemento estruturante sobre a imagem, isto e, para cada pixel

da imagem o resultado recebe valor verdadeiro se o elemento estruturante esta contido a

partir do seu centro. A dilatacao de A por B e definida como:

A⊕B = {z|(B)z ∩ A 6= ∅} (2.5)

Essa equacao indica que a dilatacao de A por B e o conjunto da reflexao de B, seguida

pela translacao desta reflexao no ponto z, tal que a intersecao com o conjunto A contenha

pelo menos um elemento. Ao contrario da erosao, a dilatacao aumenta os objetos de

Page 21: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.1 Morfologia Matematica Binaria 18

uma imagem binaria. Este aumento dos objetos e controlado pelo elemento estruturante.

Observe na Figura 2.3 (c) que a parte branca foi dilatada.

Figura 2.3: Dilatacao: Imagem original (a), elemento estruturante (b) e resultado (c).

(a) (b)

(c)

Fonte: producao do proprio autor.

2.1.2 Abertura e fechamento

A abertura e fechamento sao outras duas importantes operacoes morfologicas na analise

de imagens (PEDRINI; SCHWARTZ, 2008).

No entendimento de Gonzalez e Woods (2010), a abertura geralmente suaviza

o contorno de um objeto, rompe os ıstmos e elimina as saliencias finas. O fechamento

tambem tende a suavizar contornos, mas diferentemente da abertura, funde as desconti-

nuidades estreitas e alonga os golfos finos, fecha pequenos buracos e preenche as lacunas

em um contorno.

A abertura do conjunto A pelo elemento estruturante B e definida como:

A ◦B = {(AB)⊕B} (2.6)

Assim, a abertura e a erosao de A por B seguida da dilatacao por B. Na Figura 2.4 pode-

se observar que o resultado (c) corresponde a abertura de (a) pelo elemento estruturante

(b). Observe que os buracos brancos foram removidos, ou seja, a abertura foi realizada

em relacao ao preto.

Page 22: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.2 Transformacoes Geometricas em Imagens 19

Figura 2.4: Abertura: Imagem original (a), elemento estruturante (b) e resultado (c).

(a) (b)

(c)

Fonte: producao do proprio autor.

De mesmo modo o fechamento de A por B e a dilatacao de A por B seguido

pela erosao do resultado por B que e definido como:

A •B = {(A⊕B)B} (2.7)

Observe que a Figura 2.5 refere-se ao fechamento da cor preta ou abertura

da cor branca. De mesmo modo, a abertura da cor preta tambem pode se referir ao

fechamento da cor branca.

Essas operacoes podem ser utilizadas para construir filtros que eliminam ruıdos

presentes em imagens binarias. Geralmente, os ruıdos encontrados sao pequenos elementos

aleatorios claros sobre o fundo escuro ou vice-versa. Para elimina-los pode ser utilizado um

filtro de abertura, seguido de um filtro de fechamento com o mesmo elemento estruturante.

Neste trabalho essas operacoes sao utilizadas no passo anterior a segmentacao por cor.

2.2 Transformacoes Geometricas em Imagens

Transformacoes geometicas sao operacoes cujo principal objetivo e permitir o mapea-

mento entre posicoes espaciais dos pixels da imagem de referencia e a imagem modificada

(PEDRINI; SCHWARTZ, 2008). Uma transformacao se divide em duas operacoes basicas:

Page 23: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.2 Transformacoes Geometricas em Imagens 20

Figura 2.5: Fechamento: Imagem original (a), elemento estruturante (b) e resultado (c).

(a) (b)

(c)

Fonte: producao do proprio autor.

uma transformacao espacial e uma interpolacao de intensidade. A primeira define a reor-

ganizacao dos pixels sobre o plano da imagem, ja a segunda trata da atribuicao dos nıveis

de cinza ou cores aos pixels da imagem transformada espacialmente.

Nas transformacoes espaciais estao contidas as transformacoes projetivas. Cha-

madas tambem de homografias, permitem que cada ponto dos objetos que formam a cena

no espaco tridimensional possa ser projetado no plano de imagens (PEDRINI; SCHWARTZ,

2008). Uma das tranformacoes mais comuns, entre as projetivas, e a projecao perspectiva,

objeto deste estudo.

Uma das formas de expressar a projecao perspectiva e a partir da equacao

2.8, retirada de (BRADSKI, 2000), que transforma os pontos do quadrilatero da primeira

imagem (xi, yi) para (ui, vi), com (i = 1, 2, 3, 4).

ui =c00xi + c01yi + c02c20xi + c21yi + 1

vi =c10xi + c11yi + c12c20xi + c21yi + 1

(2.8)

Page 24: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.3 Fundamentacao das Cores 21

y =

x0 y0 1 0 0 0 −x0u0 −y0u0

x1 y1 1 0 0 0 −x1u1 −y1u1

x2 y2 1 0 0 0 −x2u2 −y2u2

x3 y3 1 0 0 0 −x3u3 −y3u3

0 0 0 x0 y0 1 −x0v0 −y0v00 0 0 x1 y1 1 −x1v1 −y1v10 0 0 x2 y2 1 −x2v2 −y2v20 0 0 x3 y3 1 −x3v3 −y3v3

.

c00

c01

c02

c10

c11

c12

c20

c21

=

u0

u1

u2

u3

v0

v1

v2

v3

(2.9)

Com os coeficientes da matriz c (equacao 2.9) e possıvel transformar a imagem

para uma determinada vista e este passo e representado na imagem 2.6. Os pontos

coloridos da Figura (a) sao (xi, yi) e foram mapeados para os cantos da Figura (b) (ui, vi)

com (i = 1, 2, 3, 4).

Figura 2.6: Transformacao de perspectiva. (a) Imagem original. (b) Imagem com a

perspectiva do objeto.

(a) (b)

Fonte: producao do proprio autor.

A tranformacao da sequencia de imagens da lousa de uma vista qualquer para

uma vista de frente permite visualizar o conteudo.

2.3 Fundamentacao das Cores

Em todo o processo que envolve as cores esta implıcita a percepcao da vista humana. Em

meados do seculo XVII, Isaac Newton descobriu o espectro de cores que se fundem desde

o violeta ate o vermelho (GONZALEZ; WOODS, 2010).

Page 25: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.3 Fundamentacao das Cores 22

Os seres humanos e tambem alguns animais percebem as cores em funcao da

intensidade de luz refletida pelo objeto que esta sendo observado.

A luz cromatica (com cores) apresenta comprimento de onda de 400 a 700

nanometros. Sua qualidade de luz depende da radiancia, luminancia e brilho. A radiancia

e o quantum total de energia que flui da fonte de luz medido em Watts (w). A luminancia,

lumens (lm) e a quantidade de energia que se percebe de uma fonte de luz. O brilho, pela

sua subjetividade, nao pode ser medido, mas e responsavel pela sensacao de cores.

Estudos nos cones dos olhos humanos (6 a 7 milhoes) resumem a tres prin-

cipais categorias de sensoriamento: vermelho (65%), verde (33%) e azul (2%), o mais

sensıvel. Por essas caracterısticas de absorcao do olho humano, as cores sao vistas como

combinacoes das chamadas cores primarias: vermelho, verde e azul, conforme observa

Gonzalez e Woods (2010). Vale frisar que o RGB (red, green e blue, respectivamente) nao

e capaz de reproduzir todas as cores como erroneamente tem sido interpretado.

A Figura 2.7 apresenta o processo subtrativo das cores de pigmentos. A cor

preta e o resultado da mistura de todas as cores primarias de pigmentos que sao: magenta,

ciano e amarelo.

Figura 2.7: Cores primarias e secundarias de luz e pigmentos.

Fonte: adaptado de (GONZALEZ; WOODS, 2010).

Page 26: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.3 Fundamentacao das Cores 23

2.3.1 Modelo de Cores

Na definicao de Gonzalez e Woods (2010), um modelo de cores e uma especificacao de

um sistema de coordenadas e um subespaco dentro desse sistema, no qual cada cor e

representada por um unico ponto.

Os modelos de cores atualmente se focam em hardware ou manipulacao de

cores e existem varios modelos em uso: RGB (Red, Green, Blue), CMY (Cyan, Magenta,

Yellow), CMYK (Cyan, Magenta, Yellow, Key), HSV (Hue, Saturation, Value).

Para este trabalho de conclusao de curso especificam-se os seguintes modelos

de cores: RGB e HSV.

RGB (Red, Green, Blue)

O modelo RGB e embasado no sistema de coordenadas cartesianas. As tres cores primarias

(vermelho, verde e azul) estao distribuidas em um cubo (Figura 2.8) em tres vertices,

dando nome ao modelo. Esse modelo e muito utilizado em monitores e cameras de vıdeo

(PEDRINI; SCHWARTZ, 2008). Neste trabalho de conclusao de curso a imagem obtida da

camera esta representada no modelo de cores RGB.

Figura 2.8: Esquema do cubo de cores RGB.

Fonte: adaptado de (ANTON; BUSBY, 2003).

No modelo RGB a imagem e composta por tres componentes. Um para cada

cor primaria que se combinam para a producao das imagens de cores compostas. Conforme

Gonzalez e Woods (2010), o numero de bits utilizados para representar cada pixel no

Page 27: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.3 Fundamentacao das Cores 24

espaco RGB e chamado de profundidade de pixel, quanto maior essa profundidade, mais

qualidade de cor na imagem.

HSV (Hue, Saturation, Value)

No entendimento de Pedrini e Schwartz (2008), o modelo HSV e definido pelos parametros

matiz (H, hue), saturacao (S, saturation) e luminancia(V, value). A representacao grafica

tridimensional do modelo HSV e uma piramide hexagonal derivada do cubo RGB, con-

forme a Figura 2.9.

Figura 2.9: Modelo HSV.

Fonte: adaptado de (BRYS, 2008 apud ENVI. . . , 2000).

Ve-se na Figura 2.9 as cores primarias RGB, as cores complementares, o eixo

horizontal que representa a saturacao, o eixo vertical que representa a luminancia e a

matiz na base da piramide invertida.

A conversao do modelo RGB para HSV e realizada com as seguintes equacoes:

Page 28: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.3 Fundamentacao das Cores 25

H =

60 ∗ (G−B)

(M −m), se M = R

60 ∗ (B −R)

(M −m)+ 120, se M = G

60 ∗ (R−G)

(M −m)+ 240, se M = B

S =

60 ∗ (M −m)

M, se M 6= 0

0, caso contrario

V = M

(2.10)

Conversao do modelo HSV para o modelo RGB (BRYS, 2008 apud SOUTO,

2000).

Hi =

⌊H

60

⌋mod 6 (2.11)

f =H

60−Hi (2.12)

p = V ∗ (1− S) (2.13)

q = V ∗ (1− f ∗ s) (2.14)

t = V ∗ (1− (1− f) ∗ S) (2.15)

se Hi = 0→ R = V,G = t, B = p

se Hi = 1→ R = q,G = V,B = p

se Hi = 2→ R = p,G = V,B = t

se Hi = 3→ R = p,G = q, B = V

se Hi = 4→ R = t, G = p,B = V

se Hi = 5→ R = V,G = p,B = q

(2.16)

Page 29: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.4 Design de Interacao 26

Neste trabalho a equacao 2.10 e utilizada para transformar o modelo de co-

res das imagens obtida pela camera de RGB para HSV. Com isso, e possıvel realizar

a segmentacao da imagem por cor em um intervalo HSV. Para a imagem ser exibida e

necessario converter de HSV para RGB. Isto e realizado atraves das equacoes 2.11 a 2.16.

2.4 Design de Interacao

Rogers, Sharp e Preece (2013) definem design de interacao como “Projetar produtos inte-

rativos para apoiar o modo como as pessoas se comunicam e interagem em seus cotidianos,

seja em casa ou no trabalho.” Eles citam a definicao de Winograd, que descreve design de

interacao de um modo mais geral, como “o projeto de espacos para a comunicacao e in-

teracao humana”. A ideia e aproximar os seres humanos dos computadores. Pode-se fazer

isso com interfaces descomplicadas para uma melhor comunicacao visual. A definicao de

Thakara enfatiza “o porque e o como de nossas interacoes cotidianas usando computado-

res” e Saffer que destaca os aspectos artısticos do design de interacao: “a arte de facilitar

as interacoes entre seres humanos por meio de produtos e servicos”. Para os seres huma-

nos, detalhes que estimulem seus sentidos despertam o interesse na interacao. A ideia e

que os programas contemplem facilidade de uso, estetica e atendam as necessidades de

cada grupo de pessoas. Em suma, a interacao humano computador busca desenvolver a

versatilidade.

A partir dessas afirmacoes, podemos entender que o design de interacao tem

como objetivo projetar e desenvolver produtos que auxiliem os usuarios em suas tarefas,

tanto para trabalho como para o lazer. Para entender como o usuario interage com um

produto, e necessario analisar como esse produto realiza suas funcoes e como o usuario se

comporta com o resultado dessas funcoes.

O principal criterio de qualidade de uso de sistemas e a usabilidade, que en-

volve o modo como o uso de um sistema interativo no ambiente trabalho e afetado pelas

caracterısticas do usuario. O uso dos sistemas computacionais interativos fora do local de

trabalho cria a experiencia do usuario que diz respeito ao uso do produto relacionado aos

seus sentimentos e emocoes (BARBOSA; SILVA, 2010). Produtos ja existentes podem ter

deixado os usuarios conformados com o modo com que uma acao e executada. Cabe ao

designer verificar possıveis alteracoes que farao com que essa experiencia de usuario seja

Page 30: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.4 Design de Interacao 27

melhorada.

2.4.1 Metas de Usabilidade

Segundo Nielsen (1993), usabilidade “e um atributo de qualidade que avalia quao facil uma

interface e de usar”, ou “a medida de qualidade da experiencia de um usuario ao interagir

com um produto ou um sistema”. Nielsen define usabilidade por outros criterios descritos

mais a frente. Ou seja, fazer um produto facil de usar. Geralmente, para estabelecer se

um produto atende aos criterios de usabilidade, se aplicam algumas perguntas chaves.

O conceito de usabilidade refere-se ao modo como as pessoas interagem com

os produtos. Metas de usabilidade sao utilizadas em projetos de interacao para ajudar a

solucionar problemas como produtividade ou aprendizado. As metas estabelecem limites

e direcionadores para as solucoes de interacao. Segundo Rogers, Sharp e Preece (2013),

as metas de usabilidade podem ser classificadas em:

• Eficacia - Ser eficaz no uso significa quanto um produto e bom em fazer o que se

espera dele, ou seja, eficacia e a capacidade de solucao de problemas associada a

escala de realizacao dos objetivos. E a efetividade de fazer as coisas certas e atingir

o objetivo. A pergunta chave para esta meta pode ser: o produto permite que as

pessoas aprendam, realizem seu trabalho de forma eficiente, acessem a informacao

de que necessitam ou comprem os produtos que desejam?

• Eficiencia - Ser eficiente no uso significa que um produto auxilia os usuarios na

realizacao de suas tarefas, ou seja, eficiencia e fazer certo as coisas e atingir o

objetivo de modo mais facil. Aparecem aı dois comportamentos: um em relacao

ao tempo de resposta, processamento e velocidade na execucao de suas funcoes e

outro em relacao aos recursos usados e a duracao de seu uso na execucao de suas

tarefas. A principal pergunta pode ser: os usuarios conseguirao manter um alto

nıvel de produtividade, uma vez que tenham aprendido como utilizar um produto

para realizar suas tarefas?

• Seguranca - Ser seguro significa que o usuario esteja protegido de condicoes perigosas

e situacoes indesejaveis. Esta meta tem base na ergonomia. Serve para prevenir erros

e reduzir riscos. A pergunta para essa meta e: qual e a gama de erros possıveis ao

Page 31: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.4 Design de Interacao 28

se utilizar o produto e quais as medidas que o produto permite que o usuario tome

para corrigir os erros facilmente?

• Utilidade - Ser util significa a medida na qual o produto oferece o tipo certo de fun-

cionalidade, de modo que os usuarios possam fazer aquilo que precisam ou desejam,

ou seja, o sistema deve fornecer ao usuario um conjunto apropriado de funcoes. A

pergunta principal para essa meta pode ser: o produto fornece um conjunto ade-

quado de funcoes que permitam aos usuario realizar todas as suas tarefas da maneira

que desejam?

• Learnability - O significado basico desta palavra originaria do ingles e capacidade

de aprendizagem. Ser facil de aprender refere-se a facilidade de aprender a usar um

sistema. A capacidade de aprendizado esta vinculada ao grau de dificuldade para

iniciar as tarefas fundamentais. Pressupoe-se de que existe uma disponibilidade do

usuario para aprender a usar um sistema, porem, quando ele o percebe complexo,

tende a desistir de usa-lo. Oferecer ajuda para o aprendizado deve ser uma tarefa

sensata. Portanto, saber quando e como a ajuda sera bem vinda, faz parte da es-

trategia de planejamento desta meta. Pelo menos duas perguntas podem ajudar a

defini-la: o usuario sabera como usar o produto explorando a interface e experimen-

tando determinadas acoes? Sera difıcil aprender todo o conjunto de funcoes dessa

maneira?

• Memorability - Ser facil de lembrar como usar refere-se a facilidade que o usuario

possui de lembrar como utilizar um sistema depois de ja te-lo aprendido. Esta

meta trata da capacidade de memorizacao. O seu cumprimento acontece quando

existe facilidade em lembrar como utilizar o sistema apos uma experiencia previa.

A norma e que o usuario nao seja obrigado a reaprender a utilizar o sistema, apos

algum tempo sem usa-lo. O sistema deve prover suporte para lembrar a sequencia

logica, estruturas e categorias. A pergunta orientadora dessa meta e: que tipo de

suporte e oferecido ao usuario para auxilia-lo a lembrar dos procedimentos para

a realizacao de tarefas, especialmente para operacoes que nao sao frequentemente

utilizadas?

Page 32: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.4 Design de Interacao 29

2.4.2 Tipos de Interacao

Rogers, Sharp e Preece (2013) dizem que pode-se conceituar os tipos de interacao como as

maneiras como uma pessoa interage com um produto ou aplicacao. Sao sugeridos quatro

principais tipos de interacao:

• Instrucao - descreve como os usuarios realizam suas tarefas dizendo ao sistema o

que fazer. Podem dar instrucoes a um sistema para executar operacoes, imprimir

um arquivo e lembrar o usuario de um compromisso. Muitos produtos utilizam este

modelo fazendo com que seja um dos mais comuns.

• Conversacao - baseada na ideia de uma pessoa conversar com um sistema como se ele

fosse outra pessoa. Diferencia-se da instrucao porque e um processo de comunicacao

de duas vias, no qual o sistema age como um parceiro, ao inves de atuar como uma

maquina que apenas obedece ordens. Varia de simples sistemas de reconhecimento

de voz e menus que interagem via telefones, a sistemas mais complexos baseados em

linguagem natural. O problema deste tipo de interacao e que pode conter tarefas

cansativas de conversacao.

• Manipulacao - envolve manipular objetos e explorar o conhecimento que os usuarios

tem sobre como faze-lo no mundo fısico. A manipulacao direta, por seus multiplos

benefıcios, e amplamente utilizada pois permite aos usuario sentirem que estao con-

trolando diretamente os objetos digitais representados pelo computador.

• Exploracao - envolve usuarios movendo-se por ambientes virtuais ou fısicos. Os

ambiente fısicos possuem tecnologias de sensoriamento. Este tipo de interacao per-

mite que os usuarios aprimorem seu conhecimento familiar sobre se movimentar

fisicamente.

2.4.3 Estilos de interacao

Pode-se definir estilos de interacao em IHC (Interacao Humano Computador), como sendo

a forma com que os usuarios podem interagir com os sistemas computacionais. Segundo

Barbosa e Silva (2010), os principais estilos de interacao sao: linguagens de comando,

linguagem natural, interacao por menus, por formularios, por manipulacao direta, WIMP

(Windows, Icons, Menu, Pointer) e movel. A seguir, estes estilos sao detalhados:

Page 33: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.4 Design de Interacao 30

• Linguagens de comando - neste tipo, o usuario deve digitar os comandos que re-

alizam as acoes na aplicacao. Primeiro, o usuario memoriza os comandos que sao

feitos com base no vocabulario dos usuarios. Segundo, a gramatica da linguagem

de comandos precisa refletir a forma como eles conceitualizam as operacoes. Sao

objetivos basicos do design de uma linguagem de comando: precisao, concisao, fa-

cilidade de escrita e leitura, completude, rapidez no aprendizado, simplicidade para

reduzir erros e facilidade de retensao ao longo do tempo. Os objetivos de alto nıvel

sao: correspondencia entre a realidade e a notacao; conveniencia para realizar as

manipulacoes relevantes as tarefas dos usuarios; compatibilidade com notacoes exis-

tentes; flexibilidade para acomodar usuarios novatos e experientes e expressividade

para encorajar a criatividade.

• Linguagem natural - este estilo de interacao visa permitir que o usuario se expresse

como em uma conversa com uma outra pessoa, utilizando seu proprio idioma. Tem

como principal objetivo facilitar o uso de um sistema por usuarios novatos. O

grande desafio deste estilo de interacao e a implementacao de uma interface capaz

de negociar significados e resolver ambiguidades e imprecisoes nas ilocucoes dos

usuarios que possuem dificuldades para entender os limites do sistema.

• Interacao por menus - neste caso o sistema oferece um conjunto de opcoes dentre as

quais o usuario deve selecionar a que lhe interessa. O objetivo do design de menus e

criar uma organizacao razoavel, inteligıvel, memoravel e conveniente para as tarefas

dos usuarios. Ha estrutura linear, hierarquica ou em rede, acıclica ou cıclica. Podem

ser ordenadas alfabetica, cronologica ou numericamente.

• Interacao por formularios - Neste caso o sistema solicita dados do usuario atraves

de campos que precisam ser preenchidos. Os sites da web se encaixam neste estilo

de interacao.

• Interacao por manipulacao direta - Este estilo foi proposto com o objetivo de aproxi-

mar a interacao da manipulacao dos objetos no mundo real. Como benefıcios deste

estilo, podemos citar reducao das taxas de erro, aprendizado mais rapido, aumento

da memorizacao das operacoes, engajamento e motivacao para explorar o sistema.

• WIMP - Adotado nos ambientes baseados em janelas. Visa aproveitar os benefıcios

e contornar as limitacoes de cada estilo de interacao individual.

Page 34: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.4 Design de Interacao 31

• Movel - Geralmente oferece uma maior proximidade aos usuarios, pois possui mo-

bilidade. Tambem oferece varios tipos de aplicacoes em um unico aparelho. Possui

algumas limitacoes, tais como, tamanho da tela e com isso a dificuldade de exibir

varios itens ao mesmo tempo.

2.4.4 Processo de Design de Interacao

Segundo Rogers, Sharp e Preece (2013), o design e uma atividade pratica e criativa com

o objetivo de desenvolver um produto que ajude seus usuarios a atingir seus objetivos.

Define-se design de interacao, como sendo a area preocupada com o “design de produtos

interativos para apoiar o modo como as pessoas se comunicam e interagem em suas vidas

cotidianas e no trabalho”.

O processo do design de interacao compoe-se de quatro atividades basicas. A

primeira e estabelecer requisitos. Primeiro deve-se saber quem sao os usuarios alvo e que

tipo de suporte um produto interativo poderia fornecer de maneira util. Isto e a base

dos requisitos do produto e sustenta o projeto e o desenvolvimento subsequentes. Essas

necessidades sao satisfeitas por meio de coleta de dados e de analise. A segunda etapa

e projetar alternativas. Constitui-se na atividade principal do design, sugerir ideias para

satisfazer requisitos. Divide-se em design conceitual e design fısico. O design conceitual

estabelece a producao do modelo conceitual para o produto. O design fısico considera os

detalhes do produto. Veiculam-se varias alternativas em cada um deles. A terceira etapa

e: prototipacao. O design de interacao envolve o design de produtos interativos. Para

os usuarios avaliarem o design, a formula e a interacao com eles. Por isso, criam-se os

prototipos com diferentes tecnicas, algumas nao necessitando de softwares. A quarta etapa

e a avaliacao do design. Significa determinar a usabilidade e aceitabilidade do produto ou

design. E medida em termos de uma variedade de criterios, ligados as metas de usabilidade

previamente definidas. A participacao do usuario no desenvolvimento do design aumenta

as chances de sua aceitacao (ROGERS; SHARP; PREECE, 2013). Todas essas atividades sao

inter-relacionadas. Esta interacao e uma das principais caracterısticas de uma abordagem

centrada no usuario, foco do design de interacao.

Page 35: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

2.5 Consideracoes do Capıtulo 32

2.5 Consideracoes do Capıtulo

Este capıtulo descreve a fundamentacao teorica que embasa este trabalho de conclusao

de curso. Nele sao utilizados conceitos de morfologia matematica, modelo de cores, trans-

formacao de perspectiva e detalhes da area de IHC. Os conceitos de morfologia ma-

tematica, modelo de cores e transformacao de perspectiva sao utilizados na construcao do

algoritmo de identificacao de interacao. O prototipo foi desenvolvido com base na area

de IHC.

Page 36: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

33

3 Trabalhos Relacionados

Este capıtulo apresenta o que ja foi desenvolvido nas duas grandes areas contidas neste

trabalho de conclusao de curso: interfaces de controles para smartphones e aplicacoes de

lousas digitais. Os trabalhos escolhidos para relato descrevem aplicacoes semelhantes a

este trabalho como, por exemplo, a utilizacao do smartphone como controlador de jogos

e o uso de lousas. O capıtulo divide-se em trabalhos de controles com smartphones e

trabalhos de lousas digitais.

3.1 Controle com smartphone

Caracterısticas dinamicas de movimentos

O estudo realizado consiste em investigar caracterısticas de movimentos de usuarios para

controlar aparelhos eletronicos, utilizando um smartphone. Um smartphone e um tele-

fone celular que alem de possuir uma capacidade computacional elevada em relacao aos

celulares comuns, conta com sensores como o acelerometro e o de orientacao. Segundo

Yun e Song (2012) e possıvel combinar as informacoes de saıda destes dois sensores para

uma unica e assim utiliza-la como entrada para aplicacoes. Os dados sao analisados de

forma que seja possıvel encontrar padroes e assim definir uma serie de interacoes comuns

a todo o tipo de usuarios.

As principais caracterısticas dinamicas estudadas foram tres: aumentar e dimi-

nuir, chacoalhar e inclinar. Essas caracterısticas foram apresentadas para 40 voluntarios

entre 21 e 27 anos. O resultado de cada voluntario foi gravado em um arquivo contendo to-

dos os testes realizados, para, a partir do arquivo, encontrar um padrao. Para comprovar

os resultados dos testes, dois movimentos adicionais tambem foram utilizados: deslocar

para cima-baixo e para a esquerda-direita.

Conforme Yun e Song (2012), o movimento de inclinar e facilmente identificado

pelo sensor de orientacao devido ao fato de ser um movimento rotacional. Os movimentos

de aumentar-diminuir e chacoalhar podem ser identificados, extraindo dados dos tres eixos

do acelerometro, uma vez que os movimentos sao um tipo de translacao de posicao, mesmo

Page 37: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3.1 Controle com smartphone 34

que tenha dados do sensor de orientacao. Tambem foi concluıdo que os movimentos

testados possuem praticamente o mesmo tempo de execucao. O resultado dos testes

com os movimentos adicionais mostrou que o tempo tambem possui um comportamento

estereotipo caracterıstico.

Quando comparados todos os tempos dos movimentos testados, foi identificado

que o tempo de execucao dos gestos e de mais ou menos 2 segundos. Isto significa que e

necessario pelo menos 1 segundo de dados de algum movimento para poder classifica-lo.

Com isto e possıvel utilizar os movimentos para substituir, por exemplo, os botoes.

O trabalho de Yun e Song (2012) apresenta que e possıvel utilizar o smartphone

como dispositivo de entrada para aplicacoes utilizando seus sensores. Para este trabalho de

conclusao de curso, cujo objetivo e desenvolver uma lousa digital interativa, os comandos

podem ser executados via movimentos e assim facilitar o acesso a funcoes. O smartphone

permite a utilizacao de avisos sonoros para explicitar qual comando foi acionado.

Controles de jogos em smartphones

O trabalho de Tung e Leu (2012) propoe o projeto e a implementacao de um controlador

de jogos para smartphone utilizando UDP (User Datagram Protocol). Neste caso, um

smartphone pode se transformar em um controle generico para jogos.

O sistema foi projetado separando as duas principais partes: o servidor no

computador e o cliente no dispositivo movel. O servidor, escrito em Java, garante a

possibilidade de multiplataforma e capacidade de comunicacao devido a caracterısticas da

propria linguagem. O cliente foi desenvolvido baseado na plataforma Android, tambem

em Java, com acesso nativo as APIs (Application Programming Interface) Android. Para

desenvolver o cliente, segundo Tung e Leu, e necessario que o aplicativo, alem de se

conectar corretamente com bom desempenho, apresente boa capacidade multitoque. No

trabalho dos autores, o Google Android SDK (Software Development Kit) possuıa esta

capacidade. O servidor e responsavel por receber as mensagens enviadas pelo dispositivo

movel e processa-las de acordo com que o comando especifica.

Para avaliar o desempenho do controle desenvolvido, Tung e Leu (2012) apli-

caram a norma ISO 9241-9, que e utilizada para a avaliacao de dispositivos de entrada

diferentes de teclados. A medida utilizada foi em termos de quantidade de vazao, ou

seja, a quantidade de bits processados em uma quantidade de tempo. O desempenho do

Page 38: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3.1 Controle com smartphone 35

smartphone foi comparado com um controle especıfico de jogos (Horipad). O smartphone

apresenta menos vazao que o controle especıfico, porem, ainda e possıvel utiliza-lo para

controlar jogos, pois e um dispositivo portatil e menor.

O trabalho de Tung e Leu (2012) proporciona compreender que para utilizar

como controle o smartphone, este deve ter a capacidade de lidar com multiplos toques.

Neste trabalho de conclusao de curso a proposta e que um smartphone controle a lousa

digital interativa de forma analoga ao controle de Tung e Leu (2012), ou seja, utilizar da

portabilidade de um smartphone, da sua capacidade de comunicacao e de seus sensores

para desenvolver um controle que proporcione melhor qualidade para o usuario.

Interacao de Jogos utilizando Portateis

O trabalho de Joselli et al. (2012) propoe uma arquitetura para jogos que utilize um dispo-

sitivo portatil (como um smartphone ou tablet) para controlar jogos que estao disponıveis

em um computador. O framework fornece a possibilidade de utilizar como entrada do

usuario o movimento, utilizando o acelerometro; por toque, utilizando a tela; e por botoes,

utilizando botoes virtuais que realizam funcoes dos jogos dispostos na tela.

Um jogo foi desenvolvido como prova de conceito da arquitetura projetada. No

jogo o usuario tem a possibilidade de escolher qual modo de entrada ele deseja utilizar.

Como teste de usabilidade Joselli et al. (2012) fizeram uma serie de perguntas que foram

passadas aos usuarios. Cada usuario jogava com um tipo de entrada em sequencia e

respondia perguntas referentes a: ergonomia, diversao, feedback, tempo de aprendizado e

tendencia a escolha de entrada. As respostas variavam de 1 (mais negativo) ate 10 (mais

positivo).

Joselli et al. (2012) concluiram que os usuarios em geral preferem utilizar

dispositivos que contenham um tipo de entrada mais natural. O fato de utilizar um

dispositivo movel, como um smartphone, da ao usuario a capacidade de controlar varios

programas com um aparelho que ele ja conhece.

Segundo Joselli et al. (2012), utilizar um dispositivo que o usuario ja conheca,

pode facilitar e assim diminuir seu tempo de aprendizado e aumentar a facilidade de uso.

Os testes realizados pelo trabalho descrito tambem podem ser aplicados neste trabalho,

para avaliar como o controle da lousa se comporta com os mais variados tipos de usuario.

Page 39: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3.2 Aplicacoes de Lousa Digital 36

Controle de Robos por Smartphones

Krofitsch et al. (2013) introduzem no trabalho o uso de um smatrphone como controle de

um robo movel para ser utilizado na educacao e pesquisa. O foco do trabalho e dispor

uma plataforma de robo de baixo custo, com usabilidade e que ofereca alta flexibilidade

para aplicacoes variadas. O projeto e focado em modulos para hardware e para software

e o foco e a usablidade.

Segundo Krofitsch et al. (2013), nao foram realizados testes com metodos ci-

entıficos, porem, o feedback recebido por usuarios em pequenas demonstracoes foi um

indicador para que a interface utilizada ate entao, simplifica o trabalho com robos e

smartphones. Facilitar o modo com que robos sao controlados, melhora o ensino das dis-

ciplinas que os utilizam. O smartphone e um dispositivo movel bastante familiar para a

maioria das pessoas, o que facilita sua aprendizagem.

O trabalho de Krofitsch et al. (2013) mostra que e possıvel utilizar um celular

para controlar outros dispositivos, inclusive robos. Quando o desenvolvedor realiza as duas

aplicacoes (controle e aplicativo que e controlado), a flexibilidade do projeto aumenta e

assim e possıvel que outras extensoes sejam adicionadas. Um dos objetivos deste trabalho

de conclusao de curso e aprimorar a usablidade dos dispositivos envolvidos.

3.2 Aplicacoes de Lousa Digital

Tecnologias de Visao Computacional para Colaboracao Remota

O trabalho de Zhang (2005) consiste em uma proposta de um sistema de lousa-camera

e lousa-camera-projetor para colaboracao remota. Os dois sistemas propostos tem em

comum a finalidade de ser facil e pratico obter anotacoes de uma lousa em meio digital.

O sistema de lousa-camera-projetor adiciona um projetor ao sistema para que os usuarios

possam utilizar lousas em ambientes diferentes como se fosse uma so lousa, ou seja, o

conteudo capturado e projetado na lousa.

Para realizar estes sistemas, algumas tecnologias foram desenvolvidas. O es-

caneamento da lousa consiste em retirar o conteudo da lousa para que os usuarios nao

precisem faze-lo. Lousa em tempo real permite que os usuarios compartilhem suas ideias

em diferentes ambientes, utilizando este sistema em paralelo com sistemas de telecon-

Page 40: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3.2 Aplicacoes de Lousa Digital 37

ferencias. Uma ultima tecnologia, que grava a lousa com seu conteudo e audio, proporci-

ona aos usuarios rever o que foi escrito e falado durante reuniao, por exemplo.

Ha um problema com o sistema de lousa-camera-projetor. Define-se como

eco visual e consiste em o algoritmo confundir-se com o conteudo projetado. Com uma

calibracao geometrica e de cor, e possıvel contornar tal problema. Esta solucao tambem

pode ser utilizada para identificar a posicao de, por exemplo, uma caneta na lousa e assim

mover o cursor do mouse na tela.

O sistema de Zhang (2005) tem uma semelhanca com a solucao proposta por

este trabalho. O problema de eco visual pode ser identificado neste trabalho. Tambem

propoe-se identificar a interacao do usuario com base em imagens que ja possuem conteudos

projetados. Como Zhang (2005), pode ser possıvel utilizar esta solucao para contornar o

problema.

Integracao para Apresentacoes Digitais

O projeto de sala de aula virtualizada de Li et al. (2006) consiste em um ambiente que

automatiza a obtencao de dados, integracao inteligente de mıdia e interface de usuario

flexıvel. Como exemplo de integracao inteligente de mıdia, foi utilizada uma apresentacao

de slides em que o usuario pode inserir novo conteudo e o mesmo e gravado em um

formato, onde as duas fontes de informacoes (slides e novo conteudo) estao expostas.

Para integrar a apresentacao de slides com um projetor e uma lousa, foi utili-

zado o dispositivo Mimio citado no capıtulo 1, junto a uma camera. O sistema combina

as tres fontes de informacao (vıdeo da camera, saıda do Mimio e apresentacao de slides),

extraindo as informacoes mınimas necessarias para salvar a nova apresentacao.

O trabalho de Li et al. (2006) permite que outras aplicacoes, que tambem

utilizem dados de diferentes fontes de captura, extraiam a informacao necessaria para

combinar em uma so saıda.

A relacao dessa pesquisa com este trabalho de conclusao de curso e uma

possıvel proposta de integracao da lousa com apresentacoes de slides, para auxiliar pro-

fessores em suas aulas.

Page 41: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3.2 Aplicacoes de Lousa Digital 38

Um Quadro Interativo: Comparacao de Algoritmos de Visao Para Deteccao

de Interacoes

A proposta do sistema de Soares et al. (2013) e realizada em duas etapas. Na primeira, e

feita a definicao do sistema de lousa interativa. Este sistema corresponde a computador

comum, uma camera, um projetor e um dispositivo de emissao de luz infravermelha. Estes

componentes combinados sao necessarios para capturar imagens da posicao em que um

usuario pretende interagir com a lousa. Para isso, a camera captura as imagens com um

filtro que so deixa passar luz infravermelha.

Com a primeira etapa concluıda, Soares et al. (2013) definem os algoritmos

para detectar a interacao do usuario, a partir das imagens capturadas pela camera. Fo-

ram desenvolvidos e testados cinco algoritmos a fim de identificar a posicao (x, y), que se

refere a posicao em que o usuario deseja realizar uma interacao. Os algoritmos basica-

mente varrem as imagens capturadas pela a camera, identificando os pontos de interesse.

Para medir o desempenho dos algoritmos, foram utlizados vıdeos que possuem interacoes

comuns entre uma lousa, camera e dispositivo que emite luz infravermelha.

A pesquisa concluiu que a eficiencia dos algoritmos desenvolvidos depende do

ambiente no qual se encontram as avaliacoes, ou seja, nao e possıvel determinar qual

algoritmo e o melhor para qualquer tipo de interacao entre um usuario e a lousa. Os

autores definem que os proximos passos do projeto e melhorar a plataforma desenvolvida,

podendo haver alteracoes nos pontos de interesse do trabalho.

A proposta desta monografia se aproxima mais do trabalho de Soares et al.

(2013) em relacao aos demais. Pode-se perceber que o algoritmo que detecta a interacao

do usuario com a lousa e essencial e o mesmo deve funcionar para todos os principais

casos. Nesta monografia, o algoritmo proposto utiliza a cor do objeto (tambem podendo

ser infravermelha) para identificar a posicao (x, y) que o usuario deseja interagir. Com

isso, a area de interesse varrida nas imagens diminui conforme a quantidade de objetos

com as mesmas cores do objeto em questao. O trabalho de Soares et al. (2013) aponta

qual algoritmo utilizar, caso encontre o mesmo problema.

Page 42: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

3.3 Consideracoes do Capıtulo 39

3.3 Consideracoes do Capıtulo

A partir dos trabalhos relacionados, e possıvel identificar que o sistema proposto combina

partes das solucoes existentes. Os primeiros trabalhos identificam o uso de um smartphone

como controlador de, por exemplo, jogos. Para esta proposta de lousa, e possıvel utiliza-lo

como um controle de modo similar aos apresentados. De acordo com o primeiro trabalho

da secao 3.1 “Caracterısticas dinamicas de movimentos”, e possıvel utilizar os sensores do

smartphone para identificar movimentos e mapea-los para comandos.

Os trabalhos referentes as lousas apresentam opcoes que podem ser aproveita-

das no sistema proposto por este trabalho de conclusao de curso. Estes trabalhos apresen-

tados, em sua maioria, nao se interrelacionam, razao pela qual nao foi apresentada uma

tabela comparativa. Observam-se poucos pontos em comum entre eles, contudo e possıvel

relaciona-los com esta monografia.

Page 43: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

40

4 Lousa Digital Interativa

Como discutido no Capıtulo 3, este trabalho combina o algoritmo de deteccao de interacao

e uma aplicacao de lousa digital com o controle em um dispositivo movel. Com isso, as

proximas secoes definem o algoritmo de deteccao e projeto e desenvolvimento da lousa di-

gital com controle em dispositivo movel. Por fim um estudo de caso foi realizado com cinco

professores pesquisadores da area grafica do Departamento de Ciencia da Computacao da

Universidade do Estado de Santa Catarina.

4.1 O algoritmo de visao computacional

A Figura 4.1 demostra os passos do algoritmo desenvolvido. A sequencia de imagens

capturada pela camera esta no modelo de cores RGB (Imagem RGB, na Figura 4.1).

Figura 4.1: Diagrama do algoritmo desenvolvido.

Fonte: Producao do autor.

Conforme discutido no Capıtulo 2, este modelo de representacao do espaco de

cores representa a imagem em tres componentes. Para isolar um intervalo de cor e preciso

variar todas as tres componentes do modelo, dificultando o processo de segmentacao.

Com isso, uma das etapas do algoritmo e a transformacao para um modelo que facilite

a escolha de uma faixa de cor. O modelo escolhido (HSV) representa uma imagem com

tambem tres componentes, porem cada representa uma caracterıstica diferente. O H

representa a matiz ou a cor, o S o nıvel de saturacao dessa cor (claro ou cor pura) e o

V a quantidade de luminosidade da cor, isto facilita a escolha de um intervalo de cor

Page 44: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.1 O algoritmo de visao computacional 41

que garanta a segmentacao da imagem. A Figura 4.2 demonstra essa etapa do algoritmo.

Foi utilizado auxılio da biblioteca OpenCV para a transformacao de perspectiva (funcao

getPerspectiveTransform e selecao do intervalo de cor (funcao inRange).

Figura 4.2: (a): imagem do objeto identificado, (b): mascara construida pelo algoritmo.

(a)

(b)

Fonte: Producao do autor.

A fim de facilitar a captura de movimentos, o algoritmo permite que as imagens

estejam dispostas em uma perspectiva diferente em relacao a lousa, conforme a Figura

4.3. Para corrigir a posicao capturada, e realizada a transformacao da perspectiva das

imagens para a perspectiva de uma vista frontal, conforme a equacao 2.8. Este passo

pode ocorrer em qualquer etapa do algoritmo, porem, ao ser realizado em um primeiro

momento, contribui para reduzir a area que a deteccao por cor deve ocorrer. Para remover

ruidos que causam falsos positivos, sao utilizados as tecnicas de abertura e fechamento

discutidas no Capıtulo 2. O proximo passo e segmentar a imagem resultante levando

em consideracao um intervalo de valores HSV escolhidos pelo usuario. Para realizar a

segmentacao cada componente da imagem em HSV (H, S e V) e separado. Para cada

Page 45: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.2 Projeto e Desenvolvimento 42

pixel da imagem e testado se ele pertence ao intervalo, se sim ele continua na imagem. Esse

processo resulta em uma imagem segmentada por cor. Apos a segmentacao, o algoritmo

identifica a area em que o marcador esta posicionado procurando por uma area da cor do

marcador escolhido. O retorno para a etapa final do algoritmo deve ser um ponto (x, y)

se foi encontrado objeto ou nulo para nada encontrado.

Figura 4.3: (a): imagem capturada pela camera, (b): imagem com a tranformacao de

perspectiva.

(a)

(b)

Fonte: Producao do autor.

4.2 Projeto e Desenvolvimento

Antes de desenvolver a aplicacao foram levantados requisitos para o software. Eles abran-

gem tanto o controle como tambem a lousa digital que deve utilizar um computador para

sua execucao. A analise de requisitos foca na facilidade de uso do sistema pelo usuario.

Page 46: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.2 Projeto e Desenvolvimento 43

Para isto, os requisitos a seguir foram definidos:

• Auxiliar os usuarios na apresentacao de slides;

• Permitir adicionar conteudo novo em sua apresentacao;

• Permitir a troca de funcionalidades rapidamente;

• Permitir a troca de slides;

• Permitir escrever e apagar virtualmente;

• Permitir trocar cores e tamanhos do marcador.

Esses requisitos definem o que o programa deve realizar. A partir dos requisitos

foram definidas as funcionalidades para serem desenvolvidas. A linguagem escolhida para

desenvolver todo o projeto foi Python, por facilitar o desenvolvimento rapido do codigo e

possuir bibliotecas para trabalhar com imagens, aplicacoes e aplicativos para smartphones

Android. Dentre as bibliotecas utilizadas, destacam-se: PyQt41, interface em Python para

Qt4, um framework de aplicacoes multiplataforma desenvolvido em C++. Essa biblioteca

foi utilizada para desenvolver a aplicacao lousa digital; Kivy2, um framework multipla-

taforma para o desenvolvimento de interfaces naturais desenvolvido em Python. Oferece

acesso a uma grande parte das biblotecas nativas do Android por meio de interfaces e foi

utilizada para implementar o controle no smartphone. Uma das bibliotecas acessadas por

esse trabalho atraves do Kivy foi a de bluetooth nativa do Android; OpenCV3, biblioteca

para processamento de imagens desenvolvida em C++ com interface para Python. Utili-

zado para simplificar a implementacao do algoritmo definido na Secao 4.1. Os frameworks

PyQt4 e Kivy possuem a mesma finalidade, no entanto, foi decidido implementar parte

do sistema com PyQt4 devido a facilidade em desenvolver aplicacoes com o framework e

a compatibilidade com outras bibliotecas conhecidas, como a bibloteca chamada Poppler

para renderizar PDF (utilizado pela aplicacao de lousa digital para exibir a apresentacao

carregada).

A Figura 4.4 representa a arquitetura do projeto da lousa digital. A lousa

digital foi dividida em dois modulos: um responsavel pela aplicacao de lousa digital e

1http://www.riverbankcomputing.co.uk/software/pyqt/intro2http://kivy.org/3http://opencv.org/

Page 47: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.2 Projeto e Desenvolvimento 44

Figura 4.4: Estrutura do projeto da lousa digital.

Fonte: Producao do autor.

outro responsavel pelo algoritmo de visao computacional. Internamente esses modulos

foram divididos em classes para facilitar a comunicacao interna. A comunicacao entre

esses dois modulos e realizada a partir do cursor do mouse. A aplicacao de lousa permite

interacoes com o cursor do mouse e a classe responsavel pelo algoritmo tem a capacidade

de mover o mesmo. Essa decisao simplificou a implementacao do trabalho, visto que

existem varias maneiras de fazer uma aplicacao mover o mouse. A aplicacao de lousa

digital identifica eventos do mouse de uma forma nativa, ou seja, o framework escolhido

permite interacoes com a aplicacao com o mouse.

O modulo da aplicacao lousa e composto por tres classes: classe Lousa, res-

ponsavel pelo controle de apresentacoes de slides. Apos carregar uma apresentacao em

PDF e possıvel visualizar e avancar ou retroceder as paginas do arquivo; classe Scribble-

Area, responsavel pela area que pode ser escrita do programa. Esta area e a lousa digital

propriamente dita. Nela e possıvel escrever com cores e tamanhos diferentes, alem de

apagar seu conteudo; Server, responsavel pelo recebimento de comandos do aplicativo de

celular. Os comandos recebidos do aplicativo do celular sao repassados para a classe Lousa

que possui um metodo unico para tratamento de comandos. A Figura 4.5 demonstra o

uso de duas cores para sublinhar textos na apresentacao de slides.

O modulo responsavel pelo algoritmo foi denominado Detector. Alem de conter

o algoritmo, esta classe permite que o usuario calibre a camera e visualize as etapas

Page 48: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.2 Projeto e Desenvolvimento 45

Figura 4.5: Exemplo de uso da lousa, textos sublinhados.

Fonte: Producao do autor.

realizadas pelo algoritmo. Quando o algoritmo detecta o marcador na posicao (x, y),

esta classe fica responsavel por mover o cursor do mouse para a posicao relativa da tela

da lousa. Esta classe foi dividida em mais duas classes: ImageArea, responsavel pela

calibracao do algoritmo (perspectiva e cor do marcador); ColorPicker, responsavel pela

calibracao da faixa de cor HSV tambem para o algoritmo de deteccao.

Uma das dificuldades encontradas na decisao de utilizar o mouse como interface

para os dois modulos foi que existem tres resolucoes no projeto: resolucao das imagens

da camera, resolucao do monitor ou projetor e resolucao da imagem de anotacoes. A

resolucao da imagem de anotacoes foi definida com a mesma resolucao da apresentacao

de slides. Para resolver esta questao o metodo utilizado foi normalizar entre 0 e 1 os

pontos de interesse dessas resolucoes. Quando o marcador e identificado pelo algoritmo,

e retornado o ponto normalizado. Com isso o mouse pode ser movido na tela em uma

posicao relativa. Com o framework PyQt captura a posicao (x, y) da janela do aplicativo.

Para a escrita, que e realizada na janela do aplicativo, se posicionar corretamente na

imagem de anotacoes, e preciso transformar da posicao da janela do aplicativo para a

posicao relativa da imagem de anotacoes. Esses passos sao essenciais para o funcionamento

de toda a aplicacao.

A Figura 4.6 exibe uma foto do aplicativo de controle. Para o desenvolvimento

do controle foi projetado um modulo contendo uma classe responsavel pelo aplicativo e

suas funcoes. O aplicativo esta dividido em uma serie de componentes, dentre eles: menu

lateral, botoes, botoes alternaveis (ligar e desligar), selecionador de cor e selecionador de

tamanho.

Page 49: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.2 Projeto e Desenvolvimento 46

Figura 4.6: Estrutura do controle

Fonte: Producao do autor.

Todos esses componentes enviam uma mensagem utilizando o bluetooth do

aparelho. Para este trabalho a implementacao das mensagens foi feita em modo texto,

porem, futuramente pode-se enviar codigos em bytes para diminuir o trafego de dados.

Tabela 4.1: Tabela das mensagens enviada pelo controle

Comando Mensagem Tipo Valor Mınimo Valor Maximo

Avancar advance - - -

Voltar back - - -

Cor color: R, G, B, A Inteiro 0 1

Tamanho da Caneta tam: X Inteiro 1 100

Ativar Caneta pen: X String normal down

Ativar Borracha erase: X String normal down

O servidor no modulo Lousa recebe qualquer mensagem enviada, no entanto,

apenas mensagens que contenham palavras da coluna Mensagem da Tabela 4.1 sao reco-

nhecidas. A mensagem “advance” tem como objetivo avancar em um slide a apresentacao,

para voltar a mensagem enviada e “back”. A mensagem “color” tem como parametro qua-

Page 50: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.3 Estudo de caso 47

tro inteiros, entre 0 e 1, que equivalem a uma cor RGB com o canal alfa. O botao “caneta”

e “Borracha” ativam ou desativam essas funcionalidades no aplicativo da lousa.

4.3 Estudo de caso

Para validar o prototipo desenvolvido foi realizado um estudo de caso com cinco Pro-

fessores (presquisadores da area grafica do Departamento de Ciencia da Computacao da

Universidade do Estado de Santa Catarina). Os passos seguidos para o estudo de caso

foram:

• Termo de consentimento livre e esclarecido (TCLE);

• Realizar as tarefas do protoloco;

• Entrevista;

Para inıcio do estudo de caso foi formulado o Termo de Consentimento Livre

e Esclarecido a fim de explicitar aos participantes quais seus direitos e tambem a im-

portancia do estudo. Tambem foi desenvolvido um metodo de testes e o questionario a

ser aplicado na etapa de entrevista, que acontece depois dos participantes realizarem as

tarefas, definidas no protocolo de testes. O estudo de caso foi validado com dois professo-

res que realizaram o teste piloto no dia 29 de maio de 2015. Neste teste foram identificados

alguns pontos que deveriam ser alterados no estudo de caso. Apos as adequacoes, foram

realizados os testes com os Professores.

O estudo de caso utilizou-se de uma entrevista semi-estruturada, realizada no

final do teste para obter informacoes referente ao conceito de lousa digital e como ele esta

sendo tratado por este trabalho. Segundo Preece, com uma entrevista semi-estruturada

o entrevistador possui mais liberdade, porem com metas pre-definidas. As respostas sao

abertas, com isso a entrevista se torna personalizada para cada entrevistado. O teste teve

tempo de duracao previsto de 30 minutos.

O protocolo tem tres atividades, sendo que duas delas foi o usuario quem re-

alizou e uma ele precisou apenas visualizar. A primeira atividade do estudo de caso foi

composta por duas tarefas e teve como objetivo validar a conexao entre o controle da

Page 51: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.3 Estudo de caso 48

lousa no smartphone e a aplicacao no computador. O usuario deveria carregar uma apre-

sentacao de slides e conectar os dois aplicativos utilizando-se da interface do computador

e dispositivo movel.

A segunda atividade foi composta por sete tarefas e teve como objetivo validar

a aplicacao de lousa digital no computador. Esta tarefa foi projetada com uma particu-

laridade: o usuario utilizava a caneta da lousa pelo cursor do mouse. Dentre as tarefas

estavam: avancar e retroceder os slides, trocar a cor e tamanho da caneta e escrever e

apagar da lousa.

A ultima atividade foi composta de apenas duas tarefas que consistiram na

visualizacao das tarefas realizadas pelo facilitador. Essa atividade teve como objetivo

demonstrar para o usuario que o intuito do trabalho e utilizar o algoritmo de identificacao

para controlar a lousa e nao o mouse, como foi usado no teste anterior. A primeira parte foi

calibrar a camera, que realiza a transformacao de perspectiva. A segunda tarefa consistia

em visualizar o algoritmo em execucao, que estava identificando a cor verde.

A entrevista semi-estruturada possuia tres perguntas abertas que eram reali-

zadas no final do teste. A primeira pergunta teve como motivacao saber mais sobre como

o controle desenvolvido estava se comportando. A segunda pergunta teve como objetivo

obter informacoes sobre a lousa digital desenvolvida. Ja a terceira dava liberdade ao par-

ticipante perguntar sobre o prototipo ou realizar algum comentario. As perguntas estao

na Tabela 4.2

Tabela 4.2: Tabela com as perguntas do estudo de caso.

1) O controle das funcionalidades da lousa no smartphone, realiza o que se espera de um controle?

Quais eram suas expectativas? Voce sentiu falta de alguma coisa?

2) A lousa possui funcionalidades que se espera de uma lousa? O que voce esperava de uma lousa?

3) Algum comentario ou duvida sobre o prototipo?

Com o estudo de caso foi possıvel reunir informacoes sobre o trabalho. A

Tabela 4.3 possui as informacoes individuais de cada participante.

Os testes com os participantes foram semelhantes, com excecao do tempo de

teste do participante 5. As tarefas foram realizadas dentro do tempo previsto. De um

modo geral os participantes esperavam mais funcionalidades de uma lousa digital, porem,

de acordo com o participante numero 2 o projeto possui as funcoes basicas de uma lousa.

Page 52: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

4.4 Consideracoes do Capıtulo 49

Tabela 4.3: Tabela com o tempo e respostas dos participantes do estudo de caso.Participante Tempo em minutos Respostas

1 12

1) -

2)Nao como uma lousa comum. Espero mais funcionalidades que uma lousa comum

3)Incluir outras funcionalidades, por exemplo, OCR

2 15

1) Mais funcionalidades no controle, por exemplo sair da apresentacao e ativar um vıdeo

2) -

3) -

3 13

1) O controle realiza as funcoes basicas para o controle de uma lousa

2)Contem as funcoes basicas de lousa

3) Projeto promissor a princıpio, pode surgir mais duvidas com o uso. Parece ser difıcil de escrever sem superfıcie de apoio.

4 15

1) Sim, porem algumas funcionalidades nao estao claras

2) Sim, deveria funcionar sem utilizacao do mouse

3) Utilizar o celular para mover a caneta e borracha com auxılio do acelerometro, por exemplo.

5 21

1) Sim

2) Nao, deveria guardar as anotacoes

3)Sincronizacao entre marcador e tela. Nao percebi benefıcio em reposicionar a camera.

Com as repostas dos participantes e possıvel compreender que o trabalho esta

em uma fase bastante inicial. Os participantes esperam funcoes avancadas de uma lousa

digital. Segundo o participante 3 o projeto e promissor, porem ele precisaria de mais uso

para comentar mais sobre ele. Durante a execucao do estudo de caso pode-se perceber

algumas dificuldades gerais dos participantes, como por exemplo a falta de mensagens de

feedback quando o controle se conecta na aplicacao lousa. O trabalho deve ser melhorado

nesse ponto, levando em consideracao as sugestoes dos participantes.

4.4 Consideracoes do Capıtulo

Neste capıtulo foi discutido o algoritmo de deteccao e o projeto e desenvolvimento do

prototipo. Tambem foi demonstrado um estudo de caso que identificou que o trabalho

esta em um desenvolvimento inicial pois possui a maioria das funcionalidades basicas

de uma lousa digital. Outras informacoes tambem foram obtidas no estudo de caso e

poderao ser realizadas em trabalhos futuros, como por exemplo, novas funcionalidades

citadas pelos participantes do estudo de caso.

O codigo fonte do trabalho esta diponıvel em: https://github.com/Tarliton/tcclousa.

Page 53: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

50

5 Conclusao

A partir deste trabalho foi identificado o papel das lousas na explicacao de ideias. Lou-

sas digitais possuem mais vantagens em relacao a lousas comuns. Atualmente, as lousas

digitais possuem limitacoes em relacao a mobilidade e interacao. Com o uso de tecnicas

de visao computacional, foi utilizada uma camera para identificar a posicao de um mar-

cador. Com isso, a lousa digital passa a ser baseada em imagens, diminuindo seu custo e

tamanho. Como levantado por um participante do estudo de caso, existe a possibilidade

de a sincronizacao entre as imagens da camera e a interacao do usuario necessitarem de

uma suavizacao pois pode haver ruıdos, porem para os casos testados foi possıvel utilizar

a camera para identificar um marcador.

De acordo com os trabalhos relacionados, ha grande leque de possibilidades de

interacao entre lousa e smartphone. Neste trabalho, foi utilizado um dispositivo movel

controlar a lousa atraves de mensagens sendo enviadas por bluetooth. Isso trouxe o

controle da lousa mais proximo ao usuario.

Ao decorrer deste trabalho foi encontrado algumas dificuldades na etapa do

algoritmo de identificacao, uma delas e que o algoritmo desenvolvido possui uma sensibi-

lidade para mudanca de iluminacao do ambiente. Quando o ambiente sofre uma mudanca

de iluminacao pode ser necessario recalibrar o sistema.

Com o estudo dos trabalhos relacionados foi possıvel entender os tipos de lousas

existentes. A lousa desenvolvida neste trabalho possui algumas caracterısticas das lousas

existentes, por exemplo, utilizar a visao computacional. Alguns trabalhos relacionados

identificam a possibilidade de utilizar um dispositivo movel como controle, este trabalho

utiliza esta ideia para controlar uma lousa digital. O controle desenvolvido, de acordo

com o estudo de caso, possui funcionalidades basicas esperadas de um controle de lousa.

Para trabalhos futuros sugere-se que o algoritmo de identificacao seja aprimo-

rado em para identificar a interacao em ambientes com variacao de iluminacao. Outros

trabalhos futuros podem explorar a adicao de funcionalidades que uma lousa comum nao

possui, como por exemplo, a identificacao das letras escritas. O estudo de caso tambem

identificou possibilidades de melhorias na interface dos componentes do trabalho, como

Page 54: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

5 Conclusao 51

por exemplo, o envio de feedback pelo dispositivo movel quando o usuario realiza alguma

acao.

Page 55: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

Referencias

AMARAL, J. A. C. d. O smartphone e sua dinamica de uso na atualidade como ferramenta

de comunicacao. 2013. Disponıvel em: <http://bdm.unb.br/handle/10483/5619>.

ANTON, H.; BUSBY, R. C. Contemporary linear algebra. [S.l.]: Wiley New York, 2003.

BARBOSA, S. D. J.; SILVA, B. S. d. Interacao Humano-Computador. 1. ed. Sao Paulo,

SP: Elsevier, 2010.

BRADSKI, G. The opencv library. Dr. Dobb’s Journal of Software Tools, 2000.

BRYS, L. M. Pagina dinamica para aprendizado do sensoriamento remoto. 2008. Dis-

ponıvel em: <http://www.ufrgs.br/srm/ppgsr/publicacoes/Dissert LeonardoBrys.pdf>.

CHERY, Y. Bringing the common whiteboard into the digital age. IEEE MultiMedia,

IEEE Computer Society Press, Los Alamitos, CA, USA, v. 7, n. 2, p. 90–92, abr. 2000.

ISSN 1070-986X. Disponıvel em: <http://dx.doi.org/10.1109/93.848438>.

ENVI - Guia do ENVI em Portugues. Sulsoft, 2000. Disponıvel em:

<http://www.sulsoft.com.br>.

GONZALEZ, R. C.; WOODS, R. E. Processamento Digital de Imagens. 3. ed. Sao Paulo,

SP: Pearson, 2010.

JOSELLI, M. et al. An architecture for game interaction using mobile. In: Games

Innovation Conference (IGIC), 2012 IEEE International. [S.l.: s.n.], 2012. p. 1–5. ISSN

2166-6741.

KROFITSCH, C. et al. Smartphone driven control of robots for education and research.

In: Robotics, Biomimetics, and Intelligent Computational Systems (ROBIONETICS),

2013 IEEE International Conference on. [S.l.: s.n.], 2013. p. 148–154.

KUNZ, A.; NESCHER, T.; KUCHLER, M. Collaboard: A novel interactive electronic

whiteboard for remote collaboration with people on content. In: Cyberworlds (CW),

2010 International Conference on. [S.l.: s.n.], 2010. p. 430–437.

Page 56: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

REFERENCIAS 53

LI, W. et al. Classroom multimedia integration for advanced e-presentations. In:

Multimedia and Expo, 2006 IEEE International Conference on. [S.l.: s.n.], 2006. p.

1297–1300.

NIELSEN, J. Usability Engineering. San Francisco, CA, USA: Morgan Kaufmann

Publishers Inc., 1993. ISBN 0125184050.

OLIVEIRA, D.; LINS, R. Generalizing tableau to any color of teaching boards. In:

Pattern Recognition (ICPR), 2010 20th International Conference on. [S.l.: s.n.], 2010. p.

2411–2414. ISSN 1051-4651.

PEDRINI, H.; SCHWARTZ, W. R. Analise de Imagens Digitais: princıpios, algoritmos

e aplicacoes. 1. ed. Sao Paulo, SP: Thomson, 2008.

ROGERS, Y.; SHARP, H.; PREECE, J. Design de Interacao: Alem da interacao

Humano-Computador. 3. ed. Porto Alegre, RS: Bookman, 2013.

SOARES, C. et al. Locoboard: Low-cost interactive whiteboard using

computer vision algorithms. IEEE MultiMedia, 2013. Disponıvel em:

<http://dx.doi.org/10.1155/2013/252406>.

SOLEM, J. E. Programming Computer Vision with Python: Tools and algorithms for

analyzing images. [S.l.]: Oreilly Media, 2012.

SOUTO, R. P. Segmentacao de imagem multiespectral utilizando-se o atributo

matiz. UFRGS, 2000. Disponıvel em: <http://www.obt.inpe.br/pgsere/Souto-R-P-

2000/publicacao.pdf>.

TUNG, N. H.; LEU, J.-S. Design and implementation of game controller on smartphone.

In: Consumer Electronics (ICCE), 2012 IEEE International Conference on. [S.l.: s.n.],

2012. p. 684–685. ISSN 2158-3994.

YUN, H.-K.; SONG, B.-H. Dynamic characteristic analysis of users’ motions for human

smartphone interface. In: Computing and Networking Technology (ICCNT), 2012 8th

International Conference on. [S.l.: s.n.], 2012. p. 395–398.

ZHANG, Z. Computer vision technologies for remote collaboration using physical

whiteboards, projectors and cameras. In: Computer Vision for Interactive and Intelligent

Environment, 2005. [S.l.: s.n.], 2005. p. 109–122.

Page 57: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

54

A Termo de Consentimento Livre e

Esclarecido

Page 58: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

55

B Procedimentos do estudo de caso

Procedimentos para a avaliacao do Trabalho de Conclusao de Curso: Lousa Digital Inte-

rativa por meio de Visao Computacional

A participacao neste estudo envolvera tres atividades, sendo realizadas na

sequencia. Estes procedimentos levarao em torno de 30 minutos. Vale ressaltar que

este estudo avalia o sistema de lousa digital, nosso foco esta em verificar se o sistema

funciona e e usavel pelo participante. 1a ATIVIDADE: Aplicativo de conexao bluetooth

Esta atividade e composta por 2 tarefas, e tem como objetivo de configurar o sistema:

1.Carregue uma apresentacao no computador;

2.Conecte o smartphone com o programa do computador. Essa funcao esta no menu

do aplicativo e pode ser acessada de duas formas: o menu do smartphone revela a

funcionalidade oculta ou arrastando o dedo da esquerda para a direita na extremi-

dade esquerda.

2a ATIVIDADE: Avaliar o sistema de anotacoes de lousa digital e o aplicativo

para smartphone Esta atividade e composta por 7 tarefas, e tem como objetivo validar o

sistema de anotacoes e seu controle (aplicativo) no smartphone e consiste em:

1.Ative a caneta clicando no botao “Ativar Caneta” do smartphone;

2.No computador, com o mouse, sublinhe o texto “primeiro”;

3.Avance para o slide numero 5 com o botao “Avancar Slide” do smartphone;

4.Troque o tamanho da caneta para o maximo;

5.Troque a cor para um tom de azul;

6.Pinte todo o slide com o mouse;

7.Com a borracha selecionada, apague uma metade do slide;

8.Volte para o slide numero 3.

Page 59: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

B Procedimentos do estudo de caso 56

3a ATIVIDADE: Esta atividade tem como objetivo validar o conceito de lousa

digital com o participante, testando o algoritmo de identificacao. Para isso o participante

ira visualizar a acao de duas tarefas realizadas pelo facilitador (avise quando chegar nesta

etapa):

1.Calibrar o sistema de camera.

2.Visualizar o marcador identificado pelo algoritmo.

Apos estas tres atividades, a entrevista sera realizada.

Page 60: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

57

C Exemplo de uso

Figura C.1: Visao da camera: projetor ou monitor em perspectiva.

Figura C.2: Imagem com a perspectiva corrigida.

Page 61: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

C Exemplo de uso 58

Figura C.3: Apresentacao exemplo carregada.

Figura C.4: Controle da lousa.

Page 62: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

C Exemplo de uso 59

Figura C.5: (a) Captura de tela do aplicativo. (b) Imagem da camera do aplicativo.

(a)

(b)

Page 63: Lousa Digital Interativa Por Meio De Vis~ao …sistemabu.udesc.br/pergamumweb/vinculos/000004/00000493.pdfLOUSA DIGITAL INTERATIVA POR MEIO DE VISAO~ COMPUTACIONAL - UM ESTUDO INICIAL

C Exemplo de uso 60

Figura C.6: Anotacoes em outra cor.