Xaval v0.4

Introducing Widgets

Support for widgets has finally been implemented, albeit not yet fully-featured. By widgets I am referring to UI nodes that represent some computation and allow the user to tune parameters triggering the computation in real time. The result is that you're able to tweak slider values and see their effect on the output image immediately.

A new object widgets has been added to the Xaval coding environment, it is an instance of WidgetManager, which allows you to define widget templates and add widgets on screen. The first step is to define a WidgetTemplate via the widgets.define(name, opts) method. A WidgetTemplate specifies which parameters are available to tweak and inputs are expected, the actual computation that will be performed by the widget is defined in the onUpdate(ctx) function. The ctx parameter contains data about the widget's current state, like current parameter values and inputs (ctx.params, ctx.inputs etc.).

Widget instances are create using the WidgetTemplate.create() method. An instance represents an actual widget. You can create multiple widgets from the same template, while they would effectively run the same computation, they are actually independent, so you can pass different inputs to different widgets and set their parameters independently.

Finally, to display a widget use the widgets.show(widget) method. You can drag the widget around the screen. The drag-and-drop is a bit clunky though.

Widgets expose an observable (widget.observable) that can be used to get notified whenever its output has been updated, this can be used to sync the widget output with the image viewer in real time.

Limitations

There's still a lot of work to be done as far as widgets are concerned, these will be implemented in future updates:

• No input or parameter data validation
• More controls should be supported (only sliders are supported at the moment)
• There's only one output per widget
• A simpler API for connecting a widget to input sources/output destinations, akin to piping streams
• Add missing functionality to WidgetManager (e.g. retrieving a template by name or widget by id, hiding and removing widgets, etc.)
• A GUI alternative for managing widgets (defining templates, creating widgets, etc.)
• A predefined library of useful widget templates or a way to save templates for future use
• and probably more ...

UI Changes

I made some noticeable UI changes as well. The code editor now has more real estate after the editor header was removed. The "Run" button was moved to the main header. The main header now also has a lighter background. I changed the font from Roboto to Montserrat. And finally, I made minor improvements to the image import to prevent showing an image with a broken link by default. The file input was also removed from view and now it's triggered by clicking on the image.