# BIM/IFC Widget

The BIM/IFC widget allows you to configure a 3D model under the BIM/IFC standard and add sensors to the desired elements of the model.

## How it Works

{{< staticImage "ux/BIMIFC/Widget/BIMIFCWidget.png" "BIM/IFC Widget" >}}

The widget displays the selected model, covering the widget area. To the left of the widget is a panel with available actions, and to the right are listed the selected and monitored elements.

### Actions Panel

{{< staticImage "ux/BIMIFC/Widget/BIMIFCWidgetModelOptions.png" "BIM/IFC Actions Panel" >}}

With the Actions Panel, you can:

- **All elements** displays a list of all elements in the model, allowing you to search and select an element quickly

{{< staticImage "ux/BIMIFC/Widget/BIMIFCWidgetAllItemsSelector.png" "BIM/IFC All Elements" >}}

- **Show/Hide list** allows you to show/hide the right panel of elements
- **Highlight elements** will select all preconfigured elements from the right panel in the model
- **Capture an image** downloads a snapshot of only the model in its current state
- **Create clipping plane** enables the option to select an element in the model to create a cutting layer that allows you to cut the model and see elements inside
- **Remove clipping plane** removes the selected cutting layer
- **Enable/disable clipping planes** activates/deactivates the cutting layers without needing to remove and add
- **Clear cache and reload** clears the cache and reloads the image to return it to its initial state

### Elements Panel

{{< staticImage "ux/BIMIFC/Widget/BIMIFCWidgetActiveSelection.png" "BIM/IFC Elements Panel" >}}

With the Elements Panel, you can select an element to highlight it in the model for more precise location.

States are also represented here as established by the configured code.

## Configuration

{{% ux-widget-configuration %}}

{{< staticImage "ux/BIMIFC/Configuration/BIMIFCConfigGeneral.png" "BIM/IFC General Configuration" >}}

- **Organization files** allows you to select a file to add to our widget

- **Preview** here, you can see the loaded model and preselect those elements you want to highlight/monitor

In the preview panel, the following actions are found:

[...The actions are similar to the Actions Panel section...]

### Items Tab

From here, you can alter the values of the elements selected in the model preview:

- **Express ID** allows you to modify the ID of the selected element if it has changed in the model
- **Alias** you can assign an alternative display name

{{< staticImage "ux/BIMIFC/Configuration/BIMIFCConfigItems.png" "BIM/IFC Items Configuration" >}}

### Code Tab

Here, you configure the logic needed for the identification of different values and to display them on the elements of the model.

{{< staticImage "ux/BIMIFC/Configuration/BIMIFCConfigCode.png" "BIM/IFC Code Configuration" >}}

_IMPORTANT NOTE:_ Whenever code is modified, it must be evaluated to save the changes

### Function

Depending of the configuration receives the following parameters:

{{% ux-widget-param-entitydata %}}

{{% ux-widget-param-relatedEntities %}}

{{% ux-widget-param-timeseriesdata %}}

{{% ux-widget-param-alarmdata %}}

* *callback* (optional) function used to send data to the widget (only when the api/http petitions are promised, use return instead)

```javascript
callback();
```
or

```javascript
return;
```

{{% ux-widget-code-utils %}}

**alert** -> alert navigator method

**setValueToItem** -> Sets a value to the selected item

```javascript
setValueToItem(itemID, alias, value [,style, datetime, deviceId, datastreamId])
```

**setItemStatus** -> Sets an special status

```javascript
setItemStatus(itemID, [rgbColor(string format)|null])
```

### Final code structure build by the application

```javascript
async function main(entityData, relatedEntitiesData, timeserieData, alarmData,callback) {
  // YOUR CODE HERE WITH RETURN OR CALLBACK
}
```

### Examples

{{% children sort="weight" depth="10" %}}

---