Skip to content

Making a Scriptable UI

p0nce edited this page Jan 6, 2022 · 23 revisions

Since v12.3.0, you can use Wren as an "imperative CSS" to have live-coding in the UI creation process.
This article explains how to add Wren scripting to your plug-in.

Pros and cons

Should you use Wren scripting in your Dplug product?

  • Pros:

    • Live-code UI widgets graphical properties, and see the result immediately without rebuild.
    • Your UI code contains large amounts of setting graphical properties. Speed-up development time.
  • Cons: Your final product will:

    • have about 200kb of additional binary code.
    • use use 1 to 10 mb of additional memory.
    • slower UI opening and resize, because of scripting overhead.

Still, the benefits of seeing directly your change on screen is interesting, as it should surely influence the result positively.

What can you do with scripting?

See plugin.wren int he Distort example.

  • The available exposed API is ui.wren. This is a Dplug-specific Wren API implemented in the dplug:wren-support sub-package.

  • The other imported Wren module is widgets, whose code is auto-generated based on what widgets were exposed to Wren.

How to enable Wren scripting in your UI

Limitations