premium article

Last modifiedNovember 21st, 2019 May 21st, 2024 by YummyBeats& filed under Kontakt Scripting (KSP) - Basics, UIs, Tutorials, Scripts and Tools, Kontakt Scripting (KSP) :: Basics.

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

This article explains the ui_panel ind detail and shows some basic examples.

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

DOWNLOAD

License: No License – Released under Public Domain

Required

Sublime 3 (for compiling)
Setting up Sublime 3 for Kontakt Script Processor Syntax

Content:

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 to create dynamic UIs or multiple screens within one script tab (see video) But it can also be used to group some controls e.g. to adjust their x & y position altogether (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 no real object like the other UI elements because it is always invisible and inactive more like an adjustment layer if you want to put it that way.

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

single steps in words (syntax below):

first we declare a panel like any other ui control inside the on init
then we assign ui elemnts to our panel that we want to group and control all together
(like knobs buttons, menus etc)
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

A panel can be declared like 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

set_control_par(get_ui_id($mySlider),$CONTROL_PAR_PARENT_PANEL,get_ui_id($myPanel))

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)

set_control_par(get_ui_id($myPanel),$CONTROL_PAR_HIDE,$HIDE_WHOLE_CONTROL)
// 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
(SUBLIME REQUIRED)

on init 
  make_perfview
  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
// NAVIGATION 
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.

unlock the full article
including all downloads!

unlock premium content

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

StephanS
Thank you for the Tutorial. But i have one question: Is it possible to close a Panel by Clicking outside of it in the GUI? Or must be a Button pushed for that?
November 10th, 2021

reply
- YummyBeats
  As far as I know you always need a button.
  It's still possible by creating a very large button as a background layer and by putting all other ui elements on top but I wouldn't actually recommend placing the button outside the panel, because it will always be there and reacting then.
  
  So instead you can make the whole panel clickable. To do so just add a very large button with the size of your panel as a background layer and put other UI elements on top. You can either make the button transparent then, or just use a background graphic, so that the button builds the background for your panel.
  
  Of course you can also try this method and place this large button outside of your panel with the size of your whole GUI. So that whenever you click on an empty area outside, the panel closes.
  However as said this button will always be reacting then, and it could possibly cover other ui elements. Especially when you work on your project again after years you may not think about that and may be wondering why some elements suddenly don't work. At least since Kontakt 6 we can z-layer ui elements.
  November 10th, 2021
  
  reply
Greg_Mnt
Hey Guys, This is great, thanks so much. Out of interest is there anyway of assigning a new/different background image to a panel or affecting the background image (blurring, opacity etc) so that the panel could open in front of existing controls and not cause a problem? Any help would be greatly appreciated!
August 11th, 2021

reply
- YummyBeats
  Hey, not to the panel itself. A panel is just a container where you can put in your ui controls but unfortunately you cannot assign backgrounds to a panel.
  
  However you can add a label with the size of your UI and assign a background image to it. Since the label is always in the back you can then put all other ui controls on top of it like knobs, buttons, menus etc
  Here you can read a full tutorial. Switchable, Dynamic Background Image / Wallpaper (via label element)
  
  I can also recommend you to browse through all the other UI tutorials Like creating custom buttons and knobs.
  August 11th, 2021
  
  reply

Greg_Mnt

Hey Guys, This is great, thanks so much! Would be great to have the buttons hide the panel when clicked again not just switching between panels. What would need to be added to the ui_control for this? Cheers

August 11th, 2021

YummyBeats

Hey, you can simply hide all panels via $control_par_hide. Just add this to your nav buttons. I also added a close "X" button:

on init 
  make_perfview
  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
  
  declare ui_button $closeAll
  $closeAll -> text := "X"
  $closeAll -> width := 20
  $closeAll -> pos_x := 630-20
  $closeAll -> pos_y := 4

  //initially hide all panels
  $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
  $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
end on
// NAVIGATION 
on ui_control ($NavButton1)
  select $NavButton1
    case 1
      $myPanel_1 -> hide := $HIDE_PART_NOTHING
      $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
    case 0
      $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
      $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
  end select
  $NavButton2 := 0
end on
on ui_control ($NavButton2)
  select $NavButton2
    case 1
      $myPanel_2 -> hide := $HIDE_PART_NOTHING
      $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
    case 0
      $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
      $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
  end select 
  $NavButton1 := 0
end on
on ui_control($closeAll)
  $myPanel_1 -> hide := $HIDE_WHOLE_CONTROL
  $myPanel_2 -> hide := $HIDE_WHOLE_CONTROL
  
  // reset all button states
  $closeAll := 0
  $NavButton1 := 0
  $NavButton2 :=0
end on

August 11th, 2021

Confused
Attention! No .nki files in premium DOWNLOAD. Confused! Where is the userfriendly quality?
April 28th, 2020

reply
- 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!
  April 28th, 2020
  
  reply
Yahel
I don't even get what is the final code to copy/paste and test it? Help please...
April 21st, 2020

reply
- 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
  April 21st, 2020
  
  reply
Florian
how can I "store" a button matrix in panels, so I must not create every single button by hand?
February 3rd, 2020

reply
- YummyBeats
  have you already read this tutorial?
  https://blog.yummybeats.com/ksp-kontakt-scripting/kontakt-scripting-ksp-custom-scripts-button-matrix-automatic-grid-alignment/
  
  Now just add the panel code into your macro, to assign each button to your panel like this:
  macro declare_button(#idx#) declare ui_button $btn_#idx# //.. $btn_#idx# -> parent_panel := get_ui_id($myPanel) end macro
  
  February 3rd, 2020
  reply

Kontakt Scripting (KSP) :: BASICS :: ui_panel explained [Kontakt 6]

Download all files to this tutorial premium

Required

Related Post(s)

Content:

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

What can be controlled via panel?

single steps in words (syntax below):

A :: Declaring a panel

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

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

Full code to show/hide the panel content via nav buttons
(SUBLIME REQUIRED)

D :: positioning panels

premium content

unlock the full article
including all downloads!

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

StephanS

YummyBeats

Greg_Mnt

YummyBeats

Greg_Mnt

YummyBeats

Confused

YummyBeats

Yahel

YummyBeats

Florian

YummyBeats

Leave a Reply Cancel reply

Free Plan

Basic Plan

8 EUR

Gold Plan (4 month access)

29 EUR

Download all files to this tutorial premium

Required

Related Post(s)

Content:

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

What can be controlled via panel?

single steps in words (syntax below):

A :: Declaring a panel

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

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

Full code to show/hide the panel content via nav buttons (SUBLIME REQUIRED)

D :: positioning panels

premium content

unlock the full article including all downloads!

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

StephanS

YummyBeats

Greg_Mnt

YummyBeats

Greg_Mnt

YummyBeats

Confused

YummyBeats

Yahel

YummyBeats

Florian

YummyBeats

Leave a Reply Cancel reply

c. hiding a panel
d. positioning panels premium

Full code to show/hide the panel content via nav buttons
(SUBLIME REQUIRED)

unlock the full article
including all downloads!