Image Widget

Image Widget

The Image widget provides the ability to present custom images in your dashboard. You can use it to present the logo of your company or customer, or anything else that helps the user to better visualize your application.

This widget works for both dashboards, Normal and Blueprint.

1. Image Behavior

Image behavior is where you get the image URL from, and it can be three types: static, conditional, and dynamic.

You can use TagoIO's file system to store the image, and cache the public URL.

1.1 Static

It displays the image from a static URL.

1.2 Conditional

Creates conditions, where each condition will have an image URL associated with it, and if the variable linked in the Data from field satisfies this condition, this image will be displayed.

1.3 Dynamic

This image URL comes from the variable data.

2. 'Data From' Field

The conditional and dynamic behavior has a Data from field to set the device and variable that will be used.

This field is dependent on the type of dashboard you are using; the difference is explained below.
2.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the data.

2.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the information.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.

    • Related Articles

    • Note Widget

      Note allows you to create a text to be viewed in your dashboard. It accepts a markdown formatted text, allowing you to use bold, italic and list tools.  Although you could use the Note Widget to add images to your dashboard, we highly recommend that ...

    • Image Marker Widget

      The image marker widget allows you to add pins to different images. You can also manipulate the colors, values, and icons for each pin. This widget also accepts features like metadata and series, that can be set in your variable data. Creating your ...

    • Adding Image Selector field on Forms

      The Image Selector field type allows you to put an entry where the user can select one or many images with given values. Users will need to click on an image and the value you entered in the widget options will be stored in your data device. The most ...

    • Tile Widget

      Tiles allow you to simplify how users interact with your dashboards by providing a more intuitive and beautiful set of options. Use Tile to display clickable images that will redirect user to another website, dashboard or tab.  Creating your own To ...

    • Map Widget

      Add the location of your variable to visualize your devices on the Map. You can also edit the icon and color of the pins, add images, create links, add geofences & filters, and more! The variable data should look like the following payload. Note that ...