ksp
premium article

Kontakt Scripting (KSP) :: scrollbar vertical, scroll area, auto scroll (as mouse wheel replacement)

Last modifiedby & filed under Kontakt Scripting (KSP) - Basics, UIs, Tutorials, Scripts and Tools, Kontakt Scripting (KSP) :: Custom Scripts & Functions (Plugins), Kontakt Scripting (KSP) :: UI (Design) & Engine.

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.

YouTube privacy policy

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
DOWNLOAD

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

How useful was this article?

something you didn't like? Please tell us before you rate!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

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

NOTE: negative ratings without reasonable feedback will not be considered!

Tell us how we can improve this post?

22 Responses to “Kontakt Scripting (KSP) :: scrollbar vertical, scroll area, auto scroll (as mouse wheel replacement)”

  1. 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

      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?

  2. 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

      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 on

      With 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 on

      • Noel Ram

        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:- 
          
function btnselect
if ($menu1 = 18)
$scrollbar := 22
set_control_par(%btn_id[45],$CONTROL_PAR_VALUE,1)
end if
end function

          • YummyBeats

            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.

  3. Noel

    Sorry about the double entry, when I first submitted it said i had been logged out. My bad :(

  4. 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?

    declare const $BTN_COUNT := 128
declare const $BTN_COUNT_ROW := 2
declare const $MATRIX_POS_Y := 12
declare const $MATRIX_POS_X := 200
declare const $PADDING := 4
declare const $BTN_WIDTH := 120
declare const $BTN_HEIGHT := 28
declare @btn_image_name
@btn_image_name := "MyImageName_"
declare const $SCROLL_WIDTH := 16
declare const $SCROLL_HEIGHT := 240
declare const $SCROLLBAR_MARGIN_X := 8
declare const $BTN_UPDOWN_WIDTH := 16
declare const $BTN_UPDOWN_HEIGHT := 13
declare const $BTN_UPDOWN_PADDING := 4
declare @scrollbar_img
@scrollbar_img := "scrollbarA"
declare @img_scroll_up
@img_scroll_up := "btnA_up"
declare @img_scroll_down
@img_scroll_down := "btnA_down"
declare const $AUTOSCROLL := 1
declare const $speed := 150
declare $y
declare $x
declare $i
declare $count := 0
declare $cache
$count := 0
$y := 0
$x := 0
declare const $ROWS_TO_SCROLL := $BTN_COUNT/$BTN_COUNT_ROW
declare $position_scroll_x
$position_scroll_x := $SCROLLBAR_MARGIN_X+$MATRIX_POS_X+(($BTN_WIDTH+$BTN_COUNT_ROW+$PADDING-1)*$BTN_COUNT_ROW)
declare $position_scroll_y
$position_scroll_y := $MATRIX_POS_Y+$BTN_UPDOWN_HEIGHT+$BTN_UPDOWN_PADDING

  5. 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

      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 on

      The 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

        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

          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.

  6. 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

      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?

  7. 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

Leave a Reply

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

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

use basic html to style your comment

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