Plug'n Script / KUIML / Tutorial / Params 101

KUIML

Tutorial

Params 101

March 31, 2021

Params 101

PARAM is probably the most important element in KUIML, since KUIML is a data-driven language. Almost everything is related to PARAMs, and PARAMs are everywhere.

Explicitly Created Params

You can create a PARAM explicitly in the GUI (as opposed to input/output params created in DSP), like this:

<PARAM id="drive" min="0" max="100" default="50" />

Note, params created in the GUI are not accessible from the DSP side, but can be used for the GUI purposes.

When you know a param id, you can display or control the param value using many different widgets. For example, like this:

<PARAM_TEXT_CONTROL param_id="drive" />

Auto-Created Params

When you add any element like CELL, WIDGET, or TEXT (or something else), you can later access some exposed attributes as PARAMs (or sometimes as STRINGs). For example:

<CELL id="c1" display="true">
<TEXT id="tx1" value="Text sample" opacity="0.5" />
</CELL>

Now you can access parameters like c1.display and tx1.opacity and control or view them. Even if you don't explicitly add those attributes, every CELL by default has a ".display", ".width", ".h_offset" and other exposed parameters, and so do TEXT and other widgets.

Take a look at this example:

<ROW>
<CELL id="c1">
<TEXT value="Hide me or " font_weight="bold" />
</CELL>
<CELL>
<TEXT id="tx1" value="change my .opacity" text_color="#DD0000" font_weight="bold" />
</CELL>
</ROW>
<ROW spacing="10" v_margin="5">
<PARAM_TEXT param_id="c1.display" content="Display: {text_value}">
<INVISIBLE_PARAM_BUTTON param_id="c1.display" positions_count="2" width="100%" height="100%" cursor="system::hand" />
</PARAM_TEXT>
<PARAM_TEXT_CONTROL param_id="tx1.opacity" content="Opacity: {value}" cursor="system::size_v" />
</ROW>

This is how you can change element parameters on the fly.

Parameter Linking

The cool thing is, you can link params to each other using PARAM_LINK.

Let's add this line to the example above:

<PARAM_LINK from="tx1.opacity" to="c1.display" />

This way, when tx1.opacity is 0, the c1 cell will also be hidden (because c1.display will also be 0).

You could easily make it reverse (when tx1.opacity is 0, c1.display is 1):

<PARAM_LINK from="tx1.opacity" to="c1.display" reverse="true" />

Or you could even use formulas for linking:

<PARAM_LINK from="tx1.opacity" to="c1.display" formula="if ((x>0.4)*(x<0.6), 1, 0)" />

This way, c1.display will be set to 1 when tx1.opacity is between 0.4 and 0.6.

Multiple Linking

PARAM_MULTI_LINK gives you even more control, so you can link a single param to multiple other PARAMs, or get a PARAM value as a sum of other PARAMs, and more. Here's a simple example:

<ROW spacing="5">
<WIDGET id="blue" background_color="#5799F0" width="20" height="20" />
<WIDGET id="magenta" background_color="#BC69FB" width="20" height="20" />
<WIDGET id="purple" background_color="#FB78D5" width="20" height="20" />
<WIDGET id="red" background_color="#FB6E6E" width="20" height="20" />
<WIDGET id="orange" background_color="#FBB469" width="20" height="20" />
</ROW>
<PARAM id="which_mode" min="0" max="2" type="integer" value_format=".0" />
<PARAM_TEXT_CONTROL param_id="which_mode" margin="5" cursor="system::size_v" font_size="20" content="mode: {value}" value_format=".0" />
<PARAM_MULTI_LINK from="which_mode" to="blue.opacity;magenta.opacity" formula="(x>=1) + 0.2" />
<PARAM_MULTI_LINK from="which_mode" to="purple.opacity;red.opacity;orange.opacity" formula="(x>=2) + 0.2" />

Here's the result:

There's also a PARAM_CONNECTION element that ensures both PARAMs have the same value, and a PARAM_TO_STRING_LINK element that lets you convert a param value to a text value. In short, param linking is a very powerful feature and one of the coolest things in KUIML. It can replace a lot of scripting and make things more stable and simple.

There are more examples on using parameters on the PARAM page.

Reference

Comments

Please, authorize to view and post comments.