Version 1.7Slider Demo: Colour Picker

Example

Code

HTML

<form action="#" id="colourPickerForm"> <div id="colourPicker"> <div id="finalColour"></div> <div id="rSelect"> <label for="rInput">Red:</label> <div id="rContainer"></div> <input type="text" name="rInput" id="rInput" /> </div> <div id="gSelect"> <label for="gInput">Green:</label> <div id="gContainer"></div> <input type="text" name="gInput" id="gInput" /> </div> <div id="bSelect"> <label for="bInput">Blue:</label> <div id="bContainer"></div> <input type="text" name="bInput" id="bInput" /> </div> </div> <p id="colourValue"> <label for="hexColour">Colour:</label> <input type="text" name="hexColour" id="hexColour" /> </p>
</form>

Initialisation

var glow, // shortcut to glow.dom.get $, // element to show the final colour in finalColour, // object containing 3 sliders (r, g, b) sliders = {}, // object containing 3 gradients for those sliders gradients = {}, // element to show hex value in hexColour; function init() { // handy shortcut $ = glow.dom.get; // get element to show the final colour in finalColour = $("#finalColour"); // get element to show hex value in hexColour = $("#hexColour"); var colours = ["r", "g", "b"], i = 0, len = colours.length; // for r, g & b, make a slider and gradient for (; i < len; i++) { // create a slider sliders[ colours[i] ] = new glow.widgets.Slider("#" + colours[i] + "Container", { bindTo: "#" + colours[i] + "Input", id: colours[i], min: 0, max: 255, changeOnDrag: true, buttons: false, onChange: colourChange }) // create a gradient gradients[ colours[i] ] = new Gradient("#" + colours[i] + "Select", 284, 11); } // listen for the user manually changing the hex value glow.events.addListener(hexColour, "keyup", hexInputChange); // initialise the gradients and final colour colourChange();
}

In the above, init is called when Glow has loaded and the DOM is ready.

Handling changes to the hex value

The following is called when the user enters characters into the "Colour" input.

function hexInputChange() { // get the new value var val = hexColour.val(), parsedColour; // test to see if it's a full 6 char hex value if (/#[0-9a-fA-F]{6}/.test( val )) { // break the hex down into r, g, b integers parsedColour = glow.dom.parseCssColor(val); // set all the sliders to reflect the new value sliders.r.val( parsedColour.r ); sliders.g.val( parsedColour.g ); sliders.b.val( parsedColour.b ); // update the gradients and final colour colourChange(); }
}

Handling changes to the selected colour

Whenever the user interacts with the sliders or changes the value in the "Colour" input to a valid hex colour value, we need to update the selected colour, the gradients, and the hex value.

function colourChange() { // get the value of each slider var r = sliders.r.val(), g = sliders.g.val(), b = sliders.b.val(); // set the background of the finalColour div to the selected colour. // This is done by setting the background css property // to something in the format rgb(255, 255, 255) finalColour.css("background", "rgb(" + r + ", " + g + ", " + b + ")"); // set the new colours for the start and end of each gradient gradients.r.setColours("rgb(0, " + g + ", " + b + ")", "rgb(255, " + g + ", " + b + ")"); gradients.g.setColours("rgb(" + r + ", 0, " + b + ")", "rgb(" + r + ", 255, " + b + ")"); gradients.b.setColours("rgb(" + r + ", " + g + ", 0)", "rgb(" + r + ", " + g + ", 255)"); // convert the values into hex strings var rHex = r.toString(16), gHex = g.toString(16), bHex = b.toString(16); // pad the values with a zero if needed if (rHex.length == 1) rHex = "0" + rHex; if (gHex.length == 1) gHex = "0" + gHex; if (bHex.length == 1) bHex = "0" + bHex; // assign the hex value to the input hexColour.val( "#" + rHex + gHex + bHex );
}

The Gradients

The gradients are done using canvas or VML, depending on the browser.

I created a simple class to abstract creating the gradients and changing their colour.

I've gone a bit over the top with comments here...

/**
@name Gradient
@class
@description Create a canvas / VML horizontal linear gradient @param {Element | Selector} container Where to insert the gradient
@param {Number} width @param {Number} height
*/
function Gradient(container, width, height) { // IE supports VML, other browsers support canvas if (glow.env.ie) { var stylesheet, rect, fill; // VML requires initial setup, the following is only required on the // creation of the first gradient if ( !Gradient.ranInitialSetup ) { // add the v: namespace document.namespaces.add("v"); // add some microsoft nonsense to enable vml stylesheet = document.createStyleSheet(); stylesheet.addRule('v\\:*', "behavior: url(#default#VML);"); } // create a rectangle with a fill this._fill = glow.dom.create('<v:rect><v:fill></v:fill></v:rect>') // apply the dimentions .css("width", width) .css("height", height) // disable borders .attr("stroked", "false") // add it to the page .appendTo(container) // grab the fill element .children() // set up the gradient .attr({ type: "gradient", angle: "270", // setting the method to none makes the gradient change linearly, // else it doesn't match the selected value method: "none" })[0]; } else { // create a canvas this._canvas = glow.dom.create('<canvas></canvas>') // apply the dimentions .attr({ width: width, height: height }) // add it to the page .appendTo(container)[0]; } Gradient.ranInitialSetup = true;
} // this static variable lets us detect when we're creating the first
// instance of Gradient. Gradient.ranInitialSetup = false; Gradient.prototype = { /** @name Gradient#setColours @function @description Set the colours of the gradient @param {String} startColour Start colour of the gradient (CSS value) @param {String} endColour End colour of the gradient (CSS value) */ setColours: function(startColour, endColour) { // once again, the process is completely different for VML and Canvas if (glow.env.ie) { // set the colours as properties of the fill this._fill.color = startColour; this._fill.color2 = endColour; } else { // return if the browser doesn't support canvas if ( !this._canvas.getContext ) return; // get a drawing context var context = this._canvas.getContext('2d'), // create a gradient (startX, startY, endX, endY) gradient = context.createLinearGradient(0, 0, this._canvas.width, 0); // add colours to the gradient (position, colour) gradient.addColorStop(0, startColour); gradient.addColorStop(1, endColour); // assign the fill style to the canvas context.fillStyle = gradient; // create a fill (startX, startY, endX, endY) context.fillRect(0, 0, this._canvas.width, this._canvas.height); } }
}

Loading Glow

Trigger the running of our application by loading Glow

gloader.load(["glow", "1", "glow.dom", "glow.events", "glow.widgets.Slider"], { async: true, onLoad: function(glowInstance) { // send glow to the previous scope glow = glowInstance; // run init when dom is ready glow.ready(init); }
});

All of the above code is contained within a closure to keep it out of global scope. See the source of this page for all of the code in one chunk. It can be found towards the end of the page, with the CSS in the head of the page.