Kontakt Scripting (KSP) :: scrollbar vertical, scroll area, auto scroll (as mouse wheel replacement)
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.
If you accept this notice, your choice will be saved and the page will refresh.
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.
Requiered
Sublime Text (only if you want to modify the script core)
License:
Creative Commons Attribution 4.0 International License.
http://creativecommons.org/licenses/by/4.0/
You may use this script, modify it, build upon it, as you like (even commercially), as long as you keep all credits
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 text
License:
Creative Commons Attribution 4.0 International License.
http://creativecommons.org/licenses/by/4.0/
You may use this script, modify it, build upon it, as you like (even commercially), as long as you keep all credits
If you would like to remove the credits or publish them somewhere else, please contact us
Content
-
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.
Real mouse wheel scrolling doesn’t work with Kontakt (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
Daniel Lautersztain
I noticed when implementing this that the btn_#idx# count starts from 60 and goes down to 0….I’ve been trying to reverse it with no luck, i’m hoping to have btn_1 be at the top (I only have 1 button per row) and scrolling down shows btn_2, btn_3 btn_4. Is there a way to reverse the placement of the buttons? I noticed in the button matrix tutorial they do start at btn_0 at the top and increment down.
YummyBeats
(in reply to Daniel Lautersztain)
I just took a look at the code and unfortunately this is not as easy as I thought in the first place. I will have a closer look soon but it seems like almost the entire script would have to be rewritten for this, so probably being too time consuming
Alternatively a much simpler and immediate solution would be to rather reverse the assigned button images etc. So that the last button gets the image and functionality of the first button and so on. Or is this not possible in your case?
Noel Ram
Hi,
I was wondering how I pick up the value of the slider in the scrollbar ie:- I’d like to set a function so when a group is called from a different drop down menu the scroll bar jumps to display the region where its preset button also assigned to the same group is. The scrollbar appears to have 63 frames in the animation which would be easy enough for me to figure out if you din’t have KSP alchemy attached to the value of slider. After banging my head with it for a couple of hours I can’t figure it out with my very basic knowledge. Thank you
YummyBeats
(in reply to Noel Ram)
I’m assuming you know the region already and just want to jump to that region, right?
In this case simply set $scrollbar to this region before calling the scroll function.
For a quick test in sublime text, put this at the end of your on init (compile with F5)
on init {your code including the scrollbar script} $scrollbar := 16 {assuming that 16 is the region to which the scrollbar should jump to} scroll end onWith a button’s ui control it looks exactly like the above:
on ui_control($your_preset_button) {your code} $scrollbar := 16 {assuming that 16 is the region to which the scrollbar should jump to} call scroll end onNoel Ram
(in reply to YummyBeats)
Perfect! Thank you for the quick response.
Noel Ram
(in reply to YummyBeats)
OK so .. I have a group menu, when I select a group (menu item) I call a function which selects the same button used in the scrollbar to “on” I have added the the scrollbar value code to the function but although the scrollbar moves to where i want it to be, the button matrix in the scrollbar doesn’t move with it. Here is the function:-
Noel
(in reply to Noel Ram)
Sorry, all working now, forgot to “call scroll”
Many thanks
YummyBeats
(in reply to Noel)
Great that you got it working.
Jfyi, the scroll function does all the calculation and repositioning work, based on the current $scrollbar value. So always call it if you want to update the complete scroll area.
Noel
Sorry about the double entry, when I first submitted it said i had been logged out. My bad 🙁
YummyBeats
(in reply to Noel)
np, I have deleted the double post.
Noel
Scroll bar container
Hi YummyBeats, I am having an issue with the scrollbar, my main UI = 970 x 575, I have 2 panels 970 x 330. I have 2 scroll bars with 128 btns x each hidden on the main UI and panel 2 but showing on the panel 1. When I first load the Instrument the scroll bars show on the main UI but they should be hidden. When I switch to panel 1 The scroll bar displays the buttons to the full height of the main UI which is wrong but when I click the scroll bar it corrects itself and is contained within the panel height. When I close panel 1 the scroll bars are now hidden as they should be on the main UI but When I I open panel 1 again I have the same issue of the scroll bar buttons stretching the full heigh of the main UI until I click on the scroll bar again. Sorry if it all sounds a bit long winded. If I could upload some images it would be simple to understand. Is this issue something you are familiar with?
YummyBeats
(in reply to Noel)
Hey Noel, I think I understood but can you email me a sample code to ksp@yummybeats.com? So that I don’t have to reproduce it.
Noel
(in reply to YummyBeats)
OK 🙂
Noel Ram
Hi, really enjoying your site!. I’m a novice so please forgive this question. Is there a way to wrap this whole script into a block for the purposes of show hide or do you have to do it by the individual elements? Thank you , Kind regards, Noel
YummyBeats
(in reply to Noel Ram)
Hey, thx!
you mean the entire script including all callbacks (on init, on control)?
Unfortunately that would not be very practicable and I can’t see an advantage. But if you really prefer that you could use a big macro to do so.
Otherwise yes, you should rather do it individually instead. For the on init callback just put the code from this on init here and put it below your on init code (without the “on init … end on” of course) So at the end it should look like this:
on init {your code} {this code} end onThe rest like the on control callbacks and functions can be placed anywhere you like below the on init. I would also suggest to put it below your code. And the functions below your functions.
Noel Ram
(in reply to YummyBeats)
Ok, so to place it in a panel, if I want to use 129 $btn_0 -128 to call 129 groups then I have to add 129 lines of code x 3 one in each block the like this? (which works but seems a little long winded 🙁 :)) Thank you!
YummyBeats
(in reply to Noel Ram)
I have removed your code just in case it gave too much insight 😉
I know what you mean. KSP is pretty basic and sometimes it can be a pita and is not as “smooth” as other languages. But fortunately with sublime and macros we can avoid this problem a little so that we don’t have to write like 129 similar lines of code over and over again
E.g. when creating each button via declare_button macro you can assign all button IDs to a special array which is already been done in this case (%btn_id). Later you can just loop through that array or pick a certain array key to control the button behaviors.
To use the button to control the engine (or groups) I’m afraid you have to create an individual on control for each button which however can also be done via macro. See all the on_control_* macros in here and the macro tutorial.
Unfortunately it would go beyond the comment function to explain everything in detail, so I recommend you to have a look at the macro tutorial. And maybe also the set engine par article.
If it’s only about showing and hiding all buttons within a panel, this is pretty easy again. Simply assign the buttons to a parent panel … also within the declare_button macro … and show/hide the whole panel as you prefer. All the content within that panel gets affected, so that you don’t have to hide all the buttons individually. The scrolling function shouldn’t get affected (not tested, though). Also see the panel article.
Noel
(in reply to YummyBeats)
OK, thank you and Happy New Year!
Jonathan
Hey Yummy Beats I wondered if it’s possible to make a looping scrollbar? So a scrollbar that when u hit the top of the gui jumps back to the bottom and the other way around (so when u hit the bottom jumps back to the top). So that you could have an infinite scroll.
YummyBeats
(in reply to Jonathan)
Sorry for the late reply. Just to make sure that I understand you correctly: should both the elements and the scrollbar automatically start at top position again when reaching the bottom of your scrollbar?
Tony Zandor
Knobman file of the scrollbar is not included in the download package, only the png is included. Can you please include also the Knobman file? Thanks
YummyBeats
(in reply to Tony Zandor)
I’m sorry, the download package has been updated.
Can you try downloading it again?