Overlay Icons on top of an image

Hello,

One of Tago’s demo dashboard is the smart farm - see image below.

Is it possible to re-create this using the standard dashboard tools or do I have to learn about custom widgets.

Is there a video or step by step to create and place those clean icons, overlaid on top of an image (which I presume in this example is the dashboard image background).

Is the pop up white box an embedded widget of some sort?

Hello @tago ,
The name of this widget is ImageMarker. Yes, you can add other widgets embedded within the pins.

I recommend using the blueprint dashboard, as it has a more updated editor.

Here is the documentation https://docs.tago.io/en/articles/28-layer

Thank you @gustavo.

Firstly, working from the Tago Smart Farm example above: There are clearly multiple sensors (one for each silo, soil temp, etc).

I have tried to replicate something similar in both the traditional ImageMarker and also the Blueprint Dashboard version. Here are my results:

TRADITIONAL IMAGEMARKER

  • I can add multiple sensors and their fields in the variables
  • For sensors with the same field names, I can rename the display field with sensor1-temp, etc
  • I can control the icon colour in Visualization

BUT, from PIN CONTROL menu:

  • I cannot figure out how to display an embedded widget; I presume you need to specify an external link to a custom widget - if that is the case, can you give me a code example of a custom widget that would display soil temperature (as per the example above).
  • I don’t know if its possible to display a regular widget; if so, how?

BLUEPRINT DASHBOARD IMAGEMARKER
OK, this widget is a different beast altogether.

  • I added key/values to the sensors so that I can create a ‘blueprint device’ in the widget setup
  • This presents a list of sensors in a drop down list at the top. This means that this widget can only display values from a single sensor.
  • I cannot see anyway of replicating the smart farm layout over one image using this widget because it looks like you can only have a single sensor selected from the drop down.
  • I did re-tag the devices to have a unique device tag name and then created a blueprint device for each device - this presents all of the sensors as separate drop down selections along the top, and yes, you can then have multiple sensors and values on over the image - but this sort of defeats the objective of having blueprints because I had to create a specific blueprint device for every sensor.
  • Also, same problem for the embedded widget.

IN SUMMARY
I guess the smart farm example was originally created before blue prints dashboard. So perhaps that would be a better one to use to replicate the smart farm.

I would appreciate your comments/suggestions.

Thank you

Hello,
Sorry, in fact the smart farm was made using the Compose widget.
To use embed in compose just send a variable called embed in the metadata with the link of the widget you need.

{
    "variable": "temperature",
    "value": 71,
    "metadata": {
      "x": 0.3,
      "y": 0.3,
      "embed": "https://embed.tago.io?widget=yyy&dashboard=xxx&token=zzz"
    }
  }

How to get the embed link:
1 - All widgets have a tab called Embed widget in the widget edition
2 - Click the generate embed button
Screenshot from 2021-02-02 09-11-41
3 - The link you need is inside the generated code, you need to copy what is in quotes after src

Brilliant @gustavo - I’ll try this out.

Regarding meta data.

  • Do you need to append metadata (presumable when the data arrives) for every data point. It means that if you want to change the associated widget or position, you would need to backport the changed metadata on every data point, which appears to be wasteful (or never change the widget :grinning:)

  • What is the best way to manage metadata generally in Tago. Is it possible to see the metadata other when use the SDK to extract directly from the database.

  • As a matter of interest, is this data being stored in some sort of key/value store? AWS perhaps?

Many thanks

Hi Gary,

  • Yes you do need to replicate and append metadata even if it isn’t the one being modified.

  • Heres an example on how you’re going to extract metadata from a variable.

    const myDevice = new Device({ token: “my_device_token” });

    const [result] = await myDevice.getData({
    query: “last_item”,
    variables: “humidity”,
    });

    console.log(result.metadata)

  • Yes TagoIO uses AWS.

Also, you can always use the SDK documentation as well https://js.sdk.tago.io/ :slight_smile:

Hello @guilhermeco - this is slowing making sense now. Thanks for the code example on getData.

I worked through the analysis code examples over the weekend and cross referencing back to the sdk docs so I can understand ‘why’ it’s working.

I realise you can add any metadata that’s useful to your application but do know where the documentation is for the metadata related to specfic widget elements is?

For example, in the reply from @gustavo the metadata for the compose widget pin is x, y and embed - I presume there is a ‘icon’ option to specify the SVG file. Is this stuff documented somewhere?

Thanks again.

Hi Gary,

Regarding the metadata of which the widget will make use of, you should encounter the configuration on the documentation of the specific widget https://docs.tago.io/en/categories/9-widgets.

Many of them don’t have a full documentation though, the blueprint feature released changed the widgets as well and the frontend team is still working on their documentation. I will reinforce with the team the need for the documentation.

Thank you!

Hi, am well behind on this post, but appreciate any help.
I have followed the documentation on adding metadata, and was successful through the emulator in positioning pins. However these disappear after next data points come in.
Per the comments above, do I need to add the metadata in another way so each data point has its attached metadata? (Via Analysis, LNS etc).
Thanks in Advance
Dayne