wearekuva/oui

Objects go in, UI comes out

oui's Issues

Controls should be validated

There should be a simple way to validate custom controls and provide warnings if not

Annotate, and components are not being exported

The oui is correctly being exported, but no other functions are exposed on build.

annotate, color, xypad

Add to CDNJS

folder is no longer working

  let foo = {a: 0.5}
  let gui = oui.datoui()
  let fooFolder = gui.addFolder({label: 'foo'})
  fooFolder.add(foo, 'a', {min: 0, max: 1})

Remove dependancy on preact-svg

As of Preact 5.2, Preact-svg is no longer needed

ColorPicker cannot select black

events support?

Any plans on events support? Like on update?

The width of the input field is too narrow and it makes it unusable.

In Windows Chrome, the input field comes with a up/down button that basically block everything:

Simplify Combobox api

The Combobox api, specifically the options is confusing and unintuitive. It's not clear what data is accepted

Every call to `Oui` replaces the previous ui

Oui is essentially stateless meaning each call to Oui redraws the UI and any replaces whatever controllers were currently there.

let a = { num : 5 }
let b = { str : 'string' }

oui( a )
// some time later...
oui( b )

The render tree now display a text input field. The sliders one has been overridden

Unable to determine change per component

Currently it is quite difficult to determine what has changed when a panel callback is invoked as only the api array is passed to the callback.
Setting an onChange callback via the annotation object is also impossible as it gets replaced when the control component is rendered.

Are there any alternatives I have missed?

Hex code input support for Color Picker

It will be great if Color Picker can provide a Hex code input field. GUI sometimes serve as a way to allow the designer to adjust the color and feedback to the developer. Using Hex code input field makes it way easier to read/write.

Add Chrome Devtools Extension

Oui lends itself well to a chrome extension. Same api, but with a hook that renders the UI into a dev tools panel

Fail to add 2 items with the same property name with dat.GUI style

For example:

    var gui = oui.datoui();
    oui.annotate({label: 'foo'})(gui.add( uniforms.u_foo, 'value'), 'value');
    oui.annotate({label: 'bar'})(gui.add( uniforms.u_bar, 'value'), 'value');

Color control doesn't support hex value

Color control doesn't support hex value

NumericStepper: min/max attribute not set if attribute equals zero

If a min or max constraint of zero is declared the attribute does not get set on the number input.

Slider input not initialized if value rounds to zero

If the initial value of a slider is 0 (or rounds to 0) the slider input stays empty on first render.

Several controls are not exposed in dist

Currently the only exposed controls are: ColorPicker, ComboBox, Graph, XYPad.

NumericStepper, Dial or Button (and possibly several others, e.g. TextInput) are still missing and can therefore not be set via datoui.

Color picker doesnt work properly when you drag and release outside the color panel

Additional components with dat.GUI style

It doesn't seem to be a way to add additional components with dat.GUI style

Annotated properties should be validated

Need to check properties and their type annotations are valid, and warn when not

xypad and graph have transparent background

When these are in folders it causes visibility issues

Support ENV flags

Oui is generally used for development and not production. This should be totally optional, but it would be useful to return a noop if production flags are set.

Delete a panel

Hi,

Is it possible to delete a panel ? Because I can't find anything about it...

Thanks,
Etienne.

`TextInput` `maxLength`

Wondering if maxLength can either be configurable or removed; six characters is pretty restrictive for text.

Open folder by default

It would be nice to be able to open the folder by default like in dat.GUI:

var gui = oui.datoui();
var fooFolder = gui.addFolder('foo');
fooFolder.open();

or

var gui = oui.datoui();
var fooFolder = gui.addFolder({label: 'foo', isOpen: true});

Maintain folder state when parent folder is collapsed

Currently folders lose their open state when the parent folder is collapsed. I believe it would be desirable for them to maintain and restore their state when the parent folder is opened again.

Use case: A user may for example close the topmost folder to quickly hide the UI and reveal the underlying screen. When uncollapsing he wants to see the UI in the state it was earlier, without having to reopen each single nested folder.

For control property, if it is a string, treat it as the mapping id

For example:
gui.add( settings, 'color', {control: oui.controls.ColorPicker});

It seems more user friendly to accept string like:
gui.add( settings, 'color', {control: 'ColorPicker'});

If it is a string, it will look for the reference of oui.controls['ColorPicker']

dat.GUI style constraint shorthand

At the moment, adding constraints to the dat.GUI style item is pretty redundant

var gui = oui.datoui();
oui.annotate({min: 0, max: 5})(gui.add( settings, 'speed'), 'speed');

I would recommend using an optional third argument which is closer to the dat.GUI api like this:

var gui = oui.datoui();
gui.add( settings, 'speed', {min: 0, max: 5} );

open: false doesn't work on the root panel

open: false doesn't work on the root panel

Slider has no label when numericStepper disabled

Using a slider control without a NumericStepper causes it to be displayed without a label.

If no `step` property is set for the Slider, one should be calculated

Currently the Slider control uses a fixed step size, which is impractical for small ranges. Therefore, if no step is defined explicitly, then it's assumed the user expects a continuous range of values.

Examples, more documentation

Just from a quick look through the repository I was not able to see how I would start with Oui…

Could you add some example code (e.g. for the 4 panels shown in the pictures) and some more documentation? Especially about the structure of the object that is referred to like “UI declared in obj”…

Deprecate the default Oui panel

The default oui.oui() Master panel is being deprecated. It adds unnecessary cruft and confuses the api.

Use the panel interface instead;

const panel = oui.panel()
panel({})

Add to CDN.js

Submit a PR to cdnjs

example of using color?

I'm having trouble figuring out how to annotate with a color picker. The link in the additional-controls documentation is a 404, and the documentation for annotations is unfinished. I really like the look of this library though, and am happy to help improve it however I can!