Interfaces Caligráficas
(Computação Gráfica 2 – Bloco2/2002)
Aluno: Eduardo Barrére
[email protected]
Roteiro
 Motivação
 Interface com o usuário
 Reconhecimento de esboços
 Aplicações
 Conclusão
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Motivação Pessoal
 Entender o processo de interpretação e
transformação de esboços em elementos
geométricos
 Artigo de referência:
 Sketching User Interfaces with Visual Patterns
Anabela Caetano, Neri Goulart, Manuel Fonseca, Joaquim Jorge;
SIACG 2002; Portugal-2002
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Motivação Autores
 Agilizar a criação e alteração de processos
artísticos, tais como projetos arquitetônicos,
interfaces de programas, sites ....
PR O B LE MA
Projeto “Pronto”
Esboço
PR O PO S TA
geração “automática”
Esboço
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Projeto “Pronto”
Barrére
User Interface
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
User Interface - Características
 Visibilidade
 Maus Exemplos: controle cuja cor se confunde com a cor
do fundo
 Disponibilidade
 Controles sugerem naturalmente seus usos, descrevendo
aquilo que o usuário pode fazer com os itens de interface
 Bom Exemplo: Controles deslizantes
 Mau Exemplo: Figuras que se transformam em botões
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
User Interface - Características
 Mapeamento
 Descreve o relacionamento entre a ação do usuário
sobre um controle e a reação correspondente do programa
 Exemplo: Controles de rolagem de tela (setas e guias)
 Feedback
 barra de progresso x ampulheta
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
User Interface - Características
 Limitação de Funções
 Impede que o usuário execute ações impróprias para um
determinado contexto
 Exemplo: botões desativados
 Tolerância a Erros
 Usuários são humanos, portanto erram
 Ações que podem ser reversíveis (exemplo, apagar
um arquivo) devem ser reversíveis
 Ações irreversíveis (exemplo: formatar um HD)
devem ser avisadas
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
User Interface
Reconhecer X Relembrar
 reconhecer é mais fácil do que recordar
 mais reconhecimento (menus e ícones), menos
recordação (comandos)
 a interface relembra as coisas para o usuário
 usuários experientes tem dificuldade em recordar
detalhes da interface, mas sabem como encontrar a
informação desejada
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Esboço
 por ser feito “a mão livre”, o esboço não segue
regras pré-definidas, ou seja, informações
importantes como formato do objeto, continuidade
do traço e quantidade de traços para representar
um objeto não são bem especificadas.
 fatores como dimensão e rotação do objeto
devem ser reconhecidos
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Algoritmo CALI
 reconhecer formas geométricas elementares e
comandos gestuais, independentemente da sua
rotação, tamanho ou número de traços que
constituem a forma.
 fazer a distinção entre formas Solid, Dashed ou
Bold, depois de identificar a forma base.
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Elementos e Comandos
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Etapas
Obtenção
dos
Pontos
Esboço
Trata
Gestos
Lista de
Gestos
Aplicação
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Cálculo de
Características
Identificador
Reconhecedor
Barrére
CALI - Primeira Etapa
Obtenção
dos
Pontos
Esboço
Trata
Gestos
Lista de
Gestos
Aplicação
Cálculo de
Características
Identificador
Reconhecedor
 o algoritmo se inicia com a obtenção de pontos
referentes ao esboço (utilizando uma tablete
digitalizadora) e o cálculo do polígono convexo
correspondente (usando o algoritmo de Graham)
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Segunda Etapa
Obtenção
dos
Pontos
Esboço
Trata
Gestos
Lista de
Gestos
Aplicação
Cálculo de
Características
Identificador
Reconhecedor
 este polígono é então utilizado para calcular três
polígonos especiais (os 2 primeiros são o triângulo e o
quadrilátero de maior área inscritos no polígono
convexo [Boyce 85] e o terceiro é o retângulo
envolvente de menor área [Freeman 75])
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Segunda Etapa
 calcula-se a área e o perímetro para cada polígono
encontrado, de modo a estimar características e graus
de pertinência para cada classe de formas
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Terceira Etapa
Obtenção
dos
Pontos
Esboço
Trata
Gestos
Lista de
Gestos
Aplicação
Cálculo de
Características
Identificador
Reconhecedor
 Através manipulação das características obtidas do
esboço, é feita a tentativa de identificar o objeto.
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
( Lógica Fuzzy )
 a Lógica Fuzzy é um superconjunto da Lógica
Convencional (Booleana), que foi estendida para
trabalhar com o conceito de parcialmente
verdadeiro: valores verdade que situam-se entre o
completamente verdadeiro e o completamente
falso
 pode ser considerada como uma metodologia para
generalizar QUALQUER teoria específica, de um
estado discreto (1 ou 0) a um estado contínuo
([0,1]), pelo processo de “difusão”
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
(Lógica Fuzzy - exemplo )
"quando podemos considerar uma pessoa ALTA ?"
ALTA é descrita como sendo uma variável lingüística, a
qual representa uma categoria cognitiva de ALTURA. Para
cada pessoa no universo de discurso, devemos atribuir um
grau de pertinência referente ao subconjunto fuzzy ALTO. O
modo mais fácil de resolver isso é determinar uma função de
pertinência baseada na altura das pessoas:
alta(x) =
0,
se altura(x) < 1.50 m
(altura(x) - 1.50 m) / 0.2 m , se 1.50 m <= altura(x) <= 1.70 m
1,
se altura(x) > 1.70 m
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
( Lógica Fuzzy - exemplo )
Significa que uma pessoa é considerada alta nos seguintes termos:
Se sua altura for menor que 1.50 m, a pessoa não é alta (alta= 0)
Se sua altura for um valor entre 1.50 m e 1.70 m, é alta com um
certo grau de pertinência (0<alta<1), ou seja, não é totalmente alta
Se sua altura for maior que 1.70 m, a pessoa é alta (alta=1)
Graficamente, podemos
representar da
seguinte forma:
alta(x)
1
0,5
0
1,50
Interfaces Caligráficas (CPS751 – Bloco2/2002)
1,60
1,70
altura(x)a
Barrére
( Lógica Fuzzy - exemplo )
Dada esta definição, podemos, exemplificar da seguinte
forma:
Pessoa Altura(m)
Joaquim
1,45
Carlos
1,56
Pedro
1,60
Maria
1,65
José
1,75
Grau
0
0,3
0,5
0,75
1
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Conclusão
não é alto
alto com 0,3 de pertinência
alto com 0,5 de pertinência
alta com 0,75 de pertinência
alto
Barrére
CALI - Terceira Etapa
Relação Altura x Largura do retângulo envolvente
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Terceira Etapa
Outras características consideradas:
 Pch: perímetro do polígono Convexo
 Plq: perímetro do retângulo inscrito
 Plt: perímetro do triângulo inscrito
 Per: perímetro do retângulo envolvente
 Ach: área do CH
 Alq: área do retângulo inscrito
 Ns: Número de traços
 etc.
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Quarta Etapa
Obtenção
dos
Pontos
Esboço
Trata
Gestos
Lista de
Gestos
Aplicação
Cálculo de
Características
Identificador
Reconhecedor
 caso o elemento esboçado seja um Gesto, faz-se
a operação correspondente na aplicação ( apagar,
recortar, ... )
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
CALI - Ambigüidade
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Avaliação Experimental
Foi solicitado a um grupo de usuários que
desenhassem cada forma repetidamente usando
linhas normais ou tracejadas.
Tipo
Gesto
Individual
Grupos
Primeira
Escolha
92%
93%
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Três
Primeiras
93%
94%
Barrére
Aplicações
INESC-ID, Instituto de Engenharia de Sistemas e
Computadores: Investigação e Desenvolvimento
(http://immi.inesc-id.pt/ )
 CALI
 Java Sketchit
 FRAG
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Aplicações
DEPARTAMENTO DE ARQUITETURA DA
UNIVERSIDADE DE WASHINGTON
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Conclusão
 a utilização de um bom conjunto difuso é essencial
para o sucesso destas interfaces
 os casos de ambigüidade são comuns e difíceis de
serem tratados automaticamente
 a implementação de uma interface mais natural e
intuitiva é um dos principais desafios dos projetos
de Interfaces Caligráficas.
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére
Bibliografia
 Sketching User Interfaces with Visual Patterns
Anabela Caetano, Neri Goulart, Manuel Fonseca, Joaquim Jorge;
SIACG 2002; Portugal-2002
 CALI : A Software Library for Calligraphic Interfaces
Manuel Fonseca and Joaquim Jorge;
IX Encontro Português de Computação Gráfica, Portugal-1999
 Drawing on the Back of an Envelope: a framework for interacting
with application programs by freehand drawing
Mark D. Gross, Ellen Yi-Luen Do; Computers & Graphics 24 (2000) 835849
Interfaces Caligráficas (CPS751 – Bloco2/2002)
Barrére