Soracom Lagoon

Image Panel

The Image Panel displays a background image overlayed with a series of icons which change dynamically based on the value of one or more metrics, as well as labels indicating the actual metric values. This panel can be used to arrange data 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.

Compared to Dynamic Image Panel

By comparison, the Dyanmic Image Panel does not display a series of icons or values arranged on top of a background image. Instead, it displays a single image and updates that image based on the value of one or more metrics. For example, you can design a series of battery level icons, with each icon showing a different battery level, and use the dynamic image panel to map a specific metric value or value range to a different image. The dynamic image panel also works with Harvest Files to automatically update images from a device's camera (or other image source) as they are uploaded to Harvest Files.

Creating an Image Panel

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

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

   The image panel will be added to your dashboard.

   https://g.lagoon.soracom.io

   

Editing Panel Settings

To edit the 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.

Images

The Images tab lets you configure the background image as well as sets of images that correspond to metric values.

• Background - The URL of the image you want to use as the panel background.
• Keep Aspect Ratio - If enabled, the image proportions will remain the same instead of being stretched to fill the panel.
• Test Images - If you have added one or more icons below, this button will briefly cycle through each image so that you can verify that all images appear correctly.

To add a set of icons that will be displayed on top of the background image, click the Add Image button. Each image will correspond to one metric. You can then configure the image parameters:

Metric

• Name - The metric to use for the image. The listed options correspond to the metrics added in the Metrics tab.
• Unit - Add a unit to the metric value, such as degrees for a temperature metric, percentage for a humidity metric, or length for a distance metric. The value is displayed when you hover over the image.
• Decimals - The number of decimal places to show. The value is displayed when you hover over the image.
• Threshold - Two numbers which define thresholds between low, medium, and high value ranges:
  • When the metric value is below the first number, the "low" image will be displayed.
  • When the metric value is between the first and second number, the "medium" image will be displayed.
  • When the metric value is above the second number, the "high" image will be displayed.

Position/Size

• X/Y Position - When editing the image panel, you can simply click and drag each image to the desired position. This setting allows you to fine tune the position further if needed.
• Width/Height - The width and heigh of the image.

Images

• LowImageURL - The URL of the image you want to use as the "low" value image.
• MediumImageURL - The URL of the image you want to use as the "medium" value image.
• HighImageURL - The URL of the image you want to use as the "high" value image.

Sensors

The Sensors tab lets you configure text labels to display metric values on the panel.

To add a text label that will be displayed on top of the background image, click the Add Sensor button. Each sensor will correspond to one metric. You can then configure the label parameters:

Metric

• Name - The metric to use for the label. The listed options correspond to the metrics added in the Metrics tab.
• Unit - Add a unit to the metric value, such as degrees for a temperature metric, percentage for a humidity metric, or length for a distance metric.
• Decimals - The number of decimal places to show.

Position/Size

• X Location - The horizontal location of the label. You can use the up/down arrow keys to adjust the position.
• Y Location - The vertical location of the label. You can use the up/down arrow keys to adjust the position.

Link

• URL (absolute) - If a URL is specified, a link will be added to the label.
• Hover Text - If specified, a tooltip will be displayed when you hover over the label.

Appearance

• Font Color - The color of the text.
• Font Size - The size of the text.
• Border Color - The color of the label border.
• Background - The background color of the label.

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.