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 variables explained
- the full script
- on init – explained (only relevant parts)
- macros – explained (only relevant parts)
- scroll function – explained
- creating the scrollbar image file
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
unlock the complete article including all downloads!unlock premium content