Sei sulla pagina 1di 4

SCUOLA DI LABVIEW

08

Training per principianti

PROGETTARE LINTERFACCIA UTENTE


a cura di Matteo Foini

I pannelli frontali devono essere bene organizzati e facili da utilizzare, perch il pannello frontale la prima cosa che gli utenti vendono quando lavorano con un VI

uando progettate un pannello frontale, tenete presenti due tipi di utenti: l'utente finale e lo sviluppatore. Gli utenti finali lavorano con VI il cui pannello frontale sar visibile a loro, trattandosi dellintefraccia utente. Gli sviluppatori lavorano invece con subVI, che hanno pannelli frontali visibili solo agli stessi sviluppatori.

stra del testo. Se centrate un'etichetta sopra o sotto un oggetto, centrate anche il testo dell'etichetta. I font sono l'aspetto meno portabile del pannello frontale, quindi testateli sempre su tutte le piattaforme target. Colori I colori possono distrarre l'utente da informazioni importanti. Per esempio, uno sfondo giallo, verde o arancione chiaro rende difficile vedere una luce di pericolo rossa. Un altro problema che alcune piattaforme non hanno a disposizione cos tanti colori. Usate un numero minimo di colori, enfatizzando nero, bianco e grigio. Ecco alcune semplici linee guida per l'uso dei colori: Non usate mai il colore come unico indicatore dello stato di un dispositivo. Le persone con qualche grado di daltonicit possono avere problemi a rilevare il cambiamento. Inoltre, grafici e schemi multitraccia possono perdere significato quando sono visualizzati in bianco e nero. Oltre al colore, usate linee diverse per distinguere i vari stili di plottatura. Considerate la possibilit di colorare lo sfondo e gli oggetti del pannello frontale dei VI dell'interfaccia utente con i colori di sistema presenti nella tavolozza. I colori di sistema adattano l'aspetto del pannello frontale ai colori di sistema di qualsiasi computer che esegue il VI. Per gli sfondi usate il grigio chiaro, il bianco o colori pastello. La prima riga di colori nella tavolozza di colori contiene colori meno violenti, adatti per gli sfondi e i normali controlli del pannello frontale. La seconda riga di colori nella tavolozza di colori contiene colori pi luminosi, che potete usare per evidenziare controlli importanti. Selezionate colori luminosi di evidenziazione solo quando l'elemento importante, come la notifica di un errore. Controllate sempre la coerenza del VI su altre piattaforme. La parte superiore della tavolozza di colori contiene uno spettro della scala di grigi e un box che potete usare per creare oggetti trasparenti. Il secondo spettro contiene colori tenui che sono molto adatti per sfondi e oggetti del pannello frontale. Il terzo spettro contiene colori adatti a evidenziazioni. La figura 1 mostra la tavolozza dei colori in LabVIEW.

ARGOMENTI

A. Elementi di progettazione dell'interfaccia utente B. Elementi di layout dell'interfaccia utente C. Prototipazione del pannello frontale D. Esempio di interfaccia utente E. Localizzazione delle interfacce utente

A. ELEMENTI DI PROGETTAZIONE DELL'INTERFACCIA UTENTE

Quando dovete progettare il pannello frontale per un'interfaccia utente, scegliete attentamente font, colori e grafica in modo da rendere l'interfaccia utente pi intuitiva e facile da usare. Caratteristiche di font e testo Limitate il VI a tre font standard (applicazione, sistema e dialogo), a meno che abbiate una ragione specifica per usare un font differente. Per esempio, i font monospazio, ossia i font spaziati in modo proporzionale, sono utili per controlli stringa ed indicatori dove il numero di caratteri critico. Per maggiori informazioni sull'impostazione del font di default, l'uso di font custom e la modifica dello stile dei font, consultate il LabVIEW Help. Il font effettivo utilizzato per i tre font standard (applicazione, sistema e dialogo) varia in base alla piattaforma. Per esempio, quando si lavora su Windows, le preferenze e le impostazioni del driver video influiscono sulle dimensioni dei font. Il testo pu apparire pi grande o pi piccolo su sistemi differenti, in base a questi fattori. Per compensare questo effetto, lasciate spazio in pi per font pi grandi e abilitate l'opzione Size to Text nel menu abbreviato. Lasciate spazio addizionale fra i controlli per evitare che le etichette si sovrappongano agli oggetti a causa dei cambiamenti di font su piattaforme multiple. Per esempio, se un'etichetta sta a sinistra di un oggetto, giustificate l'etichetta a destra e lasciate un po' di spazio a sini-

26

SCUOLA DI LABVIEW

Objects e Reorder Objects per creare un layout uniforme. Considerate l'uso dei seguenti tool e tecniche per migliorare il layout dei pannelli frontali dell'interfaccia utente. Menu run-time Usate i menu per ridurre accumuli e confusione. Potete creare menu custom per ogni VI che costruite e potete configurare i VI in modo da visualizzare o nascondere le barre dei menu. Nota I menu custom appaiono solo quando il VI viene eseguito. Potete costruire menu custom o modificare i menu di default di LabVIEW staticamente, quando editate il VI, o da programma, quando eseguite il VI.
Figura 1 - Tavolozza dei colori

Tenete presente queste cose quando dovete progettare un pannello frontale. Per la maggior parte degli oggetti, usate colori neutri che variano principalmente in luminosit. Usate con parsimonia i colori evidenti per oggetti come grafici, aghi di strumenti, loghi aziendali e cos via. Grafica Usate grafica importata per migliorare il pannello frontale. Potete importare bitmap, PICT Macintosh, Windows Enhanced Metafiles e oggetti testuali da usare come sfondi del pannello frontale, elementi da inserire nei picture ring e parti di controlli e indicatori custom. Controllate l'aspetto delle immagini importate quando caricate il VI su unaltra piattaforma. Per esempio, un file PICT Macintosh con una forma irregolare potrebbe essere convertito in un bitmap rettangolare con sfondo bianco su Windows o Linux. Uno svantaggio dell'uso di grafica importata che rallenta gli aggiornamenti dello schermo. Accertatevi di non porre indicatori e controlli sopra un oggetto grafico, per evitare che LabVIEW debba ridisegnare l'oggetto ogni volta che l'indicatore si aggiorna. Se dovete utilizzare una grossa immagine di sfondo su cui vi sono dei controlli, dividete l'immagine in diversi oggetti pi piccoli e importateli separatamente, perch la grafica di grandi dimensioni normalmente richiede pi tempo per essere disegnata.

B. ELEMENTI DI LAYOUT DELL'INTERFACCIA UTENTE

Considerate la disposizione dei controlli sui pannelli frontali. Mantenete semplici i pannelli frontali per evitare di confondere l'utente. Per esempio, potete usare dei menu per ridurre concentrazioni eccessive. Per i VI di livello superiore visibili agli utenti, disponete i controlli pi importanti in posizione prominente. Per i pannelli frontali dei subVI, disponete i controlli e gli indicatori in modo che corrispondano alla disposizione sul pannello dei connettori. Tenete gli ingressi a sinistra e le uscite a destra ogni volta che possibile per minimizzare la confusione da parte dell'utente. Usate i menu a tendina Align Objects, Distribute

Menu statici Per aggiungere una barra menu custom ad un VI al posto della barra menu di default, selezionate EditRun-Time Menu e create un menu nell'area di dialogo Menu Editor. LabVIEW crea un file menu di run-time (.rtm). Dopo avere creato e salvato il file .rtm, dovete mantenere lo stesso percorso relativo fra il VI e il file .rtm. Potete anche creare un menu abbreviato custom di run-time cliccando con il tasto destro su un controllo e selezionando AdvancedRunTime Shortcut MenuEdit. Questa opzione apre Shortcut Menu Editor. Quando il VI viene eseguito, esso carica il menu dal file .rtm. Gli elementi dei menu possono essere dei tre tipi seguenti: Elemento utente Vi permette di inserire nuovi elementi che devono essere gestiti da programma sullo schema a blocchi. Un elemento utente ha un nome, che la stringa che appare sul menu, e un tag, che un identificatore stringa unico, non sensibile alle maiuscole/minuscole. Il tag identifica l'elemento utente sullo schema a blocchi. Quando digitate un nome, LabVIEW lo copia sul tag. Potete editare il tag in modo che sia diverso dal nome. Affinch un elemento di menu sia valido, il suo tag deve avere un valore. Il box di testo Item Tag visualizza punti interrogativi per gli elementi di menu non validi. LabVIEW assicura che il tag sia unico in una gerarchia di menu e appende numeri quando necessario. Separatore Inserisce una linea di separazione sul menu. Non potete impostare alcun attributo per questo elemento. Elemento applicazione Vi permette di selezionare elementi del menu di default. Per inserire un elemento del menu, selezionate Application Item e seguite la gerarchia fino all'elemento che volete aggiungere. Potete aggiungere singoli elementi o interi sottomenu. LabVIEW gestisce automaticamente gli elementi applicazione. I tag di questi elementi non appaiono negli schemi a blocchi. Non potete alterare il nome, il tag o altre propriet di un elemento applicazione. LabVIEW riserva il prefisso APP_ ai tag degli elementi applicazione. Per aggiungere altri elementi al menu custom, cliccate il

27

SCUOLA DI LABVIEW

08

pulsante + blu sulla toolbar. Per cancellare elementi, cliccate il pulsante X rosso. Potete riorganizzare la gerarchia del menu cliccando i pulsanti freccia nella toolbar, usando le opzioni di manipolazione nel menu Edit o con operazioni di drag and drop.

Decorazioni Usate le decorazioni, come Raised Box o Horizontal Smooth Box, per raggruppare visivamente oggetti con funzioni correlate.

Tab Control Usate i Tab Control per sovrapporre i controlli e gli indicatori del pannello frontale in un'area pi piccola. Un Tab Control consiste di pagine e tab di selezione. Gestione della selezione menu Disponete gli oggetti del pannello frontaPer gestire le selezioni del menu, le su ogni pagina del controllo e usate i usate le funzioni situate nella riga diversi tab come selettori per visualizzare superiore della palette Menu. pagine differenti. Quando create un menu custom, I Tab Control sono utili quando avete pi dovete assegnare a ciascun elemenoggetti del pannello frontale che vengoto del menu un identificatore stringa Figura 2 - Uso delle decorazioni no usati insieme o durante una fase opeunico, non sensibile a minuscoper raggruppare visivamente oggetti rativa specifica. Per esempio, potreste le/maiuscole, chiamato tag. Quando l'utente seleziona un elemento del menu, potete recuperar- avere un VI che richiede all'utente di configurare inizialmenne il tag da programma usando la funzione Get Menu te diverse impostazioni prima che possa iniziare un test, perSelection. LabVIEW mette a disposizione un handler sullo mettendo quindi all'utente di modificare aspetti del test schema a blocchi per ogni elemento del menu basato sul mano a mano che esso procede e, infine, permetta all'utenvalore del tag di ogni elemento del menu. Tale handler te di visualizzare e memorizzare solo i dati pertinenti. una combinazione di While Loop e struttura Case che vi per- Sullo schema a blocchi, il Tab Control un controllo enumette di determinare quale menu eventualmente selezio- merated type per default. I terminali di controlli e indicatori nato e di eseguire il codice appropriato. posti sul Tab Control hanno l'aspetto di qualsiasi altro terDopo avere costruito un menu custom, costruite una strut- minale dello schema a blocchi. tura Case sullo schema a blocchi che esegue, o gestisce, cia- L'NI Example Finder, mostrato nella figura 3, un VI che utiscun elemento nel menu custom. Questo processo si chia- lizza Tab Control per organizzare l'interfaccia utente. ma gestione della selezione del menu. LabVIEW gestisce implicitamente tutti gli elementi applicazione. Controlli Subpanel Usate le funzioni Get Menu Selection ed Enable Menu Utilizzate il controllo Subpanel per visualizzare il pannello Tracking per definire le azioni da eseguire quando gli uten- frontale di un altro VI sul pannello frontale del VI corrente. ti selezionano ciascun elemento del menu. Per esempio, potete usare un Subpanel per progettare un'interfaccia utente che si comporta come un wizard. Menu abbreviati di run-time Mettete i pulsanti Back e Next sul pannello frontale del VI Potete customizzare il menu abbreviato di run-time per ogni di livello superiore e usate un Subpanel per caricare pannelli controllo che includete in un VI. Per customizzare un menu, frontali differenti per ogni passo del wizard. cliccate con il tasto destro su un controllo e selezionate AdvancedRun-Time Shortcut MenuEdit dal menu abbreviato per visualizzare l'area di dialogo Shortcut Menu Editor. Usate l'area di dialogo Shortcut Menu Editor per associare il menu abbreviato di default o il file di un menu abbreviato customizzato (.rtm) al controllo. Potete customizzare i menu abbreviati da programma. Potete anche aggiungere menu abbreviati ai pannelli frontali. Per aggiungere un menu abbreviato al pannello frontale, usate gli eventi dei pannelli Shortcut Menu Activation e Shortcut Menu Selection. Potete anche disabilitare il menu abbreviato di run-time su un controllo. Nota I menu abbreviati custom di run-time appaioFigura 3 - NI Example Finder no solo mentre il VI viene eseguito.

28

SCUOLA DI LABVIEW

Nota Potete creare ed editare un Subpanel solo nelle versioni Full e Professional di LabVIEW. Se un VI contiene un Subpanel, potete eseguire il VI in tutte le versioni di LabVIEW, ma non potete configurare il controllo nel Base Package. La figura 4 mostra un esempio di un VI che utilizza un Subpanel.

Contenitore Split Pane Usate le splitter bar per dividere il pannello frontale in due finestre scorrevoli indipendenti. Potete ulteriormente dividere queste finestre per progettare un'interfaccia utente con pi regioni. Potete customizzare ogni finestra per decidere se l'utente pu ridimensionare la finestra e come la finestra reagisce quando l'utente ridimensiona la finestra stessa. Potete usare una splitter bar per designare una finestra come toolbar o per creare una barra di stato. Pannelli frontali trasparenti Potete usare la propriet Window:Transparency del pannello frontale per impostare la trasparenza della finestra durante l'esecuzione del VI. Il livello di trasparenza un valore percentuale, dove 0 opaco e 100 invisibile. Questa propriet restituisce un errore se specificate un valore all'esterno del campo da 0 a 100. Drag and Drop Potete usare il drag and drop per fornire un modo alternativo per spostare i dati fra controlli in LabVIEW. Il drag and drop un modo comune per gli utenti di interagire con l'interfaccia utente in un'applicazione moderna. essenzialmente un'operazione fra due controlli: la sorgente del drag e il target del drop. Lo sorgente del drag il controllo che fornisce i dati all'operazione di drag and drop. Alcuni controlli LabVIEW, come i controlli stringa e ad albero, operano automaticamente come sorgenti di drag quando si esegue un drag da loro. Per questi controlli, utilizzate l'evento Drag Starting? per fornire un maggiore controllo su ci che l'utente trascina. Per i controlli che non operano come sorgenti di drag, potete costruire sorgenti di drag custom usando il metodo di controllo Start Drag. Con questo metodo, potete iniziare un'operazione drag and drop ogni volta che necessario e fornire tipi di dati specifici per la vostra applicazione. La sorgente di drag controlla anche l'aspetto del cursore durante un'operazione di drag and drop. LabVIEW usa cursori di drag and drop definiti dal sistema (Mac e Windows) o cursori definiti da LabVIEW (Linux). Usate l'evento Drag Source Update per fornire un feedback custom dal cursore per la vostra applicazione. Infine, la sorgente di drag ha la responsabilit di spostare i dati dopo un'operazione di drag and drop riuscita. Usate l'evento Drag Ended per portare a termine le operazioni di spostamento di drag per i tipi di dati di drag definiti dall'utente.

Figura 4 - VI con controllo Subpanel

Controlli ad albero Usate il controllo ad albero per dare agli utenti una lista gerarchica di elementi tra cui scegliere. Organizzate gli elementi che inserite nel controllo ad albero in gruppi di elementi, o nodi. Cliccate il simbolo di espansione vicino a un nodo per espanderlo e visualizzare tutti gli elementi presenti nel nodo stesso. Potete anche cliccare il simbolo vicino al nodo per far collassare il nodo. Nota Valgono le stesse indicazioni date per i Subpanel in merito allutilizzo del controllo ad albero nelle diverse versioni di LabVIEW. La figura 5 mostra un esempio di un VI che utilizza un controllo ad albero. Controlli barra a scorrimento Usate i controlli barra a scorrimento orizzontale e verticale per aggiungere barre a scorrimento custom a un controllo. Cambiate il valore di una barra a scorrimento usando il tool Operating per cliccare o trascinare l'area di scorrimento in una nuova posizione, cliccando le frecce di incremento e decremento o cliccando gli spazi fra l'area di scorrimento e le frecce.

Figura 5 - VI con controllo ad albero

Readerser vice.it n.825

29