Fun with jQueryUI & Canvas Elements

by deanpeters

HTML

<script src="http://view.jqueryui.com/master/external/jquery.mousewheel-3.0.4.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.core.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.widget.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.button.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.spinner.js"></script>
<script src="https://raw.github.com/ericdrowell/KineticJS/master/dist/kinetic-core.min.js"></script>
<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js"></script>
<h2>Fun with jQueryUI &amp; Canvas Elements</h2>
<div id="container"></div>

<p>The idea here is to see what we can do with contorling, sizing, and/or graphing elements using HTML5 form elements juiced by <a href="http://wiki.jqueryui.com/w/browse/#view=ViewAllObjects">jQueryUI</a>.</p>
<p>I'm also thinking we'll need to get an assist from <a href="http://www.kineticjs.com/">Kinetic JS</a> to provide fine-grained control of objects we have in the convas context</p>

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value">
</p>

<h3>Tool Links</h3>
<ul>
<li><a href="http://wiki.jqueryui.com/w/page/12138077/Spinner">jQuery UI Number Spinner</a></li>
    <li><a href="http://btburnett.com/spinner/example/example.html">jQuery UI Spinner Example</a></li>
    <li><a href="http://wiki.jqueryui.com/w/page/12138059/Slider">jQuery UI Slider</a></li>
</ul>
<h4>Possible Candidates</h4>
<ul>
    <li><a href="http://statinsights.blogspot.com/2010/11/visualizing-data-with-bubble-plots.html">Visualizing Data with Bubble Plots</a></li>
    <li><a href="http://blog.richardelling.com/2012/04/latency-and-io-size-cars-vs-trains.html">Latency and I/O Size: Cars vs Trains</a></li>
</ul>

CSS

a.ui-spinner-button.ui-spinner-up,
a.ui-spinner-button.ui-spinner-down {
    font-size: 12px;
}

span.ui-icon {
    color: navy;
    cursor: pointer;
}
canvas {
    border: 1px solid #9C9898;
}
#wrapper {
border: 1px solid navy;
}

JavaScript

var showXMLData = function(xml) {
    
//   console.log("showXMLData ===> ", xml, $(xml).find("records record"));


    dataSet = $(xml).find("records record");

    maxBubble = $(dataSet).find("population").max();
    maxHeight = $(dataSet).find("violent").max();
    maxWidth = $(dataSet).find("property").max();
console.log("** maxBubble ** -> ", maxBubble, maxHeight, maxWidth, dataSet);
/*    
    $.each(dataSet, function(index, value) { 
        console.log('**** dataset ***** ', index, ':', value); 
    });    
*/    
}



Number.prototype.roundTo = function(nTo) {
    nTo = nTo || 10;
    return Math.round(this * (1 / nTo) ) * nTo;
}    
Number.prototype.ceilTo = function(nTo) {
    nTo = nTo || 10;
    return Math.ceil(this * (1 / nTo) ) * nTo;
}
Number.prototype.floorTo = function(nTo) {
    nTo = nTo || 10;
    return Math.floor(this * (1 / nTo) ) * nTo;
}
    


    
/* - - - - - - -  - - - - - - - - - - - - - - */
var xmlDataSource = 'http://beanerspace.com/test/fbi-crime-stats-2010.csv.xml';
    
var getXMLData = function(url) {
    url = (url || xmlDataSource);
    retXml = null;

// remember, this is async, so the function doesn't return 
// -- we instead walk the data to render it         
    xhr = $.ajax({
        type: "GET",
        url: url,
        dataType: "xml",
        crossDomain: true,
        success: function(xml) {
            showXMLData(xml);
        },
        error: function(e, msg) {
            console.log("error!", e, msg);
        }
    });
    
    

};

var getBackGroundGridLayer = function() {

    var backGroundGridLayer = new Kinetic.Layer();

    for (ii = 0, xPos = stage.attrs.gridGutter, xWidth = ((stage.attrs.width - stage.attrs.gridGutter) / stage.attrs.gridLines); ii < stage.attrs.gridLines; ii++, xPos += xWidth) {
        
        var vertLine = new Kinetic.Line({
            points: [xPos, 0, xPos, stage.attrs.height - stage.attrs.gridGutter],
            stroke: "#757575",
            strokeWidth: 1,
           ...