Select Page

CUSTOM WIDGET SCRIPT

INTRODUCTION

This guide will show you how to configure the script in order to link the custom widget with the components like setpointinfos, switch, drop down, etc… to the svg file selected in the component properties. Obviously the script will change based on the structure of the svg file

Script’s Variables

These are the scritp’a variables. We remind that the variables don’t need to have the same name and id, this is a demostration of what can be done with a javascript.

List of all the variables that will be used inside the Javascript

var Svg: This variable will take the name of the svg file.

var color: This variable will gather the system drawing color.

Components variables:

var room: This variable will gather the room number from the json Text field on the properties of the Custom widget component.

var temp: This variable will assume the value of the component with the ID 31, that in our case is an Info component that display a temperature value.

var Setpoint: This variable will assume the value of the component with the ID 32, that in our case is a Setpoint component.

var fan_opacity: This variable assume 1 as its default value.

var deumidification_opacity: This variable assume 1 as its default value.

var cool_opacity: This variable will assume 0 as its default value.

var heat_opacity: This variable will assume 0 as its default value.

var mode: This variable will assume the value of the component with the ID 33, that in our case is a drop down component. 

var background: This variable will set the color of the back ground of the SVG file.

SVG Link variables:

var svg_room: This variable create a link between the svg file layer.

svg_room.Text: This statement will apply the room value to the svg element in the svg file.

var svg_room_background: This variable create a link between the svg file element “room background

var svg_background: This variable create a link between the svg file element “background

var svg_Temperature: This variable create a link between the svg file element “Temperature“.

var svg_Setpoint: This variable create a link between the svg file element “Setpoint“.

var svg_deumidification: This variable create a link between the svg file layer.

var svg_fan: This variable create a link between the svg file element “fan“.

var svg_heat: This variable create a link between the svg file element “heat“.

var svg_fan:  This variable create a link between the svg file element “Cool“.

 

UpdateWidget(): This statement will refresh the widget element when executed in the User interface.

Script’s Functions

These are the functions that are going to be used in order to change the values of the svg image elements inside the EVE Remote User interface.

Function temperature_changed, this function will set the value of current room temperature to the corresponding element of the custom widget inside the user interface of the Home automation app EVE Remote Plus

Function Temperature changed:

var val= getValueAsInt(temp): This variable will gather the current value of the variable temp.


log (“Temperature changed to:”+val): This log will print the string “Temperature changed to:” + the value of the val variable.


svg_temperature.Text = (parseInt(val*10)/10).toString()+”°”: This operation will parse the value coming from the variable svg_temperautre and write it on the User interface element already parsed.


UpdateWidget(): This statement will refresh the widget element when executed in the User interface.
Function mode_changed, this function allow to change the current mode of a thermostat, based on the component drop down value the icons will be hidden or showed insdie the custom widged svg element inside the user interface of the Home automation app EVE Remote Plus

Function mode_changed:

var val=getValueAsInt(mode): This variable will gather the current value of the variable “mode“.

 

log (“Mode changed to:”+val): This log will print the string “Mode changed to:” + the value coming from the variable “val“.

 

1° ifThis operation will set if the value of the drop down is 0, then the deumidification icon will be visible in the interface, else it will be hidden;
2° if: This operation will set if the value of the drop down is 1, then the fan icon will be visible in the interface, else it will be hidden;
3° if: This operation will set if the value of the drop down is 2, then the heat icon will be visible in the interface, else it will be hidden;
4° if: This operation will set if the value of the drop down is 3, then the cool icon will be visible in the interface, else it will be hidden.

 

UpdateWidget(): This statement will refresh the widget element when executed in the User interface.
Function setpoint_changed, This function allows the user to monitor the current setpoint value applyed at the corresopnding element inside the user interface of the Home automation app EVE Remote plus.

Function setpoint_changed:

var val=getValueAsDouble(setpoint): This variable will get the value of the variable “setpoint”;

 

log (“Setpoint changed to:”+val): This log will print “Setpoint changed to:” + the value coming from the “val” variable;

 

svg_setpoint.Text = (parseInt(val*10)/10).toString()+“°”: This operation will parse the value coming from the variable svg_setpoint and write it on the User interface element already parsed.

 

Updatewidget():  This statement will refresh the widget element when executed in the User interface.
Function busy_changed, this variable allows the user to monitor the each room occupation by a changing color transaction that will affect on the background element of the custom widget component inside the User interface of the Home automation app EVE Remote Plus

Function busy_changed:

var val=getValueAsBoolean(busy): This variable will get the value of the variable “busy“. 

 

log (“Busy changed to:”+val): This log will pint “Busy changed to:” + the value of the variable “val”.

 

If – Else operation: This openration says that if the value of the variable “val” is true then the color specified in the svg_background.Fill will be set as background color in the svg in the user interface, else the other color will be set in the svg element in the user interface.

 

UpdateWidget(): This statement will refresh the widget element when executed in the User interface.
These statement setTriggers, are needed in order to execute the variables inside the EVE server.

SetTriggers:

setTrigger(temp,”temperature_changed”): This statement will set a trigger to the function “temperature_changed“;

 

setTrigger(mode,”mode_changed”): This statement will set a trigger to the function “mode_changed“;

 

setTrigger(setpoint,”setpoint_changed”): This statement will set a trigger to the function “setpoint_changed“;

setTrigger(busy,”busy_changed”): This statement will set a trigger to the function “busy_changed“.

Still Need Help? Our Customer Service Is Here For You.