Brass SSE Developer Guide - Skinning Controls

So how do you make those fancy looking controls?

Skinning is all about changing the visual appearance of a user interface. The Panel Designer allows you to completely alter the style of any control with just a few mouseclicks!

We're going to do a quick walk-through of the Brass restyling system as that's the fastest way to see it in action. Start off by creating a new plugin in SSEdit and opening the Panel Designer

Use File - New in SSEdit to create a new Plugin Source Code document

Click the Panel Designer icon ( ) on the toolbar

We'll start off with a very simple button control. Click the button tool and draw a new button in the canvas. You'll end up with something like this:

Well it's a gradient shaded button so we're doing better than Windows does, but let's make it a bit more interesting. Let's have a diagonal shaded button from light blue to dark blue. To do this we use the Restyle Control option.

Right click the button and choose "Restyle Control" from the popup menu

The Restyle Control window has a lot of options in it, we'll cover them all shortly. This is what you'll see by default:

Let's change the style of the control.

Select the "Diagonal colour gradient" radio button

Click the button on the left hand side of the colour swatch, select light blue from the colourwheel

Click the button on the right hand side of the colour swatch, select dark blue from the colourwheel

When you've done that you should see the following:

That's it! Click OK and you'll return to the Panel Designer, where your control will look something like this:

Well that caption is a bit hard to read, so let's sort that out.

Right click the button and choose "Set Font"

Increase the font size a few points and OK the font selection dialog

Right click the button and choose "Set Font Colour"

Select white from the colourwheel

By now you should have something like this:

Ah, much better! But ok, let's be realistic, all we have here is a shaded button. It's not all that amazing. If only we could use images for our button instead...

Of course we can! As an example we're going to use these images for our button. They are PNG images with per-pixel alpha transparency. Right-click and save them to your harddrive (if you use older versions of Internet Explorer the images may appear corrupt or have a black background - that's a bug in IE and not a problem with the images).

I made these images in a few minutes with a paint package as a sample, you can probably do much better! The left hand image is for the normal state of the button, and the right hand image is for the pressed (clicked-on) state.

Let's use these images to skin the button.

Save the 2 images to your hard drive

Go back to the Panel Designer

Right click the button and select "Restyle Control"

Check the "Enable Custom Drawing" option in the bottom half of the Restyle Control dialog

Click the "Button: Clicked (pressed in state)" item in the component list

Click the Folder Browse button and select the right hand image (above) you saved to your harddrive

Repeat the process for "Button: Normal state" and the left hand image

The process to skin every control is exactly the same. Each control will list all it's skinnable parts in the component list, you simply click the browse button and select the image you want to use for that part.

What's the "Prevent plugin from using code for custom drawing" option? It's possible to tell Brass that your plugin code wants to draw a control manually using (for example) the setbuttondrawfunc statement. When you check this box Brass will never allow your plugin to custom draw the control - only the component images you specify will be used. This isn't so useful for plugin developers but it's very useful for users of the plugins to stop code within the plugin from being executed. The same option is available when a plugin is running in Brass through the 100% UI.

Once you've followed the steps above and assigned the images to the button states, OK the Restyle Control dialog. Your button will look like this:

Hm, that doesn't look right. If you look closely you can see the original button style of the blue gradient is there, as well as the button caption. What happened?

This is actually a handy feature of Brass. You can combine control styles together to alter the appearance of your control. Why is this handy? Imagine if you wanted a blue gradient button with an icon in the middle, for example a folder icon for a "Browse" button. By combining the blue gradient style with a folder icon image you can quickly create the button style you want. Now imagine you want 3 buttons - one with a blue gradient, one with a green gradient and one with a red gradient, but all with the same folder icon. Without this feature you'd have to go and create 6 separate images (one for each button state, remember!) for your buttons, but with this feature you can simply reuse the same folder icon for every button.

In this case we don't want any base styling so let's remove it. We do this by selecting the "Transparent" style.

Right click the button and select "Restyle Control"

Select the "Transparent with no colour or style" radio button

Untick the "Draw Border Around Control" checkbox

Click OK

The last thing to do is to remove the caption text.

Right click the button and select "Set Caption"

Delete all the text in the caption edit dialog

Click OK

When you've done that you should have a nice looking button like this:

Right-click the button and select "Switch states" to toggle between the normal and pressed states. You might find you need to resize the control so that all of the button images are visible. You can do that visually by using the resize handle in the bottom right of the control, or by right-clicking the button, selecting "Manual size/position entry" and specifying the exact width and height of the button images (167 * 60 if you were wondering!).

When using skinned controls, the images used for the skin components are always kept at their original size. If they are too small for the control the extra space is left empty; if they are too large, the extra width and height is cropped.

That was a very simple example to demonstrate how to use control skinning. Now that we've used some images for our button you might be wondering how to include these images in your plugin. The answer is simple - it's completely automatic!

If you click OK to the Panel Designer you'll be returned to the main SSEdit code editor window. From there open the Pack Creator by clicking the icon on the toolbar (you might be asked to save your code first).

As you can see, the images you used to skin your controls have been automatically added to the pack resources. They'll be included in your SSP when you distribute it.

In the top half of the screenshot you can also see that the Pack Creator has picked up the layout you created. When you create a layout with the Panel Designer it is automatically linked into your plugin code.

If for any reason you don't want to include the layout in your plugin pack you must save your plugin code and close it in SSEdit (File - Close). Next, open Windows Explorer, navigate to where your plugin SSN was saved and delete the .slx file in that folder (it will be called <PluginName>.slx). You can then reopen the plugin code in SSEdit and repack your plugin.

It's important to close your plugin code document in SSEdit before deleting the SLX file because SSEdit caches the layout internally. If you delete the SLX when your plugin is still running, SSEdit will simply write out the default layout from memory and include it in your plugin pack anyway.

That's really all there is to it! Create your layout, save it and use it - easy as that!

Dealing with Scrollbars

The memobox and listbox controls both have a vertical scrollbar included inside. Scrollbars are skinned in exactly the same way as all other controls, but there are a few more options to look at. Here's the components of a standard scrollbar:

When you skin a control with a scrollbar you'll have more skin components to specify:

Each component is fairly self-explanatory except for the thumb, which we'll look at in a second.

Remember that you can reposition and resize a scrollbar simply by dragging it around the parent control, so you can use any size of image you want for the individual components.

However somehow you have to tell Brass 2 things: (1) the height of the scrollbar up and down buttons, and (2) the segment sizes of the thumb.

Specifying Scrollbar Component Sizes

To see how to specify scrollbar component sizes, lets create a new control in the Panel Designer.

Click the Panel Designer icon ( ) on the SSEdit toolbar

Click the Memobox control tool icon

Draw a new memobox in the canvas

We're going to create a custom skinned memobox, so to help you out you can download this zip file. Inside are all the sample images you'll need to skin each part of the memobox - much faster than drawing them yourself!

Download ZIP of Memobox sample skinning images here

The first step is to skin the memobox in exactly the same way as we did with the button:

Download and unzip the images to somewhere convenient

Right click the Memobox and select "Restyle Control"

Select the appropriate image for the appropriate skin component

When you've finished and OK'd the Restyle Control dialog, your memobox will probably look something like this:

You might need to resize the width of the scrollbar a bit first. Anyway the buttons are clearly cropped, and the scroll thumb doesn't look right either. Let's do something about that. Firstly we need to know the height of one of the scrollbar button images - any good paint program will tell you, or you can trust me that they are all 19 pixels high.

Read the following important box carefully!

Every component of a vertical scrollbar must be the exact same width as the width of the scrollbar itself. That means if the scrollbar (as drawn on the canvas) is 30 pixels wide, the scroll range image must be 30 pixels wide, the srollbar buttons must be 30 pixels wide and the scroll thumb image must be 30 pixels wide!

Not only that, the scrollbar buttons must be exactly the same height - the up button must be the same pixel height as the down button. This is absolutely essential to ensure the scrollbar remains symmetrical.

You read it? Good. Let's fix our scrollbar.

Right click the Memobox and select "Set Scrollbar Component Sizes"

The Scrollbar Configuration dialog will appear, filled out with the default dimensions for a scrollbar.

First up let's fix the scroll button height. We already know what the height is (we did that a few seconds ago, remember?) so all we need to do is enter the correct height in the scroll button height field.

Adjust the scroll button height to 19

Next up, the scroll thumb.

Copyright 32Bits.co.uk 2005. All rights reserved.