I don’t know if node.js is the future or is just another hype, but it’s easy. And cool. Really cool.

In the meantime as I use Ubuntu for everything but games, this short article here ( http://www.codediesel.com/linux/installing-node-js-on-ubuntu-10-04/ ) was enough to get a working environment running though I recommend using a pristine virtual machine instance to keep things simple.

Last point, a reliable friend & peer of mine recommended I check out this MVC like framework for NodeJS ( http://expressjs.com/ ). Preliminary it feels like a hybrid between Twistd and CherryPy in Python or Limonade PHP as far as style… aiming more for simplicity over feature/complexity.

To return the names of the columns you want, you need to use aoColumndefs and provided individual objects with the property sName.

Below is most of the implementation for a jeditable Ajax driven dataTables, this is the Alpha version and still needs a lot of love in places, but the gist of it is here

var semesterTable = $("#semesterViewTable").dataTable({
                "bProcessing"   : true
            ,   "bServerSide"   : true
            ,   "sAjaxSource"   : "<?php echo url_for("roster/ajax/{$semester_id}"); ?>"
            ,   "fnRowCallback" : function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                                    //console.log(nRow, aData, iDisplayIndex, iDisplayIndexFull);
                                    var recordId = aData[0];
                                    $("td", nRow).data("recordId", recordId);
                                    return nRow;
                                }
            , "fnDrawCallback"  : function(){
                                    $("td.editableMajor")
                                        .editable("<?php echo url_for("roster/edit_record");?>",
                                                    {                                                        
                                                          loadurl: "<?php echo url_for("roster/distinct/major/{$semester_id}") ?>"
                                                        , type: "select"
                                                        , submit: "OK"
                                                        , method: "post"
                                                        , submitdata: function(){
                                                            console.log(this, arguments);
                                                            var $this = $(this);
                                                            return {
                                                                    recordId: $this.data("recordId")
                                                                    , classes: $this.attr("class")
                                                                }
                                                        }
                                                    });
 
                                }
            /* Seriously a meta-generator for this would be nice */
            ,"aoColumnDefs": [
                ,{ sName:"record_id",          aTargets:[00], bSearchable:false, bVisible:false }
                ,{ sName:"roster_date",         aTargets:[01], sClass:"roster_date"}
                ,{ sName:"roster_name_both",    aTargets:[02], sClass:"roster_name_both"}
                ,{ sName:"roster_student_id",   aTargets:[03], sClass:"roster_student_id"}
                ,{ sName:"roster_major1",       aTargets:[04], sClass:"roster_major1 editableMajor"}
                ,{ sName:"roster_major2",       aTargets:[05], sClass:"roster_major2 editableMajor"}
                ,{ sName:"roster_major3",       aTargets:[06], sClass:"roster_major3 editableMajor"}
                ,{ sName:"roster_major4",       aTargets:[07], sClass:"roster_major4 editableMajor"}
                ,{ sName:"roster_minor1",       aTargets:[08], sClass:"roster_minor1 editableMajor"}
                ,{ sName:"roster_minor2",       aTargets:[09], sClass:"roster_minor2 editableMajor"}
            ]
    });

For the tbody, just put something like

        <tbody><tr><td>Chill the fuck out, it's loading</td></tr></tbody>

Server side data contract

dataTables expects a JSON’ified construct like this

$responseBody = array(
		"sEcho" => intval($input['sEcho']),
		"iTotalRecords" => (int) $count,
		"iTotalDisplayRecords" => count($data),
		"aaData" => $data
            );

• sEcho is a security variable used by dataTables, basically just send it back and don’t worry about it
• iTotalRecords – is the MAXIMUM # of records in the data set without any filtering
• iTotalDisplayRecords – is the MAXIMUM # of records in the data set WITH filtering
• An array of numerically indexed arrays, dataTables doesn’t like associative arrays

Total and Display total records

If the blink tag still worked reliably, I’d put a neon sign here. Basically you need to do 3 queries per Ajax call… call 1 is to get a

   SELECT count(1) FROM sourceTABLE

call 2 is

 SELECT count(1) FROM sourceTable WHERE someCriteria 

and finally call 3 is

 SELECT yourColumnList FROM sourceTable WHERE someCriteria

With memcache or such, I’d advise caching the total count but no matter what you unfortunately need to make these three SQL calls .

User input is fed off the left & right cursor keys.

Ping additions included a formalized Quad tree library into the ping.Lib namespace but I want to fix up the factory function I wrote to take an instance of the Canvas rendering class instead of manually writing out the root dimensions. Otherwise collision checks are still a tad wonky… there’s a high propensity for near misses unfortunately

I’ll add more information in the future but in the interim, the quick and dirty advice I can provide:

Given p = x, y where this is the point your trying to determine if it intersects another… the best place is to start with bounding box logic.  Regardless of what shape your object is, if wrap it in an invisible box boundry, it’s relatively trivial to do:

box upper left origin is bX, bY off size sizeX, sizeY.   If p.x greater then bX and p.x less then bX + sizeX AND p.y greater then bY and p.y less then bY + sizeY   you’re inside the bounding box and it’s highly likely your point has or will soon be colliding with an object.

That’s pretty much it and is perfect if you don’t mine lagging the crap out of whatever is running this logic.    To make these collision checks performant, you need to make the computer do less work.   For two dimensional space, my personnel research has led me to the Quad tree structure ( wikipedia article ).  I’ve got a brute force / naive implementation prototyped  @ here & here but as of 2011 March 9th it is not finished and needs some more work.

Basically Quad tree’s provides a super quick way for you to determine if there is any other objects in relative space to an entity.  Doing a quick lookup, if there’s nothing nearby then you can skip the bounding box checks and then the stupidly expensive perimeter intersection checks.

Full library is here and like most of my pet projects is heavily undocumented and completely absent of unit-testing.

Really useful guide here

What does this mean?

Say you’ve got a compound action you want to complete. For example a user clicks on a leaf in a tree like directory
menu. Now you want to update both the menu to add any possible sub nodes of that leaf PLUS update a content panel and once its finished, maybe update the hash tag to the current page’s url.

 
  $.when( updateMenu(), updateContent() )
     .success( function(){
           console.log("Both menu & content panel have been updated!");
      })
     .fail( function(){
           console.log("Oh noes, we didn't finish... try again?");
      });

That’s pretty much the gist of deferreds in a nutshell. Furthermore it appears that the author of this fantastic addition to jQuery really grokked the concept of deferreds because you can chain one deferred result to multiple child deferred’s allowing for cascading events to fire in response to one event.

That means back to my unframework canvas library Ping. Some of the code still makes sense, but other bits are… well special. Currently there is an .ex object thats appended to the CanvasRenderingContext2D internal class and it works, but what I’m thinking of is re-working the code so that they’re added post-instantiation like a factory.

 
canvasMaker = function(elemId, options){
    var element = document.getElementById(elemId);
    var context = element.getContext("2d");
    //Here is where all the extension methods would be dynamically assigned to the 2d canvas instance
    wrappedContext = wrapContext(context);
    //Maybe add a singleton check around the bulk of this that keys on the elemId
    return wrappedContext;
}

The problem I’m trying to work around specifically is the need should ever arise to have n+1 managed tags on the same document. Currently there is so many hardwired references that it would be impossible to have the two cooperate without collisions and undesirable behavior.

Continuing my tests/experiments with the Canvas tag has led to the Ping prototype. I had 3 minimal things I wanted to accomplish: Detecting the intersection of a 360 degree arc of ray/line segments to previously defined in map shapes; a visual decay/fade out of intersection points on the canvas, and lastly a test of performance. In addition I decided to experiment with another approach to Javascript object construction in the hopes of getting a performance gain.

performance
None of the code involved is optimized or really geared towards performance [ I am using JQuery.each(array|object, function() ) ] and a fairly inefficient pattern for determining intersection ( leveraging CPU with little or no caching ) but was mostly happy with the results when using Google Chrome on Ubuntu 9.10 and utterly surprised with Firefox 3.5 & 3.6 on the same system. It was literally a night and day difference with Chrome purring along and Firefox struggling to keep up.

JS Objects

Besides the canvas tag related stuff, I was experimenting with another approach to class construction that for the moment seems to goofy to be viable.

appLib.Point = function (x, y) {
        this.x = x;
        this.y = y;
    };
 
app.w(appLib.Point, function () {
 
    this.dist = function (o) {
        var tX = Math.pow(this.x - o.x, 2);
        var tY = Math.pow(this.y - o.y, 2);
        return Math.sqrt((tX) + (tY));
    };
 
    /**
     *Bad design choice
     *@deprecated */
    this.slope = function (o) {
        return (this.y - o.y) / (this.x - o.x);
    };
});

app.w( scope, anonymous) basically makes this in context of the anonymous function == scope.prototype. Therefore making it easier to add prototypical methods to the final product. My thought was to avoid closure based creation and rely on Function.prototype.method = function to make the objects leaner/faster. I figured that Javascript engines have already been optimized to a degree to build an object from it’s prototype. From my perspective, there didn’t seem to be a noticeable difference.

Final thoughts
Ping functions as expected on Chrome but otherwise if not for my quad-core environment, I imagine it would be a rather abysmal user experience. According to top and Chrome’s built in task manager, its devouring near 100% cpu time and has a semi-stable memory leak ( drifting up and down around 1,500 KB ever 30 seconds ) when in a resting state.

Given the following

        <table border="1" style="height:100%; width:100%" >
            <tr class="x0">
                <td class="y0">&nbsp;</td>
                <td class="y1">&nbsp;</td>
                <td class="y2">&nbsp;</td>
            </tr>
            <tr class="x1">
                <td class="y0">&nbsp;</td>
                <td class="y1">&nbsp;</td>
                <td class="y2">&nbsp;</td>
            </tr>
            <tr class="x2">
                <td class="y0">&nbsp;</td>
                <td class="y1">&nbsp;</td>
                <td class="y2">&nbsp;</td>
            </tr>
        </table>

I used the following logic to determine the coordinates from a user click

var clickHandler = function(e){
//Recieves a plan/jQuery managed event object                    
       var element = e.target;
       var parent  = element.parentNode;                    
       var x,y;
       //Below is fine for 0-9 scenario's but will need to be refactored for more
       //advanced/larger grids.
       try{
            y = element.classNames().detect(function(cls) { if( /y\d/.match(cls)){ return true; }})[1];
            x = parent.classNames().detect(function(cls) { if( /x\d/.match(cls)){ return true;}})[1];
        }catch(e){
            console.debug(e);
            return;
        }
 
         console.log("Coordinate " + x + "," + y);
};

The cool thing about this, is that with jQuery I can do jQuery(“#myTable tr.x2 td.y0″) and get the exact cell I am looking for… or even crazier stuff like:
“#myTable td.y0″ to select vertically down a row
OR
“#myTable tr.x0″ to select horizontally.