ksp
premium article

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

this lightweight script creates a button grid with as many buttons you like. By default there are 4 buttons in a row but you can adjust the matrix (row number and column number) by simply changing a few variables. You can also adjust the button widths & heights, you can position the whole matrix and use custom button images. This matrix is useful to create scrollable areas or a pagination area like selectable tag filters or fx racks (as seen in many modern Kontakt libraries)


Required:

Sublime Text

License:

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

Download all files to this article premium

  • 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 ksp script, modify it, build upon it, redistribute it, as you like (even commercially), as long as you keep all credits inside the script code.
If you would like to remove the credits or publish them somewhere else, please contact us

Content

Adjustable Variables – Modify Grid

on init
   declare const $BTN_COUNT_ROW := 4 // sets the amount of buttons in a row
   declare const $BTN_COUNT := 32 // sets the overall button amount
   declare const $MARGIN_TOP := 12 // sets the overall top margin to adjust the y-position in px
   declare const $MARGIN_LEFT := 0 // sets the overall left margin to adjust the x-position in px, default is centered
   declare const $PADDING_RIGHT := 4 //sets the right space between the single columns / buttons
   ///////////////////////////////////////
   declare const $BTN_WIDTH := 121
   declare const $BTN_HEIGHT := 29
   declare @btn_image_name := "MyImageName_"
   //////////////////////////////////////
   .
   .
   .
   .
end on
$BTN_COUNT_ROW := 4 here we can set the columns or amount of buttons inside a row in this case we got 4 buttons a row
declare const $BTN_COUNT := 32 here we can set the overall amount of buttons. In this case we wanna create 32 buttons
declare const $MARGIN_TOP here we can adjust the y-position of the whole matrix in px
declare const $MARGIN_LEFT here we can adjsut the x-position of the whole matrix in px
declare const $PADDING_RIGHT here we can define a spacer between the single buttons or columns
declare const $BTN_WIDTH := 120 here we can set the button width in pixels. In this case it’s 120px
declare const $BTN_HEIGHT := 28 here we can set the button height in pixels
declare @btn_image_name := "MyImageName_"here we can set a custom image for our buttons. Each button has an individual image and we can set any image filename we want. To add individual images for each button simply create image files like this: “MyImageName_0.png”, “MyImageName_1.png”, “MyImageName_2.png” and so on.

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?

7 Responses to “Kontakt Scripting (KSP) :: USEFUL SCRIPTS :: button matrix / automatic grid, alignment”

  1. Stephan

    Hi very usfull code thx a lot, but where can i declare each button seperatly for a fuction? thanks for the help. Cheers

    • YummyBeats

      Hey, thx.

      you can simply add another similar macro with an on ui_control command like this:
      (the article has also been updated with a more detailed example)

      macro onuicontrol_button(#idx#)
      	on ui_control($btn_#idx#)
      		// ADD YOUR CODE HERE
      	end on
      end macro
      

  2. Henrik Hansson

    Nice article! Thanks! But, how can I get only one button to be allowed to be active/highlighted/pressed at once? i.e. if one is pressed, the previously pressed one should get deactivated (get status = 0). Hope the question makes sense....

    • YummyBeats

      At best create a function deactivating all buttons. Then inside the on ui_control of your buttons you call that function and after on you set the affected button to 1 again. Like this
      function deactivate_all_btn
        $btn1 := 0
        $btn2 := 0
        $btn3 := 0
      end function
      
      on ui_control ($btn1)
        call deactivate_all_btn
        $btn1 := 1
      end on
      
      Of course in your turnoff_all_buttons function you can also work with set_control_par and use an ui_id array with a while loop to deactivate all buttons.

      • Florian

        The scripped posted above did not work for me, but I tried a few things and came to this
        function deactivate_all_btn
          $btn1 := 0
          $btn2 := 0
          $btn3 := 0
        end function
        
        on ui_control ($btn1)
          call deactivate_all_btn
          $btn1 := 1
          $btn2 := 0
          $btn3 := 0
        end on
        
        on ui_control ($btn2)
          call deactivate_all_btn
          $btn1 := 0
          $btn2 := 1
          $btn3 := 0
        end on
        
        on ui_control ($btn3)
          call deactivate_all_btn
          $btn1 := 0
          $btn2 := 0
          $btn3 := 1
        end on
        
        I'd have to do this for every button. can I automate this??

        • YummyBeats

          Hmm, thats strange. It should work. Probably there is another error somewhere in your code?! It's also importnat that you put $btn1 := 1; $btn2 := 1; $btn3:=1 after "call deactivate_all_btn". Otherwise the function would set all your buttons to 0 again.

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 *