Recent changes to HowToCustomButtons

HowToCustomButtons modified by Alex Thuering

Alex Thuering — Mon, 03 Jul 2017 18:55:21 -0000

--- v4
+++ v5
@@ -48,7 +48,7 @@
         <selected>#ffffff</selected>
       </default-value>
     </parameter>
-  <parameters>
+  </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.

HowToCustomButtons modified by Alex Thuering

Alex Thuering — Sun, 02 Jul 2017 15:28:34 -0000

How to create new buttons modified by Alex Thuering

Alex Thuering — Sun, 02 Jul 2017 15:27:10 -0000

How to create new buttons modified by Alex Thuering

Alex Thuering — Sun, 02 Jul 2017 14:55:32 -0000

--- v1
+++ v2
@@ -1,5 +1,8 @@
-To create a new button you need to draw it using e.g. [Inskape](http://inkscape.org/) and save as SVG.
-Then follow the instruction below.
+How to create new buttons 
+-
+
+To create a new button you need to draw it using e.g. [Inskape](http://inkscape.org/) 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

@@ -30,7 +33,7 @@

 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>)
+To define a parameter you need to add folowing lines to your file before last line (`</button>`)
 ~~~
   <parameters>
     <parameter>
@@ -52,7 +55,7 @@

 An Example
---
+-
 So if you have a following svg-file:

 ~~~

How to create new buttons modified by Alex Thuering

Alex Thuering — Sun, 02 Jul 2017 14:53:41 -0000

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

change extension from .svg to .xml and save in subfolder buttons in DVDStyler program folder
add following lines at the begin of file (after <?xml ...>, but before <svg ...>):
<button> <title>My Button</title>
add following line at the end of file
</button>
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