Additional resources:
- please read Custom Synoptics and Widgets for Dashboards
- please read https://www.snap4city.org/595 to understand how to create an SVG based widget custom;
- Custom Widgets can be directly controlled from IOT Applications to create event driven solutions: TC9.19: Custom Widgets / Synoptics controlled by IOT Applications
|
Custom Widget name and image |
Explanation |
Variable(s) |
Accepted values |
|
Activate in Time new SVG
|
Set the begin and the end hours by using the small + and – buttons. Click SET to send the defined hours to the server. |
s4csvg_begin (read and write variable) Default value: ##:## |
starting hour in the form HH:mm to be set by clicking the + and – button |
|
s4csvg_finish (read and write variable) Default value: ##:## |
ending hour in the form HH:mm to be set by clicking the + and – button |
||
|
Air Conditioner SVG
|
Change the image according to the value received. |
s4csvg_airconditioner_status (read variable) Default value: undefined state, the SVG shows the overlapped cold and hot images. |
0 = OFF, 1 = cold, 2 = hot |
|
Blinking Alarm SVG
|
The image blink or stop to blink according to the value received. Example: |
s4csvg_blinking_alarm (read variable) Default value: 1, blinking |
0 = OFF (fixed image), 1 = blinking |
|
Double Pole Isolator SVG
|
By clicking the SVG, the status of the switch changes accordingly and the corresponding value is sent to the server. Example: |
s4csvg_isolator_onoff (read and write variable) Default value: undefined state, the SVG shows the overlapped position up and position down images. |
0 = OFF (position down), 1 = ON (position up) |
|
Faces Widget
|
By clicking the a coloured face the corresponding value is sent to the server. Examples: |
s4csvg_userFeedback: value sent to the server by clicking the corresponding face (write variable). Default value: no value sent. The SVG shows the five coloured faces. |
-2 = very bad, -1 = bad, 0 = so-and-so, 1 = quite-good, 2=good |
|
Feedback faces first versionSVG
|
By clicking the a coloured face the corresponding value is sent to the server. If available it is possible to show the total clicks and the average value. Examples: |
s4csvg_userFeedback: value sent to the server by clicking the corresponding face (write variable) Default value: no value sent. The SVG shows the five coloured faces. |
-2 = very bad, -1 = bad, 0 = so-and-so, 1 = quite-good, 2=good |
|
s4csvg_total_feedback_clicks: value received by the server to be calculated (read variable) Default value: ##.### |
integer |
||
|
s4csvg_feedback_mean_rate_value: value received by the server to be calculated (read variable) Default value: ### |
float |
||
|
Horizontal Double Value Slider
|
By sliding the two circles, the SVG set the two values and sent them to the server. The custom widget is not visible until the variables have been set. |
s4csvg_min: min value of the slider to be set as constant (read variable) Default value: no value set by default. Until this value is not defined, the SVG is not visible. |
float |
|
s4csvg_max: max value of the slider to be set as constant (read variable) Default value: no value set by default. Until this value is not defined, the SVG is not visible. |
float |
||
|
s4csvg_start: value set sliding the cicle on the left (read and write variable) Default value: no value set by default. Until this value is not defined, the SVG is not visible. |
float |
||
|
s4csvg_start: value set sliding the circle on the right (read and write variable) Default value: no value set by default. Until this value is not defined, the SVG is not visible. |
float |
||
|
Horizontal Single Value Slider
|
By sliding the circle, the SVG send the corresponding value to the server. Examples: |
s4csvg_min: min value of the slider to be set as constant (read variable). Default value: no value set by default. |
float |
|
s4csvg_max: max value of the slider to be set as constant (read variable). Default value: no value set by default. |
float |
||
|
s4csvg_val: value set by the slider (read and write variable). Default value: no value set by default. The circle is shown at the left of the slider. |
float |
||
|
My SVG Humidifier
|
Change the image according to the value received. |
s4csvg_humidifier_status (read variable) Default value: undefined state, the SVG shows the overlapped humidifier and dehumidifier images. |
0 = OFF, 1 = humidifier, 2 = dehumidifier |
|
My SVG Switch template
|
By clicking the switch the status change accordingly. Example: |
s4csvg_switch_onoff: value of the swith (read and write variable) Default value: ON position, green switch |
0 = OFF (red), 1 = ON (green) |
|
New SVG bulb 05
|
The intensity of the bulb colour change according to the value received, from 0% to 100% Example: |
s4csvg_bulb_luminosity (read variable) Default value: 100% of luminosity |
From 0 to 100. |
|
Smart Parking SVG
|
Custom widget example of a smart parking with the status of 52 parking slots managed by an IOT App changing randomly the status of them. It provides at the operators a view on the exploitation of parking. Example: |
from s4csvg_Ispra_parkingslot01 to s4csvg_Ispra_parkingslot10 (read variables) Default value: random position of green and black cars on the slots. |
0 = empty slot, 1 = slot occupied (black car), 2 = slot occupied by a car sharing busy (red car) , 3 = slot occupied by a car sharing available (green car) |
|
SVG Fan
|
A rotating fan. It is possible to change the fan rotation velocity. Example: |
Default value: rotating fan at 180ms |
A value from 0 (min velocity) and 1 (maximum velocity). With 0 the fan stops. |
Default value: 1000ms |
The maximum duration in milliseconds of a fan rotation, for example 1000 means that a rotation is performed in 1 second. | ||
Default value: 100ms |
The minimum duration in milliseconds of a fan rotation, for example 80. | ||
|
SVG horizontal battery
|
Horizontal battery image showing the status (charging/not charging) and the percentage of charging |
Default value: ## in the text and full charge in the image. |
Percentage of recharging, from 0 to 100. The level of charging is shown as number and the vertical bars in the battery are coherent with the value. |
Default value: 1, lighting shown |
Status of charging: 0 not in charge, 1 in charge (the lighting is shown on the battery) | ||
|
SVG light bulb up
|
The intensity of the bulb colour change according to the value received, from 0% to 100% |
s4csvg_bulb_luminosity (read variable), from 0 to 100. Default value: 100% of luminosity |
From 0 to 100 |
|
SVG Opened_Closed Door
|
Change the image according to the value received (Door open or closed) Example: |
s4csvg_door_status (read variable) Default value: door open |
0 = closed door, 1 = open door |
|
SVG Shucko Plug Status |
The image change the background colour if is active or not. The value of the absorbed power in kW is shown below. Example: |
s4csvg_schuko_status (read variable) Default value: green plug |
0 = not active (red plug background), 1 = active (green plug background) |
|
s4c_schuko_power (read variable) Default value: ###.## |
Float value representing the power absorbed |
||
|
SVG Thermometer |
The horizontal coloured line changes according to the temperature (in °C) Example: |
s4csvg_thermometer_grade_c (read variable) Default value: -30 |
A float value from -30 to 100 |
|
SVG Value |
This SVG shows any value or text sent via the variable |
s4csvg_var (read variable) Default value: ######.## |
Any kind of value, also textual |
SVG vertical battery |
Vertical battery image showing the status (charging/not charging) and the percentage of charging |
s4csvg_battery_percentage (read variable) Default value: ## in the text and full charge in the image. |
Percentage of recharging, from 0 to 100. The level of charging is shown as number and the vertical bars in the battery are coherent with the value. |
|
s4csvg_battery_in_charge_status (read variable) Default value: 1, lighting shown |
Status of charging: 0 not in charge, 1 in charge (the lighting is shown on the battery) | ||
|
SVG vertical Switch ON_OFF |
By clicking the switch the status change accordingly. |
s4csvg_switch_onoff: value of the swith (read and write variable) Default value: ON position, green switch |
0 = OFF (red), 1 = ON (green) |
|
Switch ON_OFF SVG |
By clicking the switch the status change accordingly. |
s4csvg_switch_onoff: value of the swith (read and write variable) Default value: ON position, green switch |
0 = OFF (red), 1 = ON (green) |
|
synoptic smart light |
21 street lights are represented as circles in a map and for each of them it is possible to set the luminosity in percentage. Example: |
s4csvg_SmartLightFI_fa2014 (read variable) s4csvg_SmartLightFI_fa2013 (read variable) s4csvg_SmartLightFI_fa2012 (read variable) s4csvg_SmartLightFI_fa2011 (read variable) s4csvg_SmartLightFI_fa2010 (read variable) s4csvg_SmartLightFI_fa200F (read variable) s4csvg_SmartLightFI_fa200E (read variable) s4csvg_SmartLightFI_fa200D (read variable) s4csvg_SmartLightFI_fa200C (read variable) s4csvg_SmartLightFI_fa200B (read variable) s4csvg_SmartLightFI_fa200A (read variable) s4csvg_SmartLightFI_fa2009 (read variable) s4csvg_SmartLightFI_fa2008 (read variable) s4csvg_SmartLightFI_fa2007 (read variable) s4csvg_SmartLightFI_fa2006 (read variable) s4csvg_SmartLightFI_fa2005 (read variable) s4csvg_SmartLightFI_fa2004 (read variable) s4csvg_SmartLightFI_fa2003 (read variable) s4csvg_SmartLightFI_fa2002 (read variable) s4csvg_SmartLightFI_fa2001 (read variable) s4csvg_SmartLightFI_fa2000 (read variable) Default value: all variables set to max luminosity |
A value in percentage from 0 (black) to 100 (full luminosity) for each of the variables. |
|
6 waste containers showing the percentage of fill as coloured level and in percentage below each container. Example: |
s4csvg_smartwaste_paper_fill (read variable) s4csvg_smartwaste_metal_fill (read variable) s4csvg_smartwaste_plastic_fill (read variable) s4csvg_smartwaste_glasses_fill (read variable) s4csvg_smartwaste_generic_fill (read variable) s4csvg_smartwaste_organic_fill (read variable) Default value: all waste containers completely filled, textual percentage as ### |
A value in percentage from 0 (empty container) to 100 (full container) for each of the variables. |
|
|
Traffic Light SVG |
A traffic light changing the status according to the value received. |
s4csvg_traffic_light (read variable) Default value: red, yellow and green lights on |
0 = OFF, 1 = RED LIGHT, 2 = RED + YELLOW LIGHTS, 3 = YELLOW LIGHT, 4 = YELLOW + GREEN LIGHTS, 5 = GREEN, 6 = RED + YELLOW + RED LIGHTS, 7 = BLINKING YELLOW |
|
Tramline Firenze |
This Custom Widget shows the route of three different public transport lines in Florence: T1 (tram line), T2 (tram line), BUS 6 (bus line). Each line can have up to 10 means represented by colored circles that move along the respective line. Each vehicle is identified by two variables that represent the GPS position of the vehicle expressed as longitude and latitude. Example: |
from s4csvg_t1_01_lat to s4csvg_t1_10_lat from s4csvg_t1_01_lon to s4csvg_t1_10_lon Default value: all blue circles are shown overlapped in the T1 tramline terminal default position from s4csvg_t2_01_lat to s4csvg_t2_10_lat from s4csvg_t2_01_lon to s4csvg_t2_10_lon Default value: all red circles are shown overlapped in the T2 tramline terminal default position from s4csvg_bus6_01_lat to 4csvg_bus6_10_lat from s4csvg_bus6_01_lon to s4csvg_bus6_10_lon Default value: all green circles are shown overlapped in the BUS 6 bus line terminal default position |
Lat and Lon GPS position of the mean in the respective lines. |
|
SVG precedence road signals |
The precedence road sign image changes according to the value received. Example: |
s4csvg_segnali_precedenza (read variable) Default value: all road signals are shown overlapped |
Road signal image changes according to the following 11 possible values test as https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==
|
|
SVG pin |
A generic pin changing color according to the value received. |
s4csvg_pin_status (read variable) Default value: grey pin |
0 = RED (closed service), 1 = GREEN (working service) Wrong value = GREY |
|
SVG vertical bar |
A simple vertical bar changing the filling level according to a percentage |
s4csvg_bar_fill (read variable) Default value: column filled at 50% |
A value in percentage from 0 (empty bar) to 100 (full bar) |
|
SVG Charging Station |
A charging station changing its status according to a value. Example: |
s4csvg_charging_status (read variable) Default value: in charge |
0 = ERROR (red), 1 = AVAILABLE (green), 2 = BOOKED (yellow), 3 = CHARGING (blue). 9999 = white icon |
SVG Tunnel Status |
A icon representing a tunnel changing its color according to a value. Example: |
s4csvg_tunnel_status (read variable) Default value: black image |
0 = CLOSED (red), 1 = OPEN (green) |
SVG speed limit sign |
The speed limit velocity changes according to the value received. Example: |
s4csvg_speed_limit (read variable) Default value: speed limit 90 |
Any value. 9999 = white icon |
Single Traffic Light |
A single traffic light showing dark grey/green/red light according to the value received. |
s4csvg_sinlge_traffic_light Defaul value: red light |
0 = OFF (dark grey), 1 = RED LIGHT, 2 = GREEN LIGHT 9999 = white icon |
SVG smart Light pin |
A custom widget representing a smart light pin to be shown on a map changing the luminosity according to the value received. Example: |
s4csvg_light_lum Defaul value: full luminosity |
A float value from 0 (OFF) to 1 (full luminosity) 9999 = white icon |
SVG PM10 level vertical bar |
A custom widget with a black sign changing the vertical position according to the PM10 level in µg/m³. Example: |
s4csvg_pm10_level Defaul value: 50 |
A value from 0 to >100 9999 = white icon |
|
SVG car status |
A custom widget with a car canging the color according to the value received |
s4csvg_car_status Default value: 1, green |
0 = white, 1 = green, 2 = red, 3 = blu, 4 = yellow, 5 = black, 6 = dark grey, 7 = light grey, 8 = cyan, 9 = pink, 10 = dark green, 11 = dark claret, 12 = brown, 13 = dark red, 9999 = white icon |
SVG car status in profile |
A custom widget with a car by profile canging the color according to the value received |
s4csvg_car_status Default value: 2, red |
0 = white, 1 = green, 2 = red, 3 = blu, 4 = yellow, 5 = black, 6 = dark grey, 7 = light grey, 8 = cyan, 9 = pink, 10 = dark green, 11 = dark claret, 12 = brown, 13 = dark red, 9999 = white icon |
SVG Digital Signage Status |
Custom widget representing a digital signage totem changing the color according to the status. |
s4csvg_signage_status Default value: red |
"connesso": blinking green otherwise red. 9999 white icon. |
SVG energy bar |
A custom widget representing a vertical bar with a level of fill |
s4csvg_bar_fill Default value: filled at 70% |
A value in percentage from 0 (empty bar) to 100 (full bar). 9999 white icon. |
SVG Florence Charging Station |
Specific custom widget for the Florence municipality recharging station. |
s4csvg_charging_status Default value: blue with paddock status |
0 = black icon, 1 = AVAILABLE (green), 2 = CHARGING (blu), 3 = ERROR (red), 4 = RESERVED (yellow with paddock). 9999 = white icon |
SVG Florence Fast Charging Station |
Specific custom widget for the Florence municipality fast recharging station. |
s4csvg_charging_status Default value: red |
"active" = green, otherwise red. 9999 white icon |
SVG Fuel Tank level |
A custom widget representing a fuel tank with the level of fill. |
s4csvg_gasoline_level Default value: filled at 20% |
A value in percentage from 0 (empty bar) to 100 (full bar). 9999 white icon. |
SVG Hotel Status |
A custom widget showing the status of an hotel according to a value received. |
s4csvg_hotel_status Default value: |
0 = RED, no room available |
SVG recycle bin level |
A custom widget representing a recycle bin with the level of fill. |
s4csvg_bin_level Default value: filled at 50% |
A value in percentage from 0 (empty bar) to 100 (full bar). 9999 white icon. |
SVG smart light new |
A custom widget representing a smart light pin to be shown on a map changing the luminosity according to the value received. |
s4csvg_light_lum Default value: full luminosity |
Light luminosity from 0 to 100. 9999 white icon |
SVG Water Tank |
A custom widget representing a water tank with the level of fill. |
s4csvg_tank_level Default value: 80% of fill |
A value in percentage from 0 (empty bar) to 100 (full bar). 9999 white icon. |
SVG Prohibition Traffic Signs |
The prohibition road sign image changes according to the value received. Example: https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ== |
s4csvg_segnali_divieto Default value: 0 |
Road signal image changes according to the following 25 possible values shown below:
9999 white icon. |
SVG Alert Status |
A custom widget representing a alert signal changing the color according to the alert severity |
s4csvg_alert_status Default value: black |
The following values are accepted (first capital letter needed): Red, Orange, Yellow, Green, Blue, White 9999 white icon. |
