Index | Prev | Next

CanvasPane

Found, in the bajaui palette, this component is commonly used to specify positioning for most Widgets and Geom for Shapes in a Px graphic. In addition to providing support for absolute positioning, it also provides support for scaling and/or aligning its contents.

The added Min/Max Scale Factor properties in Niagara 4.6 and later, provide support for responsive positioning, giving you more control over how graphics respond when displayed on mobile devices. The responsive CanvasPane scales contents to the screen size of the device in use, which could be anything from a PC with a large screen monitor to a cellphone. Additionally, the FlowPane component (with child ResponsivePane) adjusts the display of contents in a CanvasPane to make best use of the available space. For example when using a cellphone, data that initially displays in a single column adjusts to flow into two columns when the device is rotated 90–degrees.

Figure 104.   CanvasPane properties
Image
 NOTE: The CanvasPane component also is available in the mobile palette (mobile palette is deprecated in Niagara 4.6 and later). It provides support for absolute positioning for Widgets in a Mobile Px page. When used in a Mobile Px file, the CanvasPane scale options are limited to None or Fit Ratio. 
Type Value Description
Visible true (default), false When true the object is visible. When false the object is hidden.
Enabled true or false Activates (true) and deactivates (false) the object (network, device, point, component, table, schedule, descriptor, etc.).
Layout additional properties See following section, Layout properties
View Size Width 100.00, Height 100.00 Specifies the logical size of the CanvasPane's coordinate system, measured as a percentage.
Scale None (default), Fit, Fit Ratio, Fit Width, Fit Height Specifies how to scale the ViewSize to fit the CanvasPane's bounds: Fit Ratio preserves the aspect ratio. Fit causes the graphics to fill the entire available screen space, possibly causing some distortion.
Min Scale Factor 0.05 (default) Defines the minimum scale for the graphic. the range is 0.0–1.0. Setting a value smaller than 0.5 could allow a graphic to become unusable and setting a value to 1.0 does not allow it to shrink at all.
Max Scale Factor 1.00 (default) Defines the maximum scale for a graphic. The default means the graphic will not get any bigger than it currently is. In most cases, you want to shrink images for mobile device display and you do not want to enlarge them when the page gets very big.
Halign Left, Center (default), Right, Fill Defines how to horizontally align the CanvasPane.
Valign Top, Center (default), Bottom, Fill Defines how to vertically align the CanvasPane.
Background Solid, Gradient, Image, Null (default) Specifies background fill color.

Solid opens the Color Chooser window.

Gradient opens the Gradient Editor window.

Image opens the Image Brush Editor window. Click the Browse icon (Image) to open the File Chooser, Ord Chooser, or other method of selecting an image file.

Null indicates no color (white).

Layout properties

The Layout property, visible in a Property Sheet view of the component, allows you to set positioning coordinates and dimensions for the pane.

Name Value Description
X 0.00 Provides the horizontal X-coordinate for absolute positioning of the pane. Units are either Abs (default) or Percent.
Y 0.00 Provides the vertical Y-coordinate for absolute positioning of the pane. Units are either Abs (default) or Percent.
Width 100.00 Provides the width dimension of the pane in pixels. Units specify either an absolute value, a percentage, or a preferred value: Abs (default) or Percent, or Pref.
Height 100.00 Provides the height dimension of the pane in pixels. Units specify either an absolute value, a percentage, or a preferred value: Abs (default) or Percent, or Pref.
Fill checkbox When Fill is selected all widgets in a given row are sized to fill the row height. When deselected the widgets in a given row use their preferred height and alignment.

Related Links

  • Components in bajaui module (Parent Topic)

    • Index | Prev | Next