Custom Widgets: Table explanation, as SVG

Additional resources:

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjc4NQ==

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:
https://main.snap4city.org/view/index.php?iddasboard=Mjk4Ng==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjU0NA==
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjE4Mg==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjU0NA==
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjE4Mg==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjgyNg==
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjgyNg==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjE4Mg==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

  • s4csvg_fan_velocity (read variable).

Default value: rotating fan at 180ms

A value from 0 (min velocity) and 1 (maximum velocity). With 0 the fan stops.
  • s4csvg_fan_maxDur (read variable)

Default value: 1000ms

The maximum duration in milliseconds of a fan rotation, for example 1000 means that a rotation is performed in 1 second.
  • s4csvg_fan_minDur (read variable)

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
  • 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 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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

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:
https://main.snap4city.org/view/index.php?iddasboard=Mjk4Ng==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjU2OA==

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.

Synoptic Smart Waste Bins

6 waste containers showing the percentage of fill as coloured level and in percentage below each container.

Example:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjU3MA==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjg3MA==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

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:
https://main.snap4city.org/view/index.php?iddasboard=Mjk4Ng==

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:
https://main.snap4city.org/view/index.php?iddasboard=Mjk4Ng==

s4csvg_tunnel_status (read variable)

Default value: black image

0 = CLOSED (red), 1 = OPEN (green)
9999 = white icon

SVG speed limit sign

The speed limit velocity changes according to the value received.

Example:
https://main.snap4city.org/view/index.php?iddasboard=Mjk4Ng==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

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:
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk0NQ==

s4csvg_pm10_level

Defaul value: 50

A value from 0 to >100

9999 = white icon

 

 

 

 

 

Additional resources: