Passa al contenuto principale

Widget Library

Widget Library​

La Widget Library è l'area centrale per la gestione dei widget riutilizzabili in optiCLOUD. Qui vengono gestiti sia i widget forniti dalla piattaforma sia i widget bundle creati in proprio.

Panoramica della Widget Library

Widget bundle​

Nella panoramica tabellare vengono visualizzati i widget bundle presenti.

  • Bundle name nome del widget bundle
  • Type per distinguere tra bundle forniti e bundle personalizzati

Esistono due tipi:

  • System per i widget standard forniti da OptiMEAS
  • Custom per i widget bundle creati dall'utente stesso

Tramite la barra delle azioni è possibile creare nuovi bundle o importare bundle esistenti.

Creare un nuovo widget bundle​

Tramite Create viene creato un nuovo widget bundle. In questa fase si assegna anzitutto un titolo. Facoltativamente è possibile inserire inoltre un'immagine e una descrizione.

Dopo la creazione il bundle compare nella tabella e può essere aperto tramite la vista di dettaglio. Qui è quindi possibile gestire i widget veri e propri all'interno del bundle.

Creare widget nel bundle​

All'interno di un bundle è possibile creare nuovi widget tramite Create Widget. Prima dell'avvio dell'editor si seleziona anzitutto il tipo di widget desiderato.

Selezionare il tipo di widget

I tipi disponibili sono:

  • Time Series Widget per dati di serie temporali
  • Latest Value Widget per gli ultimi valori di misura o di stato
  • Control Widget per widget con funzionalità di controllo o RPC
  • Alarm Widget per dati di allarme
  • Static Widget per widget senza collegamento al database

La scelta del tipo determina la struttura tecnica di base del widget e quindi anche il modo in cui i dati verranno successivamente richiesti o elaborati.

Widget Editor​

Dopo la selezione del tipo si apre il Widget Editor. Funziona come ambiente di sviluppo integrato per widget personalizzati. Sul lato sinistro si trovano le singole aree di modifica, a destra viene visualizzata in modo continuo un'anteprima del widget corrente.

General​

Nell'area General vengono definite le proprietà fondamentali del widget:

  • nome
  • tipo di widget
  • immagine di anteprima
  • descrizione
  • impostazioni generali
  • Data-Key-Settings

Impostazioni generali del widget

note

Se un widget deve utilizzare impostazioni proprie, il Settings-Form-Selektor preimpostato deve essere rimosso, in modo che il widget acceda alla propria definizione.

HTML​

Nell'area HTML viene definita la struttura del widget.

HTML nel Widget Editor

Qui viene inserita la parte di markup vera e propria del widget, che diventa quindi direttamente visibile nell'anteprima.

CSS​

Nell'area CSS viene definito l'aspetto visivo del widget.

CSS nel Widget Editor

In questo modo è possibile realizzare direttamente per il widget layout, colori, distanze e ulteriori definizioni di stile.

JavaScript​

Nell'area JavaScript viene implementata la logica del widget.

JavaScript nel Widget Editor

Qui vengono elaborati i dati, gestiti gli stati oppure implementate interazioni e contenuti dinamici.

Resources​

Tramite Resources è possibile integrare nel widget ulteriori librerie esterne, ad esempio librerie di visualizzazione o di supporto.

Integrare risorse esterne

In questo modo è possibile creare anche widget più complessi o specializzati basandosi su librerie esistenti.

Settings Schema​

Nell'area Settings Schema si definisce quali impostazioni configurabili il widget offrirà successivamente nell'interfaccia.

Settings Schema

Lo schema descrive quindi la struttura e le possibilità di inserimento della configurazione del widget.

Data-Key-Settings​

Nell'area Data-Key-Settings si stabilisce come i canali dati o le chiavi dati vengono utilizzati e configurati nel widget.

Data-Key-Settings

In questo modo un widget può essere predisposto in modo mirato per determinate origini dati o strutture di dati.

Widget Settings​

L'anteprima e le impostazioni configurabili del widget possono essere seguite direttamente nell'editor.

Anteprima del widget e Settings

In questo modo, durante lo sviluppo è possibile verificare rapidamente come le modifiche a struttura, logica o impostazioni incidono sul comportamento successivo del widget.

Inquadramento​

La Widget Library fornisce la base tecnica per visualizzazioni riutilizzabili e personalizzate all'interno dei dashboard. La programmazione vera e propria di widget complessi è descritta in modo più dettagliato in altra sede. Questa pagina serve pertanto come panoramica su gestione, creazione e struttura dei widget in optiCLOUD.