Subject: Forum activity on: Dynamic GUI example Inkscape extensions with GTK
From: [email-masked]
To: [email-masked]
Date: Mon, 19 Aug 2024 12:46:27 -0000

Dear cosmobird,

A post has been edited on the topic "Dynamic GUI example Inkscape extensions with GTK" by Nikki.Smith:
---
I've been writing my first Inkscape extension, and as part of the learning process I've made a handful of small examples that demonstrate some user interface widgets. I'd very much appreciate any comments, suggestions or bug reports as I'm new to both GTK and Python. Hopefully they'll also be useful to other developers looking to write an extension 😀Most extensions to Inkscape use an .inx file that describes a static user interface, then a Python script is run one time when the user clicks "Apply".To create a dynamic UI (that changes as the user clicks buttons, selects from dropdown menus, etc) you can build it in GTK using a Python script that runs immediately. Requires Inkscape v1.0 or newer.These short examples demonstrate a handful of functions in GTK+ 3. Note that the .inx file for each dynamic extension must use:  <effect implements-custom-gui="true">Full details of inkex and Python GTK:inkex documentationThe Python GTK+ 3 TutorialHow to installTo manually install these extensions, download and unpack the archive file. Copy the 'dynamic_examples' folder to the location listed by the Inkscape menu:  Edit > Preferences > System: User extensionsFor Windows users this will be something like:  C:\Users\USERNAME\AppData\Roaming\inkscape\extensionsRestart Inkscape and the new extensions will be available.Button (action) + Label (text)A minimal dynamic extension. Everything is wrapped inside the new class ButtonLabel(), derived from inkex.EffectExtension. The effect() method is called as soon as the extension is run.A window is created with Gtk.Window(), setting the title, and links a handler to exit if the close icon is clicked. See https://python-gtk-3-tutorial.readthedocs.io/en/latest/introduction.htmlLayout uses a vertical Gtk.Box() to separate the text label and button. See https://python-gtk-3-tutorial.readthedocs.io/en/latest/layout.htmlThe script counts up the total number of shape elements in the current document and displays it as text with Gtk.Label(). See https://python-gtk-3-tutorial.readthedocs.io/en/latest/label.html and https://inkscape.gitlab.io/extensions/documentation/source/inkex.elements._base.htmlFinally a Gtk.Button() is created, with a click handler as another way to exit the script. See https://python-gtk-3-tutorial.readthedocs.io/en/latest/button_widgets.htmlSpinButton (number) + RadioButton (tick box)Demo of the Gtk.SpinButton() widget for numeric entry, with up/down arrows. Uses Gtk.Adjustment() to set lower/upper bounds & step values. See https://python-gtk-3-tutorial.readthedocs.io/en/latest/button_widgets.htmlTwo Gtk.RadioButton() in a group are used to choose between metric and 'freedom' units of distance.Layout uses a vertical Gtk.Box(), and again for two horizontal rows.Some of the labels have simple HTML markup using Gtk.Label().set_markup()Nothing is read or changed in the Inkscape document.ColorButton + LinkButton (URL)Demo of the Gtk.ColorButton() for simple colour selection. See https://lazka.github.io/pgi-docs/Gtk-3.0/classes/ColorButton.htmlThe script adds up the total length of path elements with that stroke colour and displays it as text. Just from the currently selected objects, or the full document. Objects like rectangles, circles & text are not included unless converted to paths first.Getting the actual length of each path is a bit involved, using built-in functions to convert into "a predictable list of cubic bezier curves". See https://inkscape.gitlab.io/extensions/documentation/source/inkex.paths.htmlNote how the colour button returns Gdk.RGBA (red/green/blue channels are 0.0→1.0) whereas document colours are inkex.colors.Color (0→255).Also displays a clickable link using Gtk.LinkButton(). See https://python-gtk-3-tutorial.readthedocs.io/en/latest/button_widgets.htmlComboBoxes (dropdown menus)Demo of the Gtk.ComboBox() widget for two dropdown menus in a Country→Cities hierarchy. See https://python-gtk-3-tutorial.readthedocs.io/en/latest/combobox.htmlThe city dropdown is rebuilt whenever a different country is selected, and a (Unicode) text label is updated when a different city is selected.The dropdowns don't need to be hard-wired in the script: they could be read at runtime from a database or web API, for example.Layout uses Gtk.Grid() for a 2×2 grid to align the dropdown menus. See https://python-gtk-3-tutorial.readthedocs.io/en/latest/layout.htmlThere is a separate "Apply" button that runs an (empty) method. This is where an extension would normally perform some action to the document.Nothing is read or changed in the Inkscape document.
----
Link: http://www.inkscape.org/forums/extensions/dynamic-gui-example-inkscape-extensions-with-gtk/#c73978

All the best,
 Inkscape.org Website

~~~~~~~~~~~~~~~~~~~~~~~~~
Unsubscribe:

If you do no longer want to receive these messages, you can edit your subscriptions and notification settings at http://www.inkscape.org/alerts/settings/.