{"id":24212,"date":"2020-10-05T11:04:09","date_gmt":"2020-10-05T09:04:09","guid":{"rendered":"http:\/\/support.ilevia.com\/?p=24212"},"modified":"2023-07-19T18:15:28","modified_gmt":"2023-07-19T16:15:28","slug":"custom-widget","status":"publish","type":"post","link":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/","title":{"rendered":"Custom widget"},"content":{"rendered":"[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px||0px|||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<h1><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/support.ilevia.com\/wp-content\/uploads\/2020\/10\/Custom-widget-1.png\" width=\"60\" height=\"60\" alt=\"\" class=\"wp-image-24484 alignleft size-full\" \/>Custom widget<\/h1>\n<hr \/>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243; custom_margin=&#8221;40px||||false|false&#8221;]\n<blockquote>\n<h2><strong>INTRODUCTION<\/strong><\/h2>\n<\/blockquote>\n<p>If you are working on a hotel project and the client asks for a view of all the states multiple rooms, you can do it but it will result in a graphic mess. With the <strong>Custom widget<\/strong> we can create graphics elements that rapresent the state of multiple parameters, for example you can build a graphic element that rapresent all the information of each single room. This way the client will be able to monitor the state of\u00a0 hundreds rooms on the same tab. This graphic element can be created by your self using SVG file editors such as <b>Adobe illustrator<\/b>.<\/p>\n<p>Each <strong>Custom widget<\/strong> will rapresent a room and will chage when a parameter change. However, each widget has a script that allow to manipulate the graphic of the widget it self based on the parameters of the real devices.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;30px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h3><strong>USE CASES<\/strong><\/h3>\n<\/blockquote>\n<ul>\n<li>The user wants to build a responsive room map where he can check the components status of all of his house&#8217;s rooms.<\/li>\n<li>An owner of a B&amp;B could use this widget to make a system where he has the chanse to check all the parameteres of the components inside a specific room such as: temperature or state of a room if it&#8217;s empty or if there still someone inisde.<\/li>\n<\/ul>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]\n<p><strong>Reminder before continuing:<\/strong><\/p>\n<div class=\"et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_text_2\">\n<ul>\n<li>Download and Install EVE Logic plugin to enable plugins (<a href=\"http:\/\/support.ilevia.com\/all\/configuration-software\/plugin-installation\/\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>);<\/li>\n<li>After loading .eve project to the server, run EVE Remote app, log in and then wait a couple of minutes for logics activation.<\/li>\n<\/ul>\n<\/div>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;2_5,3_5&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;2_5&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_component_properties.png&#8221; alt=&#8221;Custom Widget component&#8217;s properties inside the Home automation configuration softawre EVE Manager pro&#8221; title_text=&#8221;Custom_widget_component_properties&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;3_5&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;-21px|||||&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h4><strong>COMPONENT&#8217;S PROPERTIES<\/strong><\/h4>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<p><strong>Width<\/strong>: In this text field you can set the parameter that will be set to the svg image inside the User interface.<\/p>\n<p><strong>High: <\/strong>In this text field you can set the high parameter that will be set to the immage inside the User interface.<\/p>\n<p><strong>Map templat to activate on click: <\/strong>Drop down that allows you to link an existing map template to open once the user click on this custom widget inside the user interface.<\/p>\n<p><strong>User click<\/strong>: In this field you will which component will be added to the svg image to open the map, the component you set in this field will open a Map Template component when clicking over the SVG image.<\/p>\n<p><b>Json parameters<\/b>: In this text field you will be able to code a custom json, for example you could build custom field inside the SVG file that will automatically update once the svg is applyed into the user interface, for instance the number of a hotel room that will autoamtically update once you add a new custom widget inside the user interface.<\/p>\n<p><strong>Get javascript from:\u00a0<\/strong>This drop down allows you to select a source for the javascript, for example if you need to create more object with the same javascript parameters.<\/p>\n<p><strong>Javascript<\/strong>: This text field allows you to import the javascript that will effect the svg file by tapping it from the User interface.<\/p>\n<p><strong>Get svg from<\/strong>: This drop down allows you to link an existing <strong>svg<\/strong> file from an already existing custom widget component inside EVE Mananger Pro.<\/p>\n<p><strong>Load SVG From<\/strong>: This drop down allows you to load an <strong>.svg\u00a0<\/strong>file from your local device.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;||0px|||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h4><strong>HOW TO IMPORT THE SVG FILE INSIDE THE CUSTOM WIDGET COMPONENT<\/strong><\/h4>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 1:<\/strong><\/p>\n<p>This component allow you to select a SVG file directly from your local files. So click on <strong>Load svg file<\/strong> in the Custom widget properties, then select the file and click open.<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_svg_file_selection.png&#8221; alt=&#8221;How to open a .svg file inside a Text editor to copy its code and paste it inside the Home automation configuration software EVE Manager Pro&#8221; title_text=&#8221;Custom_widget_svg_file_selection&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h3><strong>Javascript configuration<\/strong><\/h3>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;40px||30px||false|false&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 2:<\/strong><\/p>\n<p>The Custom widget component needs a script in order to link the components from the EVE Manager project such as: <strong>Infos<\/strong>, <strong>Setpoints<\/strong>, <strong>Drop down<\/strong>, <strong>Switch<\/strong>, etc to allow the current values visualizzation inside the <strong>svg file<\/strong> on the User interface.\u00a0\u00a0<\/p>\n<p>In order to link the <strong>svg file<\/strong> with the component inside the project you will need to build a dedicated <strong>javascript<\/strong>. This script will change based on the svg file and its purpose and structure. We have a dedicated page where is explaned how to build and structure it. click <a href=\"http:\/\/support.ilevia.com\/uncategorized\/script-custom-widget\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a> to check the script configuration.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;-14px|auto||auto||&#8221; custom_padding=&#8221;0px||9px|||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_divider _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h4><strong>How to set up the Custom widget component with the same javascript and same svg file but with a different json.<\/strong><\/h4>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; min_height=&#8221;0px&#8221; custom_padding=&#8221;||0px|||&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 1.1:\u00a0<\/strong><\/p>\n<p>It is needed to create specific parameters in order to apply them on the custom widget components inside the User interface. By following the exaple shown in the picture below you will be able to set them to the component.<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/01\/Custom_widget_jsonparameters.png&#8221; alt=&#8221;How to set the json parameters inside the custom widget component parameters within the Home automation configuration software EVE Manager&#8221; title_text=&#8221;Custom_widget_jsonparameters&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 2.1:<\/strong><\/p>\n<p>To set up a proper json inside the custom widget component you will need to set up the variables that will take the value based on which custom widget you are displaying inside the User interface.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Variable settings<\/strong><\/span>:\u00a0var <strong>Nameofthevariable<\/strong>=getEMParam(&#8220;<strong>NameOfThejsonparameter<\/strong>&#8220;);<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/01\/custom_widget_getparam.png&#8221; alt=&#8221;These variables will gather the value of the corresponding json parameter added inside the custom widget component within the Home automation configuration software EVE Manager.&#8221; title_text=&#8221;custom_widget_getparam&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 3.1:<\/strong><\/p>\n<p><b><\/b>After building the variables inside the javascript code, you will need to specidy these variables within the EVE Manager project. Head to the Custom widget component&#8217;s properties, as you can see from the picture below, in the Json text frame, we specified the number of the room, which set point will be taken to display the current room temperature and the component that determine if the room is &#8220;busy&#8221;.<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/01\/Custom_widget_json_configuration.png&#8221; alt=&#8221;Applying the json parameters inside the custom widget component within the project OF the Home automation configuration software EVE Manager &#8221; title_text=&#8221;Custom_widget_json_configuration&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 4.1:<\/strong><\/p>\n<p>In case you have more than one <strong>Custom widget<\/strong> inside the project, this allows you to link already imported\u00a0\u00a0<strong>javascript<\/strong> and the <strong>svg file<\/strong>\u00a0from other Custom widget components from the current EVE Manager project.<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_multiple_widgets.gif&#8221; alt=&#8221;How to link multiple custom widget components tegether inside the Home automation software&#8221; title_text=&#8221;Custom_widget_multiple_widgets&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<strong>Step 5.1:<\/strong><\/p>\n<p>This is a visual result with the configuration we made inside the eve project, this is one of the countless configuration possible with this Custom Widget component.<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_visual_result.gif&#8221; alt=&#8221;Visual result of the custom widget inside the Home automatio software EVE Manager Pro&#8221; title_text=&#8221;Custom_widget_visual_result&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_divider _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h4><strong>HOW TO LINK YOUR MAP TEMPLATE\u00a0 TO THE CUSTOM WIDGET COMPONENT<\/strong><\/h4>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||30px||false|false&#8221; global_colors_info=&#8221;{}&#8221;]\n<p>The Custom widget component allows you to link a <a href=\"\/configuration-software-en\/map-template\/\" target=\"_blank\" rel=\"noopener noreferrer\">Map template<\/a> component inside its configuration, this will allow you to open a Map once tapped the Custom widget inside the User interface.<\/p>\n<p>From inside the Custom widget component&#8217;s properties choose the <a href=\"\/configuration-software-en\/map-template\/\" target=\"_blank\" rel=\"noopener noreferrer\">Map template<\/a> you want to show once clicked on the custom widget object inside the User interface within the Home automation App EVE Remote Plus.<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_MapTemplate_slection.gif&#8221; alt=&#8221;How to select the map template in order to open it once a custom widget is pressed&#8221; title_text=&#8221;Custom_widget_MapTemplate_slection&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h4>HOW TO OPEN A MAP TEMPLATE BY CLICKING ON A CUSTOM WIDGET<\/h4>\n<\/blockquote>\n<p>In order to be able to open the <a href=\"http:\/\/support.ilevia.com\/configuration-software-en\/map-template\/\" target=\"_blank\" rel=\"noopener noreferrer\">Map template<\/a> component it is required a trigger component that once pressed will open the choosen\u00a0<a href=\"\/configuration-software-en\/map-template\/\" target=\"_blank\" rel=\"noopener noreferrer\">Map template<\/a>\u00a0on the drop down &#8220;<b>User click<\/b>&#8220;.<\/p>\n<p>So drag a new <a href=\"\/configuration-software-en\/pulse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pulse<\/a> component inisde the project and select it from the Custom widget component properties.[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_adding_pulse.gif&#8221; alt=&#8221;Selecting the map template from inside the custom widget component properties.&#8221; title_text=&#8221;Custom_widget_adding_pulse&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;50px||||false|false&#8221; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_video _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_video][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=&#8221;off|off|off&#8221; _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<h3 style=\"text-align:center\">JAVASCRIPT CODING FUNCTION IN THE CUSTOM WIDGET<\/h3>\n[\/et_pb_text][et_pb_divider _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<blockquote>\n<h4>INTRODUCTION<\/h4>\n<\/blockquote>\n<p>Since the Custom Widget has its own javascritp enviroment, you are allowed to build a custom javascript, that can be replicated multiple times, without interfering with others within the same <a href=\"\/configuration-software-en\/overview\" target=\"_blank\" rel=\"noopener\">EVE Manager<\/a> project. This means that you are allowed to use the same variable names thanks to the Json text field.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]\n<p>Add the variables within the Json text field like shown in the example below:<\/p>\n<p>{&#8220;Variable-name1&#8221;: Component1ID, &#8220;Variable-name2&#8221;: Component2ID, &#8220;Variable-name3&#8221;: Component3ID, etc&#8230;}<\/p>\n[\/et_pb_text][et_pb_image src=&#8221;http:\/\/support.ilevia.com\/wp-content\/uploads\/2023\/07\/Custom_widget_json-variables.png&#8221; title_text=&#8221;Custom_widget_json-variables&#8221; show_in_lightbox=&#8221;on&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; max_width=&#8221;45%&#8221; custom_margin=&#8221;50px||50px||false|false&#8221; hover_enabled=&#8221;0&#8243; box_shadow_style=&#8221;preset2&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243; alt=&#8221;JSON variables configuration within the Custom widget component inside the Ilevia&#8217;s configuration software EVE Manager.&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]\n<p>You can add as many custom widject as you need, containing the same variable name and Code and the same variables&#8217; names.<\/p>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;30px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;]\n<p style=\"text-align: centeR;\"><b>Here below you can find practical example of how to build the multi custom widget Javascript is done:<\/b><\/p>\n<p><\/p>\n<ul>\n<li><a href=\"\/configuration-software-en\/custom-widget-motion-sensor-scritp\/\" target=\"_blank\" rel=\"noopener\">Motion sensor with countdown<\/a><\/li>\n<\/ul>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; inner_shadow=&#8221;on&#8221; _builder_version=&#8221;4.19.1&#8243; background_color=&#8221;#fafafa&#8221; parallax=&#8221;on&#8221; min_height=&#8221;280px&#8221; custom_margin=&#8221;30px||||false|false&#8221; global_module=&#8221;59323&#8243; locked=&#8221;off&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row module_class=&#8221; et_pb_row_fullwidth&#8221; _builder_version=&#8221;4.16&#8243; width=&#8221;91%&#8221; width_tablet=&#8221;80%&#8221; width_last_edited=&#8221;off|desktop&#8221; max_width=&#8221;90%&#8221; max_width_tablet=&#8221;80%&#8221; max_width_phone=&#8221;&#8221; max_width_last_edited=&#8221;on|desktop&#8221; custom_padding=&#8221;30px|0px|22.8594px|0px|false|false&#8221; make_fullwidth=&#8221;on&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<h1 style=\"text-align: center;\">Still Need Help? Our Customer Service Is Here For You.<\/h1>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.20.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_button button_url=&#8221;http:\/\/support.ilevia.com\/support-request\/&#8221; button_text=&#8221;Ask For Help&#8221; button_alignment=&#8221;center&#8221; _builder_version=&#8221;4.19.1&#8243; custom_button=&#8221;on&#8221; button_text_size=&#8221;20px&#8221; button_text_color=&#8221;#1e84f4&#8243; button_bg_color=&#8221;#FFFFFF&#8221; button_border_width=&#8221;2px&#8221; button_border_color=&#8221;#1e84f4&#8243; button_font=&#8221;||||||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;||||false|false&#8221; custom_margin_tablet=&#8221;&#8221; custom_margin_phone=&#8221;|0px|||false|false&#8221; custom_margin_last_edited=&#8221;on|phone&#8221; box_shadow_style=&#8221;preset2&#8243; box_shadow_spread=&#8221;-80px&#8221; global_colors_info=&#8221;{}&#8221; box_shadow_spread__hover=&#8221;0px&#8221; box_shadow_spread__hover_enabled=&#8221;on&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;http:\/\/support.ilevia.com\/support-request\/&#8221; button_text=&#8221;Make a suggestion&#8221; button_alignment=&#8221;center&#8221; _builder_version=&#8221;4.19.1&#8243; custom_button=&#8221;on&#8221; button_text_size=&#8221;20px&#8221; button_text_color=&#8221;#1e84f4&#8243; button_bg_color=&#8221;#FFFFFF&#8221; button_border_width=&#8221;2px&#8221; button_border_color=&#8221;#1e84f4&#8243; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;|||0px|false|false&#8221; custom_margin_tablet=&#8221;&#8221; custom_margin_phone=&#8221;|||0px|false|false&#8221; custom_margin_last_edited=&#8221;on|phone&#8221; custom_padding=&#8221;|||25px|false|false&#8221; box_shadow_style=&#8221;preset2&#8243; box_shadow_spread=&#8221;-80px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; box_shadow_spread__hover=&#8221;0px&#8221; box_shadow_spread__hover_enabled=&#8221;on&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Custom widget INTRODUCTION If you are working on a hotel project and the client asks for a view of all the states multiple rooms, you can do it but it will result in a graphic mess. With the Custom widget we can create graphics elements that rapresent the state of multiple parameters, for example you [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[1,72,18,30],"tags":[],"class_list":["post-24212","post","type-post","status-publish","format-standard","hentry","category-all","category-archivi","category-configuration-software-en","category-software-configurazione"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom widget Ilevia Support |<\/title>\n<meta name=\"description\" content=\"Complete guide how to set up the custom widget component inside the home automation configuration software EVE Manager Pro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Filippo Amabilia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/\"},\"author\":{\"name\":\"Filippo Amabilia\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/person\\\/08a8d13dee0bc9f160da55efe97b7959\"},\"headline\":\"Custom widget\",\"datePublished\":\"2020-10-05T09:04:09+00:00\",\"dateModified\":\"2023-07-19T16:15:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/\"},\"wordCount\":2860,\"publisher\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Custom-widget-1.png\",\"articleSection\":[\"All Archives\",\"Archivi\",\"Configuration Software\",\"Software Configurazione\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/\",\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/\",\"name\":\"Custom widget Ilevia Support |\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Custom-widget-1.png\",\"datePublished\":\"2020-10-05T09:04:09+00:00\",\"dateModified\":\"2023-07-19T16:15:28+00:00\",\"description\":\"Complete guide how to set up the custom widget component inside the home automation configuration software EVE Manager Pro.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#primaryimage\",\"url\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Custom-widget-1.png\",\"contentUrl\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Custom-widget-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Software Configurazione\",\"item\":\"https:\\\/\\\/support.ilevia.com\\\/it\\\/archivi\\\/software-configurazione\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Custom widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/\",\"name\":\"Ilevia Support\",\"description\":\"Assistance &amp; Technical Guides\",\"publisher\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#organization\",\"name\":\"Ilevia\",\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ilevia.png\",\"contentUrl\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ilevia.png\",\"width\":500,\"height\":500,\"caption\":\"Ilevia\"},\"image\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ileviaofficial\\\/\",\"https:\\\/\\\/www.instagram.com\\\/ilevia_official\\\/\",\"https:\\\/\\\/it.linkedin.com\\\/company\\\/ilevia\\\/\",\"https:\\\/\\\/www.youtube.com\\\/ilevia\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/person\\\/08a8d13dee0bc9f160da55efe97b7959\",\"name\":\"Filippo Amabilia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g\",\"caption\":\"Filippo Amabilia\"},\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/author\\\/filippo-amabilia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom widget Ilevia Support |","description":"Complete guide how to set up the custom widget component inside the home automation configuration software EVE Manager Pro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/","twitter_misc":{"Written by":"Filippo Amabilia","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#article","isPartOf":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/"},"author":{"name":"Filippo Amabilia","@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/person\/08a8d13dee0bc9f160da55efe97b7959"},"headline":"Custom widget","datePublished":"2020-10-05T09:04:09+00:00","dateModified":"2023-07-19T16:15:28+00:00","mainEntityOfPage":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/"},"wordCount":2860,"publisher":{"@id":"https:\/\/support.ilevia.com\/en\/#organization"},"image":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#primaryimage"},"thumbnailUrl":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2020\/10\/Custom-widget-1.png","articleSection":["All Archives","Archivi","Configuration Software","Software Configurazione"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/","url":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/","name":"Custom widget Ilevia Support |","isPartOf":{"@id":"https:\/\/support.ilevia.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#primaryimage"},"image":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#primaryimage"},"thumbnailUrl":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2020\/10\/Custom-widget-1.png","datePublished":"2020-10-05T09:04:09+00:00","dateModified":"2023-07-19T16:15:28+00:00","description":"Complete guide how to set up the custom widget component inside the home automation configuration software EVE Manager Pro.","breadcrumb":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#primaryimage","url":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2020\/10\/Custom-widget-1.png","contentUrl":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2020\/10\/Custom-widget-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/support.ilevia.com\/en\/"},{"@type":"ListItem","position":2,"name":"Software Configurazione","item":"https:\/\/support.ilevia.com\/it\/archivi\/software-configurazione\/"},{"@type":"ListItem","position":3,"name":"Custom widget"}]},{"@type":"WebSite","@id":"https:\/\/support.ilevia.com\/en\/#website","url":"https:\/\/support.ilevia.com\/en\/","name":"Ilevia Support","description":"Assistance &amp; Technical Guides","publisher":{"@id":"https:\/\/support.ilevia.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/support.ilevia.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/support.ilevia.com\/en\/#organization","name":"Ilevia","url":"https:\/\/support.ilevia.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/logo\/image\/","url":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2018\/12\/ilevia.png","contentUrl":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2018\/12\/ilevia.png","width":500,"height":500,"caption":"Ilevia"},"image":{"@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ileviaofficial\/","https:\/\/www.instagram.com\/ilevia_official\/","https:\/\/it.linkedin.com\/company\/ilevia\/","https:\/\/www.youtube.com\/ilevia\/"]},{"@type":"Person","@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/person\/08a8d13dee0bc9f160da55efe97b7959","name":"Filippo Amabilia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g","caption":"Filippo Amabilia"},"url":"https:\/\/support.ilevia.com\/en\/author\/filippo-amabilia\/"}]}},"_links":{"self":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts\/24212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/comments?post=24212"}],"version-history":[{"count":249,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts\/24212\/revisions"}],"predecessor-version":[{"id":65914,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts\/24212\/revisions\/65914"}],"wp:attachment":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/media?parent=24212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/categories?post=24212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/tags?post=24212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}