ePageStudio builder pagine web HMI

La crescente diffusione dell’Industria 4.0 e dell’Industria IoT ha reso sempre più importante disporre di interfacce uomo-macchina (HMI) accessibili da qualsiasi dispositivo, semplici da realizzare e facili da mantenere. ePageStudio nasce con l’obiettivo di offrire un ambiente di sviluppo per creare pagine Web HMI in modo rapido, senza dover scrivere manualmente codice HTML, CSS o JavaScript. Con ePageStudio è possibile creare una supervisione HMI accessibile tramite browser Web senza utilizzare un pannello operatore dedicato.

Un ambiente di sviluppo visuale

Con ePageStudio la progettazione dell’interfaccia avviene attraverso un editor grafico che consente di inserire e configurare i vari elementi della pagina mediante operazioni di drag & drop. Pulsanti, indicatori LED, caselle di testo, immagini, grafici, tabelle e numerosi altri controlli possono essere aggiunti e personalizzati direttamente dall’interfaccia di sviluppo, riducendo drasticamente i tempi di progettazione. Il risultato è una pagina Web moderna, responsive e utilizzabile sia da PC che da tablet e smartphone.

Integrazione con i nostri sistemi programmabili ed aggiornamento dinamico dei dati

Le pagine generate da ePageStudio sono caricate direttamente nei nostri sistemi programmabili (PLC) SlimLine e gestite dal web server integrato, diventando fruibili da qualsiasi browser sia da PC che da tablet e smartphone.

Le pagine sono progettate per aggiornarsi dinamicamente senza richiedere il continuo ricaricamento della pagina. I vari oggetti grafici si connettono direttamente alle variabil (TAGs) del PLC visualizzandone in tempo reale i rispettivi valori. Questo garantisce una navigazione fluida ed una risposta immediata ai comandi dell’operatore.

Step 1: Esportazione simboli da programma LogicLab

Pulsanti, indicatori LED, campi numerici, barre di avanzamento, grafici e altri controlli sono collegati alle variabili dell’applicazione PLC, per semplificare questa operazione, ePageStudio è integrato con l’ambiente di sviluppo LogicLab. È sufficiente eseguire il Symbols Converter, esportando l’elenco delle variabili del progetto PLC in un file CSV. Il file generato verrà importato in ePageStudio, rendendo immediatamente disponibili tutte le variabili per l’associazione agli oggetti grafici.

In questo modo non occorre inserire manualmente i nomi delle variabili, riducendo il rischio di errori di configurazione e velocizzando lo sviluppo dell’interfaccia HMI. Inoltre, in caso di modifiche al progetto PLC, è sufficiente rigenerare il file CSV e reimportarlo per sincronizzare automaticamente l’elenco delle variabili disponibili.

Step 2: Creazione/Apertura progetto ePageStudio

Per sviluppare una nuova applicazione HMI o modificarne una esistente, accedere al builder. Viene visualizzato l’ambiente di sviluppo (IDE), dal quale è possibile progettare e configurare l’interfaccia grafica. Nella parte superiore della finestra è presente la toolbar, che raccoglie i principali comandi utilizzati. I progetti sono distribuiti in un unico file in formato ZIP, con tutte le informazioni necessarie al funzionamento: pagine, immagini, risorse, configurazioni e impostazioni. Questo semplifica l’archiviazione, il backup e la condivisione dei progetti, consentendo di trasferire facilmente un’intera applicazione da un computer a un altro senza perdere alcuna configurazione.

Per creare un nuovo progetto, fare clic sul pulsante New Project, verrà richiesto di specificare il nome del progetto e le dimensioni della pagina. Dopo la conferma, verrà generata una pagina vuota che costituirà l’area di lavoro sulla quale sarà possibile inserire e configurare gli oggetti grafici dell’HMI.

Per aprire un progetto esistente, fare clic sul pulsante Open Project, si aprirà una finestra nella quale è possibile trascinare il file del progetto (drag & drop) oppure con un clic all’interno è possibile aprire Esplora File e cercare il progetto memorizzato sul proprio PC. Selezionato il progetto vengono caricate nell’IDE le pagine, gli oggetti grafici, le risorse e le configurazioni precedentemente salvate.

Step 3: Caricamento variabili PLC

Dopo aver creato il progetto è necessario importare l’elenco delle variabili PLC per poterle associare agli oggetti grafici dell’interfaccia HMI. L’importazione viene eseguita selezionando il file CSV generato dal Symbols Converter di LogicLab (Vedi Step 1). Durante questa operazione, ePageStudio acquisisce automaticamente tutte le variabili esportate, rendendole disponibili all’interno dell’ambiente di sviluppo.

Qualora il progetto PLC venga modificato con l’aggiunta, la rimozione o la rinomina di variabili, è sufficiente rigenerare il file CSV tramite il Symbols Converter e reimportarlo per aggiornare automaticamente l’elenco delle variabili disponibili, mantenendo sincronizzati il progetto PLC e l’interfaccia HMI.

Step 4: Creazione dashboard

Per realizzare la dashboard è sufficiente trascinare nell’area di lavoro gli oggetti desiderati dalla toolbar posta nella parte superiore dell’ambiente di sviluppo. Sono disponibili numerosi controlli grafici, quali pulsanti, indicatori LED, campi numerici, barre di avanzamento, grafici, immagini e altri componenti dell’interfaccia HMI.

Una volta inserito un oggetto nella dashboard, è possibile selezionarlo per modificarne le proprietà attraverso il pannello di configurazione. Per ciascun controllo è possibile personalizzarne l’aspetto grafico, la posizione, le dimensioni, il comportamento e associare le variabili PLC precedentemente importate, definendo così l’interazione tra l’interfaccia operatore e l’applicazione PLC.

Step 5: Download progetto

Completata la configurazione della dashboard od ogni qual volta si desideri salvare il lavoro effettuato, è possibile esportare il progetto facendo clic sul pulsante Download presente nella toolbar. L’operazione genera un archivio in formato ZIP contenente tutti i file necessari al progetto. Il file viene salvato con il nome del progetto (nell’esempio MyProject.zip).

Poiché il browser salva normalmente i file scaricati nella cartella Download del PC, se è già presente un file con lo stesso nome, al nuovo download viene automaticamente aggiunto un numero progressivo (ad esempio MyProject (1).zip, MyProject (2).zip, ecc.), evitando la sovrascrittura dei file precedenti.

L’archivio ZIP ottenuto può quindi essere utilizzato per la distribuzione del progetto o per il successivo caricamento sul dispositivo di destinazione.

Step 6: Trasferimento del progetto sul PLC

Eseguito il download del file ZIP del progetto utilizzando Esplora file di Windows, connettersi al PLC SlimLine tramite FTP inserendo nella barra degli indirizzi il percorso nel formato: ftp://Utente:Password@IndirizzoIP

Stabilita la connessione, accedere al disco C:\Web del PLC e creare, se non già presente, la cartella ePageStudio. Infine, copiare all’interno della cartella tutti i file estratti dall’archivio ZIP del progetto. Al termine del trasferimento, il progetto sarà disponibile sul PLC e potrà essere eseguito accedendo all’interfaccia web del dispositivo.

Step 7: Accesso dashboard

Dopo aver trasferito i file del progetto sul PLC, la dashboard è immediatamente disponibile e può essere visualizzata da qualsiasi dispositivo dotato di un browser web collegato alla stessa rete.Per accedere all’interfaccia HMI è sufficiente digitare nella barra degli indirizzi del browser l’URL della pagina del progetto, ad esempio: http://IndirizzoIP/ePageStudio/page.html.

Caricata la pagina, tutti gli oggetti grafici della dashboard (pulsanti, indicatori LED, campi numerici, grafici, barre di avanzamento e altri controlli) verranno visualizzati e saranno collegati in tempo reale alle variabili del PLC, consentendo all’operatore di monitorare lo stato dell’impianto e di interagire direttamente con l’applicazione PLC tramite il browser, senza la necessità di installare software aggiuntivo.