# Environment

The Environment plugin displays and manages information on the currently configured building and maps of the robot.

## Robot panel

The summary of the Environment button shows information about the current configuration of the environment of the robot.

### Empty State

No building is active at the moment.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc__env_card.png" width="480">

*Figure 1: Empty State Card*

### Building Active State

Shows the active building name. On click, it automatically opens a panel with that building data.*

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_card_building.png" width="480">

*Figure 2: Active Building Card*

### Floor Active State


Shows the active floor name.On click, it automatically opens a panel with that floor data.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_card_floor.png" width="480">

*Figure 3: Active Floor Card*

### Map Active State

Shows the number of active maps. More than one map can be active at a time.

On click, it automatically opens a panel with that map data. If two or more maps are active at the same time, the first one will be shown.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_card_map.png" width="480">

*Figure 4: Active Map Card*

## Control Center

The environment data is organized as hierarchical data in a tree-like, collapsible structure. Each entry will display additional details on that element on the right-hand panel.

![wg3_env_panel](../../../../_static/images/web_user_interface/environment/wg3_env_panel.gif)

*Figure 5: Environment Control Center*

### Top panel

#### Add button

This button allows creation of new elements. click it displays a menu with three options:

- Building
- Floor
- Map

Each one of these buttons opens a dialog with the proper inputs to create that element.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_addBtn.png" width="120">

*Figure 6: Add Button*

!!! Note
    If no building exists, only the building option will be shown.

#### Building dialog

The building dialog shows inputs to configure its name and time zone. In addition, under the Advanced section, the name of the main building anchor will be configured (if not it will default to simple_anchor).

Finally, buttons to manage the current state ([Active](https://google.com) / [Inactive](https://google.com)) and default state ([Enabled](https://google.com) / [Disabled](https://google.com)) are provided.

<div style="display:flex;"> 
    <img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_buildingDialogAdvanced.png" alt="wg3_cc_env_buildingDialogAdvanced" width="335" >
    <img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_buildingDialogWarning.png" alt="wg3_cc_env_buildingDialogWarning" width="335">
 </div>

 *Figure 7: Building Dialog && Building Dialog with Warning*

!!! Warning
    In case there is an existing active/enabled building, and the created building is set as Active/ Enabled, the new building will take preference, and Disactive/Disable  the existing building. In that case a warning will be displayed.

#### Floor dialog

The floor dialog shows inputs to configure its name, parent building, building anchor, and floor level.

In addition, under the Advanced section, the name of the floor anchor will be configured (if not it will default to simple_anchor).

Finally, buttons to manage the current state ([Active](https://google.com) / [Inactive](https://google.com)) and default state ([Enabled](https://google.com) / [Disabled](https://google.com)) are provided.

<img src="../../../../_static/images/web_user_interface/environment/wg3_env_createFloorAdvanced_dialog.png" width="335">

*Figure 8: Floor Dialog*

!!! Warning
    A floor can only be active if the building it belongs to is currently active.

#### Map Dialog

The map dialog shows inputs to configure its name, parent building, parent floor, parent floor anchor, map filepath, and Frame ID.

Finally, buttons to manage the current state ([Active](https://google.com) / [Inactive](https://google.com)) and default state ([Enabled](https://google.com) / [Disabled](https://google.com)) are provided.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_mapDialog.png" width="335">

*Figure 9: Map Dialog*

!!! Warning
    A map can only be active if the building it belongs to is currently active.

### Left panel

The left panel shows a tree view composed of Buildings, which contain Floors, which in turn contain Maps:

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_leftPanel.png" width="335">

*Figure 10: Left Side Panel*

#### Building item

Buildings show the following information:

- _Arrow icon:_ toggle open/close building floor list
- _Building name:_ Name of the building, clicking on it will select it and display the detailed data in the right panel.
- _Flag icon:_ shows the enabled building state.
- _Three dots icon:_ opens a context menu.

#### Floor item

When building item is opened, floors will be shown with the next data:

- _Arrow:_ toggle open/close floor child item data
- _Floor name:_ on click displays data on the right panel.
- _Flag icon:_ shows the enabled floor state.
- _Three dots icon:_ opens a context menu.


#### Map item

When building item is opened, floors will be shown with the next data:

- _Map name:_ on click displays data on the right panel.

- _Flag icon:_ shows the enabled map state.

- _Three dots icon:_ opens a context menu.


The flag icon displayed on each item type allows to see and manage the following states:

- **Enable:** sets the item state to enabled.

- **Disable:** sets the item state to disabled.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_enableDialog.png" width="335">

*Figure 11: Generic enable dialog*


The context menu displayed for all three item types contains the following entries:

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_contextMenu_activate.png" width="200">

- **Activate:** sets the item state to active.

- **Deactivate:** sets the item state to deactivated.

- **Remove:** removes an item.

<img src="../../../../_static/images/web_user_interface/environment/wg3_cc_env_removeDialog.png" width="335">

*Figure 12: Generic remove dialog*

!!! Note
    Only one building can be active at a time. Activating a new building will automatically deactivate the currently active building and all its associated items.

### Right panel

The right panel displays detailed data on the selected element-. The data displayed depends on the selected element:

#### Empty State

If no items are present, an empty state is displayed.

![wg3_cc_emptyState](../../../../_static/images/web_user_interface/environment/wg3_cc_emptyState.png)<br>
*Figure 13: Control Center Empty State*

#### Building

For Building elements the following details are displayed: 

- Building name
- Creation date
- Last modified date
- Anchor list: List of all building anchors present, their current enabled/disabled state, and a  menu offering the following options:
    - Anchor name.
    - Anchor enabled/activated states.

![wg3_cc_env_leftPanel_building](../../../../_static/images/web_user_interface/environment/wg3_cc_env_leftPanel_building.png)<br>
*Figure 14: Building Item in Left Panel*

#### Floor

Select a floor item automatically displays its data:

- Floor name
- Creation date
- Last modified date
- Building anchors list
- Floor anchors list
- Extra floor elements:
    - Lane
    - Waypoints
    - Zone

![wg3_cc_env_leftPanel_floor](../../../../_static/images/web_user_interface/environment/wg3_cc_env_leftPanel_floor.png)<br>
*Figure 15: Floor Item in Left Panel*

#### Map

Select a map item automatically displays its data:

- Map name

![wg3_cc_env_leftPanel_map](../../../../_static/images/web_user_interface/environment/wg3_cc_env_leftPanel_map.png)<br>
*Figure 16: Map Item in Left Panel*