Esempio: API HTML5
Prodotto: CODESYS Visualization
Le HTML5_DemoControls.project l'esempio mostra come utilizzare semplici controlli HTML5. Contiene i file aggiuntivi necessari per visualizzare i controlli come elementi di visualizzazione nel CODESYS visualizzazione.
Descrizione
Il progetto di esempio contiene vari controlli HTML5 configurati. La funzionalità dei controlli HTML5 è facilmente riconoscibile in
I controlli sono solo a scopo dimostrativo. Ecco perché hanno un aspetto semplice
Importante
Se un elemento non può essere scaricato sul controller a causa di una firma mancante, viene visualizzato un avviso nella visualizzazione dei messaggi (Visualizzazione categoria). Fai clic su 
pulsante e conferma la seguente finestra di dialogo se ti fidi di questo elemento.
Per ulteriori informazioni, vedere quanto segue:
Informazioni aggiuntive
HTML5DemoButton
Questo controllo mostra come valutare le azioni del mouse tramite un controllo HTML5 e inoltrarle a IEC tramite la configurazione di input. È possibile eseguire gli eventi di input configurati OnMouseDown, OnMouseUpe OnMouseMove.
HTML5DemoCombobox
Questo controllo mostra come utilizzare un'enumerazione IEC in una casella combinata. L'esempio mostra comegetTypeDesc) da una variabile. Mostra anche come trasferire e utilizzare colori e caratteri.
HTML5DemoImage
Questo controllo mostra come utilizzare le immagini in un controllo HTML5.
HTML5DemoResize
Questo controllo mostra come utilizzare le funzioni di WebVisu-Support.js per adattarne le dimensioni e l'ordine Z. Questa funzionalità può essere utilizzata per implementare elementi che si sovrappongono ad altri elementi, ad esempio in un elenco ha discesa.
HTML5DemoTable
Questo controllo mostra come visualizzare e modificare un array IEC in un controllo HTML5. I dati vengono trasmessi in modo ottimizzato. Viene trasmessa solo un'area specifica. Questa soluzione è possibile anche per matrici più grandi con molte righe. È possibile modificare i valori delle celle nella tabella e, di conseguenza, modificare i valori delle variabili di matrice
HTML5DemoTableNoScrollRange
Questo controllo mostra come visualizzare e modificare un array IEC in un controllo HTML5. L'intero array viene trasferito quando un valore nell'array viene modificato. È possibile modificare i valori delle celle e, di conseguenza, modificare i valori delle variabili dell'array.
HTML5DemoTextfield
Questo controllo mostra come diversi tipi di valori scalari IEC possono essere gestiti in entrambe le direzioni (lettura/scrittura).
HTML5DemoDonutGauge
Questo controllo mostra come usare un elemento HTML5 con la libreria d3. Le dimensioni modificabili dell'area del riquadro vengono trasferite direttamente tramite larghezza e altezza. È costituito da un display e da un pulsante per il trascinamento
HTML5DemoBarGauge
Questo controllo mostra come usare un elemento HTML5 con la libreria d3. Le dimensioni modificabili dell'area del riquadro vengono trasferite direttamente tramite larghezza e altezza. Viene visualizzato un elemento a barra modificabile
Requisiti di sistema e restrizioni
Sistema di programmazione | CODESYS Development System (versione 3.5.18.0 o superiore) |
Sistema di esecuzione | CODESYS Control Win (versione 3.5.18.0) |
Componenti aggiuntivi | CODESYS Visualization (versione 4.5.0.0 o superiore) |
Avviso
SCARICA Progetto