Soracom Lagoon

Dynamic Image Panel

The Dynamic Image Panel displays an image or picture which is dynamically updated when a metric value changes or when a new image is uploaded. This panel can be used to create graphical representations of numerical values, such as depicting battery percentage values as a battery icon, or displaying pictures taken by a device's camera as they are uploaded.

Modes

The dynamic image panel has three modes of operation:

• The Dynamic mode will map one or more metrics to a series of images, such as a battery metric to a series of battery icons. This can be used to display the current value of a metric using a series of images rather than displaying the raw numerical value.
• The Harvest Files mode will dynamically display images from Harvest Files as they are uploaded. This can be used to create a "live view" camera, where the panel automatically displays the latest image uploaded by a device to Harvest Files.
• The URL mode will also dynamically display images, but instead of uploading an image to Harvest Files, the device can upload the image elsewhere, and simply save the link to that image in Harvest Data so that Lagoon can update the image whenever the link changes.

The dynamic image panel mode can be configured from the Settings tab.

Compared to Image Panel

By comparison, the Image Panel does not dynamically modify the image. Instead, it displays a static background image, which can then be overlayed with a series of icons or metric values. The image panel allows you to arrange a series of metrics spatially, such as displaying temperature and humidity for each room on top of a floorplan, or the operational status of individual components on top of a process diagram.

Creating a Dynamic Image Panel

1. Click the Add panel button at the top of the dashboard.

2. From the list of available panels, select Soracom Dynamic Image Panel.

   The dynamic image panel will be added to your dashboard.

   https://g.lagoon.soracom.io

   

Editing Panel Settings

To edit the dynamic image panel settings, click the Panel Title, then select Edit.

General

The General tab lets you configure basic panel settings. Refer to the Lagoon Panels: General documentation for more information.

Metrics

The Metrics tab lets you configure the data series source. Refer to the Lagoon Panels: Metrics documentation for more information.

In addition to selecting a metric using a Standard query, you can specify the data source as a Table query:

• The Standard query type will allow you to select a single metric (for example, battery) from a data series to use as a variable for dynamically changing the image.
• The Table query type will allow you to select all metrics (for example, temperature, humidity, and distance) from a data series to use as variables for dynamically changing the image.

Settings

The Settings tab lets you configure how the image should dynamically change. The dynamic image panel supports three modes of operation:

Mode

• Dynamic - Map one or more metrics to a series of images, such as a battery metric to a series of battery icons.
• Harvest Files - Dynamically display images from Harvest Files as they are uploaded.
• URL - Treat a metric as a link to an image and dynamically display the image at that link.

Dynamic Mode

When the dynamic image panel Mode is set to Dynamic, you can convert a continuous range of one or more metric values to a discrete number of images, such as mapping a battery level range 0% - 100% to a set of images with filenames battery-0.png, battery-25.png, battery-50.png, battery-75.png, and battery-100.png.

• Background - The image URL prefix and suffix. Metrics that are added as variables will appear as parameters between these values. Lagoon will combine these values and use the resulting URL as the image source.
• Current Value - A preview of the dynamically generated image URL based on the metric's current value.
• Keep Aspect Ratio - If enabled, the image proportions will remain the same instead of being stretched to fill the panel.
• Append timestamp - If the source image will be updated, this option will add a timestamp as a query parameter to the image URL in order to force reloading the image instead of reusing a cached copy of the image. This option may negatively affect dashboard performance.
• Use Basic Authentication - If your images are located on a server that requires basic authentication, you can specify the Username and Password here.

To select a metric and configure how its values should be mapped into the image URL parameters, click the Add Variable button. Each variable will correspond to one metric, and the mapped value will appear in the Current Value field above.

Metric

• Name - The metric to use for the image. The listed options correspond to the metrics added in the Metrics tab.
• Current Value - The current value of the metric.
• Round value - Enable or disable mapping a continues range of metric values to a discrete set of values. If disabled, the metric value will be used as-is in the image URL parameter.
• Minimum value - The minimum value that the metric is expected to have. If the metric returns a lower value, the minimum value will be used.
• Interval - The interval or step between each mapped value.
• Maximum value - The maximum value that the metric is expected to have. If the metric returns a higher value, the maximum value will be used.

  When using the Round value option to map a continuous range of values to a discrete set of values, the Minimum value, Interval, and Maximum value parameters should be specified as whole numbers.

Show all image links - Show all permutations of image URLs based on the variables settings.

Harvest Files Mode

When the dynamic image panel Mode is set to Harvest Files, images that are uploaded to Harvest Files will be displayed in the panel, and automatically updated as new images are uploaded.

Once Harvest Files has been enabled and configured, you can then configure the dynamic image panel to display images:

• Name - The url parameter generated by Harvest Files when a file is uploaded. With the Harvest Files Log file uploading event to Harvest Data option enabled, when your device uploads a file, a corresponded file upload data entry containing url and timestamp parameters will be added to Harvest Data. You can then select this data source from the Metrics tab in order to retrieve the image URL.

  If url is not visible, you may need to expand your dashboard time range or upload a test file from your device in order for Lagoon to detect the url parameter.

• Current Value - A preview of the current image URL based on the latest url data.
• Keep Aspect Ratio - If enabled, the image proportions will remain the same instead of being stretched to fill the panel.
• Append timestamp - If your device is configured to upload images using the same filename (in other words, overwriting the existing file), this option will add a timestamp as a query parameter to the image URL in order to force reloading the image instead of reusing a cached copy of the image. This option may negatively affect dashboard performance.

URL Mode

When the dynamic image panel Mode is set to URL, a metric that contains the URL of an image will be used as the link where an image is located.

This mode is similar to the Harvest Files mode, but instead of uploading image files to Harvest Files, you can upload the files directly to your own server or a cloud storage service. Your device will need to save the URL of the uploaded file to Harvest Data so that Lagoon understands where the image is located.

• Name - The metric that contains the image URL. Your device should upload the URL as part of a data entry to Harvest Data. You can then select this data source from the Metrics tab, and Lagoon will use the URL in the metric value as the image source.
• Current Value - A preview of the current image URL based on the latest metric data.
• Keep Aspect Ratio - If enabled, the image proportions will remain the same instead of being stretched to fill the panel.
• Append timestamp - If your device is configured to upload images using the same filename (in other words, overwriting the existing file), this option will add a timestamp as a query parameter to the image URL in order to force reloading the image instead of reusing a cached copy of the image. This option may negatively affect dashboard performance.
• Use Basic Authentication - If your images are located on a server that requires basic authentication, you can specify the Username and Password here.

Time Range

The Time Range tab lets you adjust the range of data to use. Refer to the Lagoon Panels: Time Range documentation for more information.