Color Wheel Picker by John Curtis

by dibalik seo

HTML

<div class="rule-box">
            <h4>Color Rule</h4>
            <ul id="rules">
                <li data-type="1" class="active">Analogous</li>
                <li data-type="2">Monochromatic</li>
                <li data-type="3">Triad</li>
                <li data-type="4">Complementary</li>
                <li data-type="5">Custom</li>
            </ul>
        </div>
        <!-- picker canvas -->
        <div class="canvas">
            <canvas id="picker"></canvas>
        </div>
        <!-- samples -->
        <div class="samples">
            <div class="col" data-sample="3">
                <div class="sample"></div>
                <div class="input-group">
                    <span>RGB</span>
                    <input type="text" maxlength="3" class="rgb r"/>
                    <input type="text" maxlength="3" class="rgb g"/>
                    <input type="text" maxlength="3" class="rgb b"/>
                </div>
                <div class="input-group">
                    <span>HEX</span>
                    <input type="text" class="hex"/>
                </div>
            </div>
            <div class="col" data-sample="1">
                <div class="sample"></div>
                <div class="input-group">
                    <span>RGB</span>
                    <input type="text" maxlength="3" class="rgb r"/>
                    <input type="text" maxlength="3" class="rgb g"/>
                    <input type="text" maxlength="3" class="rgb b"/>
                </div>
                <div class="input-group">
                    <span>HEX</span>
                    <input type="text" class="hex"/>
                </div>
            </div>
            <div class="col selected" data-sample="0">
                <div class="sample"></div>
                <div class="input-group">
                    <span>RGB</span>
                    <input type="text" maxlength="3" class="rgb r"/>
                    <input type="text" maxlength="3"...

CSS

/* reset */
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            article, aside, details, figcaption, figure, 
            footer, header, hgroup, menu, nav, section {
                display: block;
            }
            body {
                line-height: 1;
            }
            ol, ul {
                list-style: none;
            }
            blockquote, q {
                quotes: none;
            }
            blockquote:before, blockquote:after,
            q:before, q:after {
                content: '';
                content: none;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            /* CSS */
            body {
                background-color: #222;
                margin-bottom: 25px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
            /* rule box */
            .rule-box {
                position: absolute;
                top: 100px;
                left: 50px;
                box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
                background-color: #444;
            }
            .rule-box h4 {
       ...

JavaScript

var picker = {
                canvas: document.getElementById('picker'), // the picker canvas element
                load: function() {
                    picker.context = picker.canvas.getContext('2d'); // set the canvas context
                    
                    picker.size = picker.wheel.size + picker.markers.outerSize; // set the picker size based on wheel size and some room for markers
                    picker.center = picker.size / 2; // set the center of the picker
                    
                    picker.wheel.radius = picker.wheel.size / 2; // set the radius of the wheel
                    picker.markers.outerRadius = picker.markers.outerSize / 2; // set the markers inner & outer radius
                    picker.markers.innerRadius = picker.markers.innerSize / 2;
                    
                    picker.canvas.width = picker.size; // set the canvas size based on the marker / wheel size
                    picker.canvas.height = picker.size;
                    
                    picker.wheel.image.onload = function() { // once the color_wheel img has been loaded
                        picker.wheel.draw(); // draw the wheel
                        picker.calculate({'x':picker.size - picker.markers.outerRadius - 1, 'y':picker.center}, 0); // calculate: marker 0 - far right
                    };
                    picker.wheel.image.src =...