Tarliton Basso de Godoy
Lousa Digital Interativa Por Meio De Visao Computacional -
Um Estudo Inicial
Joinville
2015
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
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
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
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
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
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
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
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
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
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
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
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
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.
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,
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
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.
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
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)
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
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.
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:
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)
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).
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).
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
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:
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)
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
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
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?
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:
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.
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.
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.
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
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
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.
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-
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.
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.
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.
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
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
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.
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/
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
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.
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-
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
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.
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.
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
5 Conclusao 51
por exemplo, o envio de feedback pelo dispositivo movel quando o usuario realiza alguma
acao.
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.
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.
54
A Termo de Consentimento Livre e
Esclarecido
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.
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.
57
C Exemplo de uso
Figura C.1: Visao da camera: projetor ou monitor em perspectiva.
Figura C.2: Imagem com a perspectiva corrigida.
C Exemplo de uso 58
Figura C.3: Apresentacao exemplo carregada.
Figura C.4: Controle da lousa.
C Exemplo de uso 59
Figura C.5: (a) Captura de tela do aplicativo. (b) Imagem da camera do aplicativo.
(a)
(b)
C Exemplo de uso 60
Figura C.6: Anotacoes em outra cor.