premium article

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

with the new ui_panel from 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 before we move on to a more complex application which is coming later (see video)

We will also work with the short sublime 3 syntax. If you are very new to sublime 3 please read the Setting up Sublime 3 article

 

Download all files to this tutorial premium

  • all introduced examples as ksp file for sublime

DOWNLOAD


License: No License – Released under Public Domain

Required


Content:

  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 or sub panels (as we also call them) 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 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.

But we can use it to position, show and hide all assigned elemnts with only one line of code for the panel itself .

This hides a pnael and all the assigned controls:

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 same 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)

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?

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

Let us improve this post!

Leave a Reply

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

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

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