HowToCustomButtons

How to create new buttons

To create a new button you need to draw it using e.g. Inskape and save as SVG file.
Then please follow the instruction below.

1. change extension from .svg to .xml and save in subfolder buttons in DVDStyler program folder

2. add following lines at the begin of file (after <?xml ...>, but before <svg ...>):
   <button> <title>My Button</title>

3. add following line at the end of file
   </button>

4. find first svg tag, f.e.:

   <svg
      ...
      width="100"
      height="150"
      ...

and add attribute viewBox attribute to it, if it doesn't exist yet

   <svg
      ...
      width="100"
      height="150"
      viewBox="0 0 100 150"
      ...

Now you can test your button in dvdstyler. But it hasn't any parameter (in property dialog).

To define a parameter you need to add folowing lines to your file before last line (</button>)

  <parameters>
    <parameter>
      <title>Button color</title>
      <name>color</name>
      <type>colour</type>
      <element>id_of_the_element</element>
      <attribute>fill</attribute>
      <changeable/>
      <default-value>
        <highlighted>#ffffff</highlighted>
        <selected>#ffffff</selected>
      </default-value>
    </parameter>
  </parameters>

Replace "id_of_the_element" with id of the svg element, the color of which you want to be changeable.
You can also use more than one id separated by comma.

An Example

So if you have a following svg-file:

<?xml version="1.0"?>
<!-- Created with Inkscape  -->
<svg width="100" height="50" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
    <path id="arrow"
      style="stroke:#ffffff;stroke-width:3;stroke-linejoin:round;fill:#8080F0;"
      d="M65,18 h-60 v14 h60 l-10,15 l40,-22 l-40,-22 z" />
</svg>

Then dvdstyler button file can look as:

<?xml version="1.0"?>
<button>
  <title>Arrow</title>
  <svg width="100" height="50" viewBox="0 0 100 50" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
    <path
      id="arrow"
      style="stroke:#ffffff;stroke-width:3;stroke-linejoin:round;fill:#8080F0;"
      d="M65,18 h-60 v14 h60 l-10,15 l40,-22 l-40,-22 z" />
  </svg>
  <parameters>
    <parameter>
      <title>Colour of the arrow</title>
      <name>arrow</name>
      <type>colour</type>
      <element>arrow</element>
      <attribute>fill</attribute>
      <changeable/>
      <default-value>
         <highlighted>#0000FF</highlighted>
         <selected>#FF0000</selected>
      </default-value>
    </parameter>
  </parameters>
</button>

Third-Party Guides

• Tutorial from Mike's Blog
• Phantom Gadgeteer's guide and example button