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