The compose widget gives developers the ability to build widgets that display real-time video streams of their environment and add real-time information to those streams.
Using this feature, users can monitor multiple conditions in their factories, farms, warehouses, and any other facilities.
Developers can add YouTube and Vimeo videos, or they can upload their own videos.

Developers can also add videos and images to build their applications. 

Creating the widget

Select which variables you want to display in the widget. For this example, we have a device called Farm, and we added four variables.

Now, on "type of background", you can choose between an image, Youtube video, Vimeo video, and Generic video.

Image lets you select a single image to display as a background.
Youtube Video lets you display a Youtube video by adding the URL.
Vimeo Video lets you display a Vimeo video by adding the URL.
Generic Video will display an MP4 video that can be hosted anywhere with a public HTTPS link. You can upload a video using our Files system and use our URL.

Note, if you select video, it's very important that you select the corresponding aspect ratio so we can properly map the position of the icons according to the video.

After you select your background, you can set aliases for your variables

Then you can choose the icons and colors to be displayed

During development, you may want to display the x and y coordinates to know where to place your icons, if you do so, the widget will display the x and y coordinates of the image while you move the cursor around.

You can choose to group variables by timestamp or series, so TagoIO can display the latest information.

You can choose to display info windows automatically when opening the dashboard.

At this time, you will have a background in your widget


Adding Icons

Move your cursor where you want to place the icon and get the coordinates from the top right corner.

You need to send the x and y in your variable's metadata

{  
  "variable": "silo1_level",
  "value": 71,
  "unit": "%",
  "metadata": { "x": 0.40, "y": 0.11 }
}

After you send x and y in the metadata, you will see your icon in the widget

Adding links and websites to your variables

You can add links, widgets or any websites to be displayed in your variables.

To add links, edit your widget and go to advanced options, there you will find the URL and URL alias.

To add an embedded widget, we need first to have the widget you want to embed.
First, go to the widget you want to embed, edit it and go to embed.
Generate the embed code and copy the only the URL as shown in red in the example below.

<iframe 
  width="800" 
  height="600" 
  src="https://embed.tago.io?widget=5bd8ba7558c300002ecaa866&dashboard=5bd875bd3bb152002e5d7a24&token=e96c987a-1ba8-489c-9154-c322ca551166"
  frameborder="0" 
  allowfullscreen
/>

Make sure you copy only the link as shown in red in the example above.

Now edit your Compose widget again and go to Advanced Options.

Under Pin webpage URL, paste your URL for the variable you want, in this case, barn_temperature, and save.

Now you can see the widget if you click in your variable

You can also embed other websites there, just add the link that you want.