Creating Panel Controls

Image/Picture Control

 

The Image tool is used to insert a bitmap or multimedia image in a panel; e.g. company logo, product diagram or photograph. This object type is for display purposes only and does not respond to events.

For information on the use of graphics in PxPlus, see 'PICTURE' mnemonic.

Adding a Picture

To insert a graphic image/picture on a panel, select the Picture control tool from the Controls Toolbar, then hold down the left mouse button and drag the mouse to create a rectangle to the desired size. Release the mouse button to create the location for inserting the new image, as defined via the Picture Path property.

For making other adjustments, see Modifying Objects.

To assign a name and location of the image file to be used, as well as define specific image attributes, see Image Properties.

Image Properties

When creating or editing an Image control, the Image/Picture 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 image/picture properties: Display and Advanced.

Name

Unique name of the image 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.)

Preview

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

Display

Picture Path

Name and location of picture file (Fixed value or string Expression).

Image Format

Graphic Display

Defines how the picture is to be drawn. Click the drop-down arrow for a list of selections:

     Asis
     Centered (center/cropped within region)
     Scaled (scale to fit)
     Tiled (tile bitmaps to fill region)
     Halftone (enhanced legibility - may lighten black images)
     Align to top left (preserve aspect ratio)
     Centered (preserve aspect ratio)
     Centered (scale and crop)

Example:

    

(The "Centered (scale and crop)" option was added in PxPlus 2019 Update 1.)

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.

Dynamic

NOMADS will automatically redraw a new image when you change the value of the control name variable. If a Picture Path is entered, it will be used as the initial path for the image.

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 Images in PxPlus 2018.)

iNomads Alt Text

Text to be used as the alternate text for the image when running iNomads.

(The iNomads Alt Text property was added in PxPlus 2021.)

Advanced

Cropping (Pixels from Top/Left of Image (0.0))

Define the cropped image in terms of Left, Right, Top and Bottom where these values are the number of pixels from the top left corner (0,0) of the image.

Note:
Cropping is not supported in iNomads.

Attributes

Image Transparency

Transparency option for the image. Transparent images are only supported when the picture does not need to be scaled. Click the drop-down arrow for a list of selections: None, Pixel sets transparency or 'Light Gray' is transparent.

Flip Image

Flips the image. Click the drop-down arrow for a list of selections: None, Flip horizontally (left/right), Flip vertically (up/down) or Flip horizontally and vertically.

Rotation Angle

Counter clockwise rotation angle at which to display the image. Valid entries are 0 to 359.

Invert Image

Display the image with inverted colors.

Gray Scale Image

Converts the image to gray scale.

Note:
Image Transparency is not supported in iNomads.

 

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