premium article

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


this drag & drop script can be used to rearrange anything with Kontakt. With up to 16 draggable elements.

It can easily be customized by adjusting a few parameters like size, position, amount of draggable elements. The draggables can be skinned with custom images as well (see video).

All draggable positions are updated into an array which can be used to reorder anything with Kontakt. Read more below under API


Recommended

Sublime 3 (if you want to work with the sublime short-syntax code, which is included in the DL)

Download all files to this article

  • NKI file [Kontakt 5]: open script tab & resource container
  • NKI file [Kontakt 6]: open script tab & resource container
  • ksp script file for sublime 3
  • ksp script file for kontakt 5
  • ksp script file for kontakt 6
DOWNLOAD


DLC: additional CONTENT
(reARRANGE FX)

DOWNLOAD HERE


License:

MIT International License.
https://blog.yummybeats.com/license-text-mit/
You may use this script, modify it, build upon it, as you like (also commercially), as long as you keep all credits within the code visible to others. You may put them into an extra open script tab or inside an about section of your instrument. If you would like to remove the credits or publish them somewhere else, please contact us

YOU MAY NOT commercialize, share, distribute, whatsoever the included image files and other media (© 2020 all rights reserved).


Content

Important Notes

These docs explain the code on the basis of the Kontakt Script versions supplied with the download.

If you are working with sublime it is recommended to use the sublime version, also supplied with the download.
The sublime version works for both, Kontakt 5 & 6. Simply set the preferred Kontakt version at the top the script, before compiling it.

For the draggables both the words “element” and “cursor” are used across these docs.

Setup Guide

  1. copy the whole code from inside the on init into your on init. At best somewhere below your code.
    But don’t copy the “on init” “end on” again
  2. copy the whole code from below the on init somewhere below your on init.
  3. Put the copyright notice at the very top of your code (or into an extra open script tab or into an about section of your instrument).

See this demo:

{#####################################################################################
"YummyBeat's - KSP Drag & Drop" script, licensed under the MIT License
....
.... 
Please copy the whole copyright notice here!
#####################################################################################}

on init
  {### YOUR CODE ###}

  {YUMMYBEAT'S KSP DRAG & DROP SCRIPT}
end on

{### YOUR CODE ### }

{YUMMYBEAT'S KSP DRAG & DROP SCRIPT}
on ui_control (?dd_area)
  {.....}
end on

Adjustable Vars (Kontakt6 & Kontakt5)

{ SET GLOBAL UI }		 
  declare $UI_WIDTH 	:= 1000 {set UI width: min width = 632; max width = 1000 }
  declare $UI_HEIGHT 	:= 540 {set UI height: max height = 540 }
  declare @WALLPAPER			
  @WALLPAPER 	:= "wp" {set background wallpaper (image name w/o file extension) }

{ SET DRAG & DROP AREA }
  declare const $NUM_CURSOR 	:= 8 {set the amount of total cursors; max = 16 }
  declare const $DD_AREA_WIDTH 	:= 480 {set the drop down area width }
  declare const $DD_AREA_HEIGHT 	:= 64 {set the drop down area height (this should equal the cursor image height) }
  declare const $DD_AREA_ALIGN 	:= 1 {align the drag & drop area: 1 = center; 0 = left }
  declare const $DD_AREA_POS_X 	:= 0 {left indent; set to 0 when align = center }
  declare const $DD_AREA_POS_Y 	:= 241 {position the drag & drop area vertically }
  declare $RELEASE_TIME		:= 200 {Kontakt 5 only: wait time until mouse release code is executed }

{ SET CURSOR IMAGES }
  declare !cursor_img[$NUM_CURSOR]
  !cursor_img[0] := "cursor_0"	{set individual image for cursor 1: enter image file name w/o file extension }
  !cursor_img[1] := "cursor_1"	{set individual image for cursor 2: enter image file name w/o file extension }
  !cursor_img[2] := "cursor_2"	{set individual image for cursor 3: enter image file name w/o file extension }
  !cursor_img[3] := "cursor_3"	{ ... }
  !cursor_img[4] := "cursor_4"
  !cursor_img[5] := "cursor_5"
  !cursor_img[6] := "cursor_6"
  !cursor_img[7] := "cursor_7"
  {
  !cursor_img[8] := 	""
  !cursor_img[9] := 	""
  !cursor_img[10] := 	""
  !cursor_img[11] := 	""
  !cursor_img[12] := 	""
  !cursor_img[13] := 	""
  !cursor_img[14] := 	""
  !cursor_img[15] := 	""
  }
  {uncomment if using more than 8 cursors}

simply refer to the comments nearby or watch the video.

API :: Output Data and Usage

ksp__draggable_api_state

$pos
holds the current position of the selected cursor

message($pos) //outputs 2

$this_cursor
holds the current selected cursor index

message($this_cursor) //outputs 6

%cursor_index
this array holds all cursor indices (the cursor IDs) subjected to their current positions. Where the array keys represent the positions and the values the cursor indices (see example below).

So if we wanna know which cursor is currently at which position we can do:

// THIS IS REFERRING TO THE CURSOR POSITIONS FROM THE IMAGE ABOVE 

//position 0
  message(%cursor_index[0]) //outputs 3
//position 1
  message(%cursor_index[1]) //outputs 5
//position 2
  message(%cursor_index[2]) //outputs 6
//position 3
  message(%cursor_index[3]) //outputs 7
//position 4
  message(%cursor_index[4]) //outputs 0
//position 5
  message(%cursor_index[5]) //outputs 1
//position 6
  message(%cursor_index[6]) //outputs 2
//position 7
  message(%cursor_index[7]) //outputs 4

Example

All the values above will be updated whenever we move an element to a new position.

We can now use all the values to reorder anything we want.

ksp__draggable_sc01ksp__draggable_sc02

Let’s move element four to the first position = Null position.

$pos
is 0 (before it was 4)

$this_cursor
stays 4 until we select another cursor.

%cursor_index
looks like this now:

%cursor_index[0] => 4
%cursor_index[1] => 0
%cursor_index[2] => 1
%cursor_index[3] => 2
%cursor_index[4] => 3
%cursor_index[5] => 5
%cursor_index[6] => 6
%cursor_index[7] => 7

Now we can iterate through the %cursor_index  array and use its keys & values to reorder anything we want (see rearranging fx slots)

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: highly negative votes may be removed without any reasonable given feedback!

Tell us how we can improve this post?

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 *