Adding and Styling Canvas Points

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.

Adding and Arranging Points

1. Select Add point, which makes a Device list and Point Selector appear.

2. Locate and choose the point.

   Note: If creating on a global dashboard , a drop-down menu is above the Device list and Point Selector. If you want to select a point from a different project, select that project from the drop-down menu 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).

3. Drag the point slot to where you want it to be on (or around) the background.

   Caution: If you drag a point slot outside of the background image's margins, it will turn red. If you then release it, it will disappear and you will need to add it again.

Note: To remove a point, select the x below it.

Styling Points

Sizing a point

Use resize to switch between three size options for the point slot:

• Point name and point value displayed next to each other (long)

• Point name displayed above point value (more compact)

• Point value only (smallest)

Customizing a point's color and opacity

1. Select the palette .

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

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

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

Adding Status Colors

When status colors are configured, a color-coded status bar displays on the left edge of the card's point slot. You can configure the status color to change depending on point's current value.

Using Premade Color Sets

1. Select Add colors (on the point slot's left), which makes a window appear.

2. Choose a Color Set from the dropdown menu.

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

4. If you want this color configuration to apply to the text as well, select the Apply color to text checkbox.

5. Select Save to apply the status color configuration to the point.

Using a Custom Color Set

1. Select Add colors (on the point slot's left), which makes a window appear.

2. From the Color Set dropdown menu, select Custom.

3. Enter the Min value and Max value.

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

4. Select the thumbnails below the color spectrum, which opens a color palette.

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

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

7. If you want this color configuration to apply to the text as well, select the Apply color to text checkbox.

8. Select Close.

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

9. Select Save to apply the status color configuration to the point.

Adding a Text Slot

1. Select Add Point.

2. Select Text Slot, which switches to a text editor tab.

3. Type and format text and/or hyper-linked text, as you would in a simple word processor.

4. Select Save.