Custom widget

Introduzione

Stai lavorando a un progetto per un hotel e il cliente chiede la visualizzazione degli stati di molte stanze: è possibile farlo, ma il risultato sarebbe un caos grafico. Con il componente Custom Widget si possono creare elementi grafici che rappresentano lo stato di più parametri; per esempio puoi creare un elemento grafico che rappresenta tutte le informazioni di ogni singola stanza. In questo modo il cliente può monitorare gli stati di centinaia di stanze nella stessa schermata. Questo elemento grafico può essere creato con un editor di file come Adobe Illustrator.

Ogni Custom widget rappresenta una stanza e cambia stato quando cambia un parametro. Ogni widget ha infatti uno script che permette di manipolare la sua grafica in base ai parametri dei dispositivi reali.

Casi d'uso

• L'utente può costruire una mappa “reattiva” di una stanza, dove controllare lo stato di parametri come la temperatura di un setpoint oppure lo stato di una luce in una specifica camera.

• Il proprietario di un B&B può usare questo componente per avere un controllo completo e in tempo reale di ogni singola camera e sapere se è occupata oppure no.

Promemoria prima di continuare:

• Scarica ed installa Ilevia Logic plugin per abilitare i plugin (link);

• Dopo aver caricato il progetto Ilevia sul server, attendi un paio di minuti affinché le logiche si avviino.

Proprietà del componente

Larghezza: in questo campo di testo puoi impostare la larghezza applicata all'immagine nell'interfaccia utente.

Altezza: in questo campo di testo puoi impostare l'altezza che assumerà l'immagine nell'interfaccia utente.

Map template da attivare dopo il click: questo menu a discesa permette di scegliere un Map template tra quelli esistenti, che si aprirà quando l'utente clicca questo Custom widget nell'interfaccia utente.

Click dell'utente: in questo campo puoi impostare un componente che, una volta cliccato, aprirà una mappa tramite il componente Map template, dove si potranno consultare tutti i dispositivi impostati all'interno di quella stanza.

Parametri Json: in questo campo di testo puoi scrivere una stringa JSON; per esempio puoi creare un campo dinamico nel file SVG che si aggiorna automaticamente quando il componente viene aggiunto all'interfaccia utente, come il numero della camera d'hotel.

Ottieni javascript da: questa lista a opzioni permette di selezionare una sorgente di codice JavaScript da altri componenti Custom widget dello stesso progetto, utile se hai più Custom widget nel progetto.

javascript: questo campo di testo permette di importare il JavaScript che interagisce con il file SVG quando i valori cambiano nell'interfaccia utente.

Ottieni svg da: questa lista a opzioni permette di collegare il codice SVG di un altro componente Custom widget esistente nel progetto.

Carica file SVG: questo pulsante permette di caricare un elemento SVG direttamente da un file locale.

Come importare il file SVG nel componente Custom widget

Passo 1:

Questo componente permette di selezionare un file SVG direttamente dai file locali. Clicca sul pulsante Carica file SVG nelle proprietà del componente Custom widget, poi seleziona il file e clicca Apri.

Configurazione JavaScript

Passo 2:

Il componente Custom widget ha bisogno di uno script per collegare i componenti del progetto Ilevia Manager, come Info, Setpoint, Liste a opzioni, Interruttori, ecc., e permettere la visualizzazione dei valori correnti e in cambiamento nel file SVG dell'interfaccia utente.

Per collegare il file SVG al componente nel progetto è necessario creare uno script JavaScript dedicato. Questo script va modificato in base al file SVG, al suo scopo e alla sua struttura. In un'altra pagina è descritto in dettaglio come costruirlo e strutturarlo: clicca qui per vedere la configurazione dello script.

Come impostare un componente Custom SVG con lo stesso JavaScript ma con JSON diverso

È necessario creare parametri specifici da applicare ai componenti Custom widget nell'interfaccia utente. Seguendo l'esempio mostrato sotto potrai impostarli correttamente: la procedura consiste nell'aggiungere una stringa JSON da cui il componente prende i dati.

Passo 3:

Per impostare il JSON nel componente Custom widget devi definire le variabili che prendono il valore dai dati impostati nel JSON del componente.

Impostazione della variabile: var Nome_variabile=getEMParam("Nome_parametro_json");

Passo 4:

Dopo aver impostato le variabili nel codice JavaScript, devi specificarle nel progetto Ilevia. Vai nelle proprietà del componente Custom widget: come puoi vedere nell'immagine sottostante, nella finestra per l'impostazione del JSON abbiamo specificato il numero della camera, il componente Setpoint e il componente che determina l'occupazione della camera.

Passo 5:

Se hai più di un componente Custom widget nello stesso progetto, puoi collegare script JavaScript e file SVG di altri componenti Custom widget già presenti nel progetto Ilevia Manager corrente.

Passo 6:

Nella rappresentazione sottostante si vede il risultato visivo creato dalle configurazioni impostate nel progetto; è solo una delle molte possibilità realizzabili con il componente Custom widget.

Come collegare il componente Map template al Custom widget

Il componente Custom Widget permette di collegare un componente Map template nelle sue configurazioni: cliccando il Custom widget nell'interfaccia utente si aprirà così una mappa.

Dalle proprietà del componente Custom widget scegli il Map template che vuoi mostrare quando il Custom widget viene cliccato nell'interfaccia utente dell'app Ilevia Control.

Come aprire un Map template cliccando su un Custom widget

Per aprire il componente Map template è richiesto un componente di innesco che, una volta premuto nell'interfaccia utente, apre il Map template selezionato nel menu a discesa del componente Custom widget.

Aggiungi quindi un componente Pulsante al progetto e selezionalo nelle proprietà del componente Custom widget.

Sviluppo di funzioni JavaScript con il Custom widget

Introduzione

Poiché il componente Custom widget ha un proprio campo di sviluppo JavaScript, puoi creare il tuo codice, replicabile più volte senza interferire con gli altri presenti nel progetto Ilevia Manager. Nel campo di testo “Parametri JSON” inserisci i nomi e gli ID dei componenti nel formato mostrato di seguito.

Aggiungi le variabili nel campo di testo Parametri JSON come mostrato di seguito:

{"Nome-variabile1": IDComponente1, "Nome-variabile2": IDComponente2, "Nome-variabile3": IDComponente3, ecc.}

Puoi aggiungere tutti i Custom Widget di cui hai bisogno: possono contenere tutti lo stesso codice e gli stessi nomi di variabili.

Di seguito trovi esempi pratici che spiegano passo passo come configurare funzioni JavaScript con il componente Custom Widget:

• Sensore di movimento con count down