ePageStudio – quick start

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.

Le pagine generate da ePageStudio sono caricate direttamente nei nostri sistemi programmabili 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.

Preparazione

1. Per prima cosa, esportare i simboli del programma PLC utilizzando lo strumento Symbols Converter di LogicLab, accessibile dal menu Tools > Symbols Converter. Nella finestra che si apre, fare clic sul pulsante To Csv per generare il file CSV, che verrà successivamente importato in ePageStudio.

2. Per creare una nuova applicazione o modificarne una esistente, accedere a ePageStudio al seguente indirizzo https://epagestudio.elsist.biz/

3. Se abbiamo scelto di creare un nuovo progetto, fare clic sul pulsante + nella toolbar, come mostrato nella figura seguente. Nella finestra che si apre, inserire il Nome progetto e specificare la larghezza e l’altezza, in pixel (px), del canvas, ovvero l’area di lavoro all’interno della quale verranno aggiunti gli oggetti.

4. Il builder è ora pronto per la configurazione dell’applicazione. Per prima cosa, importare il file CSV generato in precedenza, in modo da rendere disponibili i simboli del programma PLC (variabili e operandi) da associare agli oggetti che verranno inseriti in ePageStudio. Fare clic sull’icona di collegamento [] per avviare la procedura di caricamento, illustrata nella figura seguente.

5. Non appena sarà stato elaborato il file csv vedremo tutte la variabili con gli indirizzi e le descrizioni comparire nella tabella dedicata. Da questo punto in poi, sono disponibili al collegamento.

(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.)

6. Ora possiamo iniziare ad aggiungere elementi al nostro progetto, configurarli e collegarli. Per maggiori dettagli vedi la knowledge specifica alla configurazione.

Apertura, Salvataggio e Deploy.

Apertura di un progetto esistente

Per aprire un progetto creato in precedenza, fare clic sul pulsante Cartella nella toolbar. Si aprirà la finestra Apri progetto, dalla quale sarà possibile importare il file ZIP del progetto desiderato.

Il file può essere caricato in due modi:

• Trascinamento: trascinare il file ZIP nell’apposita area della finestra.
• Selezione del file: fare clic nell’area di caricamento per aprire la finestra di selezione del sistema e individuare il file ZIP. Il browser consentirà di raggiungere la cartella Download o un’altra posizione in cui è stato salvato il file.

Nota: alla successiva apertura di un progetto, il browser potrebbe riproporre la posizione utilizzata durante la selezione precedente.

Salvataggio ed esportazione del progetto

ePageStudio è un’applicazione web-based che consente di riprendere il lavoro dal punto in cui è stato interrotto.

• Ripresa del lavoro: i dati del progetto vengono mantenuti nella memoria locale del browser, consentendo di ritrovare la configurazione precedente anche dopo aver chiuso e riaperto il browser, purché i dati memorizzati non siano stati cancellati.
• Esportazione del progetto: per conservarne una copia, creare una versione separata o passare temporaneamente a un altro progetto, fare clic sul pulsante Download nella toolbar. ePageStudio genererà un file ZIP contenente il progetto, che verrà scaricato nella cartella Download del sistema.
• Gestione delle copie: è possibile esportare più volte il progetto. Se il browser rileva un file con lo stesso nome nella destinazione, può assegnare al nuovo file un nome alternativo, aggiungendo un suffisso progressivo, in base al browser e alle relative impostazioni.

Deploy del progetto

Per inviare il progetto al PLC sono esistono 2 modalità. Una automatica tramite epagestudio-bridge, e una manuale tramite FTP.

Per il trasferimento in modalità automatica è necessario premere su () e seguire le istruzioni a video. Per i passaggi dettagliati vedi ePageStudio-bridge

Per la modalità manuale invece occorerà munirsi di un programma FTP (filezilla o similari) e dopo aver scaricato l’archivio del progetto, caricarlo nella cartella C:\Web\epagestudio\ .

Gestione pagine

ePageStudio consente di organizzare un progetto in più pagine.

Nota: La pagina iniziale deve chiamarsi home, quando il progetto viene visualizzato nel browser, quest’ultimo cercherà di aprire la pagina con questo nome. Se la pagina home non esiste, non verrà visualizzato alcun contenuto.

Nell’angolo inferiore sinistro dell’ambiente di sviluppo è presente un’icona verde che permette di accedere alle funzioni di gestione delle pagine. Da qui è possibile:

• creare nuove pagine facendo clic sul pulsante +;
• impostare un’immagine di sfondo;
• rinominare le pagine;
• eliminare le pagine esistenti.

Passando il puntatore del mouse sull’area dedicata alla gestione delle pagine, verranno visualizzate le icone corrispondenti alle operazioni disponibili.

Nota: le immagini di sfondo per evitare deformazioni o perdita di qualità, si consiglia di utilizzare immagini con dimensioni in pixel uguali a quelle della pagina del progetto.

Cambio e navigazione pagine

Per passare da una pagina all’altra del progetto, selezionare il tool Azione, definire l’area desiderata e assegnarle la pagina di destinazione. Sovrapporre l’area a un oggetto grafico, ad esempio un oggetto Testo. In fase di visualizzazione, facendo clic sull’area, si accederà alla pagina associata.

Nota: il bordo giallo dell’area è visibile solo nel builder, in modalità di modifica.

Accesso e utilizzo dell’interfaccia creata

Dopo aver caricato tutti i file o effettuato il deploy, potremo utilizzare l’interfaccia creata direttamente all’indirizzo del PLC come

http://indirizzo_ip/epagestudio/page.html

Toolbar e legenda

	Un click con il mouse sul pulsante crea un nuovo progetto. Occorre definirne il nome, e le dimensioni.
	Un click con il mouse sul pulsante apre un progetto esistente. Esplorare le cartelle del PC per cercare il progetto da aprire.
	Un click sul pulsante scarica il file ZIP del progetto.
	Un click sul pulsante annulla l’ultima azione effettuata (Undo).
	Un click sul pulsante ripristina l’azione precedentemente annullata (Redo).
	Selezionando un oggetto sulla dashboard un click sul pulsante elimina l’oggetto.
	Un click con il mouse attiva modalità seleziona. Sarà possibile puntare gli oggetti della dashboard per modificarli.
	Un click con il mouse attiva la modalità panoramica (Pan/Mano) per spostarsi liberamente all’interno dell’area di lavoro.
	Un click con il mouse attiva la modalità disegna rettangolo.
	Un click con il mouse attiva la modalità disegna linea/tubo.
	Un click con il mouse attiva la modalità disegna multilinea/spezzata (Ogni click aggiunge un punto, Invio per chiudere la linea).
	Un click con il mouse attiva lo strumento disegno azione. L’azione è un link che permette la navigazione tra le pagine.
	Trascinando l’oggetto (label) sulla dashboard è possibile inserire testo statico o etichette.
	Trascinando l’oggetto (value) sulla dashboard è possibile inserire un oggetto di sola visualizzazione valore variabile.
	Trascinando l’oggetto (input) sulla dashboard è possibile inserire un oggetto di visualizzazione e impostazione valore variabile.
	Trascinando l’oggetto (led) sulla dashboard è possibile inserire una lampada o indicatore luminoso.
	Trascinando l’oggetto (button) sulla dashboard è possibile inserire un pulsante di comando.
	Un click sul pulsante apre il pannello degli elementi e oggetti avanzati disponibili nella libreria.
	Un click sul pulsante apre il pannello di gestione dei livelli per organizzare l’ordine degli oggetti sovrapposti.
	Un click sul pulsante apre la libreria di icone ed elementi grafici SVG.
	Un click sul pulsante attiva la procedura di importazione e gestione delle variabili PLC.
	Un click sul pulsante apre la finestra delle impostazioni di progetto.
	Un click sul pulsante apre la documentazione online e la guida di supporto al software.
	Deploy tramite epagestudio-bridge