with the new ui_panel since Kontakt 6, things became a little easier when it comes to complex ui’s with multiple screens or panels in one script tab.
In this tutorial we will learn the basics of ui_panel.
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. 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:
- 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
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
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) the exact same code from above in sublime ksp short syntax (needs to be compiled). Learn more
NOTE: we can assign each control to one panel only! 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
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
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?
unlock the full article
unlock premium content
including all downloads!