Script del componente Custom widget

Introduzione

Questa guida spiega come configurare lo script JavaScript per collegare il componente Custom widget a componenti come Set point, Info, Interruttori, Drop down, ecc. e al file SVG selezionato nelle proprietà del componente. Lo script cambia ovviamente in base alla struttura e alla funzione del tuo file SVG.

Variabili dello script

Queste sono le variabili che fanno parte dello script. Le variabili non devono avere necessariamente lo stesso nome e lo stesso ID dei componenti: quello che segue è solo un esempio di ciò che si può realizzare con uno script JavaScript.

var Svg: questa variabile contiene il nome del file SVG.

var color: questa variabile contiene un colore usato dallo script.

Variabili dei componenti

var room: questa variabile assume il numero della stanza impostato nel campo JSON delle proprietà del componente Custom widget.

var temp: questa variabile assume il valore del componente con ID 31, che nel nostro caso è un componente Info che rappresenta una temperatura.

var Setpoint: questa variabile assume il valore del componente con ID 32, che nel nostro caso è un componente Setpoint.

var fan_opacity: questa variabile ha 1 come valore predefinito. Nel nostro caso è collegata a un’icona del file SVG.

var deumidification_opacity: questa variabile ha 1 come valore predefinito. Nel nostro caso è collegata a un’icona del file SVG.

var cool_opacity: questa variabile ha 0 come valore predefinito. Nel nostro caso è collegata a un’icona del file SVG.

var heat_opacity: questa variabile ha 0 come valore predefinito. Nel nostro caso è collegata a un’icona del file SVG.

var mode: questa variabile assume il valore del componente con ID 33, che nel nostro caso è un componente Lista a opzioni.

var background: questa variabile imposta il colore di sfondo del file SVG.

Variabili di collegamento agli elementi del file SVG

var svg_room: questa variabile crea un collegamento con l’elemento del file SVG che contiene il numero della stanza;

svg_room.Text: questa istruzione applica il valore al testo dell’elemento del file SVG;

var svg_room_background: questa variabile crea un collegamento con l’elemento “room background” del file SVG;

var svg_background: questa variabile crea un collegamento con l’elemento “background” del file SVG;

var svg_Temperature: questa variabile crea un collegamento con l’elemento “Temperature” del file SVG;

var svg_Setpoint: questa variabile crea un collegamento con l’elemento “Setpoint” del file SVG;

var svg_deumidification: questa variabile crea un collegamento con l’elemento “deumidification” del file SVG;

var svg_fan: questa variabile crea un collegamento con l’elemento “fan” del file SVG;

var svg_heat: questa variabile crea un collegamento con l’elemento “heat” del file SVG;

var svg_cool: questa variabile crea un collegamento con l’elemento “Cool” del file SVG.

UpdateWidget(): questa istruzione aggiorna l’elemento widget quando viene eseguita all’interno del server.

Funzioni dello script

Queste sono le funzioni usate per cambiare i valori degli elementi dell’immagine SVG all’interno dell’interfaccia utente.

Funzione temperature_changed

var val = getValueAsInt(temp): questa variabile prende il valore corrente della variabile temp.

log (“Temperature changed to:”+val): questo log stampa la stringa “Temperature changed to:” seguita dal valore della variabile “val”.

svg_temperature.Text = (parseInt(val*10)/10).toString()+”°”: questa istruzione scrive nell’elemento svg_temperature il valore della temperatura, arrotondato a un decimale e seguito dal simbolo dei gradi.

UpdateWidget(): questa istruzione aggiorna l’elemento widget quando viene eseguita all’interno del server.

Funzione mode_changed

var val = getValueAsInt(mode): questa variabile prende il valore corrente della variabile “mode”.

log (“Mode changed to:”+val): questo log stampa la stringa “Mode changed to:” seguita dal valore della variabile “val”.

1° if: se il valore del componente Lista a opzioni è 0, l’icona deumidification sarà visibile;

2° if: se il valore del componente Lista a opzioni è 1, l’icona fan sarà visibile nell’interfaccia, altrimenti rimarrà nascosta;

3° if: se il valore del componente Lista a opzioni è 2, l’icona heat sarà visibile nell’interfaccia, altrimenti rimarrà nascosta;

4° if: se il valore del componente Lista a opzioni è 3, l’icona cool sarà visibile nell’interfaccia, altrimenti rimarrà nascosta.

UpdateWidget(): questa istruzione aggiorna l’elemento widget quando viene eseguita all’interno del server.

Funzione setpoint_changed

var val = getValueAsDouble(setpoint): questa variabile prende il valore della variabile “setpoint”;

log (“Setpoint changed to:”+val): questo log stampa la stringa “Setpoint changed to:” seguita dal valore della variabile “val”;

svg_setpoint.Text = (parseInt(val*10)/10).toString()+“°”: questa istruzione scrive nell’elemento svg_setpoint il valore del setpoint, arrotondato a un decimale e seguito dal simbolo dei gradi.

UpdateWidget(): questa istruzione aggiorna l’elemento widget quando viene eseguita all’interno del server.

Funzione busy_changed

var val = getValueAsBoolean(busy): questa variabile acquisisce il valore di “busy”.

log (“Busy changed to:”+val): questo log stampa la stringa “Busy changed to:” seguita dal valore corrente della variabile “val”.

If – Else: se il valore della variabile “val” è vero, il colore specificato in svg_background.Fill viene impostato come colore di sfondo dell’elemento SVG nell’interfaccia utente; altrimenti (else) viene impostato l’altro colore.

UpdateWidget(): questa istruzione aggiorna l’elemento widget quando viene eseguita all’interno del server.

setTrigger

setTrigger(temp,”temperature_changed”): questa istruzione fa eseguire la funzione “temperature_changed”;

setTrigger(mode,”mode_changed”): questa istruzione fa eseguire la funzione “mode_changed”;

setTrigger(setpoint,”setpoint_changed”): questa istruzione fa eseguire la funzione “setpoint_changed”;

setTrigger(busy,”busy_changed”): questa istruzione fa eseguire la funzione “busy_changed”.