Creating Panel Controls
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.
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.) |
|
Visual Class |
(Applicable Only for Circle, Line and Rectangle Shapes)
Assign a visual class to the control.
Click the Visual Class Maintenance button to launch the
Visual Classes Maintenance utility for creating or editing visual classes.
To assign visual classes to controls at the library level, see
Visual Class Assignment. Note:
Visual class names that begin with an "*" (asterisk) are pre-defined visual classes used by PVX Plus and may be subject to change without notice.
(The option to assign a Visual Class to Circle, Line and Rectangle shapes was added in PxPlus 2024.) |
|
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.) |
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.
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |
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 … |
|
|
 |
 |