# Floor Plan

The **Floor Plan** widget enables you to display various sensor data on an image that represents objects such as a building floor plan, machine, production line, or any other structure. The image works as a background image and can be a 2D or 3D image in any format. With this widget, you can place **widgets** or **boolean shapes** on the background image to represent the physical sensor locations and display data on them. This approach of visualizing data on the background image offers enhanced insights compared to using standalone widgets.

{% hint style="info" %}
The Floor plan widget is available on the global dashboards.
{% endhint %}

In the **Widget options** modal, configure the following:

In the **Name** text box, enter a **name** to identify your widget on the dashboard.

Click on the **Add floor** button.

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2F1sRs8ne8FogKNaj5UEfx%2Ffloor-plan-7.png?alt=media&#x26;token=d9e48515-24bc-4106-9281-6b1dfbdea83a" alt="" width="563"><figcaption></figcaption></figure>

In the **Floor name** text box enter a **name** to identify the floor. The provided name will be displayed on the top-left corner of the widget.&#x20;

In the '**Button text'** text box, enter a **name** to display on the button as the button label. The buttons you added are displayed on the bottom-right corner of the widget. You can add a button to each floor. You can navigate to any floor by clicking on the respective button.

Click on the **Upload plan** button, then browse and select the **floor plan** (image file) from your computer.&#x20;

{% hint style="info" %}
The image file size limit is 300 kB.&#x20;
{% endhint %}

Click on the **Save** button. The file will begin uploading.&#x20;

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FOG82L6KEgYChid5GOZVW%2Ffloor-plan-6.png?alt=media&#x26;token=075ee22a-e853-4456-8953-fe1fbb4a746c" alt=""><figcaption></figcaption></figure>

Once the file has finished uploading, the image will be displayed on the preview workspace.

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FWRcsImCJc5spjIyMfuhz%2Ffloor-plan-1.png?alt=media&#x26;token=5f40a217-9879-40fc-9b57-548162db399d" alt="" width="563"><figcaption></figcaption></figure>

You can display data on the floor plan (or any background image) using the following boolean shapes and widgets:

1. **Circle** - displays the status in a circle based on whether the measured value is true or false.
2. **Square** -  displays the status in a square based on whether the measured value is true or false.
3. **Digital** - a widget that displays measured data for one or more data fields.

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FLDoOesFgOMCFKZEeUyza%2Ffloor-plan-2.png?alt=media&#x26;token=4657e88b-0178-4a21-8588-8dfc99616eae" alt=""><figcaption></figcaption></figure>

### Circle

The **Circle** is a boolean shape that allows you to apply different color overlays to the selected area on the floor plan, based on the measured value's condition. If the value is true (`value > 0`), an overlay color is applied, while a different overlay color is used for false (`value <= 0`). Optionally you can display a text alert on the shape based on the current status.

In the **Circle options** modal configure the following settings:

In the **Circle name** text box, enter a **name** to identify the circle within your floor plan.

Click on the **Device Type** drop-down and select the **device type** from the list.

Click on the **Device** drop-down (this will list all the devices for the selected device type above) and select the **device** from the list.

Click on the **Data field** drop-down and select the **data field** from the list as the data source.

In the '**Positive text'** text box, enter the text that you want to display if the measured value is positive. Then click on the **color picker** (next to the 'Positive text') to select a color for the fill color (transparent overlay) of the circle. When the circle receives a 'positive' or 'true' status, it will change to the chosen color. If you haven't chosen a color, the default overlay color will be green.

In the '**Negative text'** text box, enter the text that you want to display if the measured value is negative. Then click on the **color picker** (next to the 'Negative text') to select a color for the fill color (transparent overlay) of the circle. When the circle receives a 'negative' or 'false' status, it will change to the chosen color. If you haven't chosen a color, the default overlay color will be red.

If you do not want to display the text alert on the shape, turn off the '**Show text**' button.

Click on the **Save** button. The **Circle options** modal will close.

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2F5LA2OBfYWQMysuh7kFoP%2Fcircle-1.png?alt=media&#x26;token=6662eef9-efa9-4141-b98c-e59b86a73f92" alt="" width="394"><figcaption></figcaption></figure>

Now the circle has been added to the floor plan.&#x20;

Drag and drop the circle onto the floor plan where you want to highlight the area to which the measured status applies. You can resize the circle using its resize points (click on the circle first to show the resize points).

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FO26CT5mShbYXXHD6U6uQ%2Ffloor-plan-3.png?alt=media&#x26;token=a0112eff-1090-4b32-a2a2-253ce06d5670" alt=""><figcaption></figcaption></figure>

### Square

The **Square** is a boolean shape that allows you to apply different color overlays to the selected area on the floor plan, based on the measured value's condition. If the value is true (`value > 0`), an overlay color is applied, while a different overlay color is used for false (`value <= 0`). Optionally you can display a text alert on the shape based on the current status.

In the **Square options** modal configure the following settings:

In the **Square name** text box, enter a **name** to identify the square within your floor plan.

Click on the **Device Type** drop-down and select the **device type** from the list.

Click on the **Device** drop-down (this will list all the devices for the selected device type above) and select the **device** from the list.

Click on the **Data field** drop-down and select the **data field** from the list as the data source.

In the '**Positive text'** text box, enter the text that you want to display if the measured value is positive. Then click on the **color picker** (next to the 'Positive text') to select a color for the fill color (transparent overlay) of the square. When the square receives a positive or true status, it will change to the chosen color. If you haven't chosen a color, the default overlay color will be green.

In the '**Negative text'** text box, enter the text that you want to display if the measured value is negative. Then click on the **color picker** (next to the 'Negative text') to select a color for the fill color (transparent overlay) of the square. When the square receives a positive or true status, it will change to the chosen color. If you haven't chosen a color, the default overlay color will be red.

If you do not want to display the text alert on the shape, turn off the '**Show text**' button.

Click on the **Save** button. The **Square options** modal will close.

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FJvSKQlrrOArydTf6r7sw%2Ffloor-plan-4.png?alt=media&#x26;token=2853f3d6-7436-4a50-be68-068bf189572f" alt="" width="393"><figcaption></figcaption></figure>

Now the square has been added to the floor plan.&#x20;

Drag and drop the square onto the floor plan where you want to highlight the area to which the measured status applies. You can resize the square using its resize points (click on the square first to show the resize points)

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2F0HGcFYsUEFsTCaM8v76v%2Ffloor-plan-5.png?alt=media&#x26;token=e4d0068d-3bd3-4e22-8571-6fd60765f287" alt=""><figcaption></figcaption></figure>

### Digital

The **Digital** widget allows you to display measured values of up to 2 data fields on a circle.

In the **Digital options** modal, configure the following settings:

In the **Digital name** text box, enter a **name** to identify the digital widget within your floor plan.

In the **Device type** drop-down list, select the **device type**.

In the **Device** drop-down list, select the **device** (this will list all the devices for the selected device type above).

In the **Data fields** drop-down list, select the **data field** that you want to display the value on the circle (this will list all the data fields for the selected device above).

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2F93KWA3rngOZedG61IA7q%2Fdigital-options-1.png?alt=media&#x26;token=b1082096-9dee-41b7-8bad-077da243f02d" alt="" width="394"><figcaption></figcaption></figure>

Click on the **+** button if you want to add the second data field.

{% hint style="info" %}
If you added 2 data fields, you can remove one of the data fields by clicking on the **x** button.
{% endhint %}

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FpKXeAlXCleDWtQNiPjsj%2Fdigital-options-2.png?alt=media&#x26;token=ad2eb108-69ec-44cb-a997-e2ecfda97661" alt="" width="393"><figcaption></figcaption></figure>

Click on the **Save** button.

The resulting **Digital** widget will be something like this:

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FXKSydI1DDpdkur87BIg2%2Fdigital-options-3.png?alt=media&#x26;token=f4256207-2214-4197-bf7e-eeddafd6e0db" alt="" width="278"><figcaption></figcaption></figure>

{% hint style="info" %}
You can add more floors to the widget by clicking on the **Add floor** button.
{% endhint %}

After adding all the boolean shapes and widgets onto the floor plan, click on the **Save** button in the **Widget options** modal.

The **Floor plan** widget is now added to the dashboard, and it looks something like this:

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2FpzuqmRo7yGsle6CSyudu%2Ffloor-plan-8.png?alt=media&#x26;token=236315d1-e7de-437b-8e84-2e7c170cf0a4" alt=""><figcaption></figcaption></figure>
