Oggetti grafici

Introduzione

Q Studio dispone di una libreria di oggetti grafici predefiniti per realizzare le interfacce utente delle Q Application. Questi oggetti sono disponibili nel pannello Tipi, all’interno della cartella Interfaccia utente. Per il dettaglio di ogni tipo di oggetto grafico fare riferimento capitolo Riferimento su oggetti e variabili.

Famiglie di oggetti grafici

Gli oggetti grafici sono raggruppati nelle seguenti famiglie:

  • Controlli base: oggetti base, ad esempio etichette, caselle di testo, pulsanti e indicatori analogici.

  • Contenitori: oggetti che contengono altri oggetti grafici figli, tra cui altri contenitori, con cui realizzare la struttura grafica fondamentale di un’applicazione. Possono essere ad esempio finestre, pannelli o sezioni che allineano automaticamente il contenuto.

  • Contenuti: web browser, video e visualizzatori PDF.

  • Controlli dati: oggetti che presentano e/o permettono di selezionare dati ricavati da un modello di nodi del progetto o da un database. Possono essere per esempio griglie di dati, caselle combinate o grafici di trend.

  • Disegni: forme e immagini.

Elenco oggetti Controlli base

Oggetto

Descrizione

Esempi applicativi

Casella di spunta

Imposta e visualizza un valore booleano tramite selezione/deselezione.

-

Casella di testo

Inserisce e visualizza un testo a runtime.

-

Data e ora

Visualizza un dato di tipo DateTime.

Configurare e filtrare un oggetto Griglia dati con modello basato su oggetti

Durata

Visualizza un dato di tipo Duration.

-

Etichetta

Visualizza un testo.

-

Etichetta editabile

Visualizza un testo modificabile.

-

Indicatore circolare

Imposta e/o visualizza un valore numerico intero compreso in una scala di valori possibili.

Progettare un widget per visualizzare valori di più motori

Indicatore lineare

Imposta e/o visualizza un valore numerico intero compreso in una scala di valori possibili.

Progettare un widget per visualizzare valori di più motori

Interruttore

Imposta e visualizza un valore booleano.

-

Led

Visualizza uno valore booleano in forma di LED acceso o spento.

-

Pulsante

Genera eventi per eseguire metodi.

-

Pulsante di opzione

Seleziona un’opzione mutuamente esclusiva in un gruppo di opzioni.

-

Spin box

Incrementa/decrementa un valore numerico tramite pulsanti o tramite tastiera.

-

Elenco oggetti Contenitori

Oggetto

Descrizione

Esempi applicativi

Accordion

Espande o riduce blocchi di contenuto al clic dell’utente.

-

Disposizione orizzontale

Pannello che dispone automaticamente in orizzontale, e in modo adiacente, gli oggetti grafici direttamente figli.

-

Disposizione verticale

Pannello che dispone automaticamente in verticale, e in modo adiacente, gli oggetti grafici direttamente figli.

-

Finestra

Contenitore grafico radice. In un Presentation engine si può impostare per determinare l’interfaccia utente iniziale a runtime.

-

Finestra di dialogo

Finestra che può essere resa modale, ovvero non permettere l’interazione con altri elementi di interfaccia.

-

Pannello

Contenitore semplice di oggetti. Visualizza gli oggetti grafici che contiene e può essere zona cliccabile.

-

Pannello di navigazione

Pannello che contiene altri pannelli e li organizza automaticamente in schede navigabili.

-

Pannello dinamico

Contenitore che a runtime visualizza diversi pannelli alternativi a seconda delle logiche impostate.

-

Popup

-

-

Pulsante con pannello

Pulsante che al clic apre/chiude un pannello a comparsa.

-

Visuale a scorrimento

Pannello con possibilità di scorrimento, per visualizzare un contenuto più ampio del pannello stesso.

-

Elenco oggetti Contenuti

Oggetto

Descrizione

Esempi applicativi

Browser web

Visualizza a runtime una pagina web online o un file HTML locale.

-

Video

Visualizza un video a runtime.

-

Visualizzatore PDF

Visualizza un file PDF a runtime.

-

Elenco oggetti Controlli dati

Oggetto

Descrizione

Esempi applicativi

Selezione a discesa

Selezione a discesa i cui elementi sono ricavati da un modello di nodi del progetto o da una o più tabelle di un database.

-

Lista

Lista i cui elementi selezionabili sono ricavati da nodi del progetto o da una o più tabelle di un database.

-

Griglia dati

Tabella che presenta dati ricavati da nodi del progetto o da una o più tabelle di un database.

Configurare e filtrare un oggetto Griglia dati con modello basato su oggetti

Grafico di andamento

Visualizza l’andamento dei valori di una o più variabili letti in tempo reale e/o storicizzati.

-

Grafico XY

Visualizza in un grafico cartesiano il valore di variabili bidimensionali.

-

Grafico a torta

Visualizza dati di modello o di un database in un grafico a torta.

-

Grafico a barre

Visualizza dati di modello o di un database in un istogramma.

-

Elenco oggetti Disegni

Oggetto

Descrizione

Esempi applicativi

Rettangolo

Contenitore di oggetti simile a Pannello ma più personalizzabile nell’aspetto. Può essere zona cliccabile.

-

Immagine

Visualizza un’immagine.

-

Immagine SVG avanzata

Visualizza un’immagine SVG di cui è possibile modificare a design time e a runtime alcune proprietà grafiche.

Tutorial: progettare un’immagine dinamica rispetto allo stato di un allarme