Creating Traffic Light-Style Status Indicators in SORACOM Lagoon

Disclosure based on the operational criteria for "Representations that are difficult for general consumers to distinguish as representations of a business operator": This article was written by an employee belonging to SORACOM INC. as of the date of publication. However, it is a personal post and does not represent the official statements or views of SORACOM INC.

Objective

When visualizing data with SORACOM Lagoon, I want to create a dashboard where the status can be checked using lamp displays—showing green for normal and red for abnormal, like a traffic light.
Something like this:

or

Preparation

1. Store data in SORACOM Harvest Data

https://users.soracom.io/en-us/docs/harvest/send-data/

*Note: This is not mandatory as you can use demo data if you don't have your own data yet.

2. Start using SORACOM Lagoon 3

https://users.soracom.io/en-us/docs/lagoon-v3/getting-started/

Method 1: Using Soracom Image Panel

1. Create a Folder

From the Browse tab in Dashboards, click New.

Select New Folder.

Enter an appropriate folder name and click Create.

2. Create a Dashboard and a Time Series Panel

Click + Create Dashboard from the screen you were redirected to.

Select Add a new panel.

Select Demo for Resource Type.

Select Device-1 for Resources and battery for Properties. In that state,

click the duplicate icon twice and change the Resources for Query B and C to Device-2 and Device-3.

Return to the Dashboard, click the Panel Title, and click Duplicate from More....

You now have two Time Series Panels.

3. Creating a traffic-light-like lamp display panel

Click Edit from the dropdown menu that appears when you click the Panel Title.

Select Soracom Image Panel under Visualization.

Click + Add Image three times.

Configure Image0, Image1, and Image2 as follows.

	Image0	Image1	Image2
Name	A-Device-1 battery	B-Device-2 battery	C-Device-3 battery
Threshold	0.3 / 0.7	0.3 / 0.7	0.3 / 0.7
X/Y Positions	30 / 50	50 / 50	70 / 50

Click Save to save, and a dashboard like the one below will be created.

This shows the display when the battery value of Device-1 is 0.32, Device-2 is 1, and Device-3 is 0.
This works, but since it's hard to tell which icon corresponds to which device/sensor, another option is to separate the panels for each icon.

Method 2: Using Canvas

The steps up to Method 1-1 and Method 1-2 are the same.

Click Edit from the dropdown menu that appears when you click the Panel Title.

Select Canvas under Visualization.

Delete Element1, which is included by default under Elements in Layer.

Click + Add Element under Elements in Layer and select Icon.

Add three of these.

It should look like this:

Clicking Element1 will bring up a field called Selected element (Element1).

Click SVG path, select your preferred icon, then click Select.

Select Fill color and then choose Device-1 battery.

Set the Thresholds. Enter 0.3 and 0.7.

Configure Elements2 and Elements3 in the same way.
At this time, set the left in Layout to 100 and 200 to position each icon.
It's fine if it looks like this. Click Apply to save.

Adjust the panel size,

and it becomes easier to understand if you add a text Element and display Sensor-1, Sensor-2, and Sensor-3 there.

Configuration screen

Result

Although Canvas is more tedious to set up, it is convenient because it offers flexibility in layout settings and allows you to decide icons and colors relatively freely.

That's all. Great job!