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

From Inkscape Wiki
Jump to navigation Jump to search
(→‎Types: rewrite and redesign)
 
(75 intermediate revisions by 8 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:
 
<code><pre>
<param name="some_name" type="some_type">default value</param>
</pre></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 ==
===type===
Gives the type of parameter (int|float|string|boolean|enum|notebook|description|optiongroup|color).
 
===name===
Identifier of the parameter.
 
===gui-text===
Label of the parameter.
 
Not used by the notebook parameter (you can set the attribute, but it doesn't show in the dialog).
 
===gui-description===
Tooltip of the parameter.
 
===gui-hidden===
If true, hide the parameter in the GUI (default to false).
 
== 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>.
 
<code><pre>
<param name="name" type="boolean" gui-text="Some label text">false</param>
</pre></code>
|[[File:INX_sample-boolean.png]]
 
|-
! 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>)
 
<code><pre>
<param name="name" type="int" min="1" max="100" gui-text="Some label text">1</param>
</pre></code>
 
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]]
 
|-
! 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>)
 
<code><pre>
<param name="name" type="float" precision="3" min="0" max="9999"
gui-text="Some label text">1.234</param>
</pre></code>
 
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]]
 
|-
! 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)
|[[File:INX_sample-string.png]]
 
<code><pre>
<param name="name" type="string" gui-text="Some text label">Some default text</param>
</pre></code>
 
|-
! 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>.
 
<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></code>
|[[File:INX_sample-enum.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>.
 
<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></code>
 
Set the attribute <code>appearance="minimal"</code> to display a drop-down list instead of radio buttons.<br>
<small>''(Open question: Is there a notable difference compared to <code>enum</code> type parameters in this case?)''</small>
|[[File:INX_sample-optiongroup.png]]<br><br><br><br><br>[[File:INX_sample-optiongroup-minimal.png]]
 
|-
! color
|Creates a control to select a '''color value'''.
The '''returned value''' is an RGBA-value.
 
<code><pre>
<param name="name" type="color"></param>
</pre></code>
|[[File:INX_sample-color.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 <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>.
 
<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></code>
|[[File:INX_sample-notebook.png]]
 
|-
! description
|Creates a text element.
 
<code><pre>
<param name="name" type="description">Some text here.</param>
</pre></code>
 
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.
<code><pre><param name="name" type="description" appearance="header">Header</param></pre></code>
 
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;
|}


[[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.