Creazione pagine web con libreria eJProbe¶

JSON (JavaScript Object Notation), un sistema di scambio dati molto semplice basato su una formattazione di testo tale da rendere differenti tipi di variabili facilmente rappresentabili e comprensibili da occhi umani come dai linguaggi di scripting o programmazione più diffusi. Nato per soddisfare l’esigenza di potersi interfacciare in modo universale con diverse tecnologie JSON è basato sulla programmazione in JavaScript.

AJAX (Asynchronous JavaScript and XML) è ad oggi la tecnica più utilizzata per sviluppare applicazioni web interattive. Il concetto che sta alla base di una chiamata AJAX è quello di poter scambiare dati tra client e server senza ricaricare la pagina: lo scambio avviene in background tramite una chiamata asincrona dei dati. Questo scambio di dati è realizzato, come si può intuire dall’acronimo, mediante funzioni scritte con il linguaggio JavaScript.

Con il nuovo sistema operativo SFW184 i nostri sistemi SlimLine possono gestire richieste AJAX in formato JSON, e per facilitare l’utente nella realizzazione delle proprie pagine web utilizzando la tecnica AJAX forniamo eJProbe

eJProbe (Elsist Java Probe) è una libreria JavaScript per applicazioni web che si appoggia alla nota libreria jQuery. Si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML gestendo la selezione, la manipolazione e l’animazione di elementi DOM in pagine HTML ed implementando la funzionalità AJAX.

Per utilizzare eJProbe l’utente può creare le sue pagine web utilizzando un qualsiasi editor html oppure un semplice editor di testo come il blocco note. Nelle pagine dovrà includere le librerie JQuery e eJProbe ed utilizzando le funzioni messe a disposizione dalle due librerie è possibile la creazione semplificata di applicazioni Web versatili e dai contenuti dinamici. Queste pagine potranno essere trasferite nelle directory del sistema e verranno visualizzate accedendo da browser web. Ecco un esempio di come è possibile inserire le librerie.

Per trasferire le pagine web create dall’utente nel file system del sistema SlimLine occorre utilizzare un client Ftp (Esempio FileZillla) ma è possibile usare anche il semplice esplora risorse di Windows. Come si vede dalla figura sottostante, impostando nella barra indirizzo le credenziali di accesso al sistema ed il suo indirizzo IP ftp://Admin:Admin@192.168.0.162, è possibile connettersi e visualizzare il file system.

Ecco come si presenta la visualizzazione del file system alla connessione. Le cartelle Project e System sono riservate al sistema e si consiglia di non modificarne il contenuto. I file delle pagine utente possono essere trasferiti nelle cartelle Storage e SDCard (Se presente).

Criteri per realizzazione pagina¶

Per poter utilizzare le facilities messe a disposizione dalla libreria eJProbe occorre includerla nella pagina insieme alla libreria JQuery.

Vediamo ad esempio una semplice pagina che visualizza un messaggio di presentazione.

Sorgente html pagina

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>SlimLine - Simple page</title>
</head>
<body>
This page is served by the <b>SlimLine</b>
</body>
</html>

Salvando il testo riportato in un file, esempio SPage.htm, e trasferendo il file nella directory Storage di SlimLine, sarà possibile visualizzare la pagina web risultante semplicemente digitando nel proprio browser l’indirizzo della pagina.

Data attribute¶

Per gestire la selezione, la manipolazione e l’animazione di elementi DOM in pagine HTML da parte di eJProbe viene utilizzata la proprietà data-ejpformat che permette di definire il formato del dato nell’oggetto HTML. Ecco di seguito i formati gestiti.

data-ejpname	Specifica il nome della variabile che verrà gestita delle funzioni eJPSet
data-ejptype	Specifica il tipo di aggetto grafica che verrà utilizzato per rappresentare la variabile.
data-ejpformat	Definisce il formato del dato nell’oggetto HTML
data-ejpgroup	Indica il gruppo di lettura e di scrittura verso lo SlimLine a cui appartiene la variabile.

Definizione nome variabile (data-ejpname)¶

Per leggere e scrivere i dati sullo SlimLine agli oggetti HTML deve essere aggiunto l’attributo data-ejpname. In questo attributo verrà indicato il nome della variabile da leggere o scrivere sul PLC.

`` data-ejpname=»SysFirstLoop» ``

** Definisce il nome della variabile da leggere e scrivere sul PLC. **

<input type="input" data-ejpname="SysFirstLoop" />

Definizione tipo oggetto (data-ejptype)¶

Questo attributo server per disegnare diversi oggetti grafici.

`` data-ejptype=»circularled» ``

Disegna un oggetto LED.

<div data-ejptype="circularled" style="width: 50px; height: 50px;" data-ejpname="LedDemo" data-ejpgroup="G1" class="blue"/>LED</div>

data-ejptype	Oggetto	class=
circulaled	Disegna un led	Blue, red, green, yellow.

Formattazione dati (data-ejpformat)¶

Per gestire la selezione, la manipolazione e l’animazione di elementi DOM in pagine HTML da parte di eJProbe viene utilizzata la proprietà data-ejpformat che permette di definire il formato del dato nell’oggetto HTML. Ecco di seguito i formati gestiti.

`` data-ejpformat=»date» ``¶

** Definisce un oggetto di tipo data gestendo il valore in Epoch time. **

<input type="input" data-ejpname="datestart" data-ejpformat="date"/>

Fornendo un valore numerico in epoch, viene visualizzata una stringa con la data nel formato Month dd yyyy. Esempio passando il valore 1516962631 viene visualizzato “Jan 26 2018”.

`` eJPSetEntity(«datestart», 1516962631) ``

Viene acquisito il valore dell’elemento in stringa e convertito in un valore numerico epoch. Esempio se l’elemento vale “Jan 26 2018” viene ritornato il valore in epoch 1516962631.

Se la stringa non è nel formato richiesto, viene ritornato 0 e segnalato errore nella console del browser.

`` eJPGetEntity(«datestart») ``

`` data-ejpformat=»time» ``¶

** Definisce un oggetto di tipo ora gestendo il valore in Epoch time. **

<input type="input" data-ejpname="timestart" data-ejpformat="time"/>

Fornendo un valore numerico in epoch, viene visualizzata una stringa con l’ora nel formato hh mm ss. Esempio passando il valore 1516962631 viene visualizzato “10:30:31”.

`` eJPSetEntity(«timestart», 1516962631) ``

Viene acquisito il valore dell’elemento in stringa e convertito in un valore numerico epoch. Esempio se l’elemento vale “10:30:31” viene ritornato il valore in epoch 1516962631.

Se la stringa non è nel formato richiesto, viene ritornato 0 e segnalato errore nella console del browser.

`` eJPGetEntity(«timestart») ``

data-ejpformat=»datetime»¶

Definisce un oggetto di tipo data-ora gestendo il valore in Epoch time.

<input type="input" data-ejpname="datetimestart" data-ejpformat="datetime"/>

Fornendo un valore numerico in epoch, viene visualizzata una stringa con la data e l’ora nel formato Month dd yyyy hh:mm:ss . Esempio passando il valore 1516962631 viene visualizzato “Jan 26 2018 10:30:31”.

eJPSetEntity("datetimestart", 1516962631)

Viene acquisito il valore dell’elemento in stringa e convertito in un valore numerico epoch. Esempio se l’elemento vale “Jan 26 2018 10:30:31” viene ritornato il valore in epoch 1516962631.

Se la stringa non è nel formato richiesto, viene ritornato 0 e segnalato errore nella console del browser.

eJPGetEntity("datetimestart")

Definizione gruppo variabile (data-ejpgroup)¶

Per leggere e scrivere i dati sullo SlimLine agli oggetti HTML deve essere aggiunto l’attributo data-ejpname. In questo attributo verrà indicato il nome della variabile da leggere o scrivere sul PLC.

`` data-ejpgroup=»G1» ``

Definisce il gruppo della variabile da leggere e scrivere sul PLC.

<input type="input" data-ejpname="SysFirstLoop" data-ejpgroup="G1"/>

Elementi HTML gestiti da eJProbe¶

Gli elementi HTML (Chiamati anche tag HTML) sono entità che specificano come il documento HTML deve essere costruito. La libreria eJProbe permette di operare su molti elementi HTML gestendo sia la valorizzazione che l’acquisizione del valore.

<input type="text">

Crea una casella di testo a linea singola. Size imposta la lunghezza della casella. Maxlength imposta il numero massimo di caratteri inseribili (può essere più grande di Size).

<input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
<div data-ejpname="Date" ejpgroup="G1"></div>

Crea un livello logico block-level. Soprattutto per l’uso dei CSS.

<div data-ejpname="Date" ejpgroup="G1"></div>

Element	TAG HTML	Descrizione	R/W
INPUT (1)	<input data-ejpname=»D ate-Time» size=»32» data-ejpformat= «datetime» data-ejpgroup=» G1» type=»input» placeholder=»Da te»/>	Oggetto di visualizzazione ed inputazione	R/W
DIV	<div data-ejpname=”D ate” ejpgroup=»G1»>< /div>	Oggetto di visualizzazione e di contenuto.	R
P	<p data-ejpname=”D ate” ejpgroup=»G1»>< /p>	Oggetto di visualizzazione e di contenuto testo.	R
SPAN	<span data-ejpname=”D ate” ejpgroup=»G1»>< /span>	Oggetto di visualizzazione e di contenuto testo.	R

Funzioni JProbe¶

La proprietà data-attribute permette di definire il formato di visualizzazione del dato nell’oggetto HTML.eAddOnLoadFct, add function to page on load

eAddOnRefreshFct, execute function every X seconds (refresh)¶

Questa funzione si occupa di chiamare le funzioni passategli ogni Xsecondi.

Prototype
eAddOnRefreshFct(Time,Fct)

Parameters
Time(int)	Intervallo chiamate funzioni
Fct (function)	Nome della funzione da eseguire

Return Value
(void)	La funzione non ha ritorni.

Esempi

Viene impostato il tempo di refresh della variabili del gruppo 1 (G1) ogni 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eAddOnRefreshFct Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eJProbe.js"></script>
<script>

  // Set group “G1” variables automatic refresh every 2 second.

  eAddOnRefreshFct(2000,function()
  {
    eJPGRequest('G1', 'demo.php', null, null);
  });
</script>
</head>
<body>
  <input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
</body>
</html>

eJPOnLoadFct, execute function on page load¶

Forza l’esecuzione delle funzione passata come parametro sul load della pagina HTML. In pratica la funzione passata come parametro verrà automaticamente eseguita non appena viene terminato il caricamento della pagina.

Prototype
eJPOnLoadFct(Fct)

Parameters
Fct (function)	Nome della funzione da eseguire

Return Value
(void)	La funzione non ha ritorni.

Esempi

Al caricamento della pagina viene valorizzato l’oggetto input visualizza “Jan 01 2018 00:00:00”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eJPOnLoadFct Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eJProbe.js"></script>
<script>

  // Execute eJPSetEntity and  eJPGRequest on page load

  eJPOnLoadFct(function()
  {
    eJPSetEntity('Mio', 122);  //Esempio
    eJPGRequest('G1', 'demo.php', null, null);
  });
</script>
</head>
<body>
    <input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
    <input data-ejpname="Mio" data-ejpformat="number" type="input" placeholder="Mio"/>
</body>
</html>

eJPSetEntity, set value of entities¶

Scrive il valore indicato su tutti gli elementi del DOM che hanno la proprietà data-ejpname settata con il valore indicato.

Prototype
eJPSetEntity(“Mio”, 122);

Parameters
Entity (string)	Valore di data-jpname dell’elemento da aggiornare
Value (string)	La pagina verso la quale mandare la richiesta dei dati da leggere.

Return Value
(void)	La funzione non ha ritorni.

Esempi

Al non appena la pagina ha concluso il caricamento nell’input con data-ejpname=»Mio» verrà inseriro il valore 122.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eJPSetEntity Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eJProbe.js"></script>
<script>

        // Write 122 in Mio Entity

        eJPOnLoadFct(function()
        {
                eJPSetEntity('Mio', 122);  //Esempio
                eJPGRequest('G1', 'demo.php', null, null);
        });
</script>
</head>
<body>
    <input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
    <input data-ejpname="Mio" data-ejpformat="number" type="input" placeholder="Mio"/>
</body>
</html>

eJPGetEntity, get value of entities¶

Ritorna il valore dell’elemento del DOM che hanno la proprietà data-ejpname settata con il valore indicato.

Prototype
eJPGetEntity(“Mio”);

Parameters
Entity (string)	Valore di data-jpname dell’elemento da ottenere il valore

Return Value
(number)	La funzione ritorna un numero nel caso L’Entità abbia come attributo data-ejpformat=»number»
(epoch)	La funzione ritorna un valore epoch nel caso L’Entità abbia come attributo data-ejpformat=»datetime»

Esempi

Al non appena la pagina ha concluso il caricamento verrà mostrato nell’alert il valore inserito nell’input con data-ejpname=»Mio».

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eJPGetEntity Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eJProbe.js"></script>
<script>

        // Alert the value of Entity Mio on page load

        eJPOnLoadFct(function()
        {
                alert(eJPGetEntity('Mio'));  //Esempio
                eJPGRequest('G1', 'demo.php', null, null);
        });
</script>
</head>
<body>
    <input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
    <input data-ejpname="Mio" data-ejpformat="number" type="input" placeholder="Mio"/>
</body>
</html>

eJPGRequest, request group variable values to the script¶

Esegue invio in POST della richiesta del valore delle variabili definite nel gruppo indicato nel formato JSON verso l’URL. La risposta ricevuta deve contenere i valori richiesti nel formato JSON e la funzione provvede automaticamente ad aggiornare i singoli oggetti.

Prototype
eJPGRequest(“G1”, “demo.php”, null, null);

Parameters
Group (string)	Gruppo di definizione variabili
URL (string)	URL verso cui inviare i valori delle variabili.
Pre (function)	Nome della funzione da eseguire prima di inviare i valori (Opzionale).
Post (function)	Nome della funzione da eseguire dopo aver inviato i valori (Opzionale).

Return Value
(void)	La funzione non ha ritorni.

Esempi

Al caricamento della pagina verrà richiesto il valore di tutti i membri dell gruppo 1 “G1”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eJPGRequest Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eJProbe.js"></script>
<script>

        // Read from SlimLine and set all variables of G1

        eJPOnLoadFct(function()
        {
                alert(eJPGetEntity('Mio'));  //Esempio
                eJPGRequest('G1', 'demo.php', null, null);
        });
</script>
</head>
<body>
    <input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
    <input data-ejpname="Mio" data-ejpformat="number" type="input" placeholder="Mio"/>
</body>
</html>

eJPGSend, send group variable values to the script¶

Esegue invio in POST del valore delle variabili definite nel gruppo indicato nel formato JSON verso l’URL.

Prototype
eJPGSend(“G1”, “demo.php”, null, null);

Parameters
Group (string)	Gruppo di definizione variabili
URL (string)	URL verso cui inviare i valori delle variabili.
Pre (function)	Nome della funzione da eseguire prima di inviare i valori (Opzionale).
Post (function)	Nome della funzione da eseguire dopo aver inviato i valori (Opzionale).

Return Value
(void)	La funzione non ha ritorni.

Esempi

Al caricamento della pagina verrà inviato allo SlimLine il valore di tutti i membri dell gruppo 1 “G1”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eJPGSend Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eJProbe.js"></script>
<script>

        // Send to SlimLine add value of G1 Entity

        eJPOnLoadFct(function()
        {
                alert(eJPGetEntity('Mio'));  //Esempio
                eJPGSend('G1', 'demo.php', null, null);
        });
</script>
</head>
<body>
    <input data-ejpname="Date-Time" size="32" data-ejpformat="datetime" data-ejpgroup="G1" type="input" placeholder="Date"/>
    <input data-ejpname="Mio" data-ejpformat="number" type="input" placeholder="Mio"/>
</body>
</html>