General Vision

Image Marker widget is a powerful way to visualize data within an image. This allows you to represent data in a less abstract way and closer to reality. For example, imagine you have a motion sensor network. You can have variables inside TagoIO platform named like: ‘motion_sensor_1’, ‘motion_sensor_2’, etc… Even if you use these variables with the best name you can imagine, they will not have the same expressiveness to the user as they would if you used these variables in the Image Marker widget. Check the following Image Marker example, used to visualize temperatures in a hotel:

See how a simple application used as an example becomes much more expressive to the user. This is what you should look for in your application: ease of understanding and expressiveness to the user.

How to use Basic Image Marker

The image you saw above is a sample application where Image Marker is used in basic mode, where each variable becomes a pin, let’s look at the most important widget options.

Main Configuration

If you set your Image Marker as basic, each variable of the widget can be a pin. So, if you have five variables, you will have 5 pins to insert in your widget. So, you can set on the main configuration the title, type and select the variables used in your Image Marker widget

Visualization

In the visualization tab, you can set all options related to how your pins will be displayed. Options like: Connect the pins with lines, Open info box automatically, etc… It’s also on this tab that you must select the variable you want to store layers information. You can also set conditions for the pins color, icons and alerts. For example, in the hotel we would like to have the temperature always equal or bellow 80 °F. So, we created conditions to set alerts when temperature is greater than 80 °F:

User control

In this tab you can set the options that will be available for users to interact with the widget. For example, if you don’t want that users remove pins, simply turn off the option. Like the following image:

Pin Configuration

You can further customize your widget by placing images or videos on the pins if you wish. For that, go to Pin Configuration tab. There you will see options for placing images, embed links, external links and other options. Each pin has its own configuration and you can customize each pin however you like.

Formula

In the Formula tab you can use the Formula feature to customize the values that will appear on the pin without changing the original values in the bucket. For example, if you have a Celsius unit temperature and want your customers to view with the Fahrenheit unit. Just apply the formula: $VALUE$ celsius in fahrenheit. This is only one of the several applications that exist for the formula feature, there are several examples and you can also create your own formula.

Try to use Image Marker in your application!

If you are interested in what has been said about this widget and would like to improve the user experience in your application, try working with this widget! It is a powerful tool and can be used in many ways. Feel free to comment on this post how you used the widget or ask about any questions you had while reading this post.

Thanks for reading!