Creating New Buttons for DVDStyler

In my never-ending quest to find cheap (read: free) software to use for desktop video, I stumbled across DVDStyler; a freeware DVD authoring package that runs on Windows, Mac, and Linux. It’s pretty full featured and allows you to do some things that the lower-end commercial packages won’t do, like have video clips for your menus instead of just still images.

DVDStyler is actually a graphical front-end for the dvdauthor package, which is itself a collection of command-line tools. DVDStyler won’t let you do anything those tools can’t do, but by providing an easy-to-use and flexible interface, it makes the DVD authoring process much more accessible.

Plus, DVDStyler comes with its own collection of background images and buttons, ready to drag-n-drop into your projects. If you want a different background image, it’s pretty easy: just make a 720x480 (for NTSC) or 720x576 (for PAL) jpeg image and import it. You can also easily use your own smaller images in conjunction with the “Frame” button for a custom look.

For more traditional functions, like navigation, DVDStyler has a set of pre-made arrows, and text boxes that you use. You can change their colors, set how they react to the remote, and so on.

But, if you want a real custom interface, you may want to make your own buttons, with your own design that will still have the capability of having unselected, highlighted, and selected states.

The DVDStyler manual doesn’t provide any guidance on making new buttons, but I’ve been able to puzzle out a few things and develop buttons that work just like the original set. Keep in mind, however, that I’ve worked this out myself and it isn’t in any way sanctioned by the developer. I may have missed some things and it may not work in future releases. But right now, at least, it does work.

The process is actually pretty simple, because the DVDStyler author had the intelligence and foresight to use industry standards like xml (eXtensible Mark-up Language) and svg (Scalable Vector Graphics) for external files rather than some proprietary format. That makes it easy to look at things, try out options and develop new material.

Each button is actually an xml file stored in the “buttons” directory of the main application. All you have to do to add a new button that will show up automatically in the DVDStyler button dock is drop a properly formatted file into this directory.

So, what’s properly formatted?

A button xml file consists of two main parts: the graphical definition of the button itself, defined by svg, and a set of parameters that are unique to DVDStyler and parsed by the application when the button is loaded. Of course, these parameters are defined in xml.

To make a new button, you first have to “draw” what it looks like. I’ve put “draw” in quotes because svg is a text-based language, meaning you could type out a definition in say, Notepad, and use that, without drawing any kind of graphic at all.

That works, (It’s how I did my first, simple button.) but it’s kind of a pain if you don’t know svg (or even if you do).

It’s much nicer to use a dedicated svg drawing package. There are a number of alternatives, but the one I like best is InkScape. It has more features that you’ll ever need, runs on lots of platforms, and, like all my tools, is freeware.

Since this isn’t an InkScape tutorial, I won’t go into the steps of creating the initial graphic. Instead, you can get a very simple .svg file from here. Right-click and "Save Target as..." to download it into the “buttons” directory of DVDStyler. (It may want to come down as an .xml file, which is OK, since that's what it needs to be anyway.) We’ll take this file and turn it into a DVDStyler button step by step. But, feel free to create and use your own graphic instead.

However, here are a few tips that will make the process a bit easier. They apply specifically to InkScape, but are useful no matter what package you use:

1) Set the document size to something reasonable for a button. I often use 160x120 pixels.
2) Name any element that you want to control in DVDStyler. It’s easier to work with “Box” than it is “rect1872”.
3) When you are ready to make the button, save a copy of your file as plain .svg and use that. You don’t need all the extra information that InkScape normally saves.

Once you have the .svg file in place, select it in the file list and hit F2 to rename. Change the extension from .svg to .xml. Windows will warn you about changing extensions, but just ignore it and hit the “Yes” button.

Now, right-click the file and open it with WordPad so you can do a little editing. You only need to add a single xml tag pair to the file to make it a valid button.

Before the opening <svg> tag, you need to add <button> and at the very end of the file you need to add </button>.
Also, although it isn't apparently required, but you might also want to add the sequence:
&#60Title>PutYourButtonNameHere<Title>
right after the <button> tag.

That’s it! Save the file and start up DVDStyler.

Double-click a Background image to add it to the screen and then click the Button tab. Scroll down, and you should see your new button. Drag it on to the screen. If you wanted to, you could link a video file to it, burn a disk, and your button would work.

There are a couple of limitations at this point, however.

For one thing, you can’t change the size of the button. You can drag the bounding box and it will resize, but the graphic won’t. Likewise, changing the size on the properties sheet doesn’t change the graphic size.

Secondly, you can’t change any visual properties. You’re stuck with whatever you had originally. Colors, opacity, stroke widths, are all fixed.

Finally, the button won’t visually react when it is selected or clicked. It works, but you can’t see it doing anything.

We’ll fix these problems one at a time. You’ll need to close and restart DVDStyler each time so that it can recognize the changes we’re making.

Making it resizable is easy. Open the button file in Wordpad again. Toward the top of the file you’ll see the main <svg> tag. It has a number of attributes embedded in it and we just need to add one.

If you’re using my file, the opening tag looks like this:

<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="160"
height="120"
id="svg2">

We’re going to add a “viewBox” attribute right after the “height” setting. Like this:

<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="160"
height="120"
viewBox=”0 0 160 120”
id="svg2">

I’m not going to go into detail about what the attribute does, but for us it provides scaling in DVDStyler. Make sure that the “B” is capitalized and set the last two numbers in the list to the width and height of the document.

Save the file and open DVDStyler. Now when you put your button on the screen you can change the size either by dragging the bounding box or by entering numbers into the properties sheet.

Now it’s time to give ourselves some control over other aspects of the button. This is the second part of the file that I mentioned earlier: the parameters.

Fortunately, this is pretty easy as well, thanks to DVDStyler’s use of xml. Simply add the right code to the button file and the proper controls will show up when you open the button’s properties sheet. Let’s start with some generalities, and then set up a few controls.

All the parameters for the button are defined in a block that resides between the closing </svg> tag and the closing </button> tag at the end of the file. This block starts with the <parameters> tag and ends with </parameters>. Within that block are the individual controls, delineated by <parameter> and </parameter>. These are what show up on the properties sheet. Virtually any element of a button can be controlled.

Each control has it’s own set of tag pairs:

<title> which is the name of the control on the properties sheet
<name> an internal control name which can be anything but must be unique in the button
<type> what kind of control it is: text, integer, string, image, or colour (note spelling)
<element> which part of the button the control affects
<attribute> the part of the element being controlled

The proper controls are created automatically based on the <type> tag. That is, a colour control has a color selection box, an integer control has a spinner, and so on.

There are some other tags, but we’ll discuss those later. For now, let’s just add a control allowing us to change the color of our circle button.

Open “Circle.xml” in WordPad and add the following block of code between the </svg> and </button> tags:

<parameters>
<parameter>
<title>Circle Color</title>
<name>c_color</name>
<type>colour</type>
<element>Circle</element>
<attribute>fill</attribute>
</parameter>
</parameters>

Restart DVDStyler and drag your button onto the screen. Double-click it open the properties sheet. If you’ve entered everything correctly you should have a new control that allows you to change the color of the circle to anything you want. If not, you made a typing error somewhere and need to go back and double-check everything.

All controls are created this same way: as a <parameter> block. Let’s add another control; this one will control the width of the outline around the circle.

Add the following code right before the closing </parameters> tag. Note that I said </parameters> and not </parameter>. There can be only one pair of <parameters> tags in a button, but there may be many <parameter> pairs.

<parameter>
<title>Outline Width</title>
<name>o_width</name>
<type>integer</type>
<element>Circle</element>
<attribute>stroke-width</attribute>
</parameter>

A couple of things to note here:

Firstly, DVDStyler created a new type of control; an integer box with a spinner attached, because you told it that you wanted an integer-type control. It stretches all the way across the sheet, but that’s normal and can’t be changed.

Secondly, we are controlling an aspect of the “Circle” element that isn’t explicitly named in the file. That is, there is no attribute for “stroke-width” shown in the svg definition (at least if you’re using my file). But a default is still created and can be manipulated. Consult a good svg reference to find out what all the attributes are.

Let’s do one more simple control. Add this code right before the closing </parameters> tag:

<parameter>
<title>Outline Opacity</title>
<name>o_opacity</name>
<type>string</type>
<element>Circle</element>
<attribute>stroke-opacity</attribute>
</parameter>

This one controls the transparency of the outline. You’ll need to increase the stroke width a bit to really see it. Note that this is string variable rather than an integer because opacity in svg ranges from 0 to 1.

You can continue in this manner, adding controls for stroke color and fill opacity if you want to. A more complex graphic might have more than one element in it and you could create a set of controls for that as well. We haven’t covered the text or image types, but they’re pretty self-explanatory, so play around with them a bit and look at the buttons that came with DVDStyler.

But even with all the controls we’ve added, our button still won’t react when it’s highlighted or selected with the remote. Let’s change that now.

Add the following block of code: (You should know by now where it goes.)

<parameter>
<title>Circle Color Change</title>
<name>c_changes</name>
<type>colour</type>
<element>Circle</element>
<attribute>fill</attribute>
<changeable />
</parameter>

It’s virtually the same as our first color change control with a different title and name and the addition of the <changeable/> singleton tag.

That one tag calls up a new set of three color controls, one each for Normal, Highlighted, and Selected. You can set these as you wish and now your button will react by changing color as it is accessed. As far as I know, only colors can be manipulated in this way; you can’t (for example) change stroke-width.

That’s just about it. There are some other parameter tags that you can experiment with like default-value, default-size, min-size, and init-parameter, but you don’t really need them to make fully functional buttons.

Take some time to look at the buttons that come with DVDStyler and you’ll see how they work. There are also some interesting things in some of the files about how to link two elements so that they can be managed with one control (text-shadow.xml) and how to use the image type (frame.xml).

Have fun, and let me know if you find out anything interesting.