From VFXPedia

This document describes the inner workings of a Fusion skin and the contents of the Fusion.skin definition file. It's not meant to be complete and it's reverse-engineered so any inaccuracies are not eyeon's fault :-)

Contents 1 General 1.1 Hierarchy 1.2 BMP Files 1.3 Intelligent Resize 2 Controls 2.1 Buttons 2.2 Checkbox 2.3 Sliders 2.4 ComboControls 2.5 Gradient 2.6 Offset 2.7 Range 2.8 Screw 2.9 Titles 3 Flow 4 TimeSlider/Transport 5 Toolbars 6 Icons

General

Hierarchy

Fusion's skin definitions (the file Fusion.skin) contains several sections for different parts of the interface. You don't have to specify every section or draw a bitmap for everything. Fusion's skin engine has a hierarchy, which is visible in the Preferences -> Appearance section. Skins are applied from top to bottom and simply override previous definitions. This means that you can create a Fusion.skin that just contains a custom button while using the rest of the GUI from Fusion's default skin.

BMP Files

Fusion uses bmp files for its skin. If you save them in Photoshop, proceed as follows:

• select the transparency of your layer (ctrl+click the thumbnail) and save it as a new channel.
• merge the image onto a black background.
• save as windows BMP 32 bits.

If you don't remove Photoshop's layer transparency (checker background), it will be replaced by white which is why you need to "premultiply" the image with a black background manually.

Intelligent Resize

BMP files will be resized using an intelligent algorithm. This allows to use a single picture of a small button an extend it to the required dimensions without losing sharpness. The algorithm will keep the edge pixels and extend the image using the pixels along the middle of each direction. Shrinking happens by preserving the edge pixels but skipping pixels in the middle.

Shrinking example: The SmallButton image is 22x22 pixels but if it gets re- used for the smaller "Pick" buttons, which are just 18 pixels hight, the rendered image will consist of the top 9 and bottom 9 rows of the BMP file. 4 rows of pixels in the middle are skipped.

Most icons don't have to be the size they have in Fusion's default skin. If they are larger, Fusion's GUI will sometimes adapt to that. Sometimes, however, they will be scaled down to fit.

Controls

Buttons

Buttons in Fusion exist in several varieties. Some are specified in the Controls/Button category. There's a "Medium", "Small" and "Tiny" subsection.

• "Medium" buttons are used in the spline editor and timeline views, as OK/cancel buttons in dialogs and for MultiButton input controls.
• "Small" buttons are used for the "pick" button (color picker or 3D transform)
• "Tiny" buttons are used for the expandable labels (the triangle icon is defined somewhere else though).

Each button needs 5 images: Normal, Selected, Disabled, Pushed and HoverMask. The selected button is usually the same as the normal one. Highlighting is done automatically by Fusion using the HoverMask. On mouse over, the button is drawn brighter and while the mouse button is held down it is drawn darker. If a MultiButton is clicked, it will be drawn in its "Pushed" state, usually this is blue in Fusion and looks slightly inset.

Button images are scaled automatically to their intended size using the intelligent resize algorithm described above.

The buttons of the time ruler are defined in a different section.

Checkbox

Hitbox specifies the area that reacts to mouse over and click events and thus the size and position of the checkbox and its label. This is the default hitbox of the Fusion 6.4 skin:

Data = {
  Hitbox = { 4, 3, -8, 15 },
},

• the first value specifies the left padding of the hitbox inside the widget.
• the second value specifies the top padding of the hitbox inside the widget.
• the third value specifies the width of the hitbox. A negative value specifies a dynamic width which is calculated by subtracting the absolute value from the width of the whole widget.
• the fourth value specifies the height of the hitbox.

The widget area will have a 1 pixel border that is already treated as inside the widget area.

The checkbox icon will be drawn #1 and #2 pixels from the top/left corner of the widget area and have a size of #4 by #4 pixels (the bitmap will be stretched intelligently if it has a different size). It will get clipped if width (#3) is too small or #4 too big.

The checkmark will be drawn with a left margin of 1 pixel inside the hitbox.

The bottom padding seems to be hardcoded as 3 pixels. To make everything symmetrical and fit into the GUI, it's recommended to keep all the values and the size of your bmp files the same as in Fusion's default skin.

Sliders

Slider knobs are defined in two locations. The first one is in the obvious Controls / Slider category. A slider has a knob and a track bitmap. The track bitmap will be expanded horizontally like control window titles (see below). It also defines a "Reset" bitmap which is the small circle that denotes the default value once a slider has been changed.

This is the slider data table:

Data = {
  Size = { 100, 33 },
  Hitbox = { 16, -18, -86, 16 },
  Edit = { -54, -19, 52, 18 },
  Label = { 3, 1, -65, 14 },
  Reset = { 0, 1 },
},

The edit box is using negative x and y offsets which aligns it to the bottom/right corner of the widget area instead of the top/left one. For more about the hitbox coordinates please refer to the Checkbox section above.

The "Label" attribute defines the position of the text label. If it is missing, it will be positioned below the slider (which was the default look in early versions of Fusion). Fusion 6 changed this to be above the slider but this needs to be defined in the skin. As with the hitbox, a negative width value is interpreted as a right padding. The label area may contain two labels in which case one is left-aligned and the other is right-aligned (see the merge tool's Additive/Subtractive slider.)

Slider knobs are also defined in the Controls / Color category which defines the color wheel/picker widget. You can define your own bitmaps for the red, green, blue and alpha slider. The data table is more complex:

Data = {
 Hitbox = { 88, 19, -156, 14 },
 HitboxBitmap = { 83, 22, -145, 6 },
 Edit = { -54, 17, 52, 18 },
 Label = { 6, 1, -12, 13 },
 Button = { 4, 17, 60, 18 },
 ColorLabel = { 70, 19, 16, 15 },
 ColorGap = { 0, 20 },
 ColorGapLast = { 0, 3 },
},

• Hitbox is the hitbox of the topmost color slider (usually red). It doesn't seem to align with the actual area that can be clicked so there must be some additional padding which might explain the different coordinates for HitboxBitmap.
• Edit is the edit box to the right. A negative x value is interpreted as relative to the right edge of the widget area.
• Label is the position of the main text label while ColorLabel is the position of the first slider's label (usually "R" for red).
• Button defines the location and size of the tiny dropdown button that expands the whole color wheel.
• ColorGap defines the space between color sliders. A y value of 0 draws them all on top of each other.
• ColorGapLast defines additional padding below the last color slider.

ComboControls

ComboControls ("dropdowns") can't be styled with bitmaps except for the triangle icon. They probably get their bevel color from somewhere else as well. In Fusion's default skin file, there's only this data block which contains dimensions for a dropdown with label above ("vertical") or to the left ("horizontal"):

Data = {
  ComboVertical = { 3, 18, -6, 271 },
  LabelVertical = { 6, 1, -9, 14 },
  ComboHorizontal = { 100, 3, -104, 271 },
  LabelHorizontal = { 6, 7, 80, 14 },
},

• The 1st and 2nd numbers once again denote the top/left padding.
• The 3rd number is the width. As previously described, a negative value is a dynamic width that depends on the width of the tool control panel.
• The 4th number is the height of the expanded dropdown menu. If it's too small for the number of menu items, a scrollbar will be added.

Gradient

A gradient control is like a color control with an extended data block:

Data = {
  Size = { 250, 168 },
  Label = { 6, 1, -12, 13 },
  MinButton = { 0, 15, -1, 39 },
  MaxLabel = { -106, 59, 40, 15 },
  MaxEdit = { -54, 57, 52, 18 },
  Hitbox = { 88, 87, -156, 18 },
  HitboxBitmap = { 83, 92, -145, 6 },
  MaxButton = { 4, 87, 60, 18 },
  Edit = { -54, 87, 52, 18 },
  ColorLabel = { 70, 89, 16, 15 },
  ColorGap = { 0, 20 },
  ColorGapLast = { 0, 3 },
},

• 2nd value of the "Size" attribute specifies the height of the whole widget in its collapsed form. If the number is too small, the color sliders will be hidden behind the next input (gradient interpolation method multibutton).
• Label is the "Gradient" label at the top.
• MinButton seems to be the gradient image itself.
• MaxLabel is the "Position" label below that gradient and MaxEdit is its edit field.
• MaxButton is what "Button" was for the color control: the expander for the full color wheel.
• Hitbox, HitboxBitmap, ColorLabel, ColorGap and ColorGapLast are the same as for a color control.

Offset

Offset controls are the X/Y position inputs. They can't be styled with bitmaps. Their data block contains the positions for the first (X) and second (Y) input field and the position of its label.

Range

A range control is a bar with two handles on either side and is used to define a range of values. When used in a Loader tool, it also has special bitmaps to denote frame duplication or looping.

The bitmaps it needs are a track, two caps and differently colored bars. Those are tiled horizontally to stretch the bar to the required width.

Knob = {
  "Range\\RangePlain.bmp",
  "Range\\RangeGreen.bmp",
  "Range\\RangeBlue.bmp",
  "Range\\RangeDarkBlue.bmp",
},

• The 1st bitmap is the default bar.
• The 2nd bitmap is used extends the gray bar in Loaders that are using the "Hold First Frame" or "Hold Last Frame" feature.
• The 3rd and 4th bitmap are alternated to indicate a looped clip in the Loader.

The track bitmap is used as a background image aligned to the whole widget. It will be tiled like window titles (see below) and needs to have all of its top, left and right padding included in the bitmap. This makes it different from slider track bitmaps which are aligned based on the slider's hitbox.

The RangeControl has the following data block:

Data = {
  Size = { 100, 34 },
  Hitbox = { 62, 16, -125, 15 },
  MinEdit = { 2, 14, 52, 18 },
  MaxEdit = { -54, 14, 52, 18 },
  Label = { 6, 1, -12, 14 },
  RangeLabel = { 66, 4, -132, 14 },
},

• MinEdit and MaxEdit define the input fields to the left and to the right of the range bar.
• Label describes the area of the two labels above the input field. The first one will be left-aligned and the second one will be aligned to the right side of the box described by these coordinates (third value is negative to achieve a dynamic width).
• RangeLabel describes the area of the labels above the range bar itself. Depending on the attributes of the RangeControl, there can be a centered label or there can be three labels (left, center, right-aligned).
• The Hitbox describes the area where the range bar will be painted. It will contain both caps and the bar in between.
• The 2nd value of "Size" describes the height of the range widget and is used to define where the following input control will be painted.

Screw

Screw controls are like sliders but they don't have a specific start or end value. Most can move indefinitely. They have a main bitmap image which simply gets tiled horizontally to achieve the required width.

Screw controls have the following data table:

Data = {
  Size = { 100, 32 },
  Hitbox = { 17, -14, -87, 11 },
  Edit = { -54, -18, 52, 18 },
  Label = { 6, 1, -60, 14 },
  LeftOffset = { -13, -1 },
  RightOffset = { -1, -1 },
  Reset = { 0, 2 },
},

• Edit, Label and Reset are known from slider controls.
• LeftOffset and RightOffset are the positions of the left and right arrows, relative to the hitbox.
• Reset is the offset of the reset icon.

Titles

Control window titles have a different mechanism to stretch to any width. The bmp files have two red dots (r=255, g=0, b=0) and two green dots (r=0, g=255, b=0) in their first and last row respectively. These markers are used to mark the vertical pixel column that will be repeated to achieve the desired width.

The width of the bmp files themeselves doesn't matter. The height is 19 pixels by default but they can be larger. Control window titles have an arrow icon that is defined in two states (opened and closed) but if your title image already contains an icon (as is the case with the default Fusion 6.1 skin) you may replace these icons by transparent bitmaps.

The 'Title' section has the following data table:

Data = {
  ArrowPos = { 6, 6 },
  TitlePos = { 24, 3 },
  ModesPos = { -6, 3 },
},

The coordiantes are horizontal and vertical pixel offsets for the text labels and the modes icons (negative x value denotes a margin relative to the right edge of the widget area). The whole widget area is rendered with a 1 pixel margin inside the bevelled tool control panel. Fusion generates a dimmed version of the bitmaps for pass-through (disabled) tools.

The title icons (Locked, Info, and so on) are overlaid onto the title bar when the tool is locked, has a script or a comment. The Locked icon is also used as the button that locks/unlocks a tool. However, the DiskCacheIcon is only used for the tool title. The cache button's icon is taken from the Flow.Tiles category instead.

Flow

The flow section defines the colors of tools in the flow view as well as icons which are rendered onto tool tiles when a certain mode is enabled or a tool is locked or has comments. They are all miniature icons that will be renderd 11x11 pixels in size. Attention: the DiskCacheIcon is also used in the tool control panel and thus needs to be at least 16x16 pixels.

TimeSlider/Transport

This section defines the time ruler at the bottom and the playback controls that appear in the bottom right corner when you select a loader or saver. The playback icons are pretty self-explanatory. The buttons just differ from buttons in the control panels in certain ways. For one, the playback buttons are not generated by placing an icon over a gray or blue button template. Instead, each state (pushed, active, disabled, ...) needs to be supplied as custom bitmaps.

The buttons that have text on them are generated like tool buttons, however you can define custom bitmaps in this section. This might be useful and/or necessary to make sure that they have the same height as the playback buttons.

Toolbars

The toolbar background image needs to be 24 pixels high because it will be re- used for vertical toolbars. Separators and the draggable knob will be rendered internally by Fusion. The icons of the file and view bars are 16x15 pixels in size and have an alpha channel. They are combined in two strips, each exists as a cold (normal) and hot (mouse-over) state as FileBarHot/Cold.bmp and ViewBarHot/Cold.bmp. The disabled state (no comp opened) is rendered automatically.

The FileBar bitmap of Fusion's default skin is 16 pixels high, but only the first 15 are used. The reason for them not being 16x16 pixels is that Fusion renders a small drop-shadow on mouse over.

Icons

The icons section defines a variety of icons that are used throughout Fusion's GUI. Here are some of them:

• Icons.Browse is the folder icon that is used to browse for footage in a Loader or Saver.

• Icons.Tracker contains various icons for the Tracker tool. The forward/reverse buttons require cold and hot versions of the icon. However, Fusion will desaturate the cold version internally so you can get away with using the same icon twice. The track button icons in Fusion's theme are 40x24 pixels which is too large, forcing Fusion to scale them down. 33x17 pixel icons retain their sharpness.

• Icons for the file dialog need to be 16x16 pixels so they appear on their buttons without being scaled. The native size of the AddFavorite icon, however, is just 15x15 pixels.