Color picker with alpha using dat.gui (HTML5)

Question

Is there any way to get a color picker which modified the alpha channel of a RGBA color using dat.gui ( http://code.google.com/p/dat-gui/ )?

Currently I'm only able to change the RGB value using the color picker - even though the color picker accepts an alpha value.

Example (also available http://jsfiddle.net/mortennobel/PT3g2/1/ ):

var ColorObject = function() {
   this.color = [ 0, 128, 255, 0.3 ]; // RGB with alpha
    this.showAlert = function(){
        alert("Color is "+this.color);
    } 
};

var colorObject = new ColorObject();
var gui = new dat.GUI();

gui.addColor(colorObject, 'color');
gui.add(colorObject, 'showAlert');

It's working for me. What's the required result that you don't get ? — vals, Feb 23 '13 at 19:59
I want a slider, so I can change the alpha value in the color picker. — Mortennobel, Feb 23 '13 at 20:06
That functionality is just not available on dat.GUI, so I don't see any answer you are looking for here — MarcinJuraszek, Feb 23 '13 at 21:59
Well dat.GUI is fairly modular and extendable. It must be possible to add this functionality to the color picker. — Mortennobel, Feb 24 '13 at 10:50

mariozski · Accepted Answer · 2013-02-28T17:44:11.757

4

I'm not sure if there's any easy way to extend existing library. I've just made changes to library itself. You can try it here: http://jsbin.com/anewaz/2

Modified sources are also on my github: https://github.com/mariozski/datGUIwithAlpha/blob/master/dat.gui.js

Hope it'll help :-)

mz

edited Feb 28 '13 at 17:44

answered Feb 28 '13 at 16:59

mariozski

1,134
1
7
20

Color picker with alpha using dat.gui (HTML5)

1 Answers1