Movable 3D Human Model

KineBody Pro Instructions: Adjust Layout


The KineBody Pro window contains two major types of content: a central 3D viewing area, and an outer area for controls (Figure 1).

Figure 1. Two primary parts of KineBody window

These two ‘parts’ are normally sized to fill whatever window size you provide for them. KineBody Pro includes multiple features for modifying the layout (i.e., size & arrangement) of these parts. This page describes these features & how to use them.

The layout modification features fall into two main categories, Automatic and Custom:

Automatic Layout Features

When you use KineBody for the first time, or on a new screen, the default sizes for the two parts (viewing area & controls) are set using predefined proportions, i.e. they appear relatively similar regardless of the screen size (Figure 2).

Figure 2. Initial KineBody layout on different screen sizes

From there, if you reduce or enlarge the window size, the layout will be automatically readjusted, using the following logic:

  1. The controls will be resized ‘as little as possible’. For example, as window size changes, buttons remain fixed in size; whereas sliders maintain a constant ‘thickness’, while their length may increase or decrease (Figure 3).

    Figure 3. Controls maintain size, when window is resized.
  2. The outer controls area will normally be arranged to fill to the outer edges of the window, and the 3D viewing area is then maximized to fit inside the the controls area. Generally, the resizing mechanism strives to prevent gaps, interference, or overlap, between the various controls and viewing area. Some enhancements & exceptions to this logic are discussed in later sections.

  3. *Caveat: Some interference or overlap is unavoidable, if you shrink the window to a very small size, or if you use extreme values for some of the custom parameters. The parameter ranges are intened to handle a variety of screen sizes, and the full range of values may not be appropriate for your particular screen. You’re welcome to experiment with the layout settings, but we recommend you back-off from any values that yield a 'corrupted' layout.

Some controls may automatically show or hide or relocate, depending on what you’re working on. For example, playback controls for animations or background videos will appear only if you’re using one of those features, and the Step Rotation buttons may relocate depending on whether the slider banks are shown or hidden.

Custom Layout Adjustments

In addition to the automatic size adjustment just described, KineBody Pro also allows you to customize many aspects of the window content. For instance, you can change the size of all the KineBody controls (as a group): increase them for improved usability on smaller screens, or reduce them to provide a larger 3D viewing area (Figure 4). Or, you can change the font-size for text labels on the controls, for improved readability.

Figure 4. Customized Size for Controls

You can also specify custom dimensions for the 3D viewing area. This capability is provided primarily as a way to specify the dimensions of ‘.png’ images created using the ‘Save Image’ button, because the images are identical in shape & content as the viewing area – i.e., ‘what you see is what you get'. That is, by specifying the viewing area size, you can control the saved image size. The actual image dimensions are scaled from those of the viewing area, with the scale factor determined by your browser zoom level and your operating system ‘display scale’. (For more information, please see the Finer Points section below).

Additional ways to customize the layout include:

The Layout panel

Most of KineBody’s layout adjustments are housed in a special panel (Figure 5), which differs from other KineBody control panels in several respects:

* Most importantly: controls in this panel are of fixed size, and its font-sizes are constant, unaffected by any other layout controls! (This resolves an issue in previous software versions, where the control-size and font-sizes control affected their own sizes (!), making it difficult to undo adjustments when pushed to the extremes).

* Also: This panel is independent of other KineBody panels, appearing atop the other controls & viewing area. It can be shown or hidden, and relocated vertically (to one of 3 levels), but otherwise can't be adjusted.

Figure 5. The Layout panel appears above the regular app content.


A few additional things to understand:


Access & Move the Layout panel

To do this: Proceed as follows:
Show the Layout panel

Result: The Layout panel appears atop the other controls
(positioned where you left it last, or else on top).
Hide the Layout panel

(or, Click the [ Layout ] button )
Move the Layout panel

Resize Controls &/or Text

To do this: Proceed as follows:
Resize controls & text together Use controls at the left side of the control panel (under the label ‘Resize controls & text’):
  • Move the slider, for continuous variation
    - &/or -

  • Edit the number box, for a specific value
    - &/or -

  • Press the [ 1.0 ] button, to reset to default.

Some details: The general effect of these controls is very similar to the zoom control of your browser, enlarging or shrinking both the layout & the fonts. However, the KineBody 'Resize controls & text' controls offer two important advantages, compared to browser zoom:

  • You can select any value in the range (whereas browser zoom offers only a small set of discrete values).

  • Browser zoom changes the font-size for layout panel tooltips, whereas these are unaffected when you use the KineBody layout controls.

These controls are calibrated using a relative scale, where 1.0 corresponds to the default value. The default was established the first time you used the app, or, when you last pressed the 'Reset layout' button, and depends on the window size used at that time.

Resize text only Use controls at the left side of the control panel (under the label ‘Resize text’):
  • Move the slider, for continuous variation

  • Edit the number box, for a specific value

  • Press the [ 1.0 ] button, to reset to default.

These controls are also calibrated using a relative scale, where 1.0 corresponds to the default value. The default was established the first time you used the app, or, when you last pressed the 'Reset layout' button, and depends on the window size used at that time.

Resize the Viewing Area

As explained in the Overview, the 3D viewing area will be sized automatically, when you first launch the app and whenever you change the window size. The layout mechanism makes the viewing area as large as possible, after allocating space for controls. We call this method of sizing ‘maximum width & height’.

Relative to this maximum size, you can reduce the viewing area dimensions. This capability is provided primarily as a way to control the size of images created via the [Save Image] button (since the saved images are identical to the viewing area in size & content). If you want an image larger than the current ‘maximum width & height’, there’s no direct way to do it from the KineBody app. (However, there is a ‘special trick’, involving the browser zoom, that makes this possible. For more information, see a later section. For the present discussion, assume that the browser zoom remains unchanged).

You can change the viewing area dimensions several ways, as provided by the ‘Resize viewing area’ menu. As shown in Figure 6, these options fall into 3 major categories:

Figure 6. 'Resize viewing area' menu

To help you understand the limitations on viewing area size, a table is provided in the Layout panel, below the ‘Resize viewing area’ menu (Figure 7). The table shows 2 or 3 rows: Requested, Available, and Actual values for each dimension or ratio.

Figure 7. 'Resize viewing area' table under menu

Some examples of different content in the 'Requested' row are shown below:

Figure 8. Contents of 'Requested' row depend on menu option.

Finer Points

An image saved via the Save Image button will have the exact same dimensions as the viewing area, when your browser zoom level is set to 100%, and your operating system ‘display scale’ factor is 1.0. That is, when the zoom and scale are set this way, there’s a one to one correspondence between screen pixels and image pixels.

The browser zoom level is set via controls typically located in the browser’s main menu (typically, upper right corner), or for Mac users, via its ‘View’ menu. The display scale is set in Windows via Settings>Display>Scale and Layout>Change the size of text, apps, etc.; for Mac, via System Preferences>Displays>Resolution>Scaled.

If you change either of these parameters, the ratio between screen pixels and image pixels will change, by a factor equal to the product of the zoom and display scale values. For example: if your display scale is 1.5, and zoom is 80%, the viewing area size will be 1.2 times larger than the image size (in pixels, in each direction). Note that the aspect ratio of the image (width/height) will always be the same as for the viewing area, regardless of the zoom and display scale values; likewise, the image content will match the viewing area: no part of the image will be truncated or padded. So, what you see is what you get, even when the zoom or display scale is changed.

Note that the custom viewing area dimensions can't be larger than the maximum dimensions allowed for the current window size and controls area. Also, when the viewing area is smaller than maximum, the automatic layout logic (in Automatic Layout Features, paragraph (b)) changes: in this case, the controls contract to fit tightly around the viewing area, and there may be a white region outside of the controls.

Tips & Tricks

This section offers some advice on how to effectively use KineBody Pro’s layout controls. There are two main topics : A) how to maximize the viewing area, for best viewing & usability, and, B) how to save large images, when using the Save Image button.

A) Maximize the Viewing Area

To maximize the viewing area, you can use any of several techniques (in any order):

  1. Use operating system controls to maximize the browser window, &/or use the browser’s Fullscreen capability (available in most browsers near the zoom controls).

  2. In the Layout panel, make sure that the 'Resize viewing area' mode is 'Maximum width & height' (Figure 9B).

  3. Figure 9: Layout panel controls for enlarging the viewing area
  4. Hide the sliders, if you don’t need them, by using the either of the Show/Hide Sliders buttons (Figure 9C).

  5. Use the controls ‘Resize controls and text’ and then ‘Resize text’, to reduce the area allocated for controls, to a size where you can still use & read them, comfortably (Figure 9A).

  6. If you’re using Chrome: Close the ‘download toolbar’, if present, at the bottom of the browser window (Figure 10).

    Figure 10. Chrome's download toolbar
  7. Reduce the browser zoom level: this causes the controls area to shrink, making more room for the viewing area.

Those steps steps will work in most cases, to give a usefully large viewing area. However, there’s one more trick you may find useful, if you have a large screen, or you need to keep the sliders visible, or the lowest setting for 'Resize controls & text'(0.7) doesn’t go small enough:

  1. Special method:

    1. Omit technique (ii) above. Instead, reduce the window size, so it fills a smaller portion of the screen (say, 2/3 as tall & wide).

    2. In the Layout panel, press the [Reset layout] button. This will cause the layout to rescale into the smaller window, using default proportions.

    3. Now, maximize the window, so it fills the screen. Then, use the ‘Resize controls & text’ adjustment to further optimize the layout.

    4. If necessary, redo steps (a)-(c), starting with a progressively smaller window size in (a).

B) Save Large Images

As mentioned previously, images created using the [Save Image] button are scaled copies of the viewing area: they have the same shape and content, and their dimensions are scaled from the viewing area width & height; the scale factor is determined by the browser zoom level and display scale. Although the display scale is a factor, you generally set it once for a given display & then leave it - so this section focuses on increasing image sizes by reducing your browser zoom level.

Some background: changes to the zoom level can cause dramatically different effects in KineBody, compared to a regular web page. Normally, when you decrease the zoom level ( a.k.a., 'zoom out') for a web page, the page content shrinks, and, large regions of white (a.k.a. ‘pillars’) appear to the sides and possibly above & below the content (Figure 11).

Figure 11. Zoom Reduction for Typical Web Page

For the KineBody app, in its default viewing area mode ('Maximum width & height'), the zoom-related shrinkage is applied only to the outer controls region, whereas the viewing area actually increases (to a minor extent) (Figure 12).

Figure 12. Zoom Reduction in KineBody (max width & height)

[These behaviors are a consequence of the 'Maximum width & height' viewing area mode. If you select an alternative mode, e.g., '640x360', a zoom reduction will instead cause 'normal' web page behavior as described above].

Your browser implements the change in zoom by 'scaling' its pixels: for a zoom level of 50%, a web page element originally 100 pixels tall will be modified to appear 50 pixels tall. Effectively, one 'modified' screen pixel now represents two 'original' pixels. When this logic is applied to the KineBody viewing area, whose size has increased (under 'Maximum width & height'), the result is to increase the number of 'modified' pixels within the viewing area, by a factor of (at least**) two, in each direction. These modified pixels are the ones saved by the [Save Image] button - and any notion of browser zoom is discarded. As a result, with 50% zoom, you get an image that's at least** twice as large per side.

    **Re: 'at least' two: if the viewing area size remained physically the same, there would be precisely twice as many modified pixels, per side; but reducing the zoom has caused the controls to shrink, enlarging the viewing area , so the resulting 'scale' is a bit more than two.

Here’s the stepwise procedure, including an example where the desired image size of 1280x720 pixels is too large for the original Available viewing area.


General Procedure

Example & Notes


Open the Layout panel, and check the 'Available' dimensions for the viewing area.

If both Available dimensions are larger than your desired image size, you can skip ahead to Step 3. Otherwise, continue to the next step.

The Available size (921 x 637) is smaller than the desired size (1280 x 720), so continue to step 2.


Ensure that the viewing area resize mode is set to 'Maximum width & height'. Then, reduce your browser zoom level, until the Available dimensions are larger than the desired size.

When the zoom is reduced to 75%, the Available dimensions become sufficiently large.


Set the desired image size using an appropriate option from the ‘Resize viewing area’ menu.

The desired size (1280x720) is one of the predefined sizes in the menu, so just select that option. (If none of the predefined sizes match the desired, select the 'Custom width & height' option, & fill in the width & height values).


Press the Save Image button.

The button may be difficult to find or read, if the zoom is very low. If so, increase its size via the ‘Resize controls & text’ slider.

Note that you can leave the Layout panel open, atop the viewing area, while creating an image - the image will be created from the underlying viewing area content, and the Layout panel will be ignored.


Revert any special settings: zoom level, controls & text, viewing area. If you normally use the default layout, you can easily restore it via the 'Reset layout' button.