In this sample you will learn how to use the IMAGE_PARAM_KNOB and IMAGE_PARAM_BUTTON and PARAM_TOOLTIP elements in your skin.

Sample 1

The first step: replace the previous PARAM_TEXT with IMAGE_PARAM_KNOB and IMAGE_PARAM_BUTTON widgets:

It looks better, doesn't it? What we have done here just consists in replacing the widgets by others (and move the text under the widget). Here is the structure of the group containing the Wet and Dry knobs:

All other groups have the same structure: a row of columns containing a knob and a text widget. The knob widget requires two images: knob_black.bmp and its mask file knob_black_mask.bmp.

Note the following statements in this skin:

• image_orientation="horizontal" tells the skin engine that the film strip image containing the animation of the knob is horizontal
• images_count="127" tells the skin system that the film strip contains 127 images. For the button, the value is set to "2" (it is a two states button).

Sample 2

Let's make this skin fully functional: add PARAM_TOOLTIP widgets to knobs, modify the positions_count and response_curve attributes of the knob (as seen with the text skin of the previous chapter) and add images for the mouse_hover and focus widget states for an optimal user experience:

You should note the following things in this skin:

• The PARAM_TOOLTIP widgets are declared inside the IMAGE_PARAM_KNOB widgets, so that they appear when the mouse is over the widget. The show_on_click attribute set "true" to enable the tool tip to be displayed even when the mouse is clicked.
• With the delay_ms="0" statement, the tool tip appears with no delay (a system tool tip usually appears after a short delay).
• The value of the value_format attribute has been adapted to each parameter to display the value optimally:
  • For the gain parameter, "+.0" displays the value with its sign even for positive values, with no digits.
  • For the rate parameter, ".2" displays 2 digits, because we need to display a precise value, which can be inferior to 1.
  • The response_curve attribute has been set to "exp2" in order to have a maximal precision for the low values of the rate parameter (which are the most interesting for a chorus effect).
• Two methods have been used in this skin for the focus and hover states:
  • For the knobs, the image_focus, image_hover and image_pushed attributes have been set to another file to be displayed for the focus, hover and pushed states of the knob.
  • For the button, another method has been used: you can see that the image_focus and image_hover have not been set. This widget uses the default values for these attributes: we have just added the on_off_button_focus.bmp and on_off_button_hover.bmp files to the directory. They are taken into account automatically by the system.
• The positions_count attribute has been optimized for each control, depending on the value range of each parameter.