JSFX UI Generator

This is a tool to generate JSFX UIs (using my UI library) based on slider definitions.

It's not intended to be full-featured UI editor, and it only produces limited layouts: rows, and groups within those rows. The groups/rows have to be specified using simple comment annotations. It might not work on older browsers.

However, it's hopefully an easy way to get some shinier controls on a JSFX, and the individual controls could be copied and used in a more customised layout if needed.

To use:

  1. Place ui-lib.jsfx-inc in the same directory as your effect
  2. Add:
    import "ui-lib.jsfx-inc"
    to your header (e.g. underneath the sliders)
  3. Allocate the UI library some of the memory buffer in @init, e.g. 
    @init
freemem = 0; // some empty section of the memory buffer
freemem = ui_setup(freemem); // returns the first index it's not using
  4. Paste your code (or just the headers) below, with these annotations between the sliders:
    // ui:row
    starts a new row
    // ui:group
    starts a new group (within a row)
    // ui:group name=Some Group Name
    gives your group a name
    // format=%i, bias=3, title=New Title
    sets dial parameters for next control
    // inverted=0, columns=3
    sets switch/selector/popup parameters for next control
  5. Click "Generate"
  6. Copy the generated code displayed below as your @gfx section

Updating existing code

If you enter JSFX which already has a UI generated by this tool, it will replace the generated section and return the result.

This means once you've done all of the above, you can keep developing your effect (including custom graphics), and occasionally come back to update the UI.

Including existing graphics code:

  1. Move any existing graphics code to a function with these arguments: 
    function custom_gfx_func(gfx_w, gfx_h, mouse_x, mouse_y) (
	// previous @gfx code
);
  2. add this annotation to the sliders/header: 
    // ui:gfx function=custom_gfx_func, height=300

The custom graphics will draw below the generated controls. This is done using an off-screen buffer (gfx_dest) so if the code also uses its own off-screen buffers, you'll need to make sure it draws back to the original buffer (instead of gfx_dest = -1).

The height parameter can be a percentage, or negative (in which case the controls are fixed-height, and this custom section scales).

You can also specify a specific off-screen buffer to use (e.g. buffer=19), or whether to use a finish over the top (e.g. finish=technical).

Slider changes:

Because the sliders are no longer being handled by the built-in sliders, we might miss out on @slider updates when the user changes them. If this is a problem, you can avoid this by:

  1. Define a flag, e.g. needs_slider_update.
  2. Move any existing @slider code to a function (in @init) with no arguments, which resets this flag: 
    function slider_update_function() (
	needs_slider_update = 0;

	// previous @slider code
);
  3. In @gfx (right at the end), set this flag if the user has interacted at all: 
    ui_interacted() ? needs_slider_update = 1;
  4. Check this flag in @block, and call your function if needed: 
    @block
needs_slider_update ? slider_update_function();

Compact layout

If you have a lot of controls and want a more compact layout, you can add:

// ui:layout compact=1

This produces a layout that lets you fit more rows in.

Custom Theme/Colours

You can do some (fairly basic) customisation using a PNG template:

  1. Create a bitmap according to the template - there's an example theme in there already, so you can see how it works.
  2. Place this bitmap in the same directory as your effect, and link to in the header: 
    filename:0,theme-cyan.png
  3. Next, place this annotation in the slider - the bitmap-simple parameter should match the the filename index: 
    // ui:layout bitmap-simple=0
filename:0,theme-cyan.png

The basic layout is fixed, but you can change the colours and gloss effects.

JSFX source:

Result: