KUIML
Blue Cat's User Interface Programming Language
Minimal Sample (no resources required)

We will start this tutorial with a very simple minimal sample that does not require any graphical resource. You will learn how to use the TEXT, PARAM_TEXT and PARAM_TEXT_CONTROL widgets inside a simple Layout Elements. The files for this example can be found in the 'Minimal Sample' folder.

Sample 1

The first step consists in displaying the names and values of the parameters in a row:

The Structure is the following:

And the skin code:

<?xml version="1.0" encoding="utf-8" ?>
<SKIN author="Blue Cat Audio" name="Minimal Sample 1" language_version="1.0" font_face="Tahoma"
   font_height="11" text_color="#ffffff" font_quality="cleartype" layout_type="column"
   background_color="#000000" v_margin="5" h_margin="10" spacing="3">
   <!-- Title -->
   <TEXT h_align="right" font_face="" value="Blue Cat's Chorus " font_height="20" font_weight="bold"
      font_style="italic" />
   <!-- Row of controls with param names on top of them -->
   <ROW spacing="10">
      <!-- Param 1: a column containing a apram_text control and the name of the param-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input1" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input1" cursor="system::hand" value_format="+3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Param 4-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input4" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input4" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Param 5-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input5" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input5" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Param 6-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input6" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input6" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Param 8-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input8" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input8" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Param 2-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input2" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input2" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Param 3-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input3" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input3" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" />
      </COLUMN>
      <!-- Bypass button (param 0)-->
      <COLUMN v_align="top" spacing="4">
         <PARAM_TEXT param_id="dsp.input0" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input0" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" pixel_range="4" />
      </COLUMN>
   </ROW>
</SKIN>

Note the fact that we declare a font setting in the root element (<SKIN>), and that it is inherited by children cells: no need to repeat it. The font face is overridden for a fixed-size font in the PARAM_TEXT_CONTROL that displays the value so that the text does not move when the value changes ( the value_format="3.0" makes the number of characters used to render the value fixed too).

Note the pixel_range="4" attribute for the bypass and shape parameters. Since it is a boolean value (0 or 1 only), we want it to change as soon as the mouse moves a little. The default value of 40 pixels is too large (the mouse would have to move 40 pixels to set the value).

Next sample will improve this skin a little bit, grouping the parameters in categories and modifying the way the controls react to user input.

Sample 2



It is still not beautiful but at least a bit more functional.

In order to make the skin a bit more organized and easier to use, we have made the following modifications:

  • text_color_hover="#ff8800" has been added to the PARAM_TEXT_CONTROL widgets so that the color changes when the mouse is over them and when the focus changes.

  • The structure has been changed to add two titles. In order to keep things aligned, the v_align property has been changed to "bottom". For the gain and bypass columns.

  • The response_curve attribute has been set to "exp1" for the rate parameter so that the user has more control for the low rates than for the high ones.

  • The positions_count properties have been set to the proper value so that when the user turns the mouse wheel or push the arrow keys the value increment is 1.

  • The pixel_range property has been set to "51" for the Dry and Wet text controls so that the value is changed by 2% when the mouse moves by 1 pixel.

<?xml version="1.0" encoding="utf-8" ?>
<SKIN author="Blue Cat Audio" name="Minimal Sample 1" language_version="1.0" font_face="Tahoma"
   font_height="11" text_color="#ffffff" font_quality="cleartype" layout_type="column"
   background_color="#000000" v_margin="5" h_margin="10" spacing="3">
   <!-- Title -->
   <TEXT h_align="right" font_face="" value="Blue Cat's Chorus " font_height="20" font_weight="bold"
      font_style="italic" />
   <!-- Row of controls with param names on top of them -->
   <ROW spacing="10">
      <!-- Param 1: a column containing a apram_text control and the name of the param-->
      <COLUMN v_align="bottom" spacing="4">
         <PARAM_TEXT param_id="dsp.input1" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input1" cursor="system::hand" value_format="+3.0" font_face="Lucida
Console" text_color_hover="#ff8800" />
      </COLUMN>
      <!-- Oscillator params group-->
      <COLUMN v_align="top" spacing="4" h_margin="12">
         <TEXT value="--- Oscillator ---" text_color="#00aa00" />
         <ROW spacing="10">
            <!-- Param 4-->
            <COLUMN v_align="top" spacing="4">
               <PARAM_TEXT param_id="dsp.input4" content="{name}:" />
               <PARAM_TEXT_CONTROL param_id="dsp.input4" cursor="system::hand" value_format="3.0" font_face="Lucida Console"
                  text_color_hover="#ff8800" />
            </COLUMN>
            <!-- Param 5-->
            <COLUMN v_align="top" spacing="4">
               <PARAM_TEXT param_id="dsp.input5" content="{name}:" />
               <PARAM_TEXT_CONTROL param_id="dsp.input5" cursor="system::hand" value_format="3.0" font_face="Lucida Console"
                  text_color_hover="#ff8800" />
            </COLUMN>
            <!-- Param 6-->
            <COLUMN v_align="top" spacing="4">
               <PARAM_TEXT param_id="dsp.input6" content="{name}:" />
               <PARAM_TEXT_CONTROL param_id="dsp.input6" cursor="system::hand" value_format="4.2" font_face="Lucida Console"
                  response_curve="exp1" positions_count="81" pixel_range="81" text_color_hover="#ff8800" />
            </COLUMN>
            <!-- Param 8-->
            <COLUMN v_align="top" spacing="4">
               <PARAM_TEXT param_id="dsp.input8" content="{name}:" />
               <PARAM_TEXT_CONTROL param_id="dsp.input8" cursor="system::hand" value_format="3.0" font_face="Lucida Console"
                  pixel_range="4" />
            </COLUMN>
         </ROW>
      </COLUMN>
      <!-- Mix params group-->
      <COLUMN v_align="top" spacing="4" h_margin="12">
         <TEXT value="--- Mix ---" text_color="#00aa00" />
         <ROW spacing="10">
            <!-- Param 2-->
            <COLUMN v_align="top" spacing="4">
               <PARAM_TEXT param_id="dsp.input2" content="{name}:" />
               <PARAM_TEXT_CONTROL param_id="dsp.input2" cursor="system::hand" value_format="3.0" font_face="Lucida Console"
                  positions_count="101" pixel_range="51" text_color_hover="#ff8800" />
            </COLUMN>
            <!-- Param 3-->
            <COLUMN v_align="top" spacing="4">
               <PARAM_TEXT param_id="dsp.input3" content="{name}:" />
               <PARAM_TEXT_CONTROL param_id="dsp.input3" cursor="system::hand" value_format="3.0" font_face="Lucida Console"
                  positions_count="101" pixel_range="51" text_color_hover="#ff8800" />
            </COLUMN>
         </ROW>
      </COLUMN>
      <!-- Bypass button (param 0)-->
      <COLUMN v_align="bottom" spacing="4">
         <PARAM_TEXT param_id="dsp.input0" content="{name}:" />
         <PARAM_TEXT_CONTROL param_id="dsp.input0" cursor="system::hand" value_format="3.0" font_face="Lucida
Console" pixel_range="4" text_color_hover="#ff8800" />
      </COLUMN>
   </ROW>
</SKIN>