premium article

Posted by & filed under KSP Scripting (NI Kontakt) - Tutorials, KSP: Custom Scripts & Functions (Plugins), KSP: Custom UI (design).

based on the button matrix this script lets you easily create a scrollable area like shown in the video. You can adjust many parameters (and even use custom images for the buttons and scroll bar) by changing a few variables at the top of the script. The relevant code parts are explained in the article as well in case you want to customize it and use it for your instruments. It is recommended that you also read the button matrix article.


Sublime 3 (only if you want to modify the script core)


Creative Commons Attribution 4.0 International License.
You may use this script, modify it, build upon it, as you like (even commercially), as long as you keep all credits inside the script.
If you would like to remove the credits or publish them somewhere else, please contact us

Download all files to this article

  • Knobman file (Scrollbar)
  • NKI file: open scipt tab
  • open resource container
  • additional ksp script file for sublime 3


Adjustable Vars Explained

//////////// ADJUSTABLE VARS UI //////////////////
declare const $UI_WIDTH := 636 //set the complete ui width in px
declare const $UI_HEIGHT := 340 //set the complete ui height in px

//////////// ADJUST MATRIX //////////////////////
declare const $BTN_COUNT := 63 // set the overall button amount
declare const $BTN_COUNT_ROW := 3 //set the amount of buttons in a row (must be a divisor of $BTN_COUNT, no floating numbers allowed )
declare const $MATRIX_POS_Y := 12 //adjust the y-position in px
declare const $MATRIX_POS_X := 140 //adjust the x-position in px, default is centered
declare const $PADDING := 4 //set the right space between the single columns / buttons

//////////// ADJUST MATRIX BUTTONS //////////////
declare const $BTN_WIDTH := 120 //set the button width
declare const $BTN_HEIGHT := 28 //set the button height
declare @btn_image_name := "MyImageName_" //set an image filename

//////////// ADJSUT SCROLLBAR ///////////////////
declare const $SCROLL_WIDTH := 16 //set the scrollbar width in px
declare const $SCROLL_HEIGHT := 240 //set the scrollbar height in px
declare const $SCROLLBAR_MARGIN_X := 8 //set space between very right button and scrollbar
declare const $BTN_UPDOWN_WIDTH := 16 //set width of the scrollbar's up & down arrows
declare const $BTN_UPDOWN_HEIGHT := 13 //set height of the scrollbar's up & down arrows
declare const $BTN_UPDOWN_PADDING := 4 // set y space between up/down arrow and scrollbar
declare @scrollbar_img := "scrollbar" //set scrollbar image filename
declare @img_scroll_up := "btn_up" //set scrollbar up arrow's image filename 
declare @img_scroll_down := "btn_down" //set scrollbar down arrow's image filename

////////////// SET AUTOSCROLL ////////////////////
declare const $AUTOSCROLL := 1 //set to 1 to enable autoscrolling with up/down button
declare const $speed := 150 //autoscroll speed in ms

simply read the comments next to the variables or watch the video

$AUTOSCROLL is a useful function and replaces the mouse wheel. It lets you automatically scroll by hitting the up/down arrows. Mouse wheel hovering unfortunately doesn’t work with Kontakt sliders (yet?!)

$speed  sets the scrolling speed in ms. In this case every 150 ms a new button line will be scrolled in or out

premium content


Leave a Reply

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