Posted by & filed under KSP Scripting (NI Kontakt) - Tutorials, KSP: Custom UI (design).

to create your custom UI and place custom controls you can chose between a grid system or exact pixels.

commands &  parameters you need for this

make_perfview
makes the current tab visible (outside the edit mode)

set_ui_height_px(<height>)
set the height of the ui (tab)

declare ui_switch $<variable-name>
creates a switch with the name <variable-name>

declare ui_knob $<variable-name>(<min>,<max>,<display-ratio>)
creates a knob with the name <variable-name>

move_control_px(<variable>,<x-position>,<y-position>)
this moves the control inside your UI from top left position

move_control(<variable>,<x-position>,<y-position>)
place the ui elements in the standard Kontakt grid

set_control_par(<ui-ID>,<control-parameter>,<value>)
$CONTROL_PAR_HEIGHT, $CONTROL_PAR_WIDTH

Download Resources

DOWNLOAD

Grid vs. Pixels

Pixels: Free space with 632 x 540px (max) (you can set the height but not the width). If you created a nice backgrounds or custom knobs you should use the pixel based system because it lets you position your controls exactly where you want them to be.

Grid: Table structure with 6 columns and max 16 rows (you can set the row count but not the column count). If you want to place your controls quickly in a pre-defined structure you can use the grid system. To get familiar with the grid system you can use this generator. It’s a great tool for understanding the basics, however I personally wouldn’t recommend it for live scripts, since the generated code is very confusing so that you can’t easily add custom code or change the generated one, which you would really want to do sooner or later.

You can also mix the 2 systems but this is not recommended.

Positioning ui controls with Pixels

Every ui element (including the wallpaper) have their reference point in the top left (x=0 and y=0) So to place controls (knobs, buttons etc) you simply need to measure the distance from this point to your ui element in pixels. Simply use the ruler of your preferred graphic software to do so. But keep in mind that the reference point starts below your instrument header:

custom-ui_ref-point

Sometimes you want to use some simple calculations to place your controls which can be helpful when you have many controls of the same kind (like knobs) and want to place them next to each other with an equal spacer. Or if you want to place your control to the very right. You can use this simple method to position a control to the bottom right:

center a button by calculation

  1. set the height of your UI set_ui_height_px(150)
  2. set the width and height of your button (width:100px, height:28px).
  3. use move_control_px(variable,x_position,y_position) to center the button by simply subtracting the button size from the UI sizes, divided by 2:
    x-position = (632 - 100px)/2 
    y-position = (<ui height> - 28px)/2

Example (file: placing_controls_by_calc_px.nki):

on init
    {SET: ui space & bg}
        make_perfview
        set_ui_height_px(150)
        set_control_par_str($INST_WALLPAPER_ID,$CONTROL_PAR_PICTURE,"wallpaper2")

    {SET: common variables}
        declare $pos_y {variable to store y position}
        declare $pos_x {variable to store x position}
    
    {SET: button}
        declare ui_switch $button
        set_control_par(get_ui_id($button),$CONTROL_PAR_HEIGHT,28)
        set_control_par(get_ui_id($button),$CONTROL_PAR_WIDTH,100)

        $pos_x := (632-100)/2
        $pos_y := (150-28)/2
        move_control_px($button,$pos_x,$pos_y)
 end on

 

By Measuring: placing a knob inside a box of your wallpaper

custom-ui_placing_controls

  1. create your wallpaper
  2. Use a ruler to measure the position where you want to place your Knob (x and y coordinates from the top left, in pixels). Again, remember the instruments header: the top reference point is 68 pixel below where your wallpaper starts (you can also use an auxiliary line within your graphic software to mark the actual height)
    custom-ui_ref-point2
  3. In this example we want to place the knob(s) to x=382px; y=146px
    custom-ui---placing-knobs

 

Example (file: placing_controls_px_measuring.nki)

on init
     make_perfview
     set_control_par_str($INST_WALLPAPER_ID,$CONTROL_PAR_PICTURE,"wallpaper")
     set_ui_height_px(166)

     declare ui_knob $knob_1 (0,1000,1)
     declare ui_knob $knob_2 (0,1000,1)

     move_control_px($knob_1,382,78)
     move_control_px($knob_2,480,78)
 end on

Positioning ui controls with the Grid System

as mentioned above you may want to use the grid system if you want to place your controls quickly with a predefined structure. The Grid system works like a table with  6 columns and max 16 rows (depending on the height). You simply place your UI control into one of those cells like shown:

Example (file: placing_controls_grid.nki)

on init
     make_perfview
     set_control_par_str($INST_WALLPAPER_ID,$CONTROL_PAR_PICTURE,"wallpaper2")
     set_ui_height(3)
     declare ui_knob $knob_1 (0,1000,1)
     declare ui_knob $knob_2 (0,1000,1)
     move_control($knob_1,3,3)
     move_control($knob_2,4,3)
end on
 

Leave a Reply

Your email address will not be published. Required fields are marked *