Drawing and Configuring Canvas Zones

The procedures in this topic come after Adding a Canvas (Accessing the Staging Area, Uploading a Background Image, and Adjusting the Margins), but before Naming the Canvas and Saving the Canvas.

Drawing a Zone and Assigning a Point

1. Select Manage zones.

2. Select Draw zone.

   Note: After selecting Draw zone, a mouse's pointer will turn into a cross-hair once it moves across the margin and is over the background image. If the cross-hair moves off of the image before drawing a zone, it will revert to a pointer. Select Draw zone again.

3. Position the cross-hair onto a starting-point for the zone shape.

4. Single-click, which starts the drawing.

5. Move the cross-hair to the next point of the shape.

   Note: A line follows the cross-hair from the previous point.

6. Single-click to make a side of the shape.

7. Repeat the previous two steps until all but the last side is made.

8. Double-click to finish the shape.

   Note: The Device list and Point Selector immediately appear. The zone shape may seem to disappear in the background. However, it will still be there once you assign a point to it.

9. From the Device list and Point Selector, locate and choose the point that you want to assign to the zone.

   Note: If creating on a global dashboard , a dropdown box is above the Device list and Point Selector. If you want to select a point from a different project, select that project from the dropdown list first.

   Note: Below a device name, the information in gray text is the device type, as set in the device's profile (see Editing a Device Profile). Below a point name, the information in gray text is [parent device name]:[point ID].

   Note: Selecting a device from the Device list (left) narrows the Point Selector list (right) to show only the points in that device.

   Note: You can filter both lists by typing in Search Devices. You can also filter the Point Selector list by typing in Search Points.

   Note: As devices and points are filtered, the number of displayed devices or points out of the total (matching that criteria) is given at the bottom of each list.

   Note: To display more devices or points in a list, select Load More Devices or Load More Points (at the bottom of each list).

10. For the point slot (which is automatically added along with the zone shape), do one of the following:

    • Drag the point slot to where you want it to display on the zone.

      Note: In this case you should also style the point (see Styling Points) in relationship to the zone's colors (see Configuring a Zone's Colors).

    • Hide the zone point (see Hiding a Zone Point.)

11. When done drawing zones and/or configuring their colors (see Configuring a Zone's Colors), select Save zones.

Hiding and Showing Zone Points

Hiding a Zone Point

1. Select Manage zones (if not in zone management mode already).

2. Select the zone shape associated with the point slot that you want to hide.

   Note: Small, blue diamonds and circles (which can be used to modify the zone shape) appear around the zone when it's selected.

3. Select (hide zone point).

Showing a Zone Point

1. Select Manage zones (if not in zone management mode already).

2. Select the zone shape associated with the point slot that you want to show.

   Note: Small, blue diamonds and circles (which can be used to modify the zone shape) appear around the zone when it's selected.

3. Select (show zone point).

Configuring a Zone's Colors

Using Premade Color Sets

1. Select Manage zones (if not in zone management mode already).

2. Select the zone that you want to configure colors for.

   Note: Small, blue diamonds and circles (which can be used to modify the zone's shape) appear around the zone when it's selected.

3. Select Change zone colors.

4. Choose a Color Set from the dropdown menu.

5. Enter the Min value and Max value.

   Note: See the preview of the color spectrum that will be applied to the entered range of values.

   Note: Selecting Custom for Color Set at this point will make color thumbnails appear next to the values again. Select a thumbnail to make a color palette appear, allowing you to modify the preset color. (For details, see the relevant information in Using a Custom Color Set.)

   Note: To add intermediate values, with Custom selected for Color Set, select the + (Add intermediate value). Enter the new Intermediate value and select a color for it.

6. Select Save to apply the color configuration to the zone.

7. When done drawing zones and/or configuring their colors, select Save zones.

Using a Custom Color Set

1. Select Manage zones (if not in zone management mode already).

2. Select the zone that you want to configure colors for.

   Note: Small, blue diamonds and circles (which can be used to modify the zone's shape) appear around the zone when it's selected.

3. Select Change zone colors.

4. Select Custom (the default) for the Color Set (if not selected already).

5. Enter the Min value and Max value.

   Note: To add intermediate values, select the + (Add intermediate value). Then enter the new Intermediate value.

6. Select the gray thumbnails next to the values, which opens a color palette.

7. Do one of the following to choose a color:

   • Use the color slider and move the selection circle.

   • Enter the HEX color code.

   • Select a previously used color and opacity setting from the rectangular swatches at the bottom of the palette.

8. Do one of the following to change the opacity:

   • Use the opacity slider.

   • Change the seventh and eighth digits of the HEX code.

   • Select a previously used color and opacity setting from the rectangular swatches at the bottom of the palette.

9. Select an area outside of the palette to close it.

   Note: See the preview of the color spectrum that will be applied to the entered range of values.

10. Select Save to apply the color configuration to the zone.

11. When done drawing zones and/or configuring their colors, select Save zones.