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

Transcrição

1 Entrada de Dados e Interacção (3) Sumário Modelo de Entrada de Dados Introdução ao Modelo de Acontecimentos Instituto Superior Técnico, 2006/2007 Sistemas de Janelas Acontecimentos associados a Janelas Encaminhamento de acontecimentos Comunicação entre widgets Entrada de Dados no OpenGL 1 2 Introdução Programas Sequenciais 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 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? 3 4 Programas Sequenciais (cont.) Programas Sequenciais (cont.) Geralmente conduz a muitos modos Problemas com modos? muitas variáveis de estado Demasiados modos confundem utilizadores Exemplos de modos Provocam erros (modo errado) Programas de pintura (linha, bucket-fill, rectângulo, etc) Como alternar entre modos? Modos de comando e edição do vi Problemas com os modos? Indicação clara sobre modo corrente Precisamos de um modelo mais sofisticado para simplificar programação de Sistemas Interactivos 5 6 1

2 Modelo de Entrada de Dados Unidades Lógicas Unidades Lógicas de Entrada de Dados (Choice, Locator, etc.) Modos de Entrada de Dados (a pedido (request), acontecimentos (event), etc.) String (rato) Locator (teclado) Pick (teclado) Choice (widgets) Valuator (sliders) Stroke (Rubber banding) 7 8 Processos Modo de Funcionamento Request Medida: Qual a tecla premida? Gatilho (Trigger) Quando a informação é disparada? Para onde é enviada? Programa? Outro processo? Lista de acontecimentos? 9 10 Modo de Funcionamento Sample Modo de Funcionamento Event

3 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? 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 Selecção em OpenGL Funcionamento 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) 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 Modelo de Acontecimentos Modelo de Acontecimentos (cont) 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 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 Modelo de Acontecimentos Acontecimentos de alto nível 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 Barra título Pasta Cx fechar Barra enrolamento Controlo tamanho Questões Tratamento Acontecimentos Sistemas de Janelas 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 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 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 Á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 Detalhes mais tarde

5 Ex. Árvore de Interactores Ecrã 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 25 Ex. Árvore de Interactores = ENT Ecrã Janela Exterior [amarelo] Janela Interior [verde] Resultados [rosa] Texto resultado Teclado [verdeescuro] Botão = Botão Botão + Botão 0 26 Widgets / Controlos Sistemas de janelas em rede 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 ComboBox CheckBox RadioButton RadioButton TextArea ComboBox X-Window e NeWS, Network Windows System, concebidos para aplicações que podem correr remotamente Usam modelo cliente-servidor Servidor X Software std sistema Rede Cliente Software aplicação Button Button Utilizador 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 29 X-Window Problemas de Interacção? Servidor X Software std sistema Utilizador Largura de banda em bits por segundo Latência de rede = tempo de transferir e processar dados Rede Larg. banda (bps) Cliente Software aplicação Latência (tempo) 30 5

6 Acontecimentos de Entrada Acontecimentos (cont.) 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 31 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 32 Ciclo de Acontecimentos Processar 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 Despacha (acontecimento A) { 0 switch (A.window) { case TECLA- CINCO: if (A.type == left- down){ quant = *quant; display (quant); Prime tecla last- op = NUMBER; = ENT } Processar acontecimentos Processar acontecimentos Despacha (acontecimento A) { 5 switch (A.window) { case TECLA- DOIS: if (A.type == left- down) { quant = *quant; display (quant); last- op = NUMBER; Prime tecla 2 = ENT } Despacha (acontecimento A) { 52 switch (A.window) { case TECLA- MAIS : if (A.type == left- down){ push (quant); quant = 0; last- op = COM; = ENT } Prime tecla

7 Processar acontecimentos Despacha (acontecimento A) { 0 switch (A.window) { case TECLA_SEIS: if (A.type == left- down) { quant = *quant; display (quant); 0 Prime + - tecla 6 last- op = NUMBER; = ENT } 37 Processar acontecimentos Despacha (acontecimento A) { 6 switch (A.window) { case TECLA- ENTER: if (A.type == left- down){ if (last- op == NUMBER) push (quant); result = pop() + pop(); push (result); = ENT display (result); quant = 0; Prime tecla enter last- op = COM; } 38 Processar acontecimentos Filtragem de Acontecimentos 58 Podem usar máscaras para seleccionar acontecimentos desejados = ENT 39 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 40 Processamento de Acontecimentos Encaminhar 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 41 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 42 7

8 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 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 Comunicação entre Widgets 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 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 apropriado Modelo de Acontecimentos Baseado em Funções de Retorno Funcionamento do MainLoop 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 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 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 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 Funções de Retorno no GLUT Disparo efectuado pelo rato 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 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) Coordenadas Saída do Ciclo de Execução 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ã void mouse (int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) exit (0); }

10 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 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 Funções de Motion Widgets em OpenGL 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 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 submenu Definição da função de retorno Ligar a um botão do rato (popup) Exemplo Hierarquia de Menus 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;.. 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 Á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). 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 This document was created with Win2PDF available at The unregistered version of Win2PDF is for evaluation or non-commercial use only. This page will not be added after purchasing Win2PDF.