Skip to content

NanoVG

The DPF wrapper is able to generate a custom UI using the PDVG framework that implements a set of NanoVG widgets. This is the same graphics library used by plugdata and this UI generator tries to match plugdata rendering as close as possible.

See the examples project for various implementations of NanoVG plugins.

Settings

You can enable the NanoVG export by setting "enable_ui": 2. The size will be automatically updated based on the visible UI size of your main patch canvas.

{
    "dpf": {
        "enable_ui": 2
    }
}

Objects

Object position, size, labels, colors, and other object settings will be translated to the generated GUI. For proper subpatch support you currently need to use our fork of DPF.

Note

The generator will only create static rendering. It is not possible to change object positions or settings using messages. The UI will be completely separate from the patch DSP.

Parameters

You need to make sure that all parameters are associated with PD Graphical objects by using the object receive config. Set the complete configuration, with min/max/default/type, as you would normally on a receiver. Objects need to be visible in the main patch canvas, otherwise you will get errors. Send parameters, useful as read-only indicators, are currently not supported.

  • Number box (nbx)
  • Vertical slider (vsl)
  • Horizontal slider (hsl)
  • Vertical radio buttons (vradio)
  • Horizontal radio buttons (hradio)
  • Bang (bng)
  • Toggle (tgl)
  • Knob (knob, else/knob)
  • Float atom (floatatom)

Other objects

  • Canvas (cnv)
  • Comment (text)

Theme

You can optionally set a theme and theme colors. When using the theme the compiler will override all object color settings to match plugdata default object colors. Multiple themes can be included in the config and in the future it will be possible to switch themes in the generated UI.

All theme options are optional and can set a specific global corner radius and various colors. Color names can be an RGB decimal tuple, hexadecimal RGB value or a human readable color name.

{
    "dpf": {
        "ui_theme_set": true,
        "ui_theme": "default",
        "ui_themes": {
            "default": {
                "obj_corner_radius": 2.75,
                "cnv_color": [100, 20, 50],
                "cnv_txt_color": "#ffffff",
                "io_color": "indianred",
                "bg_color": "cadetblue",
                "sel_color": "#123456",
                "com_txt_color": "#666666",
                "out_color": "black"
            }
        }
    }
}