Floor plan with different markers and colors


#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.

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:

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:

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