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