The compose widget allows you to add pins to different images and videos. You can 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 own

To add it to your dashboard, choose the Compose 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.

This widget requires two types of variables, a group of variable to get the pin's data from, another to get the layer.

Click on the cog icon to edit specific options for this variable, such as formula, color, and more. 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. Background 

There are four types of backgrounds: it can be an image, a Youtube video, a Vimeo video, or a generic video. You can change or customize it through the widget edit screen.

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

You can also customize the aspect ratio of the media, and resize properties as Fill, Contain or Cover.

3. Pins position

To position the pin 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 Pin 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 pin will be displayed. This value goes from 0 to 1, so if you want to show the pin in the middle, send 0.5 for both x and y.

{
  "variable": "pin",
  "value": 21,
  "metadata": {
    "x": 0.5,
    "y": 0.9,
    "color": "cyan"
  }
}

3.2 Pin position through editor

You can allow an editor, so your users can place pin positions, edit infobox content, and more.

4. Editor

You can enable users to edit pins. This editor is represented by the pencil icon located on the left side of the widget, and it only appears if any editing permission was assigned when editing the widget.

Changes made during editing are saved by clicking the save button, otherwise they are all discarded. The return buttons (arrow to the left) within the layer or pin do not discard the changes.

4.1 Tool box

The tool box has four main tools as:

• Default tool: allows you to zoom and drag the image;

• Add tool: This allows you to add a pin to the layer. When this tool is active, just click somewhere on the image. Note that the number of pins is limited by the data passed to the widget, so if your widget is of the basic type you will only have a reference pin to the added devices;

• Edit tool: This allows you to edit a pin already added to the layer. When this tool is active, just click on a pin to edit it. Editing a pin includes editing data source, label, embed, img_pin and icon;

• Delete tool: This allows you to delete a pin already added to the layer. When this tool is active, just click on a pin to delete it.

5. Infobox

Present more information with an infobox that'll automatically be associated with the pins, and customize it with images, external links, formulas, embed widgets, and much more.