Solved Z-layer order of UI elements explained

Being frustrated that this isn't in the documentation - and finding insufficient, and in some cases, wrong information on the web, I did a test on all UI elements, concerning visibility and accessibility in relation to z-layers and z-order. I'm sharing my findings here, as this will hopefully spare others the frustration of having to figure this out from scratch.

Testing was done on Kontakt 6.4.2 with default font settings for all elements.
Regards, Michael Bruus.

--------------

The Z-layer control parameter can be used to assign any UI element to one of three visibility layers: back (-1) | default (0) | front (1).

Code:

set_control_par(<ui_id>, $CONTROL_PAR_Z_LAYER, <int -1|0|1>)

Inside each layer there's a hardcoded z-order (see below). For UI elements of the same kind, and in the same layer, order of declaration determines z-order priority. Generally, visibility of a control matches accessibility, with some caveats (see asterisk comments).

Z-order per layer (high to low priority):
ui_table*
ui_menu
ui_value_edit**
ui_button
ui_switch
ui_slider
ui_knob**
ui_waveform
ui_label***

* Double-clicking can trigger controls positioned below element.
** Only active area of control catches clicks. Everywhere else, clicks will pass through to any underlying control.
*** Clicks will always pass through to any underlying control, regardless of z-layer.

To make a visible control inaccessible, position a UI button of the same size above said control. Assign a transparent or semi-transparent png image to button. If necessary, assign overlay button to a z-layer above the z-layer of the control that should be inaccessible.

 

The z layer order of UI widgets IS listed in KSP reference

 

Ha... totally missed that!
Thanks

 

Hi,

Tried to have my label first and in the back my button but it doesn't work for the button. Any suggestions?

 

You need to use $CONTROL_PAR_Z_LAYER

 

Hahah, did that already and the code was fine. I had 2 labels overlapping each other so I did a little trick with photoshop and got it working Thank you tho!

 

The combination $CONTROL_PAR_Z_LAYER + $CONTROL_PAR_PARENT_PANEL works very well to quickly arrange different control zones.