Entrada de Dados e Interacção (Cap 3)

(1)

1

Entrada de Dados e

Interacção (3)

Instituto Superior Técnico,

2006/2007

2

Sumário

Modelo de Entrada de Dados

Introdução ao Modelo de Acontecimentos Sistemas de Janelas

Acontecimentos associados a Janelas Encaminhamento de acontecimentos Comunicação entre widgets Entrada de Dados no OpenGL

3

Introdução

Antes das aplicações interactivas de

manipulação directa

Arquitecturas de interacção eram muito simples Programas sequenciais

Interpretadores linha de comandos (DOS, UNIX)

Programa controla e pede entradas

Utilizadores esperam pelo programa Utilizadores introduzem informação

4

Programas Sequenciais

Arquitectura

Loop (forever)

Programa lê linha de texto Programa analisa entrada Programa avalia o resultado Possivelmente gera saídas End (loop)

Problema: Como modelar múltiplas acções dos utilizadores?

Por exemplo editor gráfico?

5

Programas Sequenciais (cont.)

Geralmente conduz a muitos modos

muitas variáveis de estado

Exemplos de modos

Programas de pintura (linha, bucket-fill, rectângulo, etc) Modos de comando e edição do vi

Problemas com os modos ?

6

Programas Sequenciais (cont.)

Problemas com modos?

Demasiados modos confundem utilizadores Provocam erros (modo errado)

Como alternar entre modos?

Indicação clara sobre modo corrente

Precisamos de um modelo mais sofisticado para simplificar programação de Sistemas Interactivos

(2)

7

Modelo de Entrada de Dados

Unidades Lógicas de Entrada de Dados (Choice, Locator, etc.)

Modos de Entrada de Dados (a pedido (request), acontecimentos (event), etc.)

8

Unidades Lógicas

String (rato...)

Locator (teclado...)

Pick (teclado...)

Choice (widgets...)

Valuator (sliders...)

Stroke (Rubber banding)

9

Processos

Medida:

Qual a tecla premida? Gatilho (Trigger)

Quando a informação é disparada?

Para onde é enviada? Programa? Outro processo? Lista de acontecimentos?

10

Modo de Funcionamento

Request

11

Modo de Funcionamento

Sample

12

Modo de Funcionamento

(3)

13

Unidade Lógica de Selecção

(Picking)

Seleccionar um objecto que está desenhado

no ecrã

Como usando as antigas canetas ópticas?

Como usando um pipeline (só um sentido)?

Usar dois pipelines, um de saída e um de

entrada?

14

Soluções Possíveis

Identificar cada objecto e:

Definir uma pequena região de recorte -> hit list Usar caixas envolventes alinhadas com os eixos Usar um buffer adicional e associar uma cor diferente a cada objecto. Ler a quadrícula com as coordenadas fornecidas pelo rato...

15

Selecção em OpenGL

Suportados vários modos de “desenho”

GL_RENDER – valor por omissão

GL_FEEDBACK – lista de primitivas processadas mas não desenhadas

GL_SELECTION – cada primitiva dentro do volume de visualização gera uma entrada num stack de selecções (name stack)

16

Funcionamento

Usa-se o stack para introduzir os nomes

associados a um conjunto de primitivas

Dentro da função de retorno associada ao

rato, antes de desenhar introduz-se um nome

no stack:

glPushName (GLuint name)

Altera-se o Viewport

Recebe-se os nomes atribuídos aos objectos

e processa a informação

17

Modelo de Acontecimentos

Modelo desenvolvido para suportar criação de Interfaces de Manipulação directa

Programa espera pelo utilizador (controlo externo)

Interface Gráfica comunica:

Com outras aplicações Com o sistema de janelas

Entre os vários elementos que a constituem Com o código que implementa funcionalidade

18

Modelo de Acontecimentos

(cont)

Comunicação realizada via Acontecimentos Um acontecimento é qualquer coisa de interessante que ocorre no sistema

Botão do rato premido, Objecto arrastado, Teclado accionado, etc.

Acontecimentos têm:

Tipo de acontecimento

Posição do cursor ou tecla + modificador Janela à qual se destina o acontecimento

(4)

19

Modelo de Acontecimentos

Todos os acontecimentos gerados vão para

uma lista de acontecimentos

Fornecida pelo sistema operativo

Assegura que os acontecimentos são tratados pela ordem que acontecem

20

Acontecimentos de alto nível

Barra enrolamento Cx fechar Barra título Pasta Controlo tamanho 21

Questões Tratamento Acontecimentos

Divisão entre Aplicação e Sistema de Janelas Tipos de Acontecimentos que uma janela pode receber

Decomposição da IU em objectos de interacção (widgets / controlos)

Distribuição de acontecimentos pelos objectos de Interacção

Modelos de comunicação entre objectos

22

Sistemas de Janelas

Várias Aplicações simultâneas

Separação de funções para evitar o caos

Infra-estrutura para suportar serviços comuns Dois aspectos principais:

Serviços de software para aplicações Criar & organizar janelas

Realizar interacção nas janelas Gestor de janelas

Controla tamanho e colocação de janelas

23

Sistema de Janelas

Divide o ecrã em áreas independentes

Programador escreve código para essas áreas ou reutiliza (Widgets)

Áreas são compostos numa estrutura em árvore para fazer uma aplicação

Sistema de Janelas é responsável por gerir os acontecimentos

24

Árvore de Interactores

Decompor objectos interactivos em árvore

Objectos interactivos também designados por “widgets” Rectângulos aninhados

Utilizada para distribuir acontecimentos

Acontecimentos despachados (enviados) para rotinas nos widgets

Estas rotinas (event handlers) processam o acontecimento

Variedade de métodos de encaminhamento

(5)

25

Ex. Árvore de Interactores

Janela “D:\ ipm-slides0203”

Janela Interior Menu Bar

barra localização

barra desenr. vertical área de conteúdo pasta “antigas” pasta “cartoons” … controlo tamanho Status Bar … Ecrã 26

Ex. Árvore de Interactores

Ecrã

Janela Exterior [amarelo] Resultados [rosa]

Texto resultado Janela Interior [verde]

Teclado [verdeEscuro] Botão – Botão + Botão 0 Botão = 7 8 9 4 5 6 0 + -1 2 3 = 93.54 ENT 27

Widgets / Controlos

Objectos interactivos reutilizáveis Tratam determinados acontecimentos

Dizem em que acontecimentos estão interessados

A fila de acontecimentos envia-os para o widget correcto

Mudam de aparência

ex. Button up / Button down

Button RadioButton RadioButton TextArea ComboBox CheckBox ComboBox Button Button 28

Sistemas de janelas em rede

X-Window e NeWS, Network Windows System, concebidos para aplicações que podem correr remotamente

Usam modelo cliente-servidor

Servidor X Software std sistema Cliente Software aplicação Rede Utilizador 29

X-Window

Notem a inversão da terminologia

Utilizador está no “servidor” e não no “cliente”

Servidor X-Windows

Interpreta comandos X e envia acontecimentos Determina que janela recebe acontecimentos Envia através da rede para cliente correspondente

Cliente X

Software de interface X (Xlib)

Combina dados gerados pelas rotinas Xlib em pacotes para transmitir ao servidor

30

X-Window

Problemas de Interacção?

Largura de banda em bits por segundo

Latência de rede = tempo de transferir e processar dados Utilizador Latência (tempo) Larg. banda (bps) Servidor X Software std sistema Cliente Software aplicação Rede

(6)

31

Acontecimentos de Entrada

Botões de localizador (rato / caneta)

Premido / libertado (Down / Up)

modificadores (teclas “shift”, “control”, “Alt”, etc.) duplo click

X não tem este aplicações simulam

Acontecimentos de deslocamento

Permitem desenhar com rato/caneta Arrastar objectos com rato

Acontecimentos de entrada/saída

e.g., se entra / sai de uma região / botão

32

Acontecimentos (cont.)

Teclado

transforma códigos de tecla em ASCII/Latin 1 KeyDown, KeyUp

Acontecimentos específicos de janelas

criação / destruição iconificar / restaurar seleccionar / desseleccionar odificar tamanho redesenhar 33

Ciclo de Acontecimentos

Como são processados os acontecimentos? Event loop Inicialização While (continuar) { obtém acontecimento A Processa acontecimento A }

A substância do programa reside no código que processa os acontecimentos

34

Processar acontecimentos

Despacha (acontecimento A) {

switch (A.window) { ...

case TECLA- CINCO: if (A.type == left- down){

quant = 5 + 10*quant; display (quant); last- op = NUMBER; } ... 7 8 9 4 5 6 0 + -1 2 3 = 0 ENT Prime tecla ‘5’ 35

Processar acontecimentos

case TECLA- DOIS:

if (A.type == left- down) { quant = 2 + 10*quant; display (quant); last- op = NUMBER; } ... 7 8 9 4 5 6 0 + -1 2 3 = 5 ENT Prime tecla ‘2’ 36

Processar acontecimentos

case TECLA- MAIS : if (A.type == left- down){

push (quant); quant = 0; last- op = COM; } ... 7 8 9 4 5 6 0 + -1 2 3 = 52 ENT Prime tecla ‘+’

(7)

37

Processar acontecimentos

case TECLA_SEIS:

if (A.type == left- down) { quant = 6 + 10*quant; display (quant); last- op = NUMBER; } ... 7 8 9 4 5 6 0 + -1 2 3 = 0 ENT Prime tecla ‘6’ 38

Processar acontecimentos

case TECLA- ENTER: if (A.type == left- down){

if (last- op == NUMBER) push (quant); result = pop() + pop(); push (result); display (result); quant = 0; last- op = COM; } 7 8 9 4 5 6 0 + -1 2 3 = 6 ENT

Prime tecla ‘enter’

39

Processar acontecimentos

7 8 9 4 5 6 0 + -1 2 3 = 58 ENT 40

Filtragem de Acontecimentos

Podem usar máscaras para seleccionar acontecimentos desejados

ex., filtrar movimentos localizador num formulário

Só recebe acontecimentos de entrada e saída (nos campos)

onEnter/onExit (javascript)

JavaScript filtra automaticamente acontecimentos de arrasto

Ignora todos os outros acontecimentos, não desperdiçando recursos

41

Processamento de

Acontecimentos

Se utilizador desenrola texto o sistema DEVE:

Encaminhar acontecimentos do rato para barra de enrolamento

Actualizar representação barra durante o arrasto

Notificar a janela de texto que precisa de desenrolar-se para parecer que o texto se deslocou

42

Encaminhar Acontecimentos

Modelo baseado na árvore de interactores

Algoritmo selecciona região mais abaixo e mais à frente na árvore de interactores (que está “debaixo do acontecimento”)

Barra de desenrolamento ou conteúdo da janela e não a janela exterior

(mais baixo na hierarquia)

Barra de desenrolamento e não conteúdo (mais à frente) Cada janela processa apenas os seus acontecimentos Conhecido como bottom-first event dispatch

(8)

43

Encaminhar Acontecimentos

Alternativa de encaminhamento

Top-down event dispatch

Acontecimentos enviados para janela de topo, mais à frente

Esta encaminha-os para uma ou mais descendentes...

44

Comunicação entre Widgets

Como comunicam e interactuam os Widgets

entre si?

e.g., se a barra de enrolamento se desloca, o texto correspondente deve deslocar-se

45

Comunicação entre Widgets

Usando Pseudo-acontecimentos

Pseudo – não correspondem a entradas “reais”, mas sim geradas

Criam novos acontecimentos para comunicação entre widgets

Envia pseudo-acontecimento para widget apropriado

46

Comunicação entre Widgets

Acesso directo a “irmãos”

Indicar janela irmã como propriedade (Tk) Especificar irmã no código (subArctic, AWT)

Notificar pai

Cada widget tem identificador único

Notificam pai widget sobre alterações ocorridas Pai efectua a acção apropriada

47

Modelo de Acontecimentos

Baseado em Funções de Retorno

Ao fazer o dispach de cada tipo de

acontecimento, tem que o programar

explicitamente

Existência de um conjunto de case

Definição de Funções de tratamento de tipos

de acontecimento (funções de retorno

Mecanismo de Subscrição

48

Funcionamento do MainLoop

Ciclo infinito até ocorrer o acontecimento de

terminar operação.

Passos do ciclo:

Verifica se existe algum acontecimento na fila respectiva

Para cada acontecimento que é lido o GLUT executa a respectiva função de retorno, caso exista.

A função de retorno é executada e o controlo volta ao início do ciclo

(9)

49

Funções de Retorno

Assume que os tipos de acontecimentos

estão pré-definidos

Assume que existem alguns tipos de Widgets

Especializado para tipos específicos de

aplicações

Função específica para terminar a execução

da aplicação

50

Tipos de Acontecimentos em

OpenGL

Janela de ecrã: Redesenho,

Redimensionamento, etc.

Rato: pressionar num botão, libertar um

botão, mover o rato, etc.

Teclado: pressionar ou libertar uma tecla

Idle: O que deve ser efectuado quando não a

fila de acontecimentos está vazia

51

Funções de Retorno no GLUT

Define-se um comportamento a ser

executado para cada tipo de acontecimento,

(exp: acontecimento disparado pelo rato):

glutMouseFunc (mouse);

void mouse (int button, int state, int x, int y);

Quando o acontecimento ocorre a função (é

executada

52

Disparo efectuado pelo rato

Botão – Qual o botão que efectuou o disparo

Estado – Qual a situação do botão (se

premido ou libertado)

Posição em que se encontrava o rato, em

coordenadas da janela de ecrã ... (origem no

canto superior esquerdo)

53

Coordenadas

Inverter o valor da coordenada Y, isto é, o

valor correcto de y corresponde à altura da

janela diminuído do valor de Y recebido

Necessário conhecer a altura da janela do

ecrã, a qual pode ser alterada ao longo da

execução do programa

Sempre que é efectuado o redesenho do

conteúdo da janela é obtida a altura da janela

do ecrã

54

Saída do Ciclo de Execução

void mouse (int button, int state, int x, int y)

{

if (button == GLUT_LEFT_BUTTON &&

state == GLUT_DOWN)

exit (0);

}

(10)

55

A função de retorno de

Desenho

A função display é executada sempre

que o conteúdo de uma janela tem que

ser reparado, isto é, quando a janela do

ecrã:

é aberta, pela primeira vez

é exposta pelo facto de uma janela que a

ocultava ter deixado de o fazer

56

Funções de Retorno do GLUT

Tipos de Acontecimentos do GLUT suportados

pelos vários Sistemas Operativos (Windows,

X, Macintosh):

glutDisplayFunc OK glutMouseFunc OK glutIdleFunc OK glutKeyboardFunc OK… glutReshapeFunc glutMotionFunc glutPassiveMotionFunc 57

Funções de Motion

Pode obter-se as coordenadas Relativas do

rato, à medida que ele é movido.

Se um botão estiver premido é executada a

função de retorno:

glutMotionFunc

Se não estiver:

glutPassiveMotionFunc

58

Widgets em OpenGL

GLUT suporta popup menus podendo ser

criada uma hierarquia de menus (lembrar

exemplos de interactivos mostrado nas aulas

Aproximação muito simples:

Criação de um menu

Introdução de cada item de menu ou de um sub-menu

Definição da função de retorno Ligar a um botão do rato (popup)

59

Exemplo

glutCreateMenu (demo_menu); glutAddMenuEntry (“quit”, 1);

glutAddMenuEntry (“increase square size”, 2); glutAddMenuEntry (“decrease square size”, 3); glutAttachMenu (GLUT_RIGHT_BUTTON); void demo_menu (int id)

{ switch (id) {case 1: exit (0);

break; ...

60

Hierarquia de Menus

sub_menu = glutCreateMenu (size_menu); glutAddMenuEntry (“increase square size”, 2); ...

glutCreateMenu (top_menu); glutAddMenuEntry (“quit”, 1); ...

glutAddSubMenu (“Resize”, sub_menu), glutAttachMenu (GLUT_RIGHT_BUTTON);

(11)

61

Árvore de Janelas de ecrã

Podem criar-se várias janelas e sub-janelas

de ecrã:

Id = glutCreateWindow (“segunda janela”); ...

glutSetWindow (id);

Podem ter funções de retorno

específicas (janela de ecrã faz parte do

Estado do OpenGL...).

62

Resumo

Modelo de Entrada de Dados Modo de Funcionamento Sistemas de Gestão de Janelas

Malha principal de acontecimentos serve para Encaminhar (despachar) acontecimentos Árvores de interacção

Encaminhar acontecimentos Duas abordagens principais

+ Abaixo e + à frente / top-down

Comunicação entre Widgets Entrada de Dados no OpenGL

(12)