30
Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére [email protected]

Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére [email protected]

Embed Size (px)

Citation preview

Page 1: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002)

Aluno: Eduardo Barrére

[email protected]

Page 2: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

Roteiro

Motivação

Interface com o usuário

Reconhecimento de esboços

Aplicações

Conclusão

Page 3: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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

Page 4: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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 ....

Esboço Projeto “Pronto”

P R O B L E M A

P R O P O S T A

Esboço Projeto “Pronto”geração “automática”

Page 5: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

User Interface

Page 6: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

User Interface - Características

VisibilidadeMaus 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 interfaceBom Exemplo: Controles deslizantes Mau Exemplo: Figuras que se transformam em botões

Page 7: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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 programaExemplo: Controles de rolagem de tela (setas e guias)

Feedbackbarra de progresso x ampulheta

Page 8: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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 contextoExemplo: botões desativados

Tolerância a ErrosUsuários são humanos, portanto erramAçõ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

Page 9: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

User InterfaceReconhecer 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

Page 10: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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

Page 11: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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.

Page 12: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Elementos e Comandos

Page 13: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Etapas

Obtenção dos

Pontos

Cálculo de Características

TrataGestos

Identificador

Aplicação Reconhecedor

Esboço

Lista deGestos

Page 14: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Primeira Etapa

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)

Obtençãodos

Pontos

Cálculo de Características

TrataGestos

Identificador

Aplicação Reconhecedor

Esboço

Lista deGestos

Page 15: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Segunda Etapa

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])

Obtençãodos

Pontos

Cálculo de Características

TrataGestos

Identificador

Aplicação Reconhecedor

Esboço

Lista deGestos

Page 16: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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

Page 17: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Terceira Etapa

Através manipulação das características obtidas do esboço, é feita a tentativa de identificar o objeto.

Obtençãodos

Pontos

Cálculo de Características

TrataGestos

Identificador

Aplicação Reconhecedor

Esboço

Lista deGestos

Page 18: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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”

Page 19: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

(Lógica Fuzzy - exemplo )

"quando podemos considerar uma pessoa ALTA ?""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:

0, se altura(x) < 1.50 m

alta(x) = (altura(x) - 1.50 m) / 0.2 m , se 1.50 m <= altura(x) <= 1.70 m

1, se altura(x) > 1.70 m

Page 20: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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:

1,50 1,70

0

1

0,5

1,60 altura(x)a

alta(x)

Page 21: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

( Lógica Fuzzy - exemplo )

Dada esta definição, podemos, exemplificar da seguinte forma:

Pessoa Altura(m) Grau Conclusão

Joaquim 1,45 0 não é alto

Carlos 1,56 0,3 alto com 0,3 de pertinência

Pedro 1,60 0,5 alto com 0,5 de pertinência

Maria 1,65 0,75 alta com 0,75 de pertinência

José 1,75 1 alto

Page 22: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Terceira Etapa

Relação Altura x Largura do retângulo envolvente

Page 23: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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.

Page 24: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Quarta Etapa

caso o elemento esboçado seja um Gesto, faz-se a operação correspondente na aplicação ( apagar, recortar, ... )

Obtençãodos

Pontos

Cálculo de Características

TrataGestos

Identificador

Aplicação Reconhecedor

Esboço

Lista deGestos

Page 25: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

CALI - Ambigüidade

Page 26: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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 Primeira Três

Gesto Escolha Primeiras

Individual 92% 93%

Grupos 93% 94%

Page 27: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) 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

Page 28: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

Interfaces Caligráficas (CPS751 – Bloco2/2002) Barrére

Aplicações

DEPARTAMENTO DE ARQUITETURA DA UNIVERSIDADE DE WASHINGTON

Page 29: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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.

Page 30: Interfaces Caligráficas (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

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) 835-849