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

From Inkscape Wiki
Jump to navigation Jump to search
 
(54 intermediate revisions by 7 users not shown)
Line 1: Line 1:
Here you will find the different parameter elements you may use in your .inx files (Inkscape Extensions)
{{Template:MovedToOtherSite|topic=Extension development|new_url=https://inkscape.gitlab.io/extensions/documentation/authors/inx-widgets.html|new_site=GitLab}}


== Introduction ==
----
Use parameter elements to capture user input for further use by a script. The basic structure of the element is:
 
<source lang="xml">
<param name="some_name" type="some_type">default value</param>
</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.
 
== Common attributes ==
 
=== gui-description ===
Tooltip of the parameter, which is shown when the user hovers the mouse cursor over the active area of the parameter in question.
 
To enable translations for this string use the underscore variant (<code>_gui-description </code>, see [[#Localization of parameters|localization of parameters]] below for details).
 
=== gui-hidden ===
If the value is set to <code>true</code> the parameter is hidden from the GUI (defaults to <code>false</code>).
 
=== gui-text ===
Label of the parameter.
 
To enable translations for this string use the underscore variant (<code>_gui-text</code>, see [[#Localization of parameters|localization of parameters]] below for details).
 
=== indent ===
Sets indentation level of the parameter (e.g. <code>indent="1"</code>).
 
=== name ===
The value of the <code>name</code> attribute is 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 ===
The <code>type</code> attribute determines the type of the parameter (for tags <code><param></code>) (possible values are <code>boolean, int, float, string, enum, optiongroup, color, notebook, description</code>), see the extensive description of [[#Available types|available types]] below.
 
== Available types ==
 
{| class="wikitable" style="width:100%"
 
|-
! Type
! Description / Code
! 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]]
 
|-
! 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>
<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.
<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;
 
|-
! 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
|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>)
 
<pre>
<param name="name" type="float" precision="3" min="0" max="9999"
gui-text="Some label text">1.234</param>
</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]]
 
|-
! 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>)
 
<pre>
<param name="name" type="int" min="1" max="100" gui-text="Some label text">1</param>
</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]]
 
|-
! 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.
The '''returned value''' for <code>optiongroup</code> type parameters is the value of the <code>value</code> attribute of the selected <code><option></code>.
 
<pre>
<param name="name" type="optiongroup"
gui-text="Some label text">
  <option value="1">First option</option>
  <option value="2">Second option</option>
</param>
</pre>
 
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>
 
== INX Documentation for 1.0 ==
 
It the following sections, When you see <code>[name="value"]</code>, it means that <code>name</code> is an optional attribute. <code>att="val1"|"val2"</code> means eithe <code>"val1"</code> or <code>val2</code> are valid values for <code>att</code>. The <code>"1"</code> in <code>indent="1"</code> attributes can be changed by the indentation level you want.
 
=== Tags for the layout ===
 
<source lang="xml">
<label [indent="1"] [appearance="header"|"url"]>Some text</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 attribute <code>name</code> of tag <code>param</code> means the name of the argument <code>--name=</code> your command will get.
 
==== Tab view of pages ====
These can help with layout, but give the info of which page was selected as an argument to your extension. At the same time, it give you arguments of the <code>param</code> on each page and having the same name for <code><param></code>
 
<source lang="xml">
<param type="notebook" name="varname" [indent="1"]>
    <page name="value" gui-text="label">
        <!-- Any elements contained in the page goes here -->
    </page>
    <!-- You can add as many pages as you like -->
</param>
</source>
 
==== For checkbox. ====
 
You can set a default 1 as true or 0 as false value:
 
<source lang="xml">
<param type="boolean" name="varname" gui-text="{text}" [indent="1"]>1</param>                                           
</source>
 
==== For numerical input spinner. ====
 
With the attribute <code>appearance="full"</code> also use a full width slider. The min and max take numeric values.
 
<source lang="xml">
<param type="int"  name="varname" min="1" max="10" gui-text="labal" [appearance="full"]  [indent="1"]/>
<param type="float" name="varname" min="0.5" max="5.0" gui-text="label" [appearance="full"]  [indent="1"]/>
</source>
 
==== Textbox ====
 
<source lang="xml">
<param type="string" name="varname" gui-text="label" [indent="1"]>some text</param>
</source>
 
==== Path chooser ====
 
<source lang="xml">
<param type="path" name="varname" mode="file"|"files"|"file_new" filename="fileExt,moreExt" gui-text="label" [indent="1"]>/some/path.ext</param>
<param type="path" name="varname" mode="folder"|"folders"|"folder_new" filename="fileExt,moreExt" gui-text="label" [indent="1"]>/some/path.ext</param>
</source>
 
==== A choise in a list ====
Presented as combobox or radio buttons.
 
<source lang="xml">
<param type="optiongroup" name="varname" gui-text="label" appearance="combo"|"radio" [indent="1"]>
    <item value="value">Some text</item>
    <!-- Other choices -->
</param>
</source>


[[Category:Developer Documentation]]
[[Category:Developer Documentation]]
[[Category:Extensions]]
[[Category:Extensions]]

Latest revision as of 19:55, 3 February 2023

The Inkscape Wiki is no longer used to host information about Extension development.

You can now find related information at GitLab.

This page is kept for historical reasons, e.g. to document specific decisions in Inkscape development.

Retrieved from "https://wiki.inkscape.org/wiki/index.php?title=Extensions:_INX_widgets_and_parameters&oldid=122085"