YUI Library Examples: Slider Control: RGB Slider Control

Advanced Solution: RGB Control

CSS:

Markup:

Code:

<script type="text/javascript" src="assets/color.js"></script>

YAHOO.example.RGBSlider = function() {

var Event = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        Color = YAHOO.util.Color,
        Slider = YAHOO.widget.Slider,
        r, g, b, dd;

function updateSliderColors() {

var curr, curg, curb;

curr = Math.min(r.getValue() * 2, 255);
        curg = Math.min(g.getValue() * 2, 255);
        curb = Math.min(b.getValue() * 2, 255);

YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);

for (var i=0; i<34; i++) {
            Dom.setStyle("rBG" + i, "background-color", 
                "rgb(" + (i*8) + "," + curg + "," + curb + ")");

Dom.setStyle("gBG" + i, "background-color", 
                "rgb(" + curr + "," + (i*8) + "," + curb + ")");

Dom.setStyle("bBG" + i, "background-color", 
                "rgb(" + curr + "," + curg + "," + (i*8) + ")");
        }

Dom.setStyle("swatch", "background-color", 
            "rgb(" + curr + "," + curg + "," + curb + ")");

Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb);
    }

function isValidRGB(a) { 
        if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
        if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
        if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;

return true;
    }

function listenerUpdate(whichSlider, newVal) {
        newVal = Math.min(255, newVal);
        Dom.get(whichSlider + "val").value = newVal;
        updateSliderColors();
    }

return {

userReset: function() {
            var v;
            var f = document.forms['rgbform'];

r.setValue(0);
            g.setValue(0);
            b.setValue(0);
        },

rgbInit: function() {

r = Slider.getHorizSlider("rBG", "rthumb", 0, 128);
            r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); });

g = Slider.getHorizSlider("gBG", "gthumb", 0, 128);
            g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); });

b = Slider.getHorizSlider("bBG", "bthumb", 0, 128);
            b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); });

this.initColor();

dd = new YAHOO.util.DD("ddRGB");
            dd.setHandleElId("pickerHandle");
        },

initColor: function() {
            var ch = " ";

d = document.createElement("P");
            d.className = "rb";
            r.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "rb";
            g.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "rb";
            b.getEl().appendChild(d);

for (var i=0; i<34; i++) {
                d = document.createElement("SPAN");
                d.id = "rBG" + i
                // d.innerHTML = ch;
                r.getEl().appendChild(d);

d = document.createElement("SPAN");
                d.id = "gBG" + i
                // d.innerHTML = ch;
                g.getEl().appendChild(d);

d = document.createElement("SPAN");
                d.id = "bBG" + i
                // d.innerHTML = ch;
                b.getEl().appendChild(d);
            }

d = document.createElement("P");
            d.className = "lb";
            r.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "lb";
            g.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "lb";
            b.getEl().appendChild(d);

this.userUpdate();
        },

hexUpdate: function(e) {
            return this.userUpdate(e, true);
        },

userUpdate: function(e, isHex) {
            var v;
            var f = document.forms['rgbform'];

if (isHex) {
                var hexval = f["hexval"].value;
                // shorthand #369
                if (hexval.length == 3) {
                    var newval = "";
                    for (var i=0;i<3;i++) {
                        var a = hexval.substr(i, 1);
                        newval += a + a;
                    }

hexval = newval;
                }

YAHOO.log("hexval:" + hexval);

if (hexval.length != 6) {
                    alert("illegal hex code: " + hexval);
                } else {
                    var rgb = Color.hex2rgb(hexval);
                    // alert(rgb.toString());
                    if (isValidRGB(rgb)) {
                        f['rval'].value = rgb[0];
                        f['gval'].value = rgb[1];
                        f['bval'].value = rgb[2];
                    }
                }
            }

// red
            v = parseFloat(f['rval'].value);
            v = ( isNaN(v) ) ? 0 : Math.round(v);
            YAHOO.log("setValue, r: " + v);
            r.setValue(Math.round(v) / 2);

v = parseFloat(f['gval'].value);
            v = ( isNaN(v) ) ? 0 : Math.round(v);
            YAHOO.log("setValue, g: " + g);
            g.setValue(Math.round(v) / 2);

v = parseFloat(f['bval'].value);
            v = ( isNaN(v) ) ? 0 : Math.round(v);
            YAHOO.log("setValue, b: " + b);
            b.setValue(Math.round(v) / 2);

updateSliderColors();

if (e) {
                Event.stopEvent(e);
            }
        },

init: function() {
            this.rgbInit();
            Event.on("rgbForm", "submit", this.userUpdate);
            Event.on("rgbSubmit", "click", this.userUpdate);
            Event.on("hexSubmit", "click", this.hexUpdate, this, true);
            Event.on("resetButton", "click", this.userReset);
        }
    };
}();

YAHOO.util.Event.onDOMReady(YAHOO.example.RGBSlider.init, 
                            YAHOO.example.RGBSlider, true);

</script>

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: Slider Control: RGB Slider Control

Advanced Solution: RGB Control

Configuration for This Example

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources:

RGB
Hex: #