MEL How-To #64

How do I create a window with controls overlaying a background image?

• Use a formLayout so you can control the overlapping of controls.

• Add the image last. This is necessary so that mouse-clicks are received by the controls.

• Set the ‘-numberOfDivisions’ for the formLayout equal to the width or height in pixels of the image, and use PhotoShop (or similar image editing app) to read the pixel coordinates for the desired placement of controls.

• Use ‘-attachPosition’ when aligning the controls so you can use actual pixel values (you'll have to compensate for one of the dimensions if your image isn't square).

• The image will not resize with the window. It is probably best to set the window dimensions when it is created, and use the ‘-sizeable false’ flag to lock it.

Following is the MEL script which creates the UI pictured above:

global proc james()
{
  // Click link to download image
  string $image = "james.bmp";

  if ( `window -exists imageWindow` )
    deleteUI -window imageWindow;

  // Window is locked for image dimensions: 278Ч320
  // (add a few pixels to compensate for title bar and borders)
  window -title "James" -width 282 -height 344
         -sizeable false imageWindow;

    // Use a formLayout so you control the overlap of the controls
    string $form = `formLayout -numberOfDivisions 320`;

      // First add controls
      string $head = `button -label "Head"`;
      string $lHand = `button -label "L.Hand"`;
      string $rHand = `button -label "R.Hand"`;
      string $lFoot = `button -label "L.Foot"`;
      string $rFoot = `button -label "R.Foot"`;

      string $lHandIK = `checkBox -label "IK/FK"`;
      string $rHandIK = `checkBox -label "IK/FK"`;

      // Add image LAST
      string $image = `image -image $image`;

      setParent ..;

  // Now edit the layout of the controls
  formLayout -e

    -af   $image              "top"     0
    -af   $image              "left"    0

    // Controls overlaps image
    // Use -attachPosition to place controls
    -ap   $head               "top"     0   4
    -ap   $head               "left"    0   188

    -ap   $lHand              "top"     0   160
    -ap   $lHand              "right"   0   316

    -ap   $rHand              "top"     0   160
    -ap   $rHand              "left"    0   4

    -ap   $lFoot              "bottom"  0   318
    -ap   $lFoot              "left"    0   234

    -ap   $rFoot              "bottom"  0   318
    -ap   $rFoot              "right"   0   88

    // Except these two, which are under the Hand buttons
    -ac   $lHandIK            "top"     2   $lHand
    -ap   $lHandIK            "right"   0   316

    -ac   $rHandIK            "top"     2   $rHand
    -ap   $rHandIK            "left"    0   4

      $form;

  showWindow;
}

Thursday, April 26, 2001