# Image Widget

The widget allows you to upload and configure an image with data icons overlaid on it.

## How it works

{{< staticImage "ux/Image/Widget/ImageWidget.png" "Image" >}}

Once the widget is configured, an image will be displayed with the configured data.

### Icon Menu

Data can be viewed as icons positioned over the image, which we can interact with to view information about them:
{{% ux-widget-datastream-widgets %}}

### Widget Menu

{{< staticImage "ux/Image/Widget/MenuActionList.png" "Image menu action" >}}

The following actions can be performed:

{{% ux-widget-menu-actions %}}

## Configuration

{{< staticImage "ux/Image/Configuration/ConfImage.png" "Configuration" >}}

### Image Upload

{{< staticImage "ux/Image/Configuration/ConfGeneral.png" "General" >}}

From here, we can upload the image to display and its format.

### Icon Configuration

{{< staticImage "ux/Image/Configuration/ConfIcon.png" "Icon" >}}

Using the **+** button, we can add icons to the image.

Existing icons can also be edited by clicking on them.

We can configure:

- **General**:

  {{< staticImage "ux/Image/Configuration/ConfIconGeneral.png" "Icon general" >}}

  - **Entity key:** Device from which we will obtain the data
  - **DatastreamId:** Data stream whose value will be displayed on the icon

- **View**:

  {{< staticImage "ux/Image/Configuration/ConfTabView.png" "Icon view" >}}
  {{% ux-details-configuration-top %}}
  {{< staticImage "ux/Image/Configuration/ConfChart.png" "View mode" >}}
  {{% ux-details-configuration-bottom %}}
  {{% ux-details-configuration-formatter %}}

- **Advanced**:
  {{< staticImage "ux/Image/Configuration/ConfTabAdvanced.png" "View mode" >}}
  - **Prevent override entity identifier in templates**

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

---