Color picker with alpha using dat.gui (HTML5)

dat.gui, html, javascript

Solution

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

Problem

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'); ```

Original source