add TextareaController,input element read-only, password, recursive modify the css... etc
forejerk opened this issue · comments
Hi.dat-gui is a great project.
If anyone is interested, I will publish the code.
I have merged several pull requests and added new controllers and features.
example.html
var obj = {
message: 'Hello World',
displayOutline: false,
maxSize: 6.0,
speed: 5,
height: 10,
noiseStrength: 10.2,
growthSpeed: 0.2,
type: 'three',
explode: function () {
alert('Bang!');
},
color0: "#ffae23", // CSS string
color1: [ 0, 128, 255 ], // RGB array
color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
color3: { h: 350, s: 0.9, v: 0.3 }, // Hue, saturation, value
text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
imagePath1: 'https://images.unsplash.com/photo-1516222338250-863216ce01ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=467&q=50',
value: 5,
recursive:{
name:'a',
children:[
{
name:'b',
children:[
]
}
]
},
tooltip:'hello world'
};
var gui = new dat.gui.GUI();
gui.remember(obj);
gui.add(obj, 'message');
gui.add(obj, 'displayOutline');
gui.add(obj, 'explode');
gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
gui.add(obj, 'height').step(5); // Increment amount
// Choose from accepted values
gui.add(obj, 'type', [ 'one', 'two', 'three' ] );
// Choose from named values
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
var f1 = gui.addFolder('Colors');
f1.addColor(obj, 'color0');
f1.addColor(obj, 'color1');
f1.addColor(obj, 'color2');
f1.addColor(obj, 'color3');
var f2 = gui.addFolder('Another Folder');
f2.add(obj, 'noiseStrength');
var f3 = f2.addFolder('Nested Folder');
f3.add(obj, 'growthSpeed');
var f4 = gui.addFolder('Text');
f4.addText(obj, 'text')
var f5 = gui.addFolder('Image');
f5.addImage(obj, 'imagePath1');
var f6 = gui.addFolder('Plotter');
f6.addPlotter(obj, 'value', 10, 0);
setInterval(() => {
this.obj.value = Math.floor( Math.random() * 40 ) ;
}, 10);
var f7 = gui.addFolder('Readonly');
var a = f7.add(obj, 'height').step(1);
var b = f7.addText(obj, 'text');
var c = f7.add(obj, 'message');
a.readonly(true)
b.readonly(true)
c.readonly(true)
var f7 = gui.addFolder('Placeholder');
var a = f7.add(obj, 'height').step(1);
var b = f7.addText(obj, 'text');
var c = f7.add(obj, 'message');
a.placeholder('a')
b.placeholder('b')
c.placeholder('c')
var f8 = gui.addFolder('Password')
var a = f8.add(obj, 'message');
a.password(true)
var f9 = gui.addFolder('Expand')
var a = f9.add(obj, 'maxSize').min(-10).max(10).step(0.25);
var b = f9.add(obj, 'height').step(1);
var c = f9.addText(obj, 'text');
var d = f9.add(obj, 'message');
var e = f9.add(obj, 'type', [ 'one', 'two', 'three' ] );
var f = f9.addPlotter(obj, 'value', 10, 0);
var g = f9.addImage(obj, 'imagePath1');
f9.expand(true)
var f10 = gui.addFolder('Recursive')
f10.addObject(obj.recursive,'recursive')
var f11 = gui.addFolder('Tooltip','tooltip')
f11.add(obj, 'tooltip').title('A javascript framework for developing pretty browser dialogs and notifications.')
screenshot
This is great! Please do merge!
Awesome! Waiting for this
great stuff, is this merged?
Hi! Are you willing to publish the code?
@forejerk Any updates? Will the code be published? You haven't made any pull request and you don't have any fork from what I see