How to make a skin from scratch

Today we'll talk about creating your own custom skin.

If you've played with Plug'n Script for some time already (learned how to make a custom .kuiml layout for your script at least), then you probably start thinking about how to make the whole plugin look different from a traditional Blue Cat Audio design.

This skin is beautiful, but how to get rid of the top menu, for example? 

If we try to edit this default skin (the base file is "default.xml" in the Skins directory inside the PnS plugin), we'll find out that it's quite hard to modify it without getting loads of errors, because different parts of the default skin depend on each other.

Probably the best option is just use LM_Skin, which allows deep customization and has loads of possibilities. But if not LM_Skin, what do we do? How do we make our own skin for Plug'n Script? 

Essential plan

1. Create a basic layout
2. Add toolbar with typical commands (menu/undo/redo/presets/zoom etc) and a status bar with a log
3. Add some controls (for a particular script)

This is good if we make a skin for a particular (exported) plugin. If we want to make a skin that works well for Plug'n Script, we'd also have to do this:

Advanced plan

4. Support loading and editing different scripts
5. Add proxy-parameters (like "custom_paramY") to dynamically map dsp.inputX parameters for scripts
6. Auto-create GUI for the scripts that don't have custom .kuiml

This is where we'll stop, otherwise we may never stop.

In fact, you would also need a routine for plugin exporting, maybe some customization options, maybe some built-in controls, maybe resizing support, misc development helpers, the list goes on, and it's hard to stop enhancing it. But we'll leave that time-consuming tasks for now and concentrate on what we've planned.

1. Create a basic layout

Go into the user skins folder (the path on Windows and Mac is similar):

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

And create a new .xml file

hello_world.xml

with the following content

This is a good place to start. We've just set a few attributes for the SKIN element regarding font_size and background_color, and also some more technical attributes that define font rendering (font_size_mode) and overall GUI performance (refresh_priority). In practice these two better be always set like in this example.

We've also added an additional root CELL element with mininal width and height. This is not neccesary, as we could set them in the SKIN element as well, but sometimes it's nice to have a root CELL to manipulate it later. For example, it'll allow you to read and change plugin window size. For that case we've given this CELL an id ("root_cell") which is also totally optional.

The next thing we need is the way to reload the skin after we make changes. One of the ways is to switch to another skin and back, but this is not very convenient (obviously). Still we'll have to do it at least next time. 

Reloading the skin

Because there's no built-in action to do that, we'll use a trick to slightly change GUI zoom parameter, which will trigger full skin reloading.

Switch to another skin and back to this one, and you should see the "Reload" button, which will make our further development easier. Notice that we've added a SYSTEM_ACTION_BUTTON which displays a standard button on Windows or Mac, and created an ACTION that this button will trigger. As you see it doesn't matter if that ACTION is defined before or after the button.

Now let's make a proper toolbar and status bar.

For the toolbar we'll use:

and for the status bar:

We use WIDGET element because it has a "background_color" attribute which we need, otherwise CELL or ROW would be just fine.

For the moment everything is centered in our GUI, but we want the "body" to take all the free space. For that we use a "flex" attribute, which will do exactly that. Also we slightly reorganize the status bar.

This is where we are now.

Okay, the basic layout is ready! Let's move on to the next chapter.