Scritto di Interfacce Grafiche / Interfacce Utente - Giugno 2002

Testo con Soluzioni

In stampatello le domande, in corsivo le risposte (o tracce di risposta).

Parte teorica

Esercizio 1

In che cosa consiste la gerarchia di annidamento delle finestre?
Che cosa si intende per "finestra" in questo contesto?
Quali vincoli ha una finestra figlia rispetto alla sua finestra madre nella gerarchia di annidamento?
Fare un esempio di un'interfaccia spiegando le finestre che la compongono e i legami di annidamento esistenti. Corredare la spiegazione con un disegno.

Per le prime tre domande vedere le dispense CAP.3: Sistemi a finestre (Window Management Systems - WMS).
Per l'ultima domanda bisognava fare la figura schematica di un'interfaccia con indicazione di quali elementi sono finestre, e accanto la rappresentazione ad albero della gerarchia.

Esercizio 2

Che cosa e' un evento?
Quali sono le azioni piu' comuni che generano eventi?
Quali sono le informazioni tipicamente associate ad un evento?
Come avviene la gestione degli eventi in un'interfaccia utente realizzata secondo il paradigma di programmazione guidata da eventi?

Per le prime tre domande vedere le dispense CAP.3: Sistemi a finestre (Window Management Systems - WMS). Per l'ultima domanda vedere le dispense CAP.4: Programmazione guidata da eventi (event-driven programming).

Esercizio 3

Il processo di generazione di un'immagine di una scena consiste in una fase di modellazione e in una di visualizzazione. Che cosa avviene in ciascuna delle due fasi?
Da chi viene eseguita ciascuna delle due fasi?

Vedere le dispense CAP.8: Introduzione alla grafica (sia 2D che 3D).

Esercizio 4

Che cosa sono le coordinate omogenee, come sono definite?
Che relazione c'e' tra le coordinate omogenee e le coordinate cartesiane di un punto P?
Quali sono i vantaggi dell'uso di coordinate omogenee invece di quelle cartesiane?
Scrivere in coordinate omogenee l'espressione di una trasformazione di scalatura in 2D con fattori di scala (sx,sy) e punto fermo l'origine.
Che cosa realizza una scalatura con fattori di scala negativi?

Vedere le dispense CAP.8: Introduzione alla grafica (sia 2D che 3D).

Parte pratica

Esercizio 1 (uguale per vecchio e nuovo ordinamento)

Consideriamo un'interfaccia che consiste in una finestra top-level con

un'area di lavoro (pannello)
tre bottoni di uguale misura allineati orizzontalmente sotto il pannello ed etichettati Red, Green, Blue.

Si veda la figura:

+--------------------------------+
|                                |        
|                                |        
|                                |        
|                                |        
|                                |        
|                                |        
|                                |        
|                                |        
|                                |
|                                |
|                                |
|                                |
|                                |
+----------+----------+----------+
|   Red    |  Green   |  Blue    |
+----------+----------+----------+

Domande:

Quale gerarchia di annidamento e quali layout manager si possono usare per ottenere questa configurazione? Corredare la spiegazione con un disegno.

Si puo' usare un BorderLayout nella finestra principale, mettere nella zona center il pannello di lavoro, nella zona sub un altro pannello organizzato con GridLayout a una riga e tre colonne, contenente i tre bottoni.
Altre possibilita' (non esattamente corrette):
Gridlayout a due righe e una colonna per la finestra principale: ma in questo modo il pannelo di lavoro viene grande quanto il pannello con i tre bottoni.
FlowLayout per il pannello dei bottoni: ma in questo modo non vengono necessariamente grandi uguali (sono dimensionati in base alla lunghezza della stringa che li etichetta).
FlowLayout e dimensionamento ad-hoc delle componenti in modo che la configurazione appaia quella: ma in questo modo se l'utente ridimensiona la finestra si scompiglia tutto.
Disegno della gerarchi (albero):
finestra principale con BorderLayout | | pannello di lavoro pannello dei bottoni (al centro del (a sud del BorderLayout BorderLayout della della finestra principale) finestra principale) con GridLayout a 1 riga e 3 colonne | | | | | bottone bottone bottone red blue green

Supponiamo che l'applicazione abbia nel suo stato interno un colore corrente C appartenente all'insieme {Red, Green, Blue}. Scrivere lo PSEUDO CODICE del corpo delle callback associate ai tre bottoni in modo tale che:
- ciascun bottone assegni come colore corrente quello scritto sulla sua etichetta
- quando il colore corrente e' C, l'utente possa azionare solo i bottoni corrispondenti ai due colori diversi da C, non il bottone corrispondente a C.

Il colore corrente e' tenuto in una variabile globale current_color, che viene modificata all'interno delle callback dei bottoni. Supponiamo di partire (per esempio) con current_color = blue, bottone blu disabilitato, gli altri due bottoni abilitati. Ogni callback assegna come colore corrente quello del bottone appena premuto, disabilita il bottone appena premuto e riabilita gli altri due (solo uno era disabilitato, si potrebbe fare un controllo piu' fine per riabilitare solo quello, ma in generale non guasta abilitare un bottone gia' abilitato).
Callback del bottone rosso:
current_color = red; disabilita bottone rosso; abilita bottoni verde e blu;
Le altre due callback sono analoghe.

Esercizio 2 (per VECCHIO ordinamento)

Domande:

Scrivere lo PSEUDO CODICE di una funzione che disegna in OpenGL un cubo con facce parallele ai piani coordinati, baricentro nell'origine, lato unitario. Il cubo deve essere completo di normali alle facce.

Per comodita' di scrittura do dei nomi agli 8 punti vertici del cubo. Vertici della base superiore: A1(-0.5,-0.5,0.5), B1(0.5,-0.5,0.5), C1(0.5,0.5,0.5), D1(-0.5,0.5,0.5). Vertici della base inferiore: A2, B2, C2, D2 come A1, B1, C1, D1 ma con terza coordinata -0.5. Realizzo il quadrato come insieme di 6 quadrilateri corrispondenti alle 6 facce, ciascuna con la sua normale.
glBegin GL_QUADS glNormal (0,0,1) glVertex A1 glVertex B1 glVertex C1 glVertex D1 glNormal (0,0,-1) glVertex A2 glVertex D2 glVertex C2 glVertex B2 glNormal (0,1,0) glVertex A1 glVertex A2 glVertex B2 glVertex B1 glNormal (0,-1,0) glVertex D2 glVertex D1 glVertex C1 glVertex C2 glNormal (1,0,0) glVertex B1 glVertex B2 glVertex C2 glVertex C1 glNormal (-1,0,0) glVertex A2 glVertex A1 glVertex D1 glVertex D2 glEnd

Volendo assegnare al cubo un materiale in grado di riflettere luce diffusa con coefficienti di riflessione RGB pari a (1,1,0.5), dove va posizionata rispetto allo pseudo codice del cubo l'istruzione di assegnazione del materiale?

Prima di glBegin perche', essendo il materiale un parametro di stato del sistema, deve essere gia' impostato quando si esegue le primitiva.

Se vogliamo una riflessione diffusa di una tonalita' di viola, cioe' espressa da una terna RGB del tipo (x,0,x), che coefficienti RGB deve avere la luce diffusa incidente sul cubo? Motivare la risposta. Quanto vale x?

Cerco una terna (r,g,b) tale che il prodotto (1,1,0.5)*(r,g,b) = (r,g,0.5b) venga della forma (x,0,x). Quindi r=x, g=0, b=2x. Per esempio ponendo x=0.5 la terna RGB della luce diventa (0.5,0,1).

Esercizio 2 (per NUOVO ordinamento)

Consideriamo l'interfaccia dell'esercizio 1. Domande:

Scrivere in PSEUDO CODICE il corpo della funzione di ridisegnamento (in Java paint o paintComponent) associata al pannello in modo tale che
- nel pannello appaia un quadrato centrato nel pannello, di lato lungo L-10 pixel dove L e' la lunghezza in pixel del lato piu' corto del pannello
- il quadrato sia colorato con il colore corrente dell'applicazione
Cambia qualcosa nelle callback dei bottoni Red, Green, Blue scritte per rispondere all'esercizio 1?

La funzione di disegno del pannello di lavoro usa il colore corrente per disegnare il quadrato:
dimX = larghezza attuale del pannello dimY = lunghezza attuale del pannello L = min (dimX, dimY) assegna colore current_color disegna quadrato di diagonale dimX/2 - (L-10), dimY/2 - (L-10) dimX/2 + (L-10), dimY/2 + (L-10)
Nelle callback dei bottoni dopo aver assegnato il colore corrente devo aggiungere repaint per ridisegnare il quadrato col nuovo colore.

Fare in modo che
- ogni volta che il quadrato cambia colore, la lunghezza del suo lato diminuisca di 10 pixel, cioe' la lunghezza del lato sia L-10*(N+1) pixel dove N e' il numero di cambi di colore avvenuti
- il quadrato resti sempre centrato nel pannello
- non appena la lunghezza del lato diventa minore o uguale a zero, l'applicazione termini.

Aggiungo una variabile globale D inizializzata a 10. Nella funzione di disegno del pannello sostituisco L-10 con L-D. Nelle callback dei bottoni aggiungo l'incremento D=D+10. Nella funzione di disegno del pannello aggiungo subito dopo avere calcolato L il controllo:
if (L-D) <= 0 termina il programma