Skip to main content

Procedura di base

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

Puoi integrare un controllo HTML5 che hai sviluppato tu stesso o preso da una fonte esterna nel tuo CODESYS sistema di programmazione. Per fare ciò, procedi come segue.

Procedura. Preparazione

  1. Crea un JavaScript file denominato ElementWrapper.js per il tuo controllo HTML5. Oppure copia un file wrapper degli elementi dall'esempio dell'API HTML5 (ad esempio, il file JS HTML5DemoButton elemento).

  2. Rinomina l'oggetto wrapper nel file JS. Il nome è predefinito ed è composto dal nome dell'elemento con ElementWrapper aggiunto ad esso.

    Importante

    Il nome del file deve essere sempre ElementWrapper.js. E l'oggetto wrapper richiamato in esso, che viene generato dal framework in fase di esecuzione, richiede un nome assegnato all'elemento secondo la seguente logica:

    <element name>ElementWrapper

    Nel file JS per il tuo elemento, il nome dell'oggetto wrapper corrisponde al nuovo controllo.

    Il seguente frammento di codice lo mostra per HTML5DemoButton controllo:

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. Specifica tutti i file necessari per eseguire l'elemento. Questi possono essere file di fogli di stile (CSS) JavaScript file (JS) o file di immagine (SVG).

  4. Crea un'immagine dell'elemento (ElementImage.svg). Dopo l'installazione, l'elemento viene visualizzato nel Visualization Toolbox vista.

Procedura. Integrazione nel sistema di programmazione

  1. Creare un file XML (.html5control.xml) con informazioni generali. Editor di controllo HTML5 ti aiuta in questo.

    Suggerimento

    Le opzioni dell'HTML5 Control Editor sono descritte nel capitolo "Editor di controllo HTML5«.

  2. Crea la mappatura delle proprietà del controllo HTML5 su CODESYS proprietà degli elementi di visualizzazione.

  3. Localizza i testi dell'interfaccia.

  4. Installa l'elemento.

  5. Firma l'elemento.

Suggerimento

Segui le istruzioni dettagliate Processo di sviluppo consigliato con consigli dettagliati per il debug.

In questa sezione: