Wikis > Guidelines for Design module

figure-9-details-large_1024x400

What the design module is used for: The goal of the design module is to visualize map based data of a district and manipulate the data by applying measures on objects within the district. To visualise different renovation alternatives and measures on a map is a helpful tool to clarify and to support the decision making of the renewal of a city district.

Visualizing data
Data is visualized by coloured objects like buildings based on properties of those buildings. Colouring is done through the use of a legend defined per visualized property or based on the definition of Key Performance Indicators (KPIs) used in the renewal process. Legends are defined directly in the database for now, see “Design module tables” for details. KPIs are defined within the general Dashboard, not in the design module. All defined and processed KPIs are automatically available as a “Detail” item (layer) in the design module.

Changing data
In the design module objects like buildings can be selected. For each case, measures are defined (in different renovation alternatives) that can be applied on specific objects or on the district as a whole. When applied on a set of selected objects these measures change values of properties of the selected objects. A second way of changing object properties is by means of a dialog where properties can be manipulated directly in the design module, and stored in the database. Calculation modules connected to the Ecodistrict-ICT IDSS platform can read these changed values and calculate KPIs based on those values. The KPIs that are related to objects can in turn be visualized by the design module. This chain of modules is controlled by the general Dashboard in the IDSS.

How to start the design module
Before starting the design module all object data, for example  building information, need to be uploaded to the database of the Ecodistrict-ICT IDSS platform (turn to guidelines of the Data Upload module). If KPIs and Alternatives are to be used these also need to be chosen and calculated. This is done in the general Dashboard of the IDSS. Hence it is required to learn and use the Dashboard prior to usage of the design module (for Dashboard guidelines turn to link >>).

The design module is started from the Dashboard by clicking the “Open Design Module” button in the “As-is” tab, see Figure 1, or by clicking the “Open Design Module” button in the “Develop alternatives” tab, see Figure 2. This means that case specific data, such as building properties and measures defined in the renovation alternatives, will be available in the design module.

figure-1-start-from-dashboard-as-is

Figure 1, start the design module from the dashboard for the “As is” situation.

 

figure-2-start-from-dashboard-alternatives

Figure 2, start the design module from the dashboard for an alternative.

Map of district – the central part of the design module
The user interface part of the design module is implemented as a web application.  The central part is a map centred on the district.

Control elements for visualization

skarmklippdesign

Figure 3, parts of the web application for control and visualizing data.

 

  1. Basic control of the map
  • Drag the map by pressing the left mouse button on an empty part of the map and then move the mouse. Release the mouse button to stop dragging.
  • Zoom the map by selecting the “+” and “-“ zoom controls (Figure 3, option 1b) in the upper left corner on the centre of the map.
  • Zoom the map by scrolling the mouse wheel on an empty part of the map (Figure 3, option 1). The map is zoomed at the current mouse location.
  1. Selecting what to show
    Select the base map out of 3 options, see Figure 4, Figure 5 and Figure 6, from the Base map/basic layers control in the right upper corner.

    Figure 4-7 showing the base map with different options: Satellite, Street, Grayscale and Buildings.

    Figure 4-7 showing the base map with different options: Satellite, Street, Grayscale and Buildings.

Besides the base map, the basic object layers, see Figure 7, can be selected to be shown or hidden. In the example above basic objects “Buildings” and “Spaces” are available. All defined object types within the district can be shown as basic layers. They can be displayed on the map without specific colouring, just the outline of the objects for orientation and selecting objects. The Basic layers are coloured blue by default.

figure-8-domains-large

Figure 8 Filter on domains.

3. Domains
The set of properties that are available to be shown are grouped in domains. In the “Domains” control (Figure 3 option 3 and Figure 8) those groups can be enabled/disabled to filter the list of properties available in the details control below it. Deselecting items here reduces the number of items shown in the “Details” control (Figure 3 option 4 and Figure 9). Domains are defined for all objects directly in the database. See “Design module tables” for details.

4. Details
Properties of objects can be displayed as layers on the map. Colouring is done by predefined legends. The legends are defined directly in the database. See “Design module tables” for details. KPIs are generated automatically. The legend is also automatically built from KPI information defined in the Dashboard.

Figure 9, select “details” to show on the map.

Figure 9, select “details” to show on the map.

In the above example “Building function” (Figure 9) is selected and overlaid on the map. The corresponding legend is shown on selecting an item but can be closed by selecting the cross in the upper right corner of the legend. The legend can be dragged to a different position. To make a closed legend visible: deselect and re-select a “Details” item.

Applying measures to objects and changing object properties directly in the Design module

Figure 10, Parts of the web application to change data that the “details” are based on.

Figure 10, Parts of the web application to change data that the “details” are based on.

figure-11-basic-layer-buildings-large

Figure 11, basic layer “Buildings” is shown on the map.

1. Basic layers
Basic layers can help with selecting objects. An enabled basic layer for buildings shows all known buildings in blue (Figure 11)

 

 

 

2. Select objects
Objects can be selected in different ways:

figure-12-selection-tools-large

Figure 12 Select objects controls.

– Drawing a polygon, rectangle or circle on the map (Figure 12): all intersecting and enclosed objects are selected. The selection mode can be chosen with the upper three icons shown in Figure 12.
– Based on values of their properties set in an objects query dialog (Figure 13). The shown selection of properties is defined directly in the database. See “Design module tables” for details. This selection mode can be chosen with the 4th icon at the bottom shown in Figure 12.

 

 

figure-13-select-by-query-dialog-large

Figure 13, select objects by query dialog.

Selected objects are drawn in pink (Figure 14).

figure-14-selected-building2

Figure 14, selected object on the map.

3. Select objects by clicking on the map
An object can also be selected by clicking the mouse on the map within or near an object (Figure 14). Enabling the corresponding “Basic layer” (Figure 11) helps locating objects. The first object selected determines the type of objects that can be added to the selection.
Any object defined in the case can be selected even if not visible. If the first object selected is a building for example additional buildings can be selected and deselected by holding down the CTRL key while clicking on or near a building object. Clicking away from any of the objects resets the selection.

 

figure-15-popup-large2

Figure 15, popup menu on a selected object.

Edit properties of objects 
A right click on the map or on a selected object shows a popup menu (Figure 15). The “Deselect objects” option is always available and will clear any previous selection. The “Properties” option is only available when the click was on one or more selected objects.

Right clicking selected objects shows a popup menu (Figure 15). Selecting “Properties” from that menu shows a dialog with common values for the selected objects (Figure 16). These values can be changed in this and the changed values are applied into the database for all selected objects.

figure-16-building-properties-dialog-large

Figure 16, edit object properties dialog.

 

figure-17-measures-expanded-large

Figure 17, select a measure to be applied on previous selected objects.

4. Measures

In the Ecodistrict-ICT database measures are predefined per case and can be applied to selected objects or on the district as a whole. The measures available for the type of the selected objects are shown when the “Measures” icon (Figure 10, option 4) is selected in the left upper corner. District wide measures are always shown.

Following is a set of measures available to be applied to buildings within the Antwerp case (Figure 17).

Selecting a measure shows a dialog (Figure 18) with specific options for that measure.

 

figure-18-measures-options-large

Figure 18, select an option for a selected measure.

When applied, that measure, including the selected objects, are stored under the “Measures history” control (Figure 10, option 5 and Figure 19) on the upper right side.

figure-19-measures-history-1-added-large

Figure 19, all measures, including previous applied measures, are listed to be applied to the database.

5. Measures history/measures to be applied control

In this control (Figure 19) measures are collected to be applied together with the data from the database. This control also gives an opportunity to re-use previous applied measures in other alternatives.

Re-use the selection of measure objects
When a measure is selected (Figure 19) the corresponding objects that measure is to be applied to are selected on the map. This selection of objects can then be used to apply yet another measure.

Re-apply measures from the history list
Measures used in another alternative can be added to the active measures by selecting the “+” icon behind it (Figure 19). The “-” icon removes that measure from the active measures list.

 

Design module tables
Some options can only be set directly in the database. The following tables hold information for the design module configuration.

  • di_measures: this table contains all measures to be applied to selected objects
  • di_measureshistory: this table contains all measures including their selected objects for the as is situation and the alternatives
  • di_objectproperties: this table defines all properties of objects that can be edited
  • di_queries: this table defines all detail layers that can be shown in the design module including legend definitions

For all details on these tables see the Design module wiki at “tables configuration”. There are plans for creating an editing tool for these options so direct database editing will no longer be needed.

Examples

Workflow visualization of data

  • Start at the upper right corner.
  • Select the base map you want to use. “Grayscale” keeps the focus on the coloured data, “Street” shows more information on the surroundings.
  • Keep the basic layers switched off.
  • Use the second icon in the upper right corner to select the domains of interest.
  • Use the third “Details” icon to select a layer. A second layer can be selected with lower opacity on top of the first one by pressing and holding the CTRL key while selecting an item from “Details”. Selecting an already enabled item from “Details” while holding the CTRL key toggles that item’s visibility.

Workflow changing data by applying a measure

  • Start at the upper right corner.
  • Select the base map you want to use. “Grayscale” keeps the focus on the coloured data; “Street” shows more information on the surroundings.
  • Select the basic layer of objects you want to apply measures to; this helps with selecting objects.
  • Select a method of selecting objects on the upper left corner.
    • Select objects by using a polygon: draw a shape by settings the corners. Click the first point to close the shape. All objects touched by this shape will be selected. Holding down CTRL while closing the shape, i.e. select the starting point, will add objects to any existing selection.
    • Select objects by drawing a rectangle. All objects touched by this rectangle will be selected. Holding down CTRL while drawing the rectangle will add objects to any existing selection.
    • Select objects by drawing a circle. All objects touched by this shape will be selected. Holding down CTRL while drawing the circle will add objects to any existing selection.
    • Select objects by executing a query to the database based on property values of the objects. All objects matching the selection criteria will be selected.
    • Just click in or near an object to select it. Holding down CTRL while clicking will toggle if the object is selected.
  • Select a measure at the upper left corner.
  • If there are options available for the measure, a dialog will popup. Select the appropriate option and press “Apply”.
  • The combination of the selected objects, measure and measure option will be added to the measure history on the upper right corner, 4th icon from the top.
  • Repeat selecting objects and selecting measures.
  • In the measures history you can enable and disable measures that are to be applied to the database. Previous applied measures can also be re-applied.
  • In the measures history, press “Apply” to change the object properties in the database. The applied measures will be added to the history, which means that they can be re-applied in the future.

 

Information for programmers

For more information about the Design module for programmers, turn to link >> or link>>.

 

More Supporting modules Calculation modules

 

Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedIn