The KineBody Pro window contains two major types of content: a central 3D viewing area, and an outer area for controls (Figure 1).
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:
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).
From there, if you reduce or enlarge the window size, the layout will be automatically readjusted, using the following logic:
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).
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.
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.
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.
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:
Show or hide sliders (as a group)
Add a margin around the controls area (useful for touch input)
‘Reset’ the layout (more below)
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.
A few additional things to understand:
All of your custom layout settings are saved in your browser’s storage area. They’re automatically restored whenever you restart the KineBody app.
When you resize the window, or make any other customizations described above: the size of the KineBody human figure remains constant. Equivalently, the distance to the body doesn’t change. (If you want to refit the entire body after the viewing area changes, you can use the Fit button).
The KineBody layout is dependent on the size of the window, and on its current ‘zoom’ level. Neither of these can be controlled by the KineBody app. Your operating system provides controls for setting the window size, and your browser provides the zoom controls. (Please see the documentation for those products, if you have any questions). The browser zoom level can be used to invoke some ‘special tricks’ regarding the layout. Further details are provided in the Tips and Tricks section.
|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||
|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’):
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:
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’):
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.
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:
Maximum width & height [default]: After the outer controls are fit to the edges the window, the viewing area expands to fill the remaining central region.
Predefined dimensions : Under the menu sections headed '16:9 Aspect' or '4:3 Aspect', you can directly choose standard image sizes such as 640x480 (pixels). Alternatively, you can select a standard aspect ratio (width/height): The options 'Maximum 16:9 fit' and 'Maximum 4:3 fit' resize the viewing area so that at least one of the dimensions matches the current maximum width or height, and the other dimension is calculated to give the desired w/h proportion. This is useful if you plan to rescale the image later. For example if you choose a ‘maximum 4:3 fit’, the resulting image could be sized at 1000x750 px, which you can use as is or scale down to a standard size, e.g. 640x480.
Custom dimensions : Under the menu section labeled 'Custom', you can specify any values you want, for width and height, or aspect ratio. Specify values by editing the number boxes in the 'Requested' Again, in the table below the menu. Remember, the actual viewing area size may be smaller than your requested values, depending on the available dimensions.
Integer dimensions feature: If you specify a custom aspect ratio, the sizing algorithm has a special feature to force the dimensions to be integers, with the exact ratio of w/h. This feature works for any aspect ratio defined using 2 or fewer decimal places. For example, if you specify an aspect ratio of 1.25, and the maximum height is 201, the width will be set to 250 ( & not 251.25, = 201 * 1.25), as that’s the largest integer size that gives the exact aspect ratio value for a height less than or equal to 201.
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.
Requested: The dimensions you chose from the ‘Resize viewing area’ menu. This row of the table may present different information, depending on your menu selection (Figure 8).
Available: the current maximum for each dimension. These dimensions are dictated by the current window size and the size of controls area.
Actual: the true dimensions, which is less than or equal to the maximum.
Some examples of different content in the 'Requested' row are shown below:
a) The entire 'Requested' row is omitted, when you select ‘maximum width and height’.
b) The width & height are blank, if you selected an aspect ratio option.
c) & d) The table presents editable value boxes, when you choose either custom width & height or custom aspect ratio.
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.
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.
To maximize the viewing area, you can use any of several techniques (in any order):
Use operating system controls to maximize the browser window, &/or use the browser’s Fullscreen capability (available in most browsers near the zoom controls).
In the Layout panel, make sure that the 'Resize viewing area' mode is 'Maximum width & height' (Figure 9B).
Hide the sliders, if you don’t need them, by using the either of the Show/Hide Sliders buttons (Figure 9C).
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).
If you’re using Chrome: Close the ‘download toolbar’, if present, at the bottom of the browser window (Figure 10).
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:
Omit technique (ii) above. Instead, reduce the window size, so it fills a smaller portion of the screen (say, 2/3 as tall & wide).
In the Layout panel, press the [Reset layout] button. This will cause the layout to rescale into the smaller window, using default proportions.
Now, maximize the window, so it fills the screen. Then, use the ‘Resize controls & text’ adjustment to further optimize the layout.
If necessary, redo steps (a)-(c), starting with a progressively smaller window size in (a).
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).
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).
[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.
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.
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.