With the Heat Map widget, you can build a colorful layer with bubbles representing the intensity of the variables on top of your image. The higher the value of the variable, the more red the bubble will be, and you can also add a heat scale to this layer.

This widget also accepts features like metadata, that can be set in your variable data.

Creating your own

To add it to your dashboard, choose the Heat map widget from the list and customize it to your preference. You can edit it by using the options located on the right side of the widget.

This widget works for both dashboards, Normal and Blueprint.

1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

Click on the cog icon to edit specific options for this variable, such as positions. Click on the close icon to remove this variable from the widget's data.

This field is dependent on the type of dashboard you are using; the difference is explained below.

1.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.

1.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.

2. Setting a background image

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

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

2.1 Static

It displays the image from a static URL.

2.2 Conditional

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

2.3 Dynamic

This image URL comes from variable data.

3. Bubble position

To position the bubble, you need to set an x and y coordinate for your variable data. These numbers represent the x and y position of the variable, with the coordinates (0,0) in the top left corner of the given image and coordinates (1,1) in the bottom right corner.

These coordinates can be set by two types:

3.1 Bubble position using metadata

The selected variable must have the x and y parameters inside the metadata parameter. x and y represent the coordinates where the heat bubble will be displayed. This value goes from 0 to 1, so if you want to show the bubble in the middle, send 0.5 for both x and y.

{
  "variable": "heat",
  "value": 71, //value must be a number
  "metadata": {"x":0.2, "y":0.3}
}

With the code above, the widget will show a heat bubble like this one:

3.2 Bubble position through the widget edit screen

Look at the below example of how to set the coordinates using the widget edit screen.

You can still use metadata, but if the metadata is not identified, the position through the widget edit screen will be used.

The last variable's data will produce a bubble in this position.

4. Range of scale

It is possible to create a custom range interval for the heat bar on the bottom of the image. By default, the scale is automatically generated based on the values of the variables.

This scale defines which color the variable data will produce. Additionally, even if you hide the heat bar, the color of the bubble will still respect this behavior.

It can be customized by fixed or dynamic values by using another variable's data. This field works like Gauge's range.