Difference between revisions of "Extensions: INX widgets and parameters"

From Inkscape Wiki
Jump to navigation Jump to search
(Update Introduction and documentation for common attributes; clarify difference between Widgets and Parameters.)
(→‎Parameters: Add mandatory attribute to example (gitlab inbox#4614))
 
(30 intermediate revisions by 3 users not shown)
Line 1: Line 1:
This page documents how to design GUIs for [[Extension subsystem|Inkscape Extensions]] using the built-in [[INX extension descriptor format]].
This page contains the reference documentation for INX widgets and parameters. Their primary goal is to make it easy to design GUIs for [[Extension subsystem|Inkscape Extensions]] using the built-in [[INX extension descriptor format]], although (invisible) parameters can also be used for extensions that don't need to show a user interface.


== Introduction ==
== Introduction ==
Line 22: Line 22:
where <code>widget_name</code> specifies the name of the widget and is one of the following:
where <code>widget_name</code> specifies the name of the widget and is one of the following:


* <code>label</code>
* <code>label</code>{{added_in|1.0}}
* <code>hbox</code>/<code>vbox</code>
* <code>hbox</code>{{added_in|1.0}}/<code>vbox</code>{{added_in|1.0}}
* <code>separator</code>/<code>spacer</code>
* <code>separator</code>{{added_in|1.0}}/<code>spacer</code>{{added_in|1.0}}
* <code>image</code>
* <code>image</code>{{added_in|1.0}}
* <code>param</code> (for all Parameter types)
* <code>param</code> (for all Parameter types)


Line 38: Line 38:
where <code>parameter_type</code> specifies the type of the parameter and is one of the following:
where <code>parameter_type</code> specifies the type of the parameter and is one of the following:


* <code>label</code>
* <code>bool</code>{{added_in|1.0}}
* <code>hbox</code>/<code>vbox</code>
* <code>int</code>
* <code>separator</code>/<code>spacer</code>
* <code>float</code>
* <code>image</code>
* <code>string</code>
* <code>param</code> (for all Parameter types)
* <code>path</code>{{added_in|1.0}}
* <code>optiongroup</code>
* <code>notebook</code>
* <code>color</code>


If a parameter is made invisible (see <code>gui-hidden</code> attribute in the [[#Common attributes|next section]]) it will not be shown in the GUI but it's value is still passed to an extension. This is useful if you want to hardcode parameter value the user  should not be able to change. If all parameters (and potential widgets) are invisible, Inkscape will not show a GUI and execute the extension immediately instead, but will still pass the values of the invisible parameters.


== Common attributes ==
== Common attributes ==
Line 66: Line 70:
|- style="vertical-align:top;"
|- style="vertical-align:top;"
| style="white-space:nowrap" | <code>indent</code>
| style="white-space:nowrap" | <code>indent</code>
| <code>0,1,2,...</code>
| <code>0,1,2,</code>
| <code>0</code>
| <code>0</code>
| optional
| optional
| Sets indentation level of the parameter. Increasing indentation adds padding to the start of the line.|-
| Sets indentation level of the parameter. Increasing indentation adds padding to the start of the line.
|- style="border:none;background:none"
|- style="border:none;background:none"
!colspan="5" style="border:none;background:none"|&nbsp;
!colspan="5" style="border:none;background:none"|&nbsp;
Line 88: Line 92:
|- style="vertical-align:top;"
|- style="vertical-align:top;"
| style="white-space:nowrap" | <code>type</code>
| style="white-space:nowrap" | <code>type</code>
| <code>bool</code>, <code>int</code>, <code>float</code>, <code>string</code>, <code>path</code>, <code>optiongroup</code>, <code>notebook</code>, <code>color</code>
| (see [[#Available Parameter types|above]])
| -
| -
| required
| required
| Determines the type of the parameter, see the extensive description of [[#Available Parameter types|available types]] below.
| Determines the type of the parameter, see the extensive description of [[#Parameters|Parameters]] below.
|- style="vertical-align:top;"
|- style="vertical-align:top;"
| style="white-space:nowrap" | <code>gui-text</code>
| style="white-space:nowrap" | <code>gui-text</code>
| ''(text)''
| ''(text)''
| -
| -
| required ''(visible parameters)'',<br/>optional ''(hidden parameters)''
| required ''(visible parameters)'',<br/>optional ''(hidden parameters + <code>notebook</code>s)''
| Label shown for the parameter in the GUI.
| Label shown for the parameter in the GUI.
|- style="vertical-align:top;"
|- style="vertical-align:top;"
Line 107: Line 111:
|}
|}


== Widgets ==
{| class="wikitable" style="width:100%"
|+ Parameter reference
|-
! Type
! Description / Code
! Result
|-
! hbox/vbox
|Creates a container for other widgets. No visual rendering but provides a possibility to align and layout other widgets. Child widgets are either added in horizontal (<code>hbox</code>) or vertical (<code>vbox</code>) direction.


<!-- TODO
<source lang="xml">
<hbox>…</hbox>
<vbox>…</vbox>
</source>
 
A box can contain an arbitrary number of other widgets and parameters (including other boxes) to fine-tune the layout of the GUI.
 
''Note: When you start with an empty extension GUI, you're basically starting with a <code>vbox</code>. Also <code>notebook</code> pages behave like vertically oriented boxes.
 
|
[[File:INX_sample-separators.png]]
 
 
 
|-
! image
|Creates a widget displaying an image. The content of the <code><image></code> node specifies the path of the image file (ideally specify a path relative to the .inx file itself).
 
<source lang="xml">
<image>path/to/image.svg</image>
</source>
 
By default the image will be rendered at it's actual size. Use attributes <code>width/heigth</code> to override the default size (in this case ''both'' attributes need to be supplied; units are pixels).
 
''Implementation note: Loadable image formats are determined by GdkPixbuf and therefore system-specific. PNG should always work and is the safe choice. SVG should mostly work and is the preferred choice for obvious reasons.''
 
|
[[File:INX_sample-image.png]]
 
|-
! label
|Creates a widget showing text. The content of the <code><label></code> node corresponds to the text content that will be rendered.
 
<source lang="xml">
<label>Some text here.</label>
</source>
 
''Note: Labels are intended to provide additional information / help. For labeling parameters use the <code>gui-text</code> attribute; for short help texts that are specific to a single parameter prefer <code>gui-description</code> which will render as a tooltip.''
 
* When setting the attribute <code>appearance="header"</code> the text is styled as a heading and can be used as another possibility to group parameters.
* When setting the attribute <code>appearance="url"</code> the text is rendered as a clickable link.<br/>''Note: The text is escaped and used as the link target as-is. Creating a link text that differs from the URL is prevented for security reasons.''
* When setting the attribute <code>xml:space="preserve"</code> any white-space (spaces, tabs, line-breaks, etc.) in the label will be preserved, allowing to format the label accordingly. By default all leading/tailing and intermediary whitespace is collapsed into a single space character.
 
|
[[File:INX_sample-labels.png|frame|none|Different label types (in order):<ul><li>default</li><li><code>appearance="header"</code></li><li><code>appearance="url"</code></li><li><code>xml:space="preserve"</code></li></ul>]]


Use parameter elements to capture user input for further use by a script. The basic structure of the element is:
|-
! separator
|Creates a separator for visual separation of other widgets. Renders as a horizontal/vertical line.


<source lang="xml">
<source lang="xml">
<param name="some_name" type="some_type">default value</param>
<separator />
</source>
</source>


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.
The direction of the separator will automatically adjust depending on direction of the current container (vertical for "empty" extension GUIs and <code>notebook</code> pages; vertical/horizontal for <code>vbox</code> and <code>hbox</code> respectively).
|
[[File:INX_sample-separators.png]]
 
|-
! spacer
|Creates a spacer for visual separation of other widgets. No visual rendering but provides variable spacing.
 
<source lang="xml">
<spacer />
</source>


-->
The direction of the spacer will automatically adjust depending on direction of the current container (vertical for "empty" extension GUIs and <code>notebook</code> pages; vertical/horizontal for <code>vbox</code> and <code>hbox</code> respectively).


Use the <code>size</code> attribute to set the spacing in pixels (default: <code>size="10"</code>). The special value <code>expand</code> results in a spacer that grows dynamically and always uses up as much space as possible (useful for aligning content).


|
[[File:INX_sample-spacers.png|frame|none|Different spacer types:<ol><li>default</li><li><code>size="20"</code></li><li><code>size="expand"</code></li></ol>]]


|}


== Available Parameter types ==
== Parameters ==


{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
|+ Parameter reference


|-
|-
Line 133: Line 213:


|-
|-
! boolean
! bool{{added_in|1.0}}
|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>.
|Creates a checkbox to set a '''boolean value'''. Allowed values are <code>true</code> or <code>false</code> (default value: <code>true</code>).


<pre>
<source lang="xml">
<param name="name" type="boolean" gui-text="Some label text">false</param>
<param name="name" type="boolean" gui-text="Some label text">false</param>
</pre>
</source>
 
|[[File:INX_sample-boolean.png]]
|[[File:INX_sample-boolean.png]]


|-
|-
! color
! color
|Creates a control to select a '''color value'''.
|Creates a control to select an '''RGBA color value'''. Values should be given in hexadecimal notation, e.g. <code>0xff0000ff</code> for red with full opacity (default value: <code>0x000000ff</code>)
The '''returned value''' is an RGBA-value.


<pre>
<source lang="xml">
<param name="name" type="color"></param>
<param name="name" type="color" gui-text="Some label text">0x000000ff</param>
</pre>
</source>
|[[File:INX_sample-color.png]]
 
|-
! description
|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.


<pre>
Use <code>appearance="colorbutton"</code> for a simple button that opens a simplified color picker. Otherwise a full ColorNotebook will be rendered.
<param name="name" type="description">Some text here.</param>
</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.
''Implementation note: colors values are internally treated as 32-bit unsigned integers (<code>unsigned long</code>). Acceptable default values include everything the standard library function [https://en.cppreference.com/w/cpp/string/byte/strtoul <code>strtoul</code>] understands{{added_in|1.0}}. Earlier Inkscape version only handled decimal numbers. The value passed to the extension script will also be a decimal number.''
<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-color.png|frame|none|default]]


 
[[File:INX color-btn.png|frame|none|<code>appearance="colorbutton"</code>]]
|[[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;
 
|-
! enum
|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.
The '''returned value''' for <code>enum</code> type parameters is the value of the <code>value</code> attribute of the selected <code><item></code>.
 
<pre>
<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
|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>)
|Creates a 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. (defaults: <code>min="0"</code>, <code>max="10"</code> and <code>precision="1"</code>; default value: 0)


<pre>
<source lang="xml">
<param name="name" type="float" precision="3" min="0" max="9999"  
<param name="name" type="float" precision="3" min="0" max="9999"  
gui-text="Some label text">1.234</param>
gui-text="Some label text">1.234</param>
</pre>
</source>
 
Use the attribute <code>appearance="full"</code> to create a slider with which the value can be adjusted dynamically over the full range.


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]]
[[File:INX_sample-float.png|frame|none|default]]
 
[[File:INX_sample-float_full.png|frame|none|<code>appearance="full"</code>]]


|-
|-
! int
! int
|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>)
|Creates a textbox input to enter an '''integer number'''. Limit the input range with the <code>min</code> and <code>max</code> attributes. (defaults: <code>min="0"</code> and <code>max="10"</code>; default value: 0)


<pre>
<source lang="xml">
<param name="name" type="int" min="1" max="100" gui-text="Some label text">1</param>
<param name="name" type="int" min="1" max="100" gui-text="Some label text">1</param>
</pre>
</source>


Use the attribute <code>appearance="full"</code> to create a slider with which the integer value can be adjusted dynamically over the full range.
Use the attribute <code>appearance="full"</code> to create a slider with which the value can be adjusted dynamically over the full range.
|[[File:INX_sample-int.png]]<br><br>[[File:INX_sample-int_full.png|240px]]
 
|
[[File:INX_sample-int.png|frame|none|default]]
 
[[File:INX_sample-int_full.png|frame|none|<code>appearance="full"</code>]]


|-
|-
! notebook
! 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.
|Creates a set of pages (aka tab control). The user can switch between individual pages. Each page can contain an arbitrary set of other Widgets and 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>
The '''returned value''' for <code>notebook</code> parameters is the value of the <code>name</code> attribute of the selected <code><page></code>. By default the first page is selected.
 
<source lang="xml">
<param name="name" type="notebook">
<param name="name" type="notebook">
     <page name="page_1" gui-text="First page">
     <page name="page_1" gui-text="First page">
         <param>...</param>
        
     </page>
     </page>
     <page name="page_2" gui-text="Second page">
     <page name="page_2" gui-text="Second page">
         <param>...</param>
        
     </page>
     </page>
</param>
</param>
</pre>
</source>
 
|[[File:INX_sample-notebook.png]]
|[[File:INX_sample-notebook.png]]


|-
|-
! optiongroup
! optiongroup
|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.
|Creates a control that allows to select one option '''one option''' from a set of multiple choices. The different choices are created with <code><option></code> elements.  
The '''returned value''' for <code>optiongroup</code> type parameters is the value of the <code>value</code> attribute of the selected <code><option></code>.
 
The '''returned value''' for <code>optiongroup</code> type parameters is the value of the <code>value</code> attribute of the selected <code><option></code>. By default the first <code><option></code> is selected.


<pre>
<source lang="xml">
<param name="name" type="optiongroup"
<param name="name" type="optiongroup" appearance="radio/combo"
gui-text="Some label text">
gui-text="Some label text">
   <option value="1">First option</option>
   <option value="1">First option</option>
   <option value="2">Second option</option>
   <option value="2">Second option</option>
</param>
</param>
</pre>
</source>
 
Set the attribute <code>appearance="radio"</code>{{added_in|1.0}} to render radio buttons (default). Set the attribute <code>appearance="combo"</code>{{added_in|1.0}} to display a drop-down list instead.<br>
|
[[File:INX_sample-optiongroup.png|frame|none|<code>appearance="radio"</code>]]
 
[[File:INX_sample-optiongroup-minimal.png|frame|none|<code>appearance="combo"</code>]]
 
|-
! path{{added_in|1.0}}
|Creates a control to choose a '''path'''. Paths can either be entered manually or by using the file chooser that can be opened using the ellipsis button.
 
The <code>mode</code> attribute allows to set behavior of the file chooser (i.e. if files or folders can be selected, if they need to exist previously and if multiple selections are possible). The <code>filetypes</code> attribute holds a comma-separated list of file extensions and restricts the selectable file types in file picker mode.
 
<source lang="xml">
<param type="path" name="varname" gui-text="label" mode="$mode" [filetypes="$filetypes"]/>
</source>
 
Possible values for the <code>mode</code> attribute:
* <code>file</code> - select a single existing file
* <code>files</code> - select multiple existing files
* <code>folder</code> - select a single existing folder
* <code>folders</code> - select multiple existing folders
* <code>file_new</code> - select a single new file name
* <code>file_new</code> - select a single new folder name
 
''Implementation note: Existence of paths are not checked before passing them to the extension, so extension authors need to implement suitable error handling, especially in case of manual path entry. For multiple selections the individual paths are joined using the pipe character ("|") and passed to the extension as a single string.''


Set the attribute <code>appearance="minimal"</code> to display a drop-down list instead of radio buttons.<br>
|[[File:INX path.png]]
<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
! 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)
|Creates a input to enter a '''string'''. Limit the number of characters the user is allowed to enter with the <code>max-length</code> attribute. (defaults: no character limit; default value: empty string)


<pre>
<source lang="xml">
<param name="name" type="string" gui-text="Some text label">Some default text</param>
<param name="name" type="string" gui-text="Some text label">Some default text</param>
</pre>
</source>
|[[File:INX_sample-string.png]]


|}
Set the attribute <code>appearance="multiline"</code>{{added_in|1.0}} to render a multi-line input. Line-breaks will be encoded as literal <code>\n</code> in the value passed to the extension.


== Localization of parameters ==
|
[[File:INX_sample-string.png|frame|none|<ul><li>default (top)</li><li><code>appearance="multiline"</code> (bottom)</li></ul>]]


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.
== Translation of widgets and parameters ==
* 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 =
<!-- TODO -->


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 ==
== Deprecated Functionality ==


<source lang="xml">
These widgets and parameters have been deprecated and should not be used anymore. Extension authors are encouraged to update their existing extensions wherever possible. Documentation is kept for authors that need to make their extensions backwards-compatible but please be aware that deprecated functionality '''''will''''' be removed eventually and without further notice.
<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 ==
{| class="wikitable" style="width:100%"


* The <code>name</code> attribute of tag <code><param></code> means the name of the argument (<code>--name=</code>) your command will get.
|+ Deprecated Parameters
* 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.
! Type
! Description / Code
! Result
 
|-
|-
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-notebook.png|border]]
! boolean{{deprecated_in|1.0}}
| It defaults to the first page.
|'''Replace with <code><param type="bool" …/></code> parameter.'''
|-
 
| colspan="2" | <source lang="xml">
Creates a checkbox to set a '''boolean value'''. Allowed values are <code>true</code> or <code>false</code> (default value: <code>true</code>).
<param type="notebook" name="varname" [indent="1"]>
 
    <page name="value" gui-text="label">
<source lang="xml">
        <!-- Any elements contained in the page go here -->
<param name="name" type="boolean" gui-text="Some label text">false</param>
    </page>
    <!-- You can add as many pages as you like -->
</param>
</source>
</source>
|}
*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 ===
|[[File:INX_sample-boolean.png]]


{| class="wikitable"
|+ To get a boolean value
|-
|-
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-boolean.png]]
! description{{deprecated_in|1.0}}
| The default value is <code>true</code>
|'''Replace with <code><label>…</label></code> widget.'''
|-
 
| colspan="2" |
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.
<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">
<source lang="xml">
<param type="int"  name="varname" gui-text="labal" [min="1"]  [max="10"]  [appearance="full"]  [indent="1"]/>
<param name="name" type="description">Some text here.</param>
<param type="float" name="varname" gui-text="label" [min="0.5"] [max="5.0"] [appearance="full"]  [indent="1"]/>
</source>
</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 ===
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.
<source lang="xml"><param name="name" type="description" appearance="header">Header</param></source>
 
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).


{| 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-lenght</code> to limit the number of characters you can get.
|[[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;


=== 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
! enum{{deprecated_in|1.0}}
|-
|'''Replace with <code><optiongroup appearance="combo" ></code> parameter.'''
| colspan="2" | Use one of:
<source lang="xml">
<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"/>
</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 ===
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.
The '''returned value''' for <code>enum</code> type parameters is the value of the <code>value</code> attribute of the selected <code><item></code>.


{| class="wikitable"
|+ To get a choice of predefined values
|-
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-optiongroup-minimal.png]]
| scope="col" style="width: 240px; background-color:#f0f0f0;" | [[File:INX_sample-optiongroup.png]]
| Default value is the first item
|-
| colspan="3" |
<source lang="xml">
<source lang="xml">
<param type="optiongroup" name="varname" gui-text="label" [appearance="combo"|appearance="radio"] [indent="1"]>
<param name="name" type="enum" gui-text="Some label text">
    <item value="value">Some text</item>
  <item value="1">First option</item>
    <!-- Other choices -->
  <item value="2">Second option</item>
</param>
</param>
</source>
</source>
|[[File:INX_sample-enum.png]]
|}
|}
* The default <code>appearance</code> is <code>"radio"</code>. The appearance <code>"combo"</code> is also valid.


=== Color ===
=== Other deprecations ===
{| class="wikitable"
 
|+ Get a hex color value
* Parameters of type <code>optiongroup</code>:
|-
:* <code>appearance="minimal"</code>{{deprecated_in|1.0}}
| 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]]
=== Deprecated localization functionality of parameters{{deprecated_in|1.0}} ===
| Default value is <code>#000000FF</code>
 
|-
To mark parameters to be included into the translation files variants of all relevant attributes and tag names existed that started with an underscore.
| colspan="2" style="vertical-align: top;" |
 
{|
While the underscored variants are still accepted for backwards-compatibility, translations are handled differently since Inkscape 1.0, which solved a number of limitations of the prior implementation, while also making the INX specification significantly cleaner. See [[Translation of widgets and parameters]] for details.
| style="padding-left: 6em;" | <b style="font-size:18px;">↑</b>With<b style="font-size:18px;">↑</b> the attribute <code>appearance="colorbutton"</code>
 
|-
<!-- TODO
| style="height: 100px;" | <b style="font-size:18px;">⇇</b> Without <code>appearance="colorbutton"</code>
 
|}
Use parameter elements to capture user input for further use by a script. The basic structure of the element is:
|-
 
| colspan=3 |
<source lang="xml">
<source lang="xml">
<param type="color" name="varname" [appearance="colorbutton" gui-text="label"] [indent="1"]/>
<param name="some_name" type="some_type">default value</param>
</source>
</source>
|}


The parameter value is an RGBA value in hexadecimal notation.
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.




To document:
* 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.


* 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 01:57, 8 May 2021

This page contains the reference documentation for INX widgets and parameters. Their primary goal is to make it easy to design GUIs for Inkscape Extensions using the built-in INX extension descriptor format, although (invisible) parameters can also be used for extensions that don't need to show a user interface.

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:

  • labelsince 1.0
  • hboxsince 1.0/vboxsince 1.0
  • separatorsince 1.0/spacersince 1.0
  • imagesince 1.0
  • 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:

  • boolsince 1.0
  • int
  • float
  • string
  • pathsince 1.0
  • optiongroup
  • notebook
  • color

If a parameter is made invisible (see gui-hidden attribute in the next section) it will not be shown in the GUI but it's value is still passed to an extension. This is useful if you want to hardcode parameter value the user should not be able to change. If all parameters (and potential widgets) are invisible, Inkscape will not show a GUI and execute the extension immediately instead, but will still pass the values of the invisible parameters.

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 Sets indentation level of the parameter. Increasing indentation adds padding to the start of the line.
 
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 Parameters below.
gui-text (text) - required (visible parameters),
optional (hidden parameters + notebooks)
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.

Widgets

Parameter reference
Type Description / Code Result
hbox/vbox Creates a container for other widgets. No visual rendering but provides a possibility to align and layout other widgets. Child widgets are either added in horizontal (hbox) or vertical (vbox) direction.
<hbox></hbox>
<vbox></vbox>

A box can contain an arbitrary number of other widgets and parameters (including other boxes) to fine-tune the layout of the GUI.

Note: When you start with an empty extension GUI, you're basically starting with a vbox. Also notebook pages behave like vertically oriented boxes.

INX sample-separators.png


image Creates a widget displaying an image. The content of the <image> node specifies the path of the image file (ideally specify a path relative to the .inx file itself).
<image>path/to/image.svg</image>

By default the image will be rendered at it's actual size. Use attributes width/heigth to override the default size (in this case both attributes need to be supplied; units are pixels).

Implementation note: Loadable image formats are determined by GdkPixbuf and therefore system-specific. PNG should always work and is the safe choice. SVG should mostly work and is the preferred choice for obvious reasons.

INX sample-image.png

label Creates a widget showing text. The content of the <label> node corresponds to the text content that will be rendered.
<label>Some text here.</label>

Note: Labels are intended to provide additional information / help. For labeling parameters use the gui-text attribute; for short help texts that are specific to a single parameter prefer gui-description which will render as a tooltip.

  • When setting the attribute appearance="header" the text is styled as a heading and can be used as another possibility to group parameters.
  • When setting the attribute appearance="url" the text is rendered as a clickable link.
    Note: The text is escaped and used as the link target as-is. Creating a link text that differs from the URL is prevented for security reasons.
  • When setting the attribute xml:space="preserve" any white-space (spaces, tabs, line-breaks, etc.) in the label will be preserved, allowing to format the label accordingly. By default all leading/tailing and intermediary whitespace is collapsed into a single space character.
Different label types (in order):
  • default
  • appearance="header"
  • appearance="url"
  • xml:space="preserve"
separator Creates a separator for visual separation of other widgets. Renders as a horizontal/vertical line.
<separator />

The direction of the separator will automatically adjust depending on direction of the current container (vertical for "empty" extension GUIs and notebook pages; vertical/horizontal for vbox and hbox respectively).

INX sample-separators.png

spacer Creates a spacer for visual separation of other widgets. No visual rendering but provides variable spacing.
<spacer />

The direction of the spacer will automatically adjust depending on direction of the current container (vertical for "empty" extension GUIs and notebook pages; vertical/horizontal for vbox and hbox respectively).

Use the size attribute to set the spacing in pixels (default: size="10"). The special value expand results in a spacer that grows dynamically and always uses up as much space as possible (useful for aligning content).

Different spacer types:
  1. default
  2. size="20"
  3. size="expand"

Parameters

Parameter reference
Type Description / Code Result
boolsince 1.0 Creates a checkbox to set a boolean value. Allowed values are true or false (default value: true).
<param name="name" type="boolean" gui-text="Some label text">false</param>
INX sample-boolean.png
color Creates a control to select an RGBA color value. Values should be given in hexadecimal notation, e.g. 0xff0000ff for red with full opacity (default value: 0x000000ff)
<param name="name" type="color" gui-text="Some label text">0x000000ff</param>

Use appearance="colorbutton" for a simple button that opens a simplified color picker. Otherwise a full ColorNotebook will be rendered.

Implementation note: colors values are internally treated as 32-bit unsigned integers (unsigned long). Acceptable default values include everything the standard library function strtoul understandssince 1.0. Earlier Inkscape version only handled decimal numbers. The value passed to the extension script will also be a decimal number.

default
appearance="colorbutton"
float Creates a 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. (defaults: min="0", max="10" and precision="1"; default value: 0)
<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 value can be adjusted dynamically over the full range.

default
appearance="full"
int Creates a textbox input to enter an integer number. Limit the input range with the min and max attributes. (defaults: min="0" and max="10"; default value: 0)
<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 value can be adjusted dynamically over the full range.

default
appearance="full"
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 Widgets and Parameters. Individual pages are created with the <page> element.

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

<param name="name" type="notebook">
    <page name="page_1" gui-text="First page"></page>
    <page name="page_2" gui-text="Second page"></page>
</param>
INX sample-notebook.png
optiongroup Creates a control that allows to select one option one option from a set of multiple choices. The different choices are created with <option> elements.

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

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

Set the attribute appearance="radio"since 1.0 to render radio buttons (default). Set the attribute appearance="combo"since 1.0 to display a drop-down list instead.

appearance="radio"
appearance="combo"
pathsince 1.0 Creates a control to choose a path. Paths can either be entered manually or by using the file chooser that can be opened using the ellipsis button.

The mode attribute allows to set behavior of the file chooser (i.e. if files or folders can be selected, if they need to exist previously and if multiple selections are possible). The filetypes attribute holds a comma-separated list of file extensions and restricts the selectable file types in file picker mode.

<param type="path" name="varname" gui-text="label" mode="$mode" [filetypes="$filetypes"]/>

Possible values for the mode attribute:

  • file - select a single existing file
  • files - select multiple existing files
  • folder - select a single existing folder
  • folders - select multiple existing folders
  • file_new - select a single new file name
  • file_new - select a single new folder name

Implementation note: Existence of paths are not checked before passing them to the extension, so extension authors need to implement suitable error handling, especially in case of manual path entry. For multiple selections the individual paths are joined using the pipe character ("|") and passed to the extension as a single string.

INX path.png
string Creates a input to enter a string. Limit the number of characters the user is allowed to enter with the max-length attribute. (defaults: no character limit; default value: empty string)
<param name="name" type="string" gui-text="Some text label">Some default text</param>

Set the attribute appearance="multiline"since 1.0 to render a multi-line input. Line-breaks will be encoded as literal \n in the value passed to the extension.

  • default (top)
  • appearance="multiline" (bottom)

Translation of widgets and parameters

Deprecated Functionality

These widgets and parameters have been deprecated and should not be used anymore. Extension authors are encouraged to update their existing extensions wherever possible. Documentation is kept for authors that need to make their extensions backwards-compatible but please be aware that deprecated functionality will be removed eventually and without further notice.

Deprecated Parameters
Type Description / Code Result
booleandepr. 1.0 Replace with <param type="bool" …/> parameter.

Creates a checkbox to set a boolean value. Allowed values are true or false (default value: true).

<param name="name" type="boolean" gui-text="Some label text">false</param>
INX sample-boolean.png
descriptiondepr. 1.0 Replace with <label>…</label> widget.

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"


 


enumdepr. 1.0 Replace with <optiongroup appearance="combo" …> parameter.

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

Other deprecations

  • Parameters of type optiongroup:
  • appearance="minimal"depr. 1.0

Deprecated localization functionality of parametersdepr. 1.0

To mark parameters to be included into the translation files variants of all relevant attributes and tag names existed that started with an underscore.

While the underscored variants are still accepted for backwards-compatibility, translations are handled differently since Inkscape 1.0, which solved a number of limitations of the prior implementation, while also making the INX specification significantly cleaner. See Translation of widgets and parameters for details.