AntApache ConfigurationAppleScriptCC#C++Cold FusionDelphi PascalFlash ActionScriptHTML / CSSJSP / JSTL / JSFJavaJavascript / AjaxObjective-C CocoaPHPPerlPythonRuby / RailsSQLUnix / ShellXML-SchemaXSLT / XPATHDirector LingoLego MindstormsObjective-C SwarmPIC assembly   Whole Words   Literal Phrase       Examples

Source code below from: Pragmatic Ajax : A Web 2.0 Primer By Justin Gehtland, Ben Galbraith, and Dion Almaer Published 10 April, 2006 Average rating       Powells     Alibris

/*
    This software is copyright by Rafael Robayna.
    You may not reproduce or modify this without
    written permission by the origional author.
    Email: rrobayna@gmail.com for suggestions.
*/

    var colorChooser;
    var lineWidthChooser;
    var transportWidgit;

    var ctxColorChooser;
    var ctxLineWidthChooser;
    var ctxTransportWidgit;

    var colorMouseDown = false;
    var lwChooserMouseDown = false;
    var timeline_shift = 6;
    var timeline_position = 0;
    var timelineMouseDown = false;

    function initWidgits() {
        colorChooser = document.getElementById('colorChooser');
        ctxColorChooser = colorChooser.getContext('2d');
        drawColorChooser();
        setChooserListners(colorChooser, colorChooserEventListener);
        setCurrentColor();

        lineWidthChooser = document.getElementById('lineWidthChooser');
        ctxLineWidthChooser = lineWidthChooser.getContext('2d');
        ctxLineWidthChooser.fillStyle = "black";
        //TODO: remove need for both draw and set
        drawLineWidthChooser(10);
        setChooserListners(lineWidthChooser, lineWidthChooserEventListener);
        setLineWidth(10);

        transportWidgit = document.getElementById('transportWidgit');
        ctxTransportWidgit = transportWidgit.getContext('2d');
        initTransport();
        setChooserListners(transportWidgit, transportEventListener);
    }

    //Color Chooser Widgit

    function drawColorChooser() {
        ctxColorChooser.clearRect(0,0,255,120);

        var linGradRed = ctxColorChooser.createLinearGradient(0,0,255,0);
        linGradRed.addColorStop(0, 'rgba(0,'+color_green+','+color_blue+',1)');
        linGradRed.addColorStop(1, 'rgba(255,'+color_green+','+color_blue+',1)');

        var linGradGreen = ctxColorChooser.createLinearGradient(0,0,255,0);
        linGradGreen.addColorStop(0, 'rgba('+color_red+',0,'+color_blue+',1)');
        linGradGreen.addColorStop(1, 'rgba('+color_red+',255,'+color_blue+',1)');

        var linGradBlue= ctxColorChooser.createLinearGradient(0,0,255,0);
        linGradBlue.addColorStop(0, 'rgba('+color_red+','+color_green+',0,1)');
        linGradBlue.addColorStop(1, 'rgba('+color_red+','+color_green+',255,1)');

        var linGradAlpha= ctxColorChooser.createLinearGradient(0,0,255,0);
        linGradAlpha.addColorStop(0, 'rgba('+color_red+','+color_green+','+color_blue+',1)');
        linGradAlpha.addColorStop(1, 'rgba('+color_red+','+color_green+','+color_blue+',0)');

        ctxColorChooser.fillStyle = linGradRed;
        ctxColorChooser.fillRect(0,0,255,20);
        drawChooserPointer(color_red, 20, ctxColorChooser);

        ctxColorChooser.fillStyle = linGradGreen;
        ctxColorChooser.fillRect(0,20,255,20);
        drawChooserPointer(color_green, 40, ctxColorChooser);

        ctxColorChooser.fillStyle = linGradBlue;
        ctxColorChooser.fillRect(0,40,255,20);
        drawChooserPointer(color_blue, 60, ctxColorChooser);

        ctxColorChooser.fillStyle = linGradAlpha;
        ctxColorChooser.fillRect(0,60,255,20);
        var alphaPosition = Math.floor((1-color_alpha)*255);
        drawChooserPointer(alphaPosition, 80, ctxColorChooser);

        ctxColorChooser.fillStyle = "black";
        ctxColorChooser.fillRect(255, 0, 275, 40);

        ctxColorChooser.fillStyle = "white";
        ctxColorChooser.fillRect(255, 40, 275, 40);
    }

    function colorChooserEventListener(e) {
        if(!(colorMouseDown = validateChooserEvent(e, colorMouseDown)))
            return;

        var color_pos = getCanvasMousePos(e, palletPos);

        if(color_pos.x > 255) {
            if(color_pos.y > 0 && color_pos.y <= 40) {
                color_red = 0;
                color_green = 0;
                color_blue = 0;
            } else {
                color_red = 255;
                color_green = 255;
                color_blue = 255;
            }
        } else {
            if(color_pos.y > 0 && color_pos.y <= 20) {
                color_red = color_pos.x;
            } else if(color_pos.y > 20 && color_pos.y <= 40) {
                color_green = color_pos.x;
            } else if(color_pos.y > 40 && color_pos.y <= 60) {
                color_blue = color_pos.x;
            } else {
                color_alpha = 1 - color_pos.x/255;
            }
        }

        color = 'rgba('+color_red+','+color_green+','+color_blue+','+color_alpha+')';

        setCurrentColor();
        drawColorChooser();
    }

    function setCurrentColor() {
        ctx.fillStyle = color;
        ctx.strokeStyle = color;
        ctxI.fillStyle = color;
        ctxI.strokeStyle = color;
    }

    function drawChooserPointer(xPos, yPos, context) {
        context.fillStyle = "white";
        context.beginPath();
        context.moveTo(xPos - 6, yPos);
        context.lineTo(xPos, yPos - 5);
        context.lineTo(xPos + 6, yPos);
        context.fill();

        context.strokeWidth = 1;
        context.fillStyle = "black";
        var frompos = {x:xPos, y:yPos - 10};
        var topos = {x:xPos, y:yPos - 5};

        drawCircle(frompos, topos, context, false);
    }

    //Line Width Chooser Widgit
    function drawLineWidthChooser(lineWidth) {
        ctxLineWidthChooser.clearRect(0,0,275,120);

        ctxLineWidthChooser.fillStyle = 'rgba(0,0,0,0.2)';
        ctxLineWidthChooser.fillRect(0, 0, 275, 76);

        ctxLineWidthChooser.strokeStyle = 'rgba(255,255,255,1)';
        ctxLineWidthChooser.moveTo(1, 38);
        ctxLineWidthChooser.lineTo(274, 38);
        ctxLineWidthChooser.stroke();

        ctxLineWidthChooser.strokeStyle = 'rgba(255,255,255,0.5)';
        ctxLineWidthChooser.moveTo(1, 19);
        ctxLineWidthChooser.lineTo(274, 19);
        ctxLineWidthChooser.moveTo(1, 57);
        ctxLineWidthChooser.lineTo(274, 57);
        ctxLineWidthChooser.stroke();

        var linePosition = Math.floor((lineWidth*255)/76);
        ctxLineWidthChooser.fillStyle = 'rgba(0,0,0,1)';
        ctxLineWidthChooser.arc(linePosition, 38, lineWidth/2, 0, Math.PI*2, true);
        ctxLineWidthChooser.fill();
    }

    function lineWidthChooserEventListener(e) {
        if(!(lwChooserMouseDown = validateChooserEvent(e, lwChooserMouseDown)))
            return;

        var mousePos = getCanvasMousePos(e, lwPos);

        if(mousePos.x >= 0 && mousePos.x <= 255) {
            lineWidth = Math.floor(((mousePos.x)*76)/255) + 1;
            setLineWidth(lineWidth);
            drawLineWidthChooser(lineWidth);
        }
    }

    function setLineWidth(width) {
        ctx.lineWidth = width;
        ctxI.lineWidth = width;
    }

    var buttons;
    var buttonsDraw;
    var lastTransportButton;
    var btnSize = {x: 30, y: 24};
    var btnShift = 32;
    var btnSpace = 4;
    var btnY = 20;

    //Transport Widgit
    function initTransport() {
        ctxTransportWidgit.clearRect(0,0,255,120);

        ctxTransportWidgit.lineWidth = 1;


        ctxTransportWidgit.fillStyle = "#EEEEEE";
        ctxTransportWidgit.fillRect(0, 0, 274, 50);

        drawTransportPosition();

        buttons = new Array();// = {recPos: 0, playPos:0, pausePos:0, stopPos
        buttonsDraw = new Array();

        ctxTransportWidgit.strokeStyle = "black";
        ctxTransportWidgit.fillStyle = "#DDDDDD";
        ctxTransportWidgit.lineWidth = 1;

        for(i = 0; i < 6; i++) {
            drawTransportButton(i);
        }
        ctxTransportWidgit.fill();

        //record
        buttonsDraw[0] = function(action) {
            if(action) ctxTransportWidgit.fillStyle = "red";
            else ctxTransportWidgit.fillStyle = "black";
            ctxTransportWidgit.arc(buttons[0] + btnSize.x/2, btnY + btnSize.y/2, 8, 0, Math.PI*2, true)
            ctxTransportWidgit.fill();
        }

        //play
        buttonsDraw[1] = function(action) {
            if(action) ctxTransportWidgit.fillStyle = "red";
            else ctxTransportWidgit.fillStyle = "black";
            ctxTransportWidgit.moveTo(buttons[1] + 6, btnY + 4);
            ctxTransportWidgit.lineTo(buttons[1] + 6, btnY + btnSize.y - 4 );
            ctxTransportWidgit.lineTo(btnSize.x + buttons[1] - 6, btnSize.y/2 + btnY);
            ctxTransportWidgit.lineTo(buttons[1] + 6, btnY + 4);
            ctxTransportWidgit.fill();
        }

        //stop
        buttonsDraw[2] = function(action) {
            if(action) ctxTransportWidgit.fillStyle = "red";
            else ctxTransportWidgit.fillStyle = "black";
            ctxTransportWidgit.fillRect(buttons[2] + btnSize.x/2 - 8, btnY + btnSize.y/2 - 8, 16, 16);
        }

        //rewind to start
        buttonsDraw[3] = function(action) {
            if(action) ctxTransportWidgit.fillStyle = "red";
            else ctxTransportWidgit.fillStyle = "black";
            ctxTransportWidgit.fillRect(buttons[3] + btnSize.x/2 - 7, btnY + 4, 3, btnSize.y - 8);
            ctxTransportWidgit.moveTo(btnSize.x/2 + buttons[3] - 4, btnSize.y/2 + btnY);
            ctxTransportWidgit.lineTo(buttons[3] + btnSize.x - 8, btnY + 4 );
            ctxTransportWidgit.lineTo(buttons[3] + btnSize.x - 8, btnSize.y + btnY - 4);
            ctxTransportWidgit.lineTo(btnSize.x/2 + buttons[3] - 4, btnSize.y/2 + btnY);
            ctxTransportWidgit.fill();
        }

        //forward
        buttonsDraw[4] = function(action) {
            if(action) ctxTransportWidgit.fillStyle = "red";
            else ctxTransportWidgit.fillStyle = "black";
            ctxTransportWidgit.moveTo(buttons[4] + 4, btnY + 4);
            ctxTransportWidgit.lineTo(buttons[4] + 4, btnY + btnSize.y - 4 );
            ctxTransportWidgit.lineTo(btnSize.x/2 + buttons[4], btnSize.y/2 + btnY);
            ctxTransportWidgit.lineTo(buttons[4] + 4, btnY + 4);
            ctxTransportWidgit.moveTo(btnSize.x/2 + buttons[4], btnY + 4);
            ctxTransportWidgit.lineTo(buttons[4] + btnSize.x/2, btnY + btnSize.y - 4 );
            ctxTransportWidgit.lineTo(btnSize.x + buttons[4] - 4, btnSize.y/2 + btnY);
            ctxTransportWidgit.lineTo(btnSize.x/2 + buttons[4], btnY + 4);
            ctxTransportWidgit.fill();
        }

        //forward to end
        buttonsDraw[5] = function(action) {
            if(action) ctxTransportWidgit.fillStyle = "red";
            else ctxTransportWidgit.fillStyle = "black";
            ctxTransportWidgit.fillRect(buttons[5] + btnSize.x/2 + 4, btnY + 4, 3, btnSize.y - 8);
            ctxTransportWidgit.moveTo(buttons[5] + 8, btnY + 4);
            ctxTransportWidgit.lineTo(buttons[5] + 8, btnY + btnSize.y - 4 );
            ctxTransportWidgit.lineTo(btnSize.x/2 + buttons[5] + 4, btnSize.y/2 + btnY);
            ctxTransportWidgit.lineTo(buttons[5] + 8, btnY + 4);
            ctxTransportWidgit.fill();
        }

        buttonsDraw[0](true);
        buttonsDraw[1](false);
        buttonsDraw[2](false);
        buttonsDraw[3](false);
        buttonsDraw[4](false);
        buttonsDraw[5](false);

        lastTransportButton = 0;

        return transportWidgit;
    }

    function drawTransportButton(buttonNum) {
        var space = (buttonNum>0)?btnShift+(btnSpace*buttonNum):btnShift;
        buttons[buttonNum] = space + (btnSize.x*buttonNum);
        ctxTransportWidgit.fillStyle = "#DDDDDD";
        ctxTransportWidgit.fillRect(space + (btnSize.x*buttonNum), btnY, btnSize.x, btnSize.y);
        ctxTransportWidgit.strokeRect(space + (btnSize.x*buttonNum), btnY, btnSize.x, btnSize.y);
        ctxTransportWidgit.fillStyle = "black";
        ctxTransportWidgit.fillRect(space + (btnSize.x*buttonNum), btnY - 1, btnSize.x, 1);
        ctxTransportWidgit.fillRect(space + (btnSize.x*buttonNum) - 1, btnY, 1, btnSize.y);
    }

    function drawTransportPosition() {
        ctxTransportWidgit.fillStyle =  "#EEEEEE";
        ctxTransportWidgit.fillRect(timeline_shift, 7, 265, 5);
        ctxTransportWidgit.strokeStyle = "#666666";
        ctxTransportWidgit.strokeRect(timeline_shift, 8, 255, 3);
        ctxTransportWidgit.fillStyle =  "white";
        ctxTransportWidgit.fillRect(timeline_shift, 9, 255, 1);

        ctxTransportWidgit.fillStyle = "#AAAAAA";
        ctxTransportWidgit.fillRect(timeline_position, 7, 6, 4);
        ctxTransportWidgit.fillStyle = "#000000";
    }

    function transportEventListener(e) {
        if((!(timelineMouseDown = validateChooserEvent(e, timelineMouseDown))) || animation == null)
            return;

        var mousePos = getCanvasMousePos(e, transportPos);

        if(mousePos.y < 20 && animation.last != animation.first) {
            timeline_position = mousePos.x;
            goToAnimationNode(Math.floor((animation.last.time*timeline_position)/255));
            drawTransportPosition();
        } else if(e.type != "mousemove") {
            if(mousePos.x > buttons[0] && mousePos.x < buttons[1]) {
                startRecordAnimation();
                setActiveTransportButton(0);
            } else if (mousePos.x > buttons[1] && mousePos.x < buttons[2] && animation.first != animation.last) {
                stopAnimation();
                playAnimation();
                setActiveTransportButton(1);
            } else if (mousePos.x > buttons[2] && mousePos.x < buttons[3]) {
                stopAnimation();
                setActiveTransportButton(2);
            } else if (mousePos.x > buttons[3] && mousePos.x < buttons[4]) {
                stopAnimation();
                if(curAnimationNode != null) {
                    goToAnimationNode(0);
                    setTransportPosition(animation, 0);
                }
            } else if (mousePos.x > buttons[4] && mousePos.x < buttons[5]) {
                stopAnimation();
                if(curAnimationNode != null && curAnimationNode.next != null) {
                    goToAnimationNode(curAnimationNode.next.time);
                    setTransportPosition(animation, curAnimationNode.next.time);
                }
                setActiveTransportButton(2);
            } else if (mousePos.x > buttons[5] && mousePos.x < (buttons[5] + 30)) {
                stopAnimation();
                if(curAnimationNode != null && curAnimationNode.next != null) {
                    setActiveTransportButton(5);
                    goToAnimationNode(animation.last.time);
                    setTransportPosition(animation, animation.last.time);
                    setActiveTransportButton(2);
                }
            }
        }
    }

    function setActiveTransportButton(button) {
        drawTransportButton(button);
        buttonsDraw[lastTransportButton](false);
        buttonsDraw[button](true);
        lastTransportButton = button;
    }

    //Shared Widgit Event Code
    function setChooserListners(chooser, listener, mouseover) {
        chooser.addEventListener("mousedown", listener, false);
        chooser.addEventListener("mousemove", listener, false);
        chooser.addEventListener("mouseup", listener, false);
        chooser.addEventListener("mouseout", listener, false);
        if(mouseover)
            chooser.addEventListener("mouseover", listener, false);
    }

    function validateChooserEvent(e, stateActive) {
        if(e.type == 'mouseout' || e.type == 'mouseup' || (e.type == 'mousemove' && !stateActive)) {
            return false;
        } else if(e.type == 'mousedown') {
            return true;
        }
        return true;
    }

    function setTransportPosition(ani, time) {
        var animationLength = ani.last.time;
        timeline_position = Math.floor((time*255)/animationLength) + 4;
        drawTransportPosition();
    }