Difference between revisions of "Extension GUI Reference"

From Inkscape Wiki
Jump to navigation Jump to search
(→‎Types: Added images and rearranged data into tables)
m (typo)
 
(52 intermediate revisions by 6 users not shown)
Line 1: Line 1:
Here you will find the different parameter elements you may use in your .inx files (Inkscape Extensions)
+
This page documents how to design GUIs for [[Extension subsystem|Inkscape Extensions]] using the built-in [[INX extension descriptor format]].
  
 
== Introduction ==
 
== Introduction ==
Use parameter elements to capture user input for further use by a script. The basic structure of the element is:
 
  
<code><pre>
+
Extension GUIs consists of an arbitrary number of GUI elements, so-called '''[[#Widgets|Widgets]]'''. These can be simple text labels, boxes and spacers to control layout or more complex UI elements like images.
<param name="some_name" type="some_type">default value</param>
+
 
</pre></code>
+
A special class of Widgets are '''[[#Parameters|Parameters]]'''. They differ from other Widgets in that they have a user-settable value, for example a boolean (implemented as checkbox) or integer (implemented as number entry). The value of each Parameter is passed to the extension on execution and can be used to control its behavior.
 +
 
 +
All Widgets are described using an easy-to-learn XML schema with predefined tags and attributes which are described in detail below.
 +
 
 +
<!-- TODO: Simple "hello world"-like example -->
 +
 
 +
 
 +
=== Available Widgets ===
 +
 
 +
A general Widget takes the form
 +
 
 +
<source lang="xml">
 +
  <widget_name attribute1="value1" atribute2="value2" …>value</widget_name>
 +
</source>
 +
 
 +
where <code>widget_name</code> specifies the name of the widget and is one of the following:
 +
 
 +
* <code>label</code>
 +
* <code>hbox</code>/<code>vbox</code>
 +
* <code>separator</code>/<code>spacer</code>
 +
* <code>image</code>
 +
* <code>param</code> (for all Parameter types)
 +
 
 +
=== Available Parameter types ===
 +
 
 +
A general Parameter takes the form
 +
 
 +
<source lang="xml">
 +
  <param type="parameter_type" attribute1="value1" atribute2="value2" …>value</param >
 +
</source>
 +
 
 +
where <code>parameter_type</code> specifies the type of the parameter and is one of the following:
 +
 
 +
* <code>bool</code>
 +
* <code>int</code>
 +
* <code>float</code>
 +
* <code>string</code>
 +
* <code>path</code>
 +
* <code>optiongroup</code>
 +
* <code>notebook</code>
 +
* <code>color</code>
 +
 
 +
 
  
The default value is the value that is shown in the input control the first time the user opens the dialog window. Inkscape automatically displays the values used last time when the dialog window is opened again.
 
  
 
== Common attributes ==
 
== Common attributes ==
===type===
 
Gives the type of parameter (int|float|string|boolean|enum|notebook|description|optiongroup|color).
 
  
===name===
+
{| class="wikitable" style="vertical-align:top;" valign="top"
Identifier of the parameter.
+
|-
 +
!colspan="5"|For all Widgets
 +
|-
 +
! Attribute name
 +
! Allowed value(s)
 +
! Default value
 +
! Required?
 +
! Description
 +
|- style="vertical-align:top;"
 +
| style="white-space:nowrap" | <code>gui-hidden</code>
 +
| <code>true</code>,<code>false</code>
 +
| <code>false</code>
 +
| optional
 +
| If set to <code>true</code> the Widget is hidden from the GUI (primarily used to add hidden parameters that are passed to the extension but are not supposed to be editable by the user.)
 +
 
 +
''Note: If there are '''no''' visible parameters defined in a GUI, the extension is executed immediately without showing a dialog.''
 +
|- style="vertical-align:top;"
 +
| style="white-space:nowrap" | <code>indent</code>
 +
| <code>0,1,2,...</code>
 +
| <code>0</code>
 +
| optional
 +
| Sets indentation level of the parameter. Increasing indentation adds padding to the start of the line.|-
 +
|- style="border:none;background:none"
 +
!colspan="5" style="border:none;background:none"|&nbsp;
 +
|-
 +
!colspan="5"|Only for Parameters
 +
|-
 +
! Attribute name
 +
! Allowed value(s)
 +
! Default value
 +
! Required?
 +
! Description
 +
|- style="vertical-align:top;"
 +
| style="white-space:nowrap" | <code>name</code>
 +
| ''(text)''
 +
| -
 +
| required
 +
| Used as an identifier of the parameter. It has to be unique since the value of this attribute is used to save and transmit parameter values internally!
 +
|- style="vertical-align:top;"
 +
| style="white-space:nowrap" | <code>type</code>
 +
| (see [[#Available Parameter types|above]])
 +
| -
 +
| required
 +
| Determines the type of the parameter, see the extensive description of [[#Available Parameter types|available types]] below.
 +
|- style="vertical-align:top;"
 +
| style="white-space:nowrap" | <code>gui-text</code>
 +
| ''(text)''
 +
| -
 +
| required ''(visible parameters)'',<br/>optional ''(hidden parameters)''
 +
| Label shown for the parameter in the GUI.
 +
|- style="vertical-align:top;"
 +
| style="white-space:nowrap" | <code>gui-description</code>
 +
| ''(text)''
 +
| -
 +
| optional
 +
| Tooltip shown for the parameter when the user hovers the mouse cursor over the active area of the parameter in question.
 +
|-
 +
|}
 +
 
 +
 
 +
<!-- TODO
 +
 
 +
Use parameter elements to capture user input for further use by a script. The basic structure of the element is:
  
===gui-text===
+
<source lang="xml">
Label of the parameter.
+
<param name="some_name" type="some_type">default value</param>
 +
</source>
  
Not used by the notebook parameter (you can set the attribute, but it doesn't show in the dialog).
+
The default value is the value that is shown in the input control the first time the user opens the dialog window. Inkscape automatically displays the values used last time when the dialog window is opened again.
  
===gui-tip===
+
-->
Tooltip of the parameter.
 
  
Rarely used in the current extensions due to a crashing bug when used in a notebook.
 
  
===gui-hidden===
 
If true, hide the parameter in the GUI (default to false).
 
  
== Types ==
+
 
 +
== Available Parameter types ==
  
 
{| class="wikitable" style="width:100%"
 
{| class="wikitable" style="width:100%"
 +
 
|-
 
|-
 
! Type
 
! Type
! Code
+
! Description / Code
 
! Result
 
! Result
 +
 +
|-
 +
! boolean
 +
|Creates a checkbox input to set a '''boolean value'''. Set the default value to <code>true</code> or <code>1</code>, <code>false</code> or <code>0</code>.
 +
 +
<pre>
 +
<param name="name" type="boolean" gui-text="Some label text">false</param>
 +
</pre>
 +
|[[File:INX_sample-boolean.png]]
 +
 +
|-
 +
! color
 +
|Creates a control to select a '''color value'''.
 +
The '''returned value''' is an RGBA-value.
 +
 +
<pre>
 +
<param name="name" type="color"></param>
 +
</pre>
 +
|[[File:INX_sample-color.png]]
 +
 
|-
 
|-
|string
+
! description
|A textbox to capture a '''character string'''.
+
|Creates a text element. Specifying the attribute <code>xml:space="preserve"</code> preserves whitespace in the text content  of the description and enables multiline text.
<code><pre>
+
 
<param name="some_name" type="string" _gui-text="Some text label">Some default text</param>
+
<pre>
</pre></code>
+
<param name="name" type="description">Some text here.</param>
|[[File:INX_sample-string.png]]
+
</pre>
 +
 
 +
When additionally setting the attribute <code>appearance="header"</code> the text is styled as a heading and can be used as another possibility to group parameters.
 +
<pre><param name="name" type="description" appearance="header">Header</param></pre>
 +
 
 +
All <code>description</code> type parameters are purely informational (they do not return any value). They are intended to be used to provide additional information / help on other parameters (Consider using the <code>gui-description</code> attribute for short help texts that are specific to a single parameter, though).
 +
 
 +
 
 +
|[[File:INX_sample-description.png]]<br><small>default appearance</small><br><br><br><br>
 +
[[File:INX_sample-description_header.png]]<br><small>with <code>appearance="header"</code></small><br><br><br>&nbsp;
 +
 
 
|-
 
|-
|int
+
! enum
|To get a textbox for an '''integer''' number. Limit the input range with the <code>min</code> and <code>max</code> attributes.
+
|Creates a drop-down list from which '''one predefined value''' can be chosen. The different choices are created with <code><item></code> elements. The first <code><item></code> is selected by default.
<code><pre>
+
The '''returned value''' for <code>enum</code> type parameters is the value of the <code>value</code> attribute of the selected <code><item></code>.
<param name="some_name" type="int" min="1" max="100" _gui-text="Some label text">1</param>
+
 
</pre></code>
+
<pre>
|[[File:INX_sample-int.png]]
+
<param name="name" type="enum" gui-text="Some label text">
 +
  <item value="1">First option</item>
 +
  <item value="2">Second option</item>
 +
</param>
 +
</pre>
 +
|[[File:INX_sample-enum.png]]
 +
 
 
|-
 
|-
|float
+
! float
|To get a textbox for a '''float number'''. Limit the input range with the <code>min</code> and <code>max</code> attributes. To set the number of decimal places, use the <code>precision</code> attribute.
+
|Creates a textbox input to enter a '''floating point number'''. Limit the input range with the <code>min</code> and <code>max</code> attributes; set the number of decimal places with the <code>precision</code> attribute. (Default: <code>min="0"</code>, <code>max="10"</code> and <code>precision="1"</code>)
<code><pre>
+
 
<param name="some_name" type="float" precision="3" min="0" max="9999"  
+
<pre>
_gui-text="Some label text">1.234</param>
+
<param name="name" type="float" precision="3" min="0" max="9999"  
</pre></code>
+
gui-text="Some label text">1.234</param>
|[[File:INX_sample-float.png]]
+
</pre>
 +
 
 +
Use the attribute <code>appearance="full"</code> to create a slider with which the floating point value can be adjusted dynamically over the full range.
 +
|[[File:INX_sample-float.png]]<br><br>[[File:INX_sample-float_full.png|240px]]
 +
 
 
|-
 
|-
|boolean
+
! int
|Gives a '''checkbox'''. Set the default value to <code>true</code> or <code>1</code>, <code>false</code> or <code>0</code>.
+
|Creates a textbox input to enter an '''integer number'''. Limit the input range with the <code>min</code> and <code>max</code> attributes. (Default: <code>min="0"</code> and <code>max="10"</code>)
<code><pre>
+
 
<param name="some_name" type="boolean" _gui-text="Some label text">false</param>
+
<pre>
</pre></code>
+
<param name="name" type="int" min="1" max="100" gui-text="Some label text">1</param>
|[[File:INX_sample-boolean.png]]
+
</pre>
 +
 
 +
Use the attribute <code>appearance="full"</code> to create a slider with which the integer value can be adjusted dynamically over the full range.
 +
|[[File:INX_sample-int.png]]<br><br>[[File:INX_sample-int_full.png|240px]]
 +
 
 +
|-
 +
! notebook
 +
|Creates a set of pages (aka tab control). The user can switch between individual pages, each page can contain an arbitrary set of other parameters. Individual pages are created with the <code><page></code> element.
 +
The '''returned value''' for <code>notebook</code> type parameters is the value of the <code>name</code> attribute of the selected <code><page></code>.
 +
 
 +
<pre>
 +
<param name="name" type="notebook">
 +
    <page name="page_1" gui-text="First page">
 +
        <param>...</param>
 +
    </page>
 +
    <page name="page_2" gui-text="Second page">
 +
        <param>...</param>
 +
    </page>
 +
</param>
 +
</pre>
 +
|[[File:INX_sample-notebook.png]]
 +
 
 
|-
 
|-
|enum
+
! optiongroup
|Creates a list of choices where the user can only select '''one option''' using a drop down select list. Create the different choices with <code><item></code> elements. The first item is selected by default. The '''returned value''' for the optiongroup element is the '''value attribute of the selected item'''.
+
|Creates a set of radio buttons from which '''one predefined value''' can be chosen. The different choices are created with <code><option></code> elements. The first <code><option></code> is selected by default.
<code><pre>
+
The '''returned value''' for <code>optiongroup</code> type parameters is the value of the <code>value</code> attribute of the selected <code><option></code>.
<param name="some_name" type="enum" _gui-text="Some label text">
+
 
   <_item value="1">First option</_item>
+
<pre>
   <_item value="2">Second option</_item>
+
<param name="name" type="optiongroup"
 +
gui-text="Some label text">
 +
   <option value="1">First option</option>
 +
   <option value="2">Second option</option>
 
</param>
 
</param>
</pre></code>
+
</pre>
|[[File:INX_sample-enum.png]]
+
 
 +
Set the attribute <code>appearance="minimal"</code> to display a drop-down list instead of radio buttons.<br>
 +
<small>''The option group will occupy the minimum space on the right hand side of the dialog. Versus the Enum, which expands to fill available space.''</small>
 +
|[[File:INX_sample-optiongroup.png]]<br><br><br><br><br>[[File:INX_sample-optiongroup-minimal.png]]
 +
 
 +
|-
 +
! string
 +
|Creates a textbox input to enter a '''character string'''. Limit the number of characters the user is allowed to enter with the <code>max_length</code> attribute. (Default: no limit)
 +
 
 +
<pre>
 +
<param name="name" type="string" gui-text="Some text label">Some default text</param>
 +
</pre>
 +
|[[File:INX_sample-string.png]]
 +
 
 +
|}
 +
 
 +
== Localization of parameters ==
 +
 
 +
To mark parameters to be included into the translation files (this is done automatically during the build process) there exist special variants of all relevant attributes and tag names that start with an underscore.
 +
 
 +
* Labels and tooltips can be marked for translation by simply using the attribute names <code>_gui-text</code> and <code>_gui-description</code> instead of their counterparts without underscore.
 +
* For <code><item></code>s and <code><option></code>s (both of which do not use the attributes just explained) add an underscore to the tag name itself:<br><code><_item value="1">Localized item name</_item></code> and<br><code><_option value="1">Localized option name</_option></code> respectively.
 +
* Also for <code>description</code> type (and ''only'' for <code>description</code> type!) parameters an underscore is added to the tag name itself:<br><code><_param type="description">Localized text here.</_param></code>
 +
 
 +
= Editing INX Parameters in 1.0 =
 +
 
 +
In this section:
 +
* When an attribute is in square brackets (<code>[name="value"]</code>), it means that <code>name</code> is optional.
 +
* The 1 in <code>indent="1"</code> is the indentation level that you want.
 +
 
 +
== Tags for the layout ==
 +
 
 +
<source lang="xml">
 +
<label [indent="1"] [appearance="header"]>Some text</label>
 +
<label [indent="1"] [appearance="url"]>http://some/url</label>
 +
<image>some/inx/relative/path/to/img.svg</image>
 +
<spacer/>
 +
<separator [indent="1"]/>
 +
<hbox [indent="1"]></hbox>
 +
<vbox [indent="1"]></vbox>
 +
</source>
 +
 
 +
== Tags for the parameters ==
 +
 
 +
* The <code>name</code> attribute of tag <code><param></code> means the name of the argument (<code>--name=</code>) your command will get.
 +
* Parameter values (when opening the dialog) are set to the last used value, which is saved in the user's preferences file (e.g. ~/.config/inkscape/preferences.xml on GNU/Linux systems):
 +
<source lang="xml">
 +
<inkscape>
 +
  <group id="extensions" com.attrib.id.param_name="param value"/>
 +
</inkscape>
 +
</source>
 +
The (default) values in the inx file are visible only when the user first uses the extension.
 +
 
 +
=== Notebook ===
 +
{| class="wikitable"
 +
|+ Multiple views/options in the same dialog window.
 +
|-
 +
| colspan="2" | It helps with layouting, and allows you to retrieve the active page (tab) name.
 +
|-
 +
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-notebook.png|border]]
 +
| It defaults to the first page.
 
|-
 
|-
|optiongroup
+
| colspan="2" | <source lang="xml">
|Creates a list of choices where the user can only select '''one option'''. By default this is displayed as radiobuttons. Set the attribute <code>appearance="minimal"</code> to display a drop down select list instead. Create the different choices with <code><option></code> elements. The first option is selected by default. The '''returned value''' for the optiongroup element is the '''value attribute of the selected option'''.
+
<param type="notebook" name="varname" [indent="1"]>
<code><pre>
+
    <page name="value" gui-text="label">
<param name="some_name" type="optiongroup" appearance="minimal"  
+
        <!-- Any elements contained in the page go here -->
_gui-text="Some label text">
+
    </page>
  <_option value="1">First option</_option>
+
    <!-- You can add as many pages as you like -->
  <_option value="2">Second option</_option>
 
 
</param>
 
</param>
</pre></code>
+
</source>
|[[File:INX_sample-optiongroup-minimal.png]]
+
|}
 +
*The value of the selected <code><page name></code> attribute will be passed as an argument to your extension.
 +
**The default value is the name of the first page.
 +
*If the same <code><param name></code> is used in multiple tabs, its value will be taken from the last <code><page></code> it appears on.
 +
**This means that it's best to use different names if the same parameter is used on multiple pages.
 +
 
 +
=== Checkbox ===
 +
 
 +
{| class="wikitable"
 +
|+ To get a boolean value
 +
|-
 +
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-boolean.png]]
 +
| The default value is <code>true</code>
 +
|-
 +
| colspan="2" |
 +
<source lang="xml">
 +
<param type="bool" name="varname" gui-text="label" [indent="1"]>false</param>                                           
 +
</source>  
 +
|}
 +
=== Numeric spinner ===
 +
 
 +
{| class="wikitable"
 +
|+ To get numbers, int or float
 +
|-
 +
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-float.png]]
 +
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-int.png]]
 +
| The default value is 0
 +
|-
 +
| colspan="3" |
 +
{| style="margin: auto;"
 +
|+ With <code>appearance="full"</code>, you get a full width slider.
 +
|-
 +
| scope="col" style="border: 1px solid #a2a9b1; background-color:#f0f0f0;" | [[File:INX_sample-float_full.png|center]]
 +
|}
 +
|-
 +
| colspan="3" |
 +
<source lang="xml">
 +
<param type="int"  name="varname" gui-text="labal" [min="1"]  [max="10"]  [appearance="full"]  [indent="1"]/>
 +
<param type="float" name="varname" gui-text="label" [min="0.5"] [max="5.0"] [appearance="full"]  [indent="1"]/>
 +
</source>
 +
|}
 +
* The widget has a precision of 0.1 for float.
 +
* The default <code>min</code> value is "0".
 +
* The default <code>max</code> value is "10".
 +
 
 +
=== Text fields ===
 +
 
 +
{| class="wikitable"
 +
|+ Get text input
 +
|-
 +
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-string.png]]
 +
| The default value is the empty string and with such a value, the parameter is omitted.
 +
|-
 +
| colspan="2" |
 +
<source lang="xml">
 +
<param type="string" name="varname" gui-text="label" [indent="1"] [max-length="5" | appearance="multiline"]>some text</param>
 +
</source>
 +
|}
 +
 
 +
You can provide an integer to the attribute <code>max-length</code> to limit the number of characters you can get.
 +
 
 +
=== File chooser ===
 +
 
 +
{| class="wikitable"
 +
|+ Get a path, either a file or a directory
 +
|-
 +
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX path.png|none]] || Default's to the path of the folder containing the script
 
|-
 
|-
|color
+
| colspan="2" | Use one of:
|Creates a control to select a '''color'''. The returned value is a RGBA-value.
+
<source lang="xml">
<code><pre>
+
<param type="path" name="varname" gui-text="label" [indent="1"] mode="file"    filetypes="svg,png"/>
<param name="some_name" type="color"></param>
+
<param type="path" name="varname" gui-text="label" [indent="1"] mode="files"    filetypes="svg,png"/>
</pre></code>
+
<param type="path" name="varname" gui-text="label" [indent="1"] mode="file_new" filetypes="svg,png"/>
|[[File:INX_sample-color.png]]
+
<param type="path" name="varname" gui-text="label" [indent="1"] mode="folder"/>
 +
<param type="path" name="varname" gui-text="label" [indent="1"] mode="folders"/>
 +
<param type="path" name="varname" gui-text="label" [indent="1"] mode="folder_new"/>
 +
</source>
 +
|}
 +
* The attribute <code>mode</code> with a value of:
 +
** <code>"file"</code> or <code>"folder"</code> (without <code>s</code>) open a file browser for selecting 1 object.
 +
** The versions ending with a <code>s</code> open a file browser for selecting multiple objects.
 +
** And the ones ending with <code>_new</code> are for creating new objects.
 +
* The <code>filetype</code> attribute contains a list of file extensions to look for. In this example only svg or png files will be displayed.
 +
 
 +
=== A combobox or radio buttons ===
 +
 
 +
{| class="wikitable"
 +
|+ To get a choice of predefined values
 
|-
 
|-
|description
+
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-optiongroup-minimal.png]]
|To show some text in the dialog window, for example as "help" text.
+
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-optiongroup.png]]
<code><pre>
+
| Default value is the first item
<param name="some_name" type="description">Some text here.</param>
 
</pre></code>
 
|[[File:INX_sample-description.png]]
 
 
|-
 
|-
|notebook
+
| colspan="3" |
|Creates a '''set of pages''' or tab-sheets. Create individual pages with the <code>&lt;page&gt;</code> element. The '''returned value''' for the notebook parameter element is the name of the '''selected''' page/tab.
+
<source lang="xml">
<code><pre>
+
<param type="optiongroup" name="varname" gui-text="label" [appearance="combo"|appearance="radio"] [indent="1"]>
<param name="some_name" type="notebook">
+
    <item value="value">Some text</item>
  <page name="name_page_1" _gui-text="First page">
+
    <!-- Other choices -->
      <param>...</param>
 
  </page>
 
  <page name="name_page_2" _gui-text="Second page">
 
      <param>...</param>
 
  </page>
 
 
</param>
 
</param>
</pre></code>
+
</source>
|[[File:INX_sample-notebook.png]]
+
|}
 +
* The default <code>appearance</code> is <code>"radio"</code>. The appearance <code>"combo"</code> is also valid.
 +
 
 +
=== Color ===
 +
{| class="wikitable"
 +
|+ Get a hex color value
 +
|-
 +
| rowspan="2" scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-color.png]]
 +
| scope="col" style="width: 240px; height: 35px; background-color:#f0f0f0;" | [[File:INX color-btn.png]]
 +
| Default value is <code>#000000FF</code>
 +
|-
 +
| colspan="2" style="vertical-align: top;" |
 +
{|
 +
| style="padding-left: 6em;" | <b style="font-size:18px;">↑</b>With<b style="font-size:18px;">↑</b> the attribute <code>appearance="colorbutton"</code>
 +
|-
 +
| style="height: 100px;" | <b style="font-size:18px;">⇇</b> Without <code>appearance="colorbutton"</code>
 +
|}
 +
|-
 +
| colspan=3 |
 +
<source lang="xml">
 +
<param type="color" name="varname" [appearance="colorbutton" gui-text="label"] [indent="1"]/>
 +
</source>
 
|}
 
|}
 +
 +
The parameter value is an RGBA value in hexadecimal notation.
 +
 +
 +
To document:
 +
 +
* Multiline text fields: appearance="multiline"
 +
* type "description"
 +
* translatable="no"
 +
* implements-custom-gui
  
 
[[Category:Developer Documentation]]
 
[[Category:Developer Documentation]]
 
[[Category:Extensions]]
 
[[Category:Extensions]]

Latest revision as of 00:44, 18 July 2020

This page documents how to design GUIs for Inkscape Extensions using the built-in INX extension descriptor format.

Introduction

Extension GUIs consists of an arbitrary number of GUI elements, so-called Widgets. These can be simple text labels, boxes and spacers to control layout or more complex UI elements like images.

A special class of Widgets are Parameters. They differ from other Widgets in that they have a user-settable value, for example a boolean (implemented as checkbox) or integer (implemented as number entry). The value of each Parameter is passed to the extension on execution and can be used to control its behavior.

All Widgets are described using an easy-to-learn XML schema with predefined tags and attributes which are described in detail below.


Available Widgets

A general Widget takes the form

  <widget_name attribute1="value1" atribute2="value2" >value</widget_name>

where widget_name specifies the name of the widget and is one of the following:

  • label
  • hbox/vbox
  • separator/spacer
  • image
  • param (for all Parameter types)

Available Parameter types

A general Parameter takes the form

  <param type="parameter_type" attribute1="value1" atribute2="value2" >value</param >

where parameter_type specifies the type of the parameter and is one of the following:

  • bool
  • int
  • float
  • string
  • path
  • optiongroup
  • notebook
  • color



Common attributes

For all Widgets
Attribute name Allowed value(s) Default value Required? Description
gui-hidden true,false false optional If set to true the Widget is hidden from the GUI (primarily used to add hidden parameters that are passed to the extension but are not supposed to be editable by the user.)

Note: If there are no visible parameters defined in a GUI, the extension is executed immediately without showing a dialog.

indent 0,1,2,... 0 optional -
 
Only for Parameters
Attribute name Allowed value(s) Default value Required? Description
name (text) - required Used as an identifier of the parameter. It has to be unique since the value of this attribute is used to save and transmit parameter values internally!
type (see above) - required Determines the type of the parameter, see the extensive description of available types below.
gui-text (text) - required (visible parameters),
optional (hidden parameters)
Label shown for the parameter in the GUI.
gui-description (text) - optional Tooltip shown for the parameter when the user hovers the mouse cursor over the active area of the parameter in question.




Available Parameter types

Type Description / Code Result
boolean Creates a checkbox input to set a boolean value. Set the default value to true or 1, false or 0.
<param name="name" type="boolean" gui-text="Some label text">false</param>
INX sample-boolean.png
color Creates a control to select a color value.

The returned value is an RGBA-value.

<param name="name" type="color"></param>
INX sample-color.png
description Creates a text element. Specifying the attribute xml:space="preserve" preserves whitespace in the text content of the description and enables multiline text.
<param name="name" type="description">Some text here.</param>

When additionally setting the attribute appearance="header" the text is styled as a heading and can be used as another possibility to group parameters.

<param name="name" type="description" appearance="header">Header</param>

All description type parameters are purely informational (they do not return any value). They are intended to be used to provide additional information / help on other parameters (Consider using the gui-description attribute for short help texts that are specific to a single parameter, though).


INX sample-description.png
default appearance



INX sample-description header.png
with appearance="header"


 

enum Creates a drop-down list from which one predefined value can be chosen. The different choices are created with <item> elements. The first <item> is selected by default.

The returned value for enum type parameters is the value of the value attribute of the selected <item>.

<param name="name" type="enum" gui-text="Some label text">
   <item value="1">First option</item>
   <item value="2">Second option</item>
</param>
INX sample-enum.png
float Creates a textbox input to enter a floating point number. Limit the input range with the min and max attributes; set the number of decimal places with the precision attribute. (Default: min="0", max="10" and precision="1")
<param name="name" type="float" precision="3" min="0" max="9999" 
gui-text="Some label text">1.234</param>

Use the attribute appearance="full" to create a slider with which the floating point value can be adjusted dynamically over the full range.

INX sample-float.png

INX sample-float full.png
int Creates a textbox input to enter an integer number. Limit the input range with the min and max attributes. (Default: min="0" and max="10")
<param name="name" type="int" min="1" max="100" gui-text="Some label text">1</param>

Use the attribute appearance="full" to create a slider with which the integer value can be adjusted dynamically over the full range.

INX sample-int.png

INX sample-int full.png
notebook Creates a set of pages (aka tab control). The user can switch between individual pages, each page can contain an arbitrary set of other parameters. Individual pages are created with the <page> element.

The returned value for notebook type parameters is the value of the name attribute of the selected <page>.

<param name="name" type="notebook">
    <page name="page_1" gui-text="First page">
        <param>...</param>
    </page>
    <page name="page_2" gui-text="Second page">
        <param>...</param>
    </page>
</param>
INX sample-notebook.png
optiongroup Creates a set of radio buttons from which one predefined value can be chosen. The different choices are created with <option> elements. The first <option> is selected by default.

The returned value for optiongroup type parameters is the value of the value attribute of the selected <option>.

<param name="name" type="optiongroup"
gui-text="Some label text">
   <option value="1">First option</option>
   <option value="2">Second option</option>
</param>

Set the attribute appearance="minimal" to display a drop-down list instead of radio buttons.
The option group will occupy the minimum space on the right hand side of the dialog. Versus the Enum, which expands to fill available space.

INX sample-optiongroup.png




INX sample-optiongroup-minimal.png
string Creates a textbox input to enter a character string. Limit the number of characters the user is allowed to enter with the max_length attribute. (Default: no limit)
<param name="name" type="string" gui-text="Some text label">Some default text</param>
INX sample-string.png

Localization of parameters

To mark parameters to be included into the translation files (this is done automatically during the build process) there exist special variants of all relevant attributes and tag names that start with an underscore.

  • Labels and tooltips can be marked for translation by simply using the attribute names _gui-text and _gui-description instead of their counterparts without underscore.
  • For <item>s and <option>s (both of which do not use the attributes just explained) add an underscore to the tag name itself:
    <_item value="1">Localized item name</_item> and
    <_option value="1">Localized option name</_option> respectively.
  • Also for description type (and only for description type!) parameters an underscore is added to the tag name itself:
    <_param type="description">Localized text here.</_param>

Editing INX Parameters in 1.0

In this section:

  • When an attribute is in square brackets ([name="value"]), it means that name is optional.
  • The 1 in indent="1" is the indentation level that you want.

Tags for the layout

<label [indent="1"] [appearance="header"]>Some text</label>
<label [indent="1"] [appearance="url"]>http://some/url</label>
<image>some/inx/relative/path/to/img.svg</image>
<spacer/>
<separator [indent="1"]/>
<hbox [indent="1"]></hbox>
<vbox [indent="1"]></vbox>

Tags for the parameters

  • The name attribute of tag <param> means the name of the argument (--name=) your command will get.
  • Parameter values (when opening the dialog) are set to the last used value, which is saved in the user's preferences file (e.g. ~/.config/inkscape/preferences.xml on GNU/Linux systems):
<inkscape>
  <group id="extensions" com.attrib.id.param_name="param value"/>
</inkscape>

The (default) values in the inx file are visible only when the user first uses the extension.

Notebook

Multiple views/options in the same dialog window.
It helps with layouting, and allows you to retrieve the active page (tab) name.
INX sample-notebook.png It defaults to the first page.
<param type="notebook" name="varname" [indent="1"]>
    <page name="value" gui-text="label">
        <!-- Any elements contained in the page go here -->
    </page>
    <!-- You can add as many pages as you like -->
</param>
  • The value of the selected <page name> attribute will be passed as an argument to your extension.
    • The default value is the name of the first page.
  • If the same <param name> is used in multiple tabs, its value will be taken from the last <page> it appears on.
    • This means that it's best to use different names if the same parameter is used on multiple pages.

Checkbox

To get a boolean value
INX sample-boolean.png The default value is true
<param type="bool" name="varname" gui-text="label" [indent="1"]>false</param>

Numeric spinner

To get numbers, int or float
INX sample-float.png INX sample-int.png The default value is 0
With appearance="full", you get a full width slider.
INX sample-float full.png
<param type="int"   name="varname" gui-text="labal" [min="1"]   [max="10"]  [appearance="full"]  [indent="1"]/>
<param type="float" name="varname" gui-text="label" [min="0.5"] [max="5.0"] [appearance="full"]  [indent="1"]/>
  • The widget has a precision of 0.1 for float.
  • The default min value is "0".
  • The default max value is "10".

Text fields

Get text input
INX sample-string.png The default value is the empty string and with such a value, the parameter is omitted.
<param type="string" name="varname" gui-text="label" [indent="1"] [max-length="5" | appearance="multiline"]>some text</param>

You can provide an integer to the attribute max-length to limit the number of characters you can get.

File chooser

Get a path, either a file or a directory
INX path.png
Default's to the path of the folder containing the script
Use one of:
<param type="path" name="varname" gui-text="label" [indent="1"] mode="file"     filetypes="svg,png"/>
<param type="path" name="varname" gui-text="label" [indent="1"] mode="files"    filetypes="svg,png"/>
<param type="path" name="varname" gui-text="label" [indent="1"] mode="file_new" filetypes="svg,png"/>
<param type="path" name="varname" gui-text="label" [indent="1"] mode="folder"/>
<param type="path" name="varname" gui-text="label" [indent="1"] mode="folders"/>
<param type="path" name="varname" gui-text="label" [indent="1"] mode="folder_new"/>
  • The attribute mode with a value of:
    • "file" or "folder" (without s) open a file browser for selecting 1 object.
    • The versions ending with a s open a file browser for selecting multiple objects.
    • And the ones ending with _new are for creating new objects.
  • The filetype attribute contains a list of file extensions to look for. In this example only svg or png files will be displayed.

A combobox or radio buttons

To get a choice of predefined values
INX sample-optiongroup-minimal.png INX sample-optiongroup.png Default value is the first item
<param type="optiongroup" name="varname" gui-text="label" [appearance="combo"|appearance="radio"] [indent="1"]>
    <item value="value">Some text</item>
    <!-- Other choices -->
</param>
  • The default appearance is "radio". The appearance "combo" is also valid.

Color

Get a hex color value
INX sample-color.png INX color-btn.png Default value is #000000FF
With the attribute appearance="colorbutton"
Without appearance="colorbutton"
<param type="color" name="varname" [appearance="colorbutton" gui-text="label"] [indent="1"]/>

The parameter value is an RGBA value in hexadecimal notation.


To document:

  • Multiline text fields: appearance="multiline"
  • type "description"
  • translatable="no"
  • implements-custom-gui