ImageInspector works with images of any aspect ratio. Also, you’ll notice the picture-in-picture will size itself to the aspect ratio of the image. Just set maxWidth and maxHeight and it won’t get larger than those dimensional limits.

The focal point is maintained during scaling. For example, zoom in, move the focal point to the corner of the image, zoom out, then zoom in. Notice that, as you zoom out and in, the focal point is maintained as much as possible.

The focal point and relative scale are both maintained during resizing. For example, if an image inside ImageInspector is at 200% of its “fit” size, ImageInspector is 100% width and height of the window, and the user starts making the window larger, ImageInspector will continue to scale up the image inside it, attempting to keep it at 200% of its “fit” size. Likewise, the focal point will be maintained while resizing the window as well.

Right-click the demo app to view the source. The app might take a little while to load because it contains two embedded high-res images.

Available Properties
value – The number value represented by the current knob rotation.
minimum – The value if the knob were turned counter-clockwise as far as possible.
maximum – The value if the knob were turned clockwise as far as possible.
zeroAngle – The angle, in degrees, representing the minimum value (-180 to 180).
maxRotation – The number of degrees from the zero angle the knob is allowed to rotate clockwise (0 to 360).
snapToCursor – If true, the knob will rotate to the cursor as soon as the user mouses down.
allowLooping – If true, this allows the user to continue rotating the knob clockwise past the max angle, eventually forcing the knob to cross over to the minimum angle. Likewise the user can continue rotating the knob counter-clockwise past the min angle and the knob will eventually cross over to the maximum angle. This can be particularly useful when maxRotation is 360 degrees and the user should be able to go around and around.

Skin Parts
backgroundSkin – This is anything around or behind the knob which does not rotate (e.g., tick marks, labels, etc.)
thumbSkin – This is the part of the knob which the user manipulates. In the real world, this would be “the knob” itself–the tactile part you would turn with your hand.

Exhibit A
Have at it! Right-click to view the source. Post a comment if you have a question.