View source for GUI (user interface)

[[User Guide | [Home]]] - [[Access to the platform | [Access to the platform]]] -  [[Observations | [Observations]]] - [[Forecast Models | [Forecast Models]]]  - [[Static Layers | [Static Layers]]] -  


<span style="font-size:110%">This section is devoted to give users a deeper insight about:
*[[GUI (user interface)#Control Map|Control Map]];
*[[GUI (user interface)#Toolbar|Toolbar]]
*[[GUI (user interface)#Display|Display]]
*[[GUI (user interface)#Layer List|Layer List]]
*[[GUI (user interface)#Additional Tools|Additional Tools]]


[[File:IU_01_eng.JPG|800px|thumb|centre|GUI (user interface).]]


== Control Map ==
The '''Control Map''' of the application is managed by the open source Java script library [http://leafletjs.com Leaflet]. The control is instantiated as the system is started, using the Google Hybrid map provided by [https://www.google.it/maps Google-Maps] services as the background layer. The available background maps are:

* Google Map: consists of the world political map, toponyms are shown with respect to the zoom level;
* Google Satellite: consists of the world's physical map obtained from the composition of high-resolution satellite images;
* Google Hybrid (default): represents the combination of the two aforementioned  maps.
In addition to these main options, the user can upload every background map released by open source consortia (eg., [https://www.openstreetmap.org OpenStreetMap]) such as Standard, Cycle Map, Transport Map, MapQuestOpen, Humanitarian, et c.


The user can select the background map by moving the cursor on the action button located in the lower right of the screen, shown in the following figure:

[[File:IU_02.JPG|800px|thumb|centre]]

It is possibile to pan the map by clicking the left mouse button and dragging it to the desired direction.
The zoom level may be controlled:

# using the mouse wheel (scroll forward: increases level of zoom / scroll back: decreases zoom level)
# by holding down the SHIFT key on the keyboard and drawing a rectangle with the mouse, holding the left mouse button clicked. In this way, the zoom will be related to the selected area
# by the combination of CTRL and + buttons (Zoom In) or CTRL and - (zoom out)

== Toolbar ==
The '''Toolbar''' contains many action buttons, depending on user's profile, like the following:

* [[Observations]]: is the section dedicated ot observational data and diagnostic models
* [[Forecast Models]]: lists all the available forecast systems (numerical weather prediction models, hydrological models, landslide susceptibility models;
* [[Static Layers]]: provides all the information needed to design a comprehensive risk scenario such as the exposures or the hazard maps
* Tools: enables some ancillary functions such as Export, and Report Scenarios
* Search: is the tools allowing the users to search for any element visualized by the platform such as weather stations, toponyms, et c.
* Notifications: this area is dedicated to display the messages delivered by other users of the portal



[[File:IU_03_eng.JPG|800px|thumb|centre|Barra dei Comandi.]]

== Display ==
The time range of the data the system is visualizing are shown in the '''Display'''. Within this area the users find:

* the initial date of the time range selected by the users 
* the end date of the time range selected by the users 
* the current date

By default, the application will Dewetra sets the limits of the time range between the "now" (as the end date of the time range) and 24 hours before (beginning of the period).

[[File:IU_04.JPG|800px|thumb|centre|Display.]]



In the display there are four action buttons:

* the two <u>calendar</u> icons allow the users to modify, respectively, the starting date and the end of the time range. By clicking on the buttons, you can set both start and end dates (minutes, hours, day, month and year) of any time window into the past and view the data available at that time (the so-called ''deferred time'' mode).
* the <u>clock-shaped</u> icon sets back the dates of beginning and end of the time range to the default mode
* the <u>star-shaped</u> icon informs the user about the latest information acquired from the real-time collection system, as in the following figure:

[[File:IU_05.JPG|800px|thumb|centre|Notification of real-time data collection.]]

== Layer List ==
Unlike the previous version of Dewetra, the '''Layer List''' is dynamically created whenever the user loads a static and / or dynamic layer. Everytime a layer is selected by the user, the '''Layer List''' -containing the layer name and the available options for it- is displayed in the top left corner.


[[File:IU_06.JPG|800px|thumb|centre|An example of a dynamic layer list.]]


Each element of the list can be turned on or off and therefore displayed or hidden on the map, by acting on the control menu next to the name.
Its relative position on the list corresponds to the position of the layer on the map: usually, the latter layer thata has been pulled on overlaps the former ones.
Anyway, users may change the priority of a layer, by left-clicking the layer icon next top the name in the '''Layer List''' and dragging it up or down.


The available features for the dynamic layers ([[Observations]] and [[Forecast]]) and for the [[Static Layers]] are described in the dedicated sections.

== Additional Tools ==
The '''Additional Tools''' button is placed in the upper right of the dashboard, immediately below the [[Toolbar]] and includes in order, from left to the right, the tools '''Share''', '''info''', '''Print map''' and '''Measure'''.

[[File:IU_07.JPG|800px|thumb|centre|Additional Tools.]]

===Share===
''This functionality is not yet available''.

===info===
Info is activated by left-clicking '''i''' icon and allows the user to pull on the information associated to each layer that has been previously loaded. <br>
In the following example, the application of '''info'' to the rainfall layer: the pop-up window opens in the upper right part of the screen displaying the rain depth of the point that has been clicked on.


[[File:IU_08.JPG|800px|thumb|centre|In the example, the pop-up window containing the raindepth value provided by the rainfall map layer.]]


If '''info''' is applied to a static layer, the pop-up window will show all the attributes available in the database for that layer. As an example, the next figure shows the result displayed in case a user clicked the Hospitals layer.


[[File:IU_09.JPG|800px|thumb|centre|In the example, the pop-up window containing the attributes of the Hospitals layer.]]

To disable the info and return to the navigation mode, left-click again on the '''i''' icon.

===Print map===
The '''Print map''' button allows the user to open a pop-up window containing a preview of the '''Control Map''' displayed at the time: by clicking the ''Download Image'' button located at the lowerright corner of the pop-up window, the map can be downloaded in .png format and saved on user's own local disk.

[[File:IU_10.JPG|800px|thumb|centre|In the example, the pop-up window containing the print preview for the rainfall map.]]


In case the user would not to proceed with the download of the map, the pop-up window can be closed just by clicking on the X-shaped button in the upper right of the pop-up window.

===Size===
The '''Measure''' button allows you to open a drop-down menu through which you can choose to '''Create a new measurement''' by left-clicking on the corresponding button.
In this way the user can draw a straight line or pinpoint the vertices of a polygon by left-clicking directly on the map. At the same time, through a pop-up window, the system provides information about the line's length (in both kilometers and miles) and the area of the polygon (in both square metres and miles). 


[[File:IU_11.JPG|800px|thumb|centre|In the example, the pop-up window containing the length of the line drawn by the user and the area of the polygon.]]


To complete the action, left-click on '''Finish Measurement''' inside the pop-up menu: in this way, the last point on the map set is automatically connected to the first.
When the measurement is completed, the system displays the length of the solid line and area of the polygon. Also, user may choose whether to delete it  or to centre the '''Control Map''' on the line (polygon) that has been previously drawn.


[[File:IU_12.JPG|800px|thumb|centre|In the example, the pop-up window containing the information displayed by the system once the action has been completed by the user.]]


----
[[User Guide | [Home]]] - [[Access to the platform | [Access to the platform]]] -  [[Observations | [Observations]]] - [[Forecast Models | [Forecast Models]]]  - [[Static Layers | [Static Layers]]]  -