Unfortunately once the initial wallpaper is set, we can’t alter the image file anymore. Even not by setting different initial wallpapers for each script tab. Because the last applied wallpaper will be the one and only initial wallpaper for the whole instrument.

But we can either offset the initial wallpaper that means moving it via set_skin_offset or we can use a label element to set up multiple backgrounds which is covered in this article. Even dynamically like switching them when hitting a navigation button.

Dynamic, switchable Wallpaper/Background

We can use a label UI element and its background property ($CONTROL_PAR_PICTURE) to set multiple background wallpapers. Like most UI elements, also the label element allows us to change its background image and its size.

So we just need to create an image with the size of our UI and add it as the label’s background. With this label we have a 2nd wallpaper overlaying our initial wallpaper. With one little restriction though:

The first 68px (where the Kontakt panel resides) can only be covered by the initial wallpaper. So we should set an initial wallpaper as well to also cover this panel otherwise we would have an ugly grayish background in the first 68px. Read more here

We can also put our knobs and buttons on top of our second wallpaper label then, since knobs and buttons are overlaying labels again.

If we want to use multiple wallpapers we can simply replace the image of our “wallpaper label” with another wallpaper image instead of creating a new label element for each additional wallpaper image. To cut it short, the label element becomes a container for all of our additional wallpapers.

setting the label container

Example (read the explanations in brackets {…} )

on init 
     set_ui_height_px(540) {height of your UI}
     make_perfview {makes this UI visible outside the edit mode}
 
     {SET: initial wallpaper}
     set_control_par_str($INST_WALLPAPER_ID,$CONTROL_PAR_PICTURE,"wallpaper1") {sets your initial wallpaper which can only be overlayed}
 
     {SET: vraiables}
     declare $label_id {used to store the label id, later we will use arrays}
     declare $button_id {used to store the button id, later we will use arrays}
 
     {SET: label / wallpaper 2}
         declare ui_label $wallpaper (0,0) {creates a label "container" for your additional wallpapers}
         $label_id := get_ui_id ($wallpaper) {get the numeric unique id of the label}
 
         set_control_par_str($label_id ,$CONTROL_PAR_TEXT,"") {clear the default text}
         set_control_par_str($label_id ,$CONTROL_PAR_PICTURE,"wallpaper2") {set background image}
         set_control_par($label_id ,$CONTROL_PAR_HIDE,$HIDE_WHOLE_CONTROL) {hides the whole label because we first use the initial wallpaper}
         move_control_px($wallpaper,0,0) {move to top left position}
 
     {SET:button}
         declare ui_switch $button_switch_wallpaper {create a simple button to switch the wallpapers}
         $button_id := get_ui_id ($button_switch_wallpaper) {get the numeric unique id of the button}
    message("") {clears the status bar}
end on
 
on ui_control($button_switch_wallpaper)
     if ($button_switch_wallpaper = 1)
         set_control_par($label_id ,$CONTROL_PAR_HIDE,$HIDE_PART_NOTHING) {shows your label}
         else
             set_control_par($label_id ,$CONTROL_PAR_HIDE,$HIDE_WHOLE_CONTROL)
     end if  
     message("") {clears the status bar}
end on

Creating a wallpaper image FOR THE LABEL ELEMENT

1. we can use our favorite graphic software. Just read the Custom UI: Background Image / Wallpaper tutorial.
2. first we should add a horizontal auxiliary line at 68px and design our initial wallpaper including the 68px header (which will be behind the Kontakt panel).
3. then we create a new layer and create our 2nd wallpaper below the auxiliary line.
4. take care to make it look flawless, so that the header of your initial wallpaper also fits to your second wallpaper. Best way to do so is to use one background texture like in this example:
   
5. when we are done we simply crop our 2nd wallpaper below the header at the auxiliary line and save it (e.g. as wallpaper2.png)

Label element vs Set Skin Offset

You can also set a background wallpaper set_skin_offset(). It’s up to you which method you prefer the most. Both have advantages and disadvantages.

With the label element it is much easier to design our backgrounds instead of making a long image “tube” especially when altering our background graphic a lot.

The set_skin_offset method however is somewhat easier to handle when it comes to coding and also less error prone. Also we can alter the first 68px (where the Kontakt panel resides)