wearekuva / oui Goto Github PK
View Code? Open in Web Editor NEWObjects go in, UI comes out
License: MIT License
Objects go in, UI comes out
License: MIT License
There should be a simple way to validate custom controls and provide warnings if not
The oui
is correctly being exported, but no other functions are exposed on build.
annotate
, color
, xypad
let foo = {a: 0.5}
let gui = oui.datoui()
let fooFolder = gui.addFolder({label: 'foo'})
fooFolder.add(foo, 'a', {min: 0, max: 1})
As of Preact 5.2, Preact-svg is no longer needed
Any plans on events support? Like on update?
The Combobox api, specifically the options is confusing and unintuitive. It's not clear what data is accepted
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
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?
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.
Oui lends itself well to a chrome extension. Same api, but with a hook that renders the UI into a dev tools panel
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
If a min or max constraint of zero is declared the attribute does not get set on the number input.
If the initial value of a slider is 0 (or rounds to 0) the slider input stays empty on first render.
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.
It doesn't seem to be a way to add additional components with dat.GUI style
Need to check properties and their type annotations are valid, and warn when not
When these are in folders it causes visibility issues
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.
Hi,
Is it possible to delete a panel ? Because I can't find anything about it...
Thanks,
Etienne.
Wondering if maxLength
can either be configurable or removed; six characters is pretty restrictive for text.
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});
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 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']
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
Using a slider control without a NumericStepper causes it to be displayed without a label.
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.
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
”…
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({})
Submit a PR to cdnjs
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.