Creating Panel Controls

Shape Control

 

The Shapes tool is used to draw basic graphics, such as Arc, Circle, Line, Pie, Polygon and Rectangle, directly on a panel; e.g. a Pie shape may be used to provide a visual illustration for sales figures. Pen Style and Fill options are also available (where applicable) to enhance the visual display of the shape.

Important Note:
As of PxPlus 2019, the Arc, Circle, Line and Pie shape objects were redesigned to make it easier to create and select the shape, define display properties and determine the size of the shape by using the object's width and height. For compatibility purposes, the former formats of these objects have been renamed to Radius Arc, Radius Circle, Poly Line and Radius Pie respectively and continue to function as they did previously.

The recommendation is to use the redesigned formats of these objects; however, in certain instances, such as when drawing a multi-segmented line or when creating an Arc, Circle or Pie shape very close to the edge of a panel, the former formats may be used.

To insert images created outside of NOMADS and PxPlus, use the Image tool. For more advanced chart styles, use the Chart tool. A shape object is for display purposes only and does not respond to events.

To view a video presentation on how to use a Rectangle shape to add an informational message to a panel, go to How to Add an Info Message.

For more information on defining shapes, see 'ARC', 'CIRCLE', 'LINE', 'PIE', 'POLYGON' and 'RECTANGLE' mnemonics.

Drawing Shapes

While the Shapes tool provides a method for creating simple shapes in NOMADS, it is not a freehand drawing tool. Shape characteristics are set primarily by adjusting the object's display properties rather than by dragging the mouse pointer.

To draw a shape object on a panel, select the Shapes control tool from the Controls Toolbar. Hold down the left mouse button and drag the mouse to create a small rectangle as a starting point. Release the mouse button to set the initial coordinates for the new object.

By default, all shape objects start out as a Rectangle but can be easily redefined as an Arc, Circle, Line, Pie or Polygon object by changing the Shape property, and then setting the dimensions and other characteristics by using the Shape Properties.

To move the object after it is created, see Modifying Objects.

Shape Properties

The shape of an object is determined by selecting a shape type from the Shape property drop-down list: Arc, Circle, Line, Pie, Poly Line, Polygon, Radius Arc, Radius Circle, Radius Pie and Rectangle. See Important Note above.

When creating or editing a Shape control, the Shape Properties dialogue (pictured below using the Folder Style version of the NOMADS Panel Designer) is displayed:

This dialogue is divided into the following tabbed panels for viewing and/or changing shape properties: Display and iNomads Settings.

Note:
Depending on the Shape selected, the properties available on the Display tab will vary, and Fill properties are not applicable for Arc, Radius Arc, Line and Poly Line shapes. All other properties are identical across all shape types.

 

Name

Unique name of the shape control (NOMADS provides a default). Naming conventions for variables apply. Click the Browse Library button to copy parameters from an existing object (via the Library Browse dialogue).

Note:
When a new control name is entered, it will be checked against the Reserved Words list to determine if it is restricted for use as a NOMADS control name. If it is found, a warning message will display.

(User Reserved Words Maintenance was added in PxPlus 2020.)

Shape

Click the drop-down arrow for a list of shape types: Arc, Circle, Line, Pie, Poly Line, Polygon, Radius Arc, Radius Circle, Radius Pie and Rectangle. See Important Note above.

(Convert to new Shape format)

(Available when an existing Radius Arc, Radius Circle, Radius Pie or Poly Line Shape is selected)

Button used to convert a pre-existing shape control (created with the former format) to its newer, redesigned format. Prior to conversion, a message will display, asking to confirm the request.

    

(The Convert to new Shape format button was added in PxPlus 2019.)

Preview

Displays how the visible properties of the control will appear at run time.

Display

Pen Style

Styles

Click the drop-down arrow for a list of pen styles. The styles Dashed, Dotted, Dash-dot and Dash-dot-dot work only when the Pen Width is 1.

Width

Pen width in graphical units. Valid entries are 0 - 255.

Color

Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Fill (Gradient Fill Requires 2 Colors)

(Not Applicable for Arc, Radius Arc, Line and Poly Line Shapes)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

(Varies depending on the Shape selected)

For the properties of each shape, see Rectangle, Arc, Circle, Line, Pie, Poly Line, Polygon, Radius Arc, Radius Circle and Radius Pie.

Position

Column

Starting column for top left corner of the control - numeric expression. Format mask is #0.00. Valid entries are 0 to 620.

Line

Starting line for top left corner of the control - numeric expression. Format mask is #0.00. Valid entries are 0 to 255.

(Support for increased Column and Line maximums was added in PxPlus 2021.)

Size

Width

Width of control in number of columns - numeric expression. Format mask is #0.00. Valid entries are 0 to 620.

Height

Height of control in number of lines - numeric expression. Format mask is #0.00. Valid entries are 0 to 255.

(Support for increased Width and Height maximums was added in PxPlus 2021.)

General Attributes

Initially Hidden

Control is not displayed but is accessible programmatically.

iNomads Settings

iNomads Class

Assign an iNomads class to the control. Can be Fixed or Expression.

The iNomads class contains class attribute references used when defining the control in the HTML code generated in iNomads. An iNomads class reference must start with an alpha character (A-Z or a-z), followed by any combination of A-Z, a-z, 0-9, underscore or dash. Multiple references may be entered, separated by a space.

For a list of pre-defined iNomads classes, see iNomads Classes.

(The iNomads Class property was added to Shapes in PxPlus 2018.)

Security

Security restrictions. See Restricting Access for information on Object Security Definition.

Groups

Assign the control to a group. See Group Assignment.

Notes

Add notes/comments for the control. Maximum 1024 characters.

(The Notes button was added in PxPlus 2023.)

Rectangle Object

The Display properties below apply specifically to a Rectangle object.

Display

Fill (Gradient Fill Requires 2 Colors)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

Radius

Radius value in graphical units. Valid entries are 0 - 255. Applying a Radius value greater than zero produces a rectangle with rounded corners.

Example:

The properties shown below produce the Rectangle shape used in creating the following PxPlus Info message for the Library Bulk Edit and Search utility:

 

Given …

Yields …

 

To view a video presentation on how to use a Rectangle shape to add an informational message to a panel, go to How to Add an Info Message.

Arc Object

The Display properties below apply specifically to an Arc object.

Display

Properties

Type

Select the Arc portion of a Circle shape or an Ellipse shape.

Angles

Angles (in degrees) measured counter clockwise from the right-center (3 o'clock) position of the arc circle to the starting and ending points of the arc. Valid entries are 0 - 360.

(The Type property was added in PxPlus 2019.)

Example:

The properties shown below produce the following Arc shape:

 

Given …

Yields …

 

Circle Object

The Display properties below apply specifically to a Circle object.

Display

Fill (Gradient Fill Requires 2 Colors)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

Type

Select a Circle or an Ellipse shape.

(The Type property was added in PxPlus 2019.)

Example:

The properties shown below produce the following Circle shape:

 

Given …

Yields …

 

Line Object

The Display properties below apply specifically to a Line object.

Display

Properties

Line Type

Line selections are:

Horizontal

Horizontal line.

Vertical

Vertical line.

Down

Line moves down toward the right.

Up

Line moves up toward the right.

The length and angle of the line is determined by the height and width of the shape object. If a line with multiple segments is required, use the Poly Line object.

(The Line Type property was added in PxPlus 2019.)

Example:

The properties shown below produce the following Line shape:

 

Given …

Yields …

 

Pie Object

The Display properties below apply specifically to a Pie object.

Display

Fill (Gradient Fill Requires 2 Colors)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

Type

Select the Pie portion of a Circle shape or an Ellipse shape.

Angles

Angles (in degrees) measured counter clockwise from the right-center (3 o'clock) position of the pie circle to the starting and ending points of the pie slice. Valid entries are 0 - 360.

(The Type property was added in PxPlus 2019.)

Example:

The properties shown below produce the following Pie shape:

 

Given …

Yields …

 

Poly Line Object

As of PxPlus 2019, the former Line object was renamed to Poly Line and continues to function as it did previously. The recommendation is to use the redesigned Line object.

The Display properties below apply specifically to a Poly Line object.

Display

Properties

X/Y Values

Logical screen coordinates in graphical units for the ending point of the line (starting point is established via the Position and Size properties). Graphical units are similar to pixels, not line/column values. If the line has multiple segments, multiple X/Y values, separated by a comma, may be entered.

Example:

The properties shown below produce the following Poly Line shape:

 

Given …

Yields …

 

Polygon Object

The Display properties below apply specifically to a Polygon object.

Display

Fill (Gradient Fill Requires 2 Colors)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

X/Y Values

Logical screen coordinates in graphical units for each of the polygon's corners. Graphical units are similar to pixels, not line/column values.

Example:

The properties shown below produce the following Polygon shape:

 

Given …

Yields …

 

Radius Arc Object

As of PxPlus 2019, the former Arc object was renamed to Radius Arc and continues to function as it did previously. The recommendation is to use the redesigned Arc object.

The Display properties below apply specifically to a Radius Arc object.

Display

Properties

Radius

Radius value in graphical units. Valid entries are 0 - 255.

Ratio

Numeric aspect ratio/viewpoint. Valid entries are 0 - 255.

Angles

Angles (in degrees) measured counter clockwise from the right-center (3 o'clock) position of the arc circle to the starting and ending points of the arc. Valid entries are 0 - 360.

Example:

The properties shown below produce the following Radius Arc shape:

 

Given …

Yields …

 

Radius Circle Object

As of PxPlus 2019, the former Circle object was renamed to Radius Circle and continues to function as it did previously. The recommendation is to use the redesigned Circle object.

The Display properties below apply specifically to a Radius Circle object.

Display

Fill (Gradient Fill Requires 2 Colors)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

Radius

Radius value in graphical units. Valid entries are 0 - 255.

Ratio

Numeric aspect ratio/viewpoint. Valid entries are 0 - 255.

Example:

The properties shown below produce the following Radius Circle shape:

 

Given …

Yields …

 

Radius Pie Object

As of PxPlus 2019, the former Pie object was renamed to Radius Pie and continues to function as it did previously. The recommendation is to use the redesigned Pie object.

The Display properties below apply specifically to a Radius Pie object.

Display

Fill (Gradient Fill Requires 2 Colors)

Pattern

Click the drop-down arrow to select the direction of the gradient fill or pattern.

Color (1st)

Starting color for the shape. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

Color (2nd)

Second color for the two-color gradient or fill pattern. Fill colors are enabled based on the Fill Pattern selected. Click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions.

(The Color Selections Query button and dialog were added in PxPlus 2020.)

Properties

Radius

Radius value in graphical units. Valid entries are 0 - 255.

Ratio

Numeric aspect ratio/viewpoint. Valid entries are 0 - 255.

Angles

Angles (in degrees) measured counter clockwise from the right-center (3 o'clock) position of the pie circle to the starting and ending points of the pie slice. Valid entries are 0 - 360.

Example:

The properties shown below produce the following Radius Pie shape:

 

Given …

Yields …