



AVVISO

Raccomandazioni per la sicurezza dei dati
Al fine di ridurre al minimo il rischio di violazione della sicurezza dei dati, raccomandiamo le seguenti misure organizzative e tecniche per il sistema su cui girano le vostre applicazioni:
Per quanto possibile, evitare di esporre il PLC e le reti di controllo a reti aperte e a Internet. Per la protezione, utilizzare livelli di collegamento dati aggiuntivi come una VPN per l'accesso remoto e installare meccanismi di firewall. Limitare l'accesso alle persone autorizzate, modificare le password standard esistenti durante la prima messa in funzione e continuare a modificarle regolarmente.
Se si desidera comunque pubblicare il proprio WebVisu, si consiglia vivamente di assegnargli almeno una protezione con password di base per impedire l'accesso alle funzionalità del PLC tramite Internet.
È 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
Nel progetto esiste una visualizzazione eseguibile visMain.
-
Selezionare l'oggetto «Visualization manager» e selezionare il comando «Aggiungi oggetto».
-
Selezionare l'oggetto «WebVisu» e inserire il nome
WebVisu_A.C'è un nuovo oggetto nella struttura dei dispositivi sotto l'oggetto «Visualization Manager». Si apre l'editor associato.
Il task di visualizzazione
VISU_TASKviene aggiunto automaticamente alla configurazione del task. -
Selezionate la visualizzazione
visMainnel menu «Avvia la visualizzazione». -
In «Nome del file .htm», inserite il nome
webvisuA. -
Fare clic su «Mostra visualizzazioni utilizzate» e verificare se la visualizzazione selezionata è attivata per il download sul dispositivo associato.
La visualizzazione è configurata. Le impostazioni in «Opzioni di scalatura» determinano le dimensioni della finestra e la scalatura.
-
Avviare un sistema di runtime adeguato con server web e supporto WebVisu.
Configurare le impostazioni di comunicazione del sistema.
Il sistema di runtime viene eseguito.
-
Compilare, caricare e avviare l'applicazione.
L'applicazione e il server web vengono eseguiti.
-
Avviate un browser web con il seguente indirizzo:
http://localhost:8080/webvisuA.htmLa pagina viene visualizzata e si possono vedere i dati dell'applicazione e utilizzare l'applicazione.
Vedi anche
Chiamare una pagina nel server web
Requisiti: Viene avviata una visualizzazione con WebVisu.
-
Avviare un browser corrente con JavaScript e supporto di HTML5-Canvas, ad esempio Firefox, Chrome, IE>=9.
-
Inserire il seguente indirizzo nel browser web:
http://localhost:8080/webvisu.htmFormale:
http://<IP address of webserver>:<port of webserver>/<name of HTM-file><name of HTM-file>è la pagina iniziale HTML della visualizzazione definita nell'oggetto «WebVisu».La pagina viene visualizzata e si possono vedere i dati dell'applicazione e utilizzare l'applicazione.
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.
Vedi anche
Utilizzo del design reattivo
In CODESYS Visualization versione 4.7.0.0 e successive, è possibile progettare visualizzazioni reattive.
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»