È possibile eseguire una visualizzazione come CODESYS WebVisu.

Il requisito è che il sistema di runtime contenga un server web con supporto WebVisu. Questo permette la comunicazione tra il sistema di destinazione e il browser web. Il server Web sul sistema di destinazione viene avviato non appena viene avviata un'applicazione con configurazione WebVisu e viene eseguito finché non vengono terminate tutte le applicazioni con WebVisu. Il dispositivo può quindi visualizzare le visualizzazioni nei browser web connessi con capacità HTML5.

La variante di visualizzazione basata sul web di CODESYS Visualization consente l'accesso remoto a un impianto, nonché il monitoraggio, l'assistenza e la diagnosi a distanza tramite Internet. Un browser web comunica tramite Java Script (eventualmente con crittografia SSL) con il server web del controllore e visualizza la visualizzazione tramite HTML5. Questa tecnologia è supportata da quasi tutti i browser ed è quindi disponibile anche sui dispositivi terminali con iOS o Android.

Configurazione e avvio delle varianti di visualizzazione

Chiamare una pagina nel server web

Identificazione di WebVisu

Per poter identificare un WebVisu con l'aiuto del blocco di libreria ‎VisuFbClientTagDataHelper‎, il WebVisu ha bisogno di un nome. Per poterlo indirizzare in modo specifico nell'applicazione, espandere la chiamata URL con il parametro ‎ClientName=<Name>‎.

Esempio:‎ http://localhost:8080/webvisu.htm?ClientName=VisClientxy‎.

Utilizzo del design reattivo

Un design reattivo si adatta automaticamente alle dimensioni e al layout della variante di visualizzazione. Che il dispositivo sia un desktop, un laptop, un tablet, un pannello o uno smartphone, si tiene conto delle specifiche del dispositivo in questione e si adattano le dimensioni e il layout della visualizzazione.

Per fornire questa comoda funzione all'utente della visualizzazione, è necessario configurare le varianti di visualizzazione e gli elementi di visualizzazione in base alle dimensioni del client. Questo aspetto è rilevante per la visualizzazione sul Web, perché qui ci sono client di dimensioni diverse. Tuttavia, la caratteristica può essere utilizzata allo stesso modo per la visualizzazione del target.

Il design reattivo è particolarmente adatto alla visualizzazione sul web. Tuttavia, le impostazioni di configurazione devono essere effettuate anche per la visualizzazione di destinazione o per la visualizzazione integrata.

Preparazione della visualizzazione web

1. In Visualization Manager, aprire l'oggetto WebVisu.

2. Specificare il tipo di scala.

- Selezionare l'opzione di scalatura «Fixed».

E selezionare l'opzione «Usa le dimensioni del client rilevate automaticamente». Con il tipo di ridimensionamento «Fixed», il contenuto dell'oggetto di visualizzazione (pagina principale) viene visualizzato senza ridimensionamento. Le dimensioni del display vengono determinate automaticamente.

La variabile ‎Container ‎ è riconosciuta nel progetto. Ora è possibile configurare gli elementi di visualizzazione come descritto di seguito per assicurarsi che vengano visualizzati spostati o ridimensionati a seconda del client.

- Oppure selezionare una delle opzioni di scala, «Isotropic» o «Anisotropic».

a. Nella struttura del dispositivo, aprire Visualization Manager. L'opzione «Dimensione di visualizzazione reattiva» si trova nella scheda «Impostazioni» nel gruppo «Impostazioni aggiuntive».

b. Selezionare l'opzione. La funzione "visualizzazione reattiva" è attivata nell'intera applicazione. Con i tipi di ridimensionamento «Isotropic» e «Anisotropic», l'intero contenuto di una pagina principale viene ridimensionato in base alle dimensioni di visualizzazione fornite dal client. La dimensione del client viene rilevata automaticamente.

Ora è possibile configurare gli elementi di visualizzazione come descritto di seguito per assicurarsi che vengano visualizzati posizionati o ridimensionati a seconda del client.

Utilizzo del tipo di scalatura "Fisso

Con il tipo di ridimensionamento «Fixed», i contenuti della visualizzazione vengono visualizzati senza ridimensionamento. Tuttavia, gli elementi vengono spostati o ridimensionati a seconda del client se sono configurati come descritto di seguito.

Aggancio allineato a destra dell'elemento di visualizzazione

A tal fine, configurare come segue:

- Movimento assoluto, Movimento, X: ‎Container.Width - Visu.Width‎

Riempire un'area

Questo è possibile con gli elementi Trend, Trace o Grafico cartesiano XY.

A tal fine, configurare come segue:

- Movimento relativo, Movimento in basso a destra, X: Larghezza.contenitore - Larghezza.visuale

- Movimento relativo, Movimento in basso a destra, Y: Altezza contenitore - Altezza visuale

Impostazione di una nuova posizione per un elemento

A tal fine, configurare come segue:

- Movimento assoluto, Movimento, X: SEL(IsPortrait(Container), 0, -250)

- Movimento assoluto, Movimento, Y: SEL(IsPortrait(Container)), 0, 150)

Nascondere un elemento

La proprietà Invisible element consente di visualizzare molti elementi diversi per le diverse dimensioni dei client.

A tal fine, configurare come segue:

- Variabili di Stato, Invisibili: ‎IsPortrait(Container)‎

Utilizzando il tipo di scalatura "Isotropico" o "Anisotropico".

Con i tipi di ridimensionamento "isotropico" e "anisotropico", l'intero contenuto di una pagina principale viene ridimensionato in base alle dimensioni di visualizzazione fornite dal client. Se l'orientamento della pagina di una tavoletta, ad esempio, viene ruotato da orizzontale a verticale, i contenuti non corrispondono al rapporto di aspetto. Si creano barre di grandi dimensioni e la pagina non può essere riempita in modo ottimale.

Per evitare ciò, in precedenza era necessario creare una pagina (visualizzazione) separata per ciascuno dei formati verticale e orizzontale. Questi vengono avviati tramite il ClientListener con la pagina iniziale corretta. Ora questo può essere ottenuto più facilmente tramite il ridimensionamento reattivo senza dover duplicare gli oggetti di visualizzazione.

Con il ridimensionamento reattivo dal formato orizzontale a quello verticale, le tessere più lontane dal lato destro vengono spostate in basso a destra con un movimento assoluto. Le dimensioni della pagina si adattano dinamicamente alle dimensioni attuali del client e gli elementi vengono posizionati in modo ottimale all'interno di essa. Quando si passa dal formato verticale a quello orizzontale, gli elementi vengono spostati nella direzione opposta.

Esempio

La pagina principale di una visualizzazione è composta da diverse "tessere" programmate con elementi di cornice. Questi elementi della cornice devono essere riposizionati e spostati se l'orientamento della visualizzazione cambia e sono adattati alle dimensioni correnti del display.

Spostamento delle tessere nelle direzioni X e Y

Configurare come segue:

- Proprietà: Movimento assoluto, Movimento, X: SEL(IsPortrait(Container), 0, -250)

- Proprietà: Movimento assoluto, Movimento, Y: SEL(IsPortrait(Container)), 0, 150)

Implementazione di IsPortrait per determinare la dimensione della visualizzazione

FUNCTION IsPortrait : BOOL
    VAR_INPUT    sizeProvider : VisuElems.ISizeProvider;
END_VAR
IF sizeProvider.Width < sizeProvider.Height THEN 
    IsPortrait := TRUE;
END_IF

Calcolo del movimento in direzione X e Y con espressioni tipiche nell'ambito della proprietà «Movimento assoluto»