premium article

Last modifiedby & filed under KSP Scripting (NI Kontakt) - Tutorials, KSP: Basics.

with the new ui_panel since Kontakt 6, things became a little easier when it comes to complex ui’s with multiple screens (= panels) inside one script tab.

In this tutorial we will learn the basics of ui_panel.

Please accept YouTube cookies to play this video. By accepting you will be accessing content from YouTube, a service provided by an external third party.

YouTube privacy policy

If you accept this notice, your choice will be saved and the page will refresh.

This video is for illustration only! The UI in this video is not covered in this article!


Download all files to this tutorial premium

  • all introduced examples as ksp file for sublime
  • all introduced examples as already compiled nki for Kontakt 6


License: No License – Released under Public Domain



  1.  ui_panel explained

    a. Declaring a panel

    b. assigning controls to our panel

    c. hiding a panel
    d. positioning panels  premium

    e. child panels / sub panels   premium

1. the new ui_panel explained

Most often we use the ui_panel when we want to create multiple screens within one script tab (see video) But we can also use it to just group some controls to adjust their x & y position (learn more below [premium])

So the ui_panel is a container where we can put in all of our ui elements belonging together. Thereby the panel itself is always invisible and inactive by its own like a null object or like a “div” if you know html.

What can be controlled via panel?

  • x/y position of the whole panel affecting all the assigned ui elements
    (thereby the relative position of all the assigned elements to each other is not changed)
  • visibility of all the assigned ui elements

Working with panels is very easy:

  1. first we declare a panel like any other ui control inside the on init
  2. then we assign ui elemnts to our panel that we want to group and control all together
    (like knobs buttons, menus etc)
  3. we can now control all assigned elements by just controlling the panel.

This code for example shows and hides everything assigned to $mypanel:

set_control_par(get_ui_id($myPanel), $CONTROL_PAR_HIDE, $HIDE_WHOLE_CONTROL)

A :: Declaring a panel

on init 
  declare ui_panel $myPanel
end on

Simple and easy. We declare a panel as any other ui_element

B :: Assigning an element to a panel (e.g. a slider)

on init 
  declare ui_panel $myPanel
  declare ui_slider $mySlider(0,100)
  // assigns the slider to $myPanel:
  set_control_par(get_ui_id($mySlider), $CONTROL_PAR_PARENT_PANEL, get_ui_id($myPanel))

  // or in sublinme short syntax:
  $mySlider -> parent_panel := get_ui_id($myPanel)
end on

assigns the Slider we just declared to our Panel.

$mySlider -> parent_panel := get_ui_id($myPanel)

This is the exact same code from above in sublime ksp short syntax (but this needs to be compiled)

NOTE: we can assign each control to only one panel! For a complex ui with sub panels and multiple dependencies read Child Panels (premium content)

C :: Hiding a panel (and all of its elements)

// or in sublime 3 short syntax
$myPanel -> hide := $HIDE_WHOLE_CONTROL

This hides our panel and all elements assigned to that panel. At best use this in combination with some navigation buttons (see below)

Full code to show/hide the panel content via nav buttons

on init 
  declare ui_panel $myPanel_1 
  declare ui_panel $myPanel_2

  declare ui_slider $mySlider (0,100)
  $mySlider -> parent_panel := get_ui_id($myPanel_1) 

  declare ui_knob $myKnob(0,100,1)
  $myKnob -> parent_panel := get_ui_id($myPanel_2)

  declare ui_button $NavButton1
  declare ui_button $NavButton2

  //initially hide all panels
  $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
  $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
end on
on ui_control ($NavButton1)
  $myPanel_1 -> hide := $HIDE_PART_NOTHING
  $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
  $NavButton2 := 0
end on

on ui_control ($NavButton2)
  $myPanel_2 -> hide := $HIDE_PART_NOTHING
  $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
  $NavButton1 := 0
end on

A simple nav button which hides and shows our parent panels … this is already your first little multi screen instrument

D :: positioning panels

we can also position whole panels instead of position each single control. The following will reposition the two labels dynamically via x & y slider and also displaying the x/y coordinates as label text

premium content

How useful was this article?

something you didn't like? Please tell us before you rate!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

NOTE: highly negative votes may be removed without any reasonable given feedback!

Tell us how we can improve this post?

6 Responses to “Kontakt Scripting (KSP) :: BASICS :: ui_panel explained [Kontakt 6]”

  1. Confused

    Attention! No .nki files in premium DOWNLOAD. Confused! Where is the userfriendly quality?

    • YummyBeats

      Sorry, there is no fancy ui here, so the consideration was that a nki would not be necessary in this case since you only need to copy (sublime => F5 key) & paste the code. But it has now been added to the download.

      By the way, in the download boxes the downloadable content is always listed, so I hope you didn't have the feeling you bought a pig in a poke!

    • YummyBeats

      For this one you need to compile all the example code with sublime 3. To do so simply copy and paste the example code into sublime and hit the F5 key (the compiled code will be put into your clipboard). Then just paste the code into your Kontakt script tab.

      Learn more about working with sublime3 and setting it up for the first time here

  2. Florian

    how can I "store" a button matrix in panels, so I must not create every single button by hand?

Leave a Reply

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

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

use basic html to style your comment

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