Processo di sviluppo consigliato

Controllo demo come modello

Scarica l'esempio di API HTML5 sul tuo computer. Quindi la demo si controlla con JavaScript sono a tua disposizione.

Si consiglia di utilizzare la copia di un ElementWrapper.js partendo dagli esempi HTML5 come modello e adattando il nome e la funzionalità al controllo HTML5.

Per ulteriori informazioni, vedere Esempio: HTML5-API

Test della funzionalità del controllo HTML5

Ti consigliamo di testare prima il tuo controllo HTML5 su una pagina demo HTML. Il controllo HTML5 può essere visualizzato nel browser ElementWrapper lo script e la funzionalità possono essere testati. Si inizia a creare il JavaScript file (ElementWrapper.js) solo dopo che la funzionalità è stata testata con successo.

Nota

Per CODESYS Visualization V4.8.0.0 e versioni successive, il file JS ElementWrapper viene creato automaticamente quando viene creato un nuovo controllo HTML5. Contiene solo il framework. La funzionalità specifica dell'elemento deve essere aggiunta nel passaggio successivo

Crea la pagina HTML TestControl.html per testare lo script senza ulteriori installazioni in CODESYS.

Struttura della pagina HTML

<!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

Includi file aggiuntivi (JavaScript file o fogli di stile) per il controllo HTML5 in questa pagina di test. Si tratta di file responsabili del layout o che forniscono
Ciò corrisponde a un'importazione di script per rendere disponibili i sorgenti.
Esempio di codice
```
<link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>
```
Può essere inserito sopra la riga seguente:
```
<script type="text/javascript" src="ElementWrapper.js"> 
 </script> 
```
Visualizza l'elemento (senza ElementWrapper) nel browser e testane la funzionalità.
Dopo che il test è stato completato con successo, puoi iniziare a creare JavaScript file (ElementWrapper.js).

Creando il `ElementWrapper`

Programma il ElementWrapper sceneggiatura.

Il codice di esempio crea un pulsante con un testo e un colore. La dimensione è impostata al 100% perché il controllo HTML5 può riempire completamente lo spazio creato dal framework. Inoltre, IFrame viene creato per ogni controllo HTML5. Pertanto, il controllo HTML5 può essere aggiunto direttamente in document.body.

Codice di esempio

var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

È possibile creare un'istanza e visualizzare il controllo HTML5 utilizzando la pagina HTML Test.html e il ElementWrapper sceneggiatura.
È inoltre possibile testare i singoli metodi nel ElementWrapper utilizzando un loop funzione che viene avviata tramite un timer.
Le ElementWrapper lo script fornisce la funzionalità.

Creazione di un controllo HTML5

Ora puoi creare il controllo HTML5. L'editor di controllo HTML5 ti aiuta
1. Sul Generale scheda, configura il nuovo elemento.
2. Sul Proprietà di controllo scheda, specificare le proprietà desiderate.
3. Crea una nuova proprietà di tipo Variabile. Metodo di chiamata colonna, specificare il nome del metodo desiderato.
  In questo modo le variabili vengono trasferite ai metodi di controllo.
  Suggerimento
  Per acquisire familiarità con le funzionalità, è utile aprire gli esempi nell'editor di controllo HTML5.
  Per ulteriori informazioni, vedere: Riferimento: Editor di controllo HTML5
4. Sul Localizzazione scheda, localizza i testi dell'interfaccia del controllo per le varie lingue.
  I testi sono localizzati. L'elemento può essere localizzato in diverse lingue
5. Salva la tua configurazione con il nome di controllo e installala nel CODESYS Repository degli elementi di visualizzazione.
  Per fare ciò, usa icona di comando.
  Per ulteriori informazioni, vedere: Prima installazione di un controllo HTML5
È ora possibile utilizzare il controllo HTML5 in una visualizzazione.

Usare un controllo HTML5

Crea un CODESYS progetto con una visualizzazione e trascina il nuovo elemento nell'editor di visualizzazione.
Configura le proprietà dell'elemento e assegna la variabile che il nuovo controllo deve visualizzare.
Compila e avvia l'applicazione. E avvia la visualizzazione su un
Possono monitorare la tua visualizzazione in modalità online.

Debug del controllo HTML5

La sezione seguente descrive come verificare la presenza di errori nel browser nel controllo HTML5.

To enable the functionality, you need to call the URL with the debug parameter DebugHTML5=true:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

Procedura. Debug nel browser

Fai clic con il pulsante destro del mouse sulla pagina nel browser. Seleziona il Ispeziona opzione nel menu contestuale che si apre.
Le DevTools si apre la pagina del browser.
Fai clic su Fonti scheda.
On the Sources tab, you will find a tree structure where the file elementwrapper<index>.js is located. The index is automatically appended to the file name to ensure uniqueness on the controller.
Il file viene salvato nel sistema di runtime nella cartella "PlcLogic/visucartella».
Il modo più rapido per implementare e testare le correzioni dei bug consiste nell'apportare le modifiche necessarie al file archiviato nel sistema di runtime.
1. Cambia il ElementWrapper file per il debug.
2. Seleziona il "Ricaricaopzione "nel browser.
  L'elemento viene aggiornato e può essere testato.
3. Suggerimento
  Si consiglia di avviare il locale CODESYS Control come runtime. Il runtime viene eseguito localmente sul tuo computer. Ciò consente di aprire la cartella di sistema di runtime in Explorer e aprire e modificare JavaScript con un editor di testo esterno.
  elementwrapper<index>.js
4. Imposta un punto di interruzione nel costruttore o nei metodi per eseguire il debug della funzionalità nel browser. Dovresti avere familiarità con le opzioni di debug
Gli errori sono stati identificati e corretti. L'elemento di test ora si comporta correttamente.
Transfer the changes in the test JavaScript elementwrapper<index>.js to the original ElementWrapper.js file.
Installa nuovamente il controllo HTML5.
Le modifiche sono in vigore. L'elemento si comporta di conseguenza.

Esempio

La pagina collegata di seguito fornisce esempi delle varie funzioni e caratteristiche relative ai controlli HTML5.

Avviso

Progetto di esempio: API HTML5

Le chiamate API utilizzate sono descritte nella seguente guida per sviluppatori:

Riferimento: sviluppo del controllo HTML5

In questa sezione: