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

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

12 Responses to “Kontakt Scripting (KSP) :: Custom UI – Complex User Interface with multiple Screens/Menus inside one Script Tab”

  1. Matt

    Hi there, I’ve been through the premium articles for this and macros but seeing as this doesn’t use macros I can’t figure out how to enable the required functions for each knob/slider. Any help would be appreciated

    Thanks, it’s been a big help so far!

    • YummyBeats

      Thx! I’m not sure if I got this right. In case you want to make all knobs functional you can read this article

      If you just like to shorten your code and speed up your workflow with sublime 3 you can read this article

      Macros themselves can rather be considered as helper or code factories. If you have lots of repeating code structures you can use them to “print out” those structures again and again. Thereby you can modify the “printed code” a little for example by declaring variables with different names etc. This all is explained in the working with macros article (which you already read, I guess).

      I hope this still helps, although you said you got it already :) If you got any further questions just let me know.

      • Matthew

        Thanks, as I said I was being a bit slow, had made a simple error. What I’m trying to figure out now is how to add and AHDSR to the home page. I have the code appearing and no complaints from the script editor. The only problem is the AHDSR is constantly showing. I’m trying to have it show on the main home page, and disappear when I hit the FX or about buttons. Is there a simple way of doing that?

        • YummyBeats

          Actually it should hide like shown in the demo video. How about the included nki?
          This is already the easiest way I can imagine. However this tutorial is working directly without sublime 3 compiling so it seems to be more (complex) code then it would look like with sublime 3. I will send you a pm with some sublime 3 example code later on.

  2. Serge GORA

    Hello _

    The effect commands are not assigned in this Script (Lo-fi and filter SV LP4). There are the control buttons but they do not affect the parameters of the concerned effects.
    The “on ui_control” part for these commands is absent.
    For the resonace commande (Filter), the CONTROL_PAR_MOUSE_BEHAVIOUR is forgotten .

    Best .

    _ Serge _


Leave a Reply

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