Script van de Custom widget-component

Inleiding

Deze handleiding legt uit hoe u het JavaScript-script configureert om de Custom widget-component te koppelen aan componenten zoals Set point, Info, Schakelaars, Drop down, enz. en aan het SVG-bestand dat in de eigenschappen van de component is geselecteerd. Het script verschilt uiteraard afhankelijk van de structuur en functie van uw SVG-bestand.

Scriptvariabelen

Dit zijn de variabelen die deel uitmaken van het script. De variabelen hoeven niet noodzakelijk dezelfde naam en hetzelfde ID te hebben als de componenten: wat volgt is slechts een voorbeeld van wat met een JavaScript-script kan worden gerealiseerd.

var Svg: deze variabele bevat de naam van het SVG-bestand.

var color: deze variabele bevat een kleur die door het script wordt gebruikt.

Componentvariabelen

var room: deze variabele krijgt het kamernummer toegewezen dat is ingesteld in het JSON-veld van de eigenschappen van de Custom widget-component.

var temp: deze variabele krijgt de waarde van component met ID 31, dat in ons geval een Info-component is die een temperatuur weergeeft.

var Setpoint: deze variabele krijgt de waarde van component met ID 32, dat in ons geval een Setpoint-component is.

var fan_opacity: deze variabele heeft standaardwaarde 1. In ons geval is die gekoppeld aan een pictogram in het SVG-bestand.

var deumidification_opacity: deze variabele heeft standaardwaarde 1. In ons geval is die gekoppeld aan een pictogram in het SVG-bestand.

var cool_opacity: deze variabele heeft standaardwaarde 0. In ons geval is die gekoppeld aan een pictogram in het SVG-bestand.

var heat_opacity: deze variabele heeft standaardwaarde 0. In ons geval is die gekoppeld aan een pictogram in het SVG-bestand.

var mode: deze variabele krijgt de waarde van component met ID 33, dat in ons geval een Optielijst-component is.

var background: deze variabele stelt de achtergrondkleur van het SVG-bestand in.

Variabelen voor koppeling aan SVG-elementen

var svg_room: deze variabele maakt een koppeling met het element van het SVG-bestand dat het kamernummer bevat;

svg_room.Text: deze instructie past de waarde toe op de tekst van het element van het SVG-bestand;

var svg_room_background: deze variabele maakt een koppeling met het element “room background” van het SVG-bestand;

var svg_background: deze variabele maakt een koppeling met het element “background” van het SVG-bestand;

var svg_Temperature: deze variabele maakt een koppeling met het element “Temperature” van het SVG-bestand;

var svg_Setpoint: deze variabele maakt een koppeling met het element “Setpoint” van het SVG-bestand;

var svg_deumidification: deze variabele maakt een koppeling met het element “deumidification” van het SVG-bestand;

var svg_fan: deze variabele maakt een koppeling met het element “fan” van het SVG-bestand;

var svg_heat: deze variabele maakt een koppeling met het element “heat” van het SVG-bestand;

var svg_cool: deze variabele maakt een koppeling met het element “Cool” van het SVG-bestand.

UpdateWidget(): deze instructie werkt de widget bij wanneer deze op de server wordt uitgevoerd.

Scripfuncties

Dit zijn de functies die worden gebruikt om de waarden van de elementen van de SVG-afbeelding in de gebruikersinterface te wijzigen.

Functie temperature_changed

var val = getValueAsInt(temp): deze variabele haalt de huidige waarde van de variabele temp op.

log (“Temperature changed to:”+val): deze log geeft de tekenreeks “Temperature changed to:” weer, gevolgd door de waarde van de variabele “val”.

svg_temperature.Text = (parseInt(val*10)/10).toString()+”°”: deze instructie schrijft de temperatuurwaarde naar het element svg_temperature, afgerond op één decimaal en gevolgd door het graden-symbool.

UpdateWidget(): deze instructie werkt de widget bij wanneer deze op de server wordt uitgevoerd.

Functie mode_changed

var val = getValueAsInt(mode): deze variabele haalt de huidige waarde van de variabele “mode” op.

log (“Mode changed to:”+val): deze log geeft de tekenreeks “Mode changed to:” weer, gevolgd door de waarde van de variabele “val”.

1° if: als de waarde van de Optielijst-component 0 is, is het pictogram deumidification zichtbaar;

2° if: als de waarde van de Optielijst-component 1 is, is het pictogram fan zichtbaar in de interface, anders blijft het verborgen;

3° if: als de waarde van de Optielijst-component 2 is, is het pictogram heat zichtbaar in de interface, anders blijft het verborgen;

4° if: als de waarde van de Optielijst-component 3 is, is het pictogram cool zichtbaar in de interface, anders blijft het verborgen.

UpdateWidget(): deze instructie werkt de widget bij wanneer deze op de server wordt uitgevoerd.

Functie setpoint_changed

var val = getValueAsDouble(setpoint): deze variabele haalt de waarde van de variabele “setpoint” op;

log (“Setpoint changed to:”+val): deze log geeft de string “Setpoint changed to:” weer, gevolgd door de waarde van de variabele “val”;

svg_setpoint.Text = (parseInt(val*10)/10).toString()+“°”: deze instructie schrijft in het element svg_setpoint de waarde van de setpoint, afgerond op één decimaal en gevolgd door het graadsymbool.

UpdateWidget(): deze instructie werkt het widget-element bij wanneer deze binnen de server wordt uitgevoerd.

Functie busy_changed

var val = getValueAsBoolean(busy): deze variabele haalt de waarde van “busy” op.

log (“Busy changed to:”+val): deze log geeft de string “Busy changed to:” weer, gevolgd door de huidige waarde van de variabele “val”.

If – Else: als de waarde van de variabele “val” waar is, wordt de kleur opgegeven in svg_background.Fill ingesteld als achtergrondkleur van het SVG-element in de gebruikersinterface; anders (else) wordt de andere kleur ingesteld.

UpdateWidget(): deze instructie werkt het widget-element bij wanneer deze binnen de server wordt uitgevoerd.

setTrigger

setTrigger(temp,”temperature_changed”): deze instructie laat de functie “temperature_changed” uitvoeren;

setTrigger(mode,”mode_changed”): deze instructie laat de functie “mode_changed” uitvoeren;

setTrigger(setpoint,”setpoint_changed”): deze instructie laat de functie “setpoint_changed” uitvoeren;

setTrigger(busy,”busy_changed”): deze instructie laat de functie “busy_changed” uitvoeren.