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**
.. code-block:: HTML
SlimLine - Simple page
This page is served by the SlimLine
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. **
.. code-block:: HTML
Definizione tipo oggetto (data-ejptype)
---------------------------------------
Questo attributo server per disegnare diversi oggetti grafici.
`` data-ejptype="circularled" ``
Disegna un oggetto LED.
.. code-block:: HTML
LED
+--------------+----------------+---------------------------+
| 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. **
.. code-block:: HTML
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. **
.. code-block:: HTML
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.
.. code-block:: HTML
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.
.. code-block:: HTML
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.
.. code-block:: HTML
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).
.. code-block:: HTML
Crea un livello logico block-level. Soprattutto per l'uso dei CSS.
.. code-block:: HTML
+-----------+-----------------+-----------------+-----+
| Element | TAG HTML | Descrizione | R/W |
+===========+=================+=================+=====+
| INPUT (1) | | | |
+-----------+-----------------+-----------------+-----+
| DIV |
< | testo. | |
| | /p> | | |
+-----------+-----------------+-----------------+-----+
| SPAN | < | testo. | |
| | /span> | | |
+-----------+-----------------+-----------------+-----+
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.
.. code-block:: HTML
eAddOnRefreshFct Example
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”
.. code-block:: HTML
eJPOnLoadFct Example
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.
.. code-block:: HTML
eJPSetEntity Example
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".
.. code-block:: HTML
eJPGetEntity Example
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”
.. code-block:: HTML
eJPGRequest Example
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”
.. code-block:: HTML
eJPGSend Example