Tutorial
DSP
KUIML
How-to
Scripts
KUIMLTutorialMain skin and subskins
April 01, 2021

Customizing the Main Skin

To show that we can change everything, let's save this code as the main skin.

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN width="450" height="250" text_color="#FFFFFF" background_color="#333333" font_size="30" font_face="Tahoma" font_weight="bold">
  3. <TEXT value="Hello, world!" />
  4. </SKIN>

Save the code above as "hello world.xml" in your user skins folder:

User skins folder on Windows:

C:\Users\YourName\Documents\Blue Cat Audio\Blue Cat's Plug'n Script\Skins\

on Mac:

/Users/YourName/Documents/Blue Cat Audio/Blue Cat's Plug'n Script/Skins/

Then, right-click on Plug'n Script and select Preset Skin -> hello world.

As you can see, we've now taken full control over the look of our plugin. However, working this way in Plug'n Script isn't always convenient, since you'd need to write much more code to handle loading different scripts, exporting, refreshing, parameter mapping, and so on. Also, reloading the entire skin takes longer than just reloading a "subskin" inside it.

About Skin Reloading

If you want to reload this skin after making changes, you can switch back to the default skin and then back to your new skin, or simply restart your host app. Another way to trigger skin reloading is to change the zoom level, but for that, you'd need to add zoom control to your skin—a topic for another time.

The easiest way would be to add a "reload" button like this:

  1. <SYSTEM_ACTION_BUTTON action_id="gui.Reload" width="150" />

So, developing your own skin from scratch is definitely possible, and it's a great learning exercise once you know the basics. However, it takes time and requires a deeper understanding of KUIML and DSP-to-GUI communication. You can learn a lot by exploring the default skin and articles on our site.

For now, let's go back to using .kuiml files and leave the main skin as it is.

A Few Words About "Subskins"

Since KUIML version 2.4 introduced the KUIML_WIDGET element, the main skin can dynamically load KUIML code. This is a key concept in Plug'n Script: you can write a small piece of KUIML code (a "subskin") that loads and reloads dynamically, while the main skin stays the same. This saves a lot of time and lets you focus on your script.

When using this approach, you may not set any attributes for the SKIN element inside your .kuiml file, because they are inherited from the main skin.

Displaying text

Comments

Please, authorize to view and post comments.