Floor plan with different markers and colors

Show Losant
1

This example shows how to use the Position Chart Block to display a floor plan with different markers and colors based on device type and attribute values. First, here’s the screenshot.

image
image.png2676×1192 302 KB

This block has two different shapes of markers: circles and diamonds. The circles change color based on the current state of the device, which are CNC machines in this example. The diamonds represent packaging lines and do not change color.

The various markers are stored as PNG images using Losant Files:

image
image.png2668×1390 308 KB

Using the Position Chart’s advanced pin configuration, I can display one of the images based on the device’s type and current state. Here’s the pin configuration:

{{#eq data.currentStatus 'cutting'}}
  https://files.onlosant.com/my-application-id/marker-green@2x.png
{{/eq}}

{{#eq data.currentStatus 'stopped'}}
  https://files.onlosant.com/my-application-id/marker-gray@2x.png
{{/eq}}

{{#eq data.currentStatus 'notCutting'}}
  https://files.onlosant.com/my-application-id/marker-blue@2x.png
{{/eq}}

{{#eq data.currentStatus 'alarm'}}
  https://files.onlosant.com/my-application-id/marker-red@2x.png
{{/eq}}

{{#eq deviceTags.type.[0] 'line'}}
  https://files.onlosant.com/my-application-id/diamond-green@2x.png
{{/eq}}

currentStatus is a string attribute on CNC devices that holds the current state of each CNC machine, which is either “cutting”, “stopped”, “notCutting” or “alarm”. Based on the value, the appropriate image and color is displayed.

Each device also has a type tag that controls what type of equipment this is. For this example, it’s either “cnc” or “line”. The last conditional is checking whether or not the device is an assembly line, which will then render the green diamond.

To get all of these devices on the chart, I used two tag queries:

image
image.png1558×328 28.8 KB

Hopefully this example provides a good starting point for you if you’re designing a similar block.