premium article

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


In this Tutorial we will build a fully functional UI with multiple Screens. One main screen, an FX screen and an about screen. Whereas the FX screen again holds a sub-menu for two different FX: a hi-cut filter and a lo-fi fx. In this first part we only set up the  GUI or the Navigation.

KSP Full UIHaving multiple screens or instances inside one script tab is the most common way modern Kontakt user interfaces are built giving the best usability. The downside: coding gets more complex since you have to put ALL controls (like sliders, buttons, labels, images etc) into one script tab. You also have to create multiple button actions to hide all controls & bg images of the inactive screens, and show those again which are currently active. All the other controls are still there but not visible and not accessible so more code is required inside one script tab. Since KSP is a simple language it can get very frustrating & confusing.

It also seems to get very complex the way we do it for this tutorial. Actually you would work with sublime 3 using macros (summarizing identical code structures) which makes coding a lot easier, faster and less error-prone. But for this tutorial we want to do it the classic way since it is way more detailed and clearer for you to follow. If you have understood the method we will proceed and rewrite the code again using macros. But let’s start coding now

Any Questions? Ask here or use the comments below

If you are a beginner it is recommended to read the other tutorials first.

License: This ksp script is licensed under a Creative Commons Attribution 4.0 International License.
You may use it for your projects (also commercially) and edit it as you like, as long as you keep all credits

Requirements: no requirements, the script works without sublime 3 compiling

Download all files to this tutorial

  • Open Resource Container: Buttons, Knobs, Wallpapers  premium
  • NKI file: the working script premium



1. create resource container

2. create wallpapers

3. create knobs & buttons

4. Script – init callback

5. Script – the navigation buttons (on ui_control)

6. Script – the functions (show / hide UI elements)

4. Script – init callback

initialize the UI, set the basic wallpaper and make it viewable outside the script tab with these lines of code:

on init
  set_script_title("Multiple UI")
  set_control_par_str($INST_ICON_ID,$CONTROL_PAR_PICTURE,"yb_ico"){sets your brand icon}


declare global variables which are used throughout the whole script several times

{DECLARE : Global Vars}
 declare $count

Navigation ButtonsDeclare and set the main navigation buttons for a main screen, an fx screen and an about screen

first we need an array which is holding all navigation buttons so that we can access them later on easier and quicker

 declare %arr_btn_nav_main[3]


Then we declare constants holding the size and the width of the navigation buttons in pixels. Since all Navigation Buttons are of the same size we just need 2 constants (width and height)

{constants nav main}
 declare $BTN_NAV_WIDTH := 167
 declare $BTN_NAV_HEIGHT := 39


Now we declare the first of the main navigation buttons which shows the main screen when clicking on it (and hide all other screens at the same time). With the set_control_par we will decline all button parameters like the button image and the position of the button. We are working with the array above. With the $count variable we will access the specific button stored in that array. This way we can simply duplicate the whole code block because the only thing we need to alter then is the $count variable, the button specific parameters like the x position, and the button name variable itself.

{btn nav main}
 $count := 0
 declare ui_switch $btn_nav_main {declares / add a button}
 make_persistent($btn_nav_main) {keeps the button's last value when closing & reopening Kontakt}
 %arr_btn_nav_main[$count] := get_ui_id($btn_nav_main) {adds the main button to your array, at position 0 since $count = 0}
 set_control_par_str(%arr_btn_nav_main[$count],$CONTROL_PAR_PICTURE,"btn_nav_main") {sets the picture of the element 0 in your array which is the main button}
 set_control_par_str(%arr_btn_nav_main[$count],$CONTROL_PAR_TEXT,""){removes the default button text which would be 'btn_nav_main'}
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_POS_Y,424)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_POS_X,20)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_WIDTH,$BTN_NAV_WIDTH)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_HEIGHT,$BTN_NAV_HEIGHT)


as said we now copy the whole code block for each of the other nav buttons and simply alter the needed values like x-position, button names etc. This is a place where macros would come in very handy to save some lines of code

{btn nav fx}
 $count := 1
 declare ui_switch $btn_nav_fx
 %arr_btn_nav_main[$count] := get_ui_id($btn_nav_fx){adds the fx button to your array, at position 1 since $count = 1 now}
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_POS_Y,424)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_POS_X,241)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_WIDTH,$BTN_NAV_WIDTH)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_HEIGHT,$BTN_NAV_HEIGHT)
{btn nav about}
 $count := 2
 declare ui_switch $btn_nav_about
 %arr_btn_nav_main[$count] := get_ui_id($btn_nav_about)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_POS_Y,424)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_POS_X,447)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_WIDTH,$BTN_NAV_WIDTH)
 set_control_par(%arr_btn_nav_main[$count], $CONTROL_PAR_HEIGHT,$BTN_NAV_HEIGHT)


premium content

Leave a Reply

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