Posted by & filed under KSP Scripting (NI Kontakt) - Tutorials, KSP: Custom UI (design).

The instruments background image is called “wallpaper”. Its’ the basic background texture where all UI elemnts (knobs, buttons etc) get layered on top. We can for example create a realistic synth surface containing placeholders and “sockets” for all your knobs and buttons with detailed shadows, light reflections etc. After on we create the individual knobs & buttons and place those controls exactly inside the designated sockets and areas by layering them on top of our background wallpaper just like we would do within our graphic software when designing a complete GUI.

used commands & variables

# METHOD 1 & 2

make_perfview
makes the current tab visible (outside the edit mode)

set_ui_height_px(<height>)
set the height of your ui in pixels

 

# METHOD 2 ONLY

set_control_par_str(<ui-ID>,<control-parameter>,<value>)
use this command in combination with the variables below to set the background

$INST_WALLPAPER_ID
The static ID of the instrument wallpaper (always the same)

$CONTROL_PAR_PICTURE
sets the picture name

1. Set a wallpaper via instrument options (easiest, fastest)

  1. create a Resource Container (learn more)
  2. create a wallpaper image with a height of min  118px and max 608px (depending on your UI size). And with a width of 632px (the width is fix since Kontakt 5.6 you can also change the width)
  3. Initial Wallpapers are attached at the very top above your instrument header. At -68px so to say, so leave some space (68px) for this header in your image (see the graphic below)
    initial wallpaper
  4. This is what your wallpaper image could look like (for a UI size of 540px)
    wp-initui-template
  5. put the wallpaper image into \Resources\pictures\
  6. in Kontakt: create a new instrument, click on the wrench button and click on instrument option
  7. click on browse (next to Instrument Wallpaper) and choose your background image
  8. now open a script tab and define your UI height via KSP. Also make the UI visible outside the edit mode. Thereby you can set the exact height in pixels with set_ui_height_px(540) or if you rather want to work with grids you can also use set_ui_height(8). But when working with graphics we should use the pixel system:
    on init
      make_perfview {makes the UI visible outside edit mode}
      set_ui_height_px(540) {defines the height in px}
      message ("") {clears all former messages in the status bar}
    end on
    

2. Wallpaper via KSP Script:

Actually this is the same method as method 1. So follow method 1 but instead of loading your wallpaper via “instrument options” you simply add another line of code: set_control_par_str($INST_WALLPAPER_ID,$CONTROL_PAR_PICTURE,"<filename-of-your-wallpaper">

Note: only enter the filename of your wallpaper not the file ending (like png) and don’t add any folders. Kontakt will find the correct image if you have put it into \Resources\pictures\ (also don’t forget to add the little txt file)

Keep in mind that the initial wallpaper is static (always visible). It can’t be changed we can only offset it via set_skin_offset(). If you want multiple backgrounds for several instrument sections (like an fx section etc) which you want to change dynamically proceed to the Switchable, Dynamic Background tutorial.

on init
  make_perfview
  set_control_par_str($INST_WALLPAPER_ID,$CONTROL_PAR_PICTURE,"wallpaper1")
  set_ui_height_px(540)
  message ("")
end on

“Change” the wallpaper dynamically e.g. via button event:

there are 2 methods to “change” the wallpaper e.g. via button event:

  1. we can use any ui elemnt’s background property to overlay the initial wallpaper with another background image read more
  2. we can use set_skin_offset() to move the wallpaper image vertically read more

 

 

7 Responses to “KSP Scripting (Kontakt) :: Custom UI: Background Image / Wallpaper”

  1. Frank de Leeuw

    Thank you for that tutorial.
    However, one thing has not worked out for me, and that is setting the space between the header and the actual image.
    This is my script:
    ” on init
    message (“”)
    make_perfview
    set_ui_height_px(492)
    end on”

    But the image is still stuck to the header and a bit of it is missing as a result, how can I fix that, please?
    Thank you.

    reply
    • YummyBeats

      Hey, you can’t set a spacer for the initial wallpaper. Also you have to add the 68px for the Kontakt head/controls to your initial wallpaper. Sorry in the text there was a mistake (forgot to add the 68px). So if you set your UI height to 492px your initial wallpaper must be 560px high. But leave a spacer of 68px in your image since the first 68px are always covert by Kontakt’s control panel. So in other words the initial wallpaper is placed at Top: -68px, Left: 0px
      If you are using multiple bg wallpapers via labels you have to crop these 68px again from your other wallpaper images since labels are really placed at Top: 0px and Left: 0px. So this time your image size equals the set_ui_height size.
      Note: the first 68 pixel of your initial wallpaper are always visible no matter what unless you remove the initial wallpaper completely.

      [edit: the article has been edited to point this out more clearly]

      reply
  2. CMM

    There is a miswording in your first example “make_perfviev” instead of “make_perfview”.

    Thanks for help!

    reply
  3. Williams

    Hello there! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to me. Nonetheless, I’m definitely glad I found it and I’ll be bookmarking and checking back often!

    reply

Leave a Reply

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