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

makes the current tab visible (outside the edit mode)

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>

this moves the control inside your UI from top left position

place the ui elements in the standard Kontakt grid


Download Resources


Grid vs. Pixels

Pixels: Free space with 632 x 540px (max)  (you can set the height but not the width since kontakt 5.6 you can also set the width up to 1000px). If you created a nice background 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 ambitious projects.

You can also mix the grid and pixel system 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:

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:

by calculation: center a button

on init
    {SET: ui space & bg}
    {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
        $pos_x := (632-100)/2
        $pos_y := (150-28)/2
 end on
  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

related file: placing_controls_by_calc_px.nki

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

  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)
  3. custom-ui---placing-knobs
    In this example we want to place the knob(s) to x=382px; y=146px which looks like this then (also see the related code below):


Example (file: placing_controls_px_measuring.nki)

on init
     declare ui_knob $knob_1 (0,1000,1)
     declare ui_knob $knob_2 (0,1000,1)
 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
     declare ui_knob $knob_1 (0,1000,1)
     declare ui_knob $knob_2 (0,1000,1)
end on
Please Rate!
[Total: 0 Average: 0]

Leave a Reply

use <pre></pre> to wrap code blocks

use <code></code> to wrap small code snippets

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