Andrus Development: January 2013

Thursday, January 31, 2013

Graph written in javascript of a Normal Distribution Random Number Gen.

Code Snippet

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Normal Distribution</title>
    <link href="/Content/site.css" rel="stylesheet"/>
 
    <script src="/Scripts/modernizr-2.5.3.js"></script>
 
    <script src="/Scripts/jquery-1.7.1.js"></script>
 
    
</head>
<body>
    
 
<h2 id="header" class="header">Normal Distribution</h2>
 
<canvas id="myCanvas" width="1600px" height="1200px" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.
</canvas>
 
<script type="text/javascript">
    function Point(X, Y) {this.X = X;this.Y = Y;};
    function resizeFrame() {var h = $(window).height();var w = $(window).width();$("#myCanvas").css('height', h - 100); $("#myCanvas").css('width', w - 50);}
    function canvas() {this.height = $(window).height();this.width = $(window).width();}
 
    $(document).ready(function () {
        jQuery.event.add(window, "load", resizeFrame);
        jQuery.event.add(window, "resize", resizeFrame);
    });
 
    var min,max,headSpace;
    var size = 100000;
    var density = [];
    var dcount = 0;
    var normalValues = [];
    var dmin = 9007199254740992;
    var dmax = 0;
    var colors = ['#0069a5', '#0098ee', '#7bd2f6', '#a8a8a8', '#55b5f5', '#223366'];
    var g = document.getElementById("myCanvas");
    var ctx = g.getContext("2d");
    var notchColor = 'black';
    var textColor = 'black';
    var fontFamily = 'Arial';
    var labelFontSize = 35;
    var dataFontSize = 25;
    var width = g.width;
    var height = g.height;
    var barLeft = width *.10;
    var barBottom = height * .90;
 
    draw();
 
    ctx.strokeStyle = textColor;
    ctx.lineWidth = 2;
    ctx.beginPath();
    drawGraph();
    ctx.stroke();
 
    function drawLine(pt1, pt2) {
        ctx.moveTo(pt1.X, pt1.Y);
        ctx.lineTo(pt2.X, pt2.Y);
    }
 
    function drawGraph() {
        $('#header').text('Normal Distribution of ' + size.toString() + ' values');
        ctx.font = labelFontSize.toString() + "px " + fontFamily;
        var data = "Data";
        ctx.fillText(data, width >> 1, height - labelFontSize.toString());
 
        //rotate ctx to draw text vertically then restore back to norm
        var freq = "Frequency";
        ctx.save();
        ctx.rotate(-Math.PI / 2);
        ctx.textAlign = "center";
        ctx.fillText(freq, -1 * (height >> 1), barLeft >> 2);
        ctx.restore();
 
        //draw horizontal bar   
        var pt1 = new Point(barLeft, barBottom);
        var pt2 = new Point(width, barBottom);
        drawLine(pt1, pt2);
 
        //draw vertical bar
        var pt3 = new Point(barLeft, 0);
        var pt4 = new Point(barLeft, barBottom);
        drawLine(pt3, pt4);
 
        var startValue = 0;
        var partitions = density.length;  //(Math.ceil((dmax - dmin) / barBottom));
        var increment = Math.ceil((dmax - dmin) / partitions);
 
        ctx.font = dataFontSize.toString() + "px " + fontFamily;
        ctx.fillStyle = textColor;
        //Draw vertical markers
        for (var i = startValue + increment; i <= dmax; i = i + increment) {
            var iString = i.toString(); //.substr(0, sigFig);
            var marker = barBottom * ((dmax - i) / dmax);
            ctx.fillRect(barLeft - 5, marker, 10, 3); //draw bar
            ctx.fillText(iString, barLeft - ctx.measureText(iString).width - 10, marker + (labelFontSize>>1)); //draw text
        }
    }
 
    function draw() {
        randomize();
        sort();
 
        dmax = dmax +  Math.ceil((dmax - dmin) / density.length);//give some head space at top of chart
 
        var xPartitions = ((width - barLeft) / density.length);
        var colorSequence = 0;
        var barHeight;
        var x = barLeft;
        var y = barBottom;
 
        for (var i = 0; i < density.length; i++) {
            barHeight = barBottom - (barBottom * ((dmax - density[i])/dmax));
            y = barBottom - barHeight;
 
            //bar
            ctx.lineWidth = 1;
            ctx.fillStyle = colors[colorSequence];
            ctx.fillRect(x, y, barLeft, barHeight);
 
            //value text
            ctx.font = dataFontSize.toString() + "px " + fontFamily;
            ctx.fillStyle = notchColor;
            ctx.fillText(density[i].toString(), (x + x + xPartitions) >> 1, barBottom - barHeight);
 
            //notches
            ctx.fillStyle = notchColor;
            ctx.fillRect((x + x + xPartitions) >> 1, barBottom, 3, 10);
 
            //x-axis label
            ctx.font = dataFontSize.toString() + "px " + fontFamily;
            ctx.fillText(i.toString(), (x + x + xPartitions) >> 1, barBottom + 30);
 
            x = x + xPartitions;
 
            //color cycle
            if (colorSequence + 1 == colors.length) {colorSequence = 0;}else{colorSequence++;}
        }
    }
 
    function randomize() {
        var x1, x2, w, y1, y2;
        var count = size * .5;
 
        for (var i = 0; i < count; i++) {
            do {
                x1 = 2 * Math.random() - 1;
                x2 = 2 * Math.random() - 1;
                w = x1 * x1 + x2 * x2;
            } while (w >= 1);
 
            w = Math.sqrt((-2 * Math.log(w)) / w);
            y1 = x1 * w;
            y2 = x2 * w;
 
            //This technique generates two numbers at a time, might as well use both
            normalValues[i * 2] = y1;
            normalValues[(i * 2) + 1] = y2;
        }
    }
 
    function sort() {
        var multiplier;
        var blocks = 100;
 
        //find min/max values
        min = normalValues[0];
        max = normalValues[0];
 
        for(var i = 1; i <  normalValues.length; i++){
            if(normalValues[i] < min)
                min = normalValues[i];
 
            if(normalValues[i] > max)
                max = normalValues[i];
        }
 
        //create buckets
        var buckets = (Math.round(max) - Math.round(min)) + 1;
        for (var i = 0;  i <= buckets; i++) {
            density[i] = 0;
        }
 
        //sort into buckets
        for (var i = 0; i < normalValues.length; i++){
            //get value
            var val = Math.round(normalValues[i]);
            //find where in bucket it would be placed
            var k = 0;
            
            for(var j = Math.round(min); j <= Math.round(max); j++){
                if( j == val){
                    density[k] = density[k] + 1;
                    if(dmin > density[k])
                        dmin = density[k];
                    if(dmax < density[k])
                        dmax = density[k];
                    dcount++;
                    break;
                }
                k++;
            }
        }  
    }
</script>
 
 
</body>
</html>

Wednesday, January 30, 2013

Quick Note: Resize canvas to browser

Resize canvas to browser's width/height (at least in IE9+), using jQuery:

Code Snippet

<canvas id="myCanvas" width="1600px" height="1200px" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.
</canvas>
 
<script type="text/javascript">
    function resizeFrame() {var h = $(window).height();var w = $(window).width();$("#myCanvas").css('height', h - 100); $("#myCanvas").css('width', w - 50);}
 
    $(document).ready(function () {
        jQuery.event.add(window, "load", resizeFrame);
        jQuery.event.add(window, "resize", resizeFrame);
    });
 
    
</script>

Tuesday, January 15, 2013

Quicky: Step through Javascript in Visual Studio

After you hit "F5" (run in debug mode) and get the website running, go the page in question that should be running your javascript. Go back to Visual Studio > Solution Explorer > Script Documents > Windows Internet Explorer you will see all the scripts that are currently running.

In that section, if you scroll down you should either see the name of the page or default followed by some text (ie: default?dzHbakj3kj09d0dflkjb_lk2j3jlkj)

Open the file and place your breakpoint(s). Allowing you to do quickwatch or to view the data.

Some additional methods on stepping through and debugging Javascript:

If you have VS2012 there is the DOM Explorer: http://msdn.microsoft.com/en-us/library/windows/apps/hh441474.aspx
Using the "debugger" keyword in javascript (http://www.aspsnippets.com/Articles/Debug-JavaScript-and-jQuery-using-Visual-Studio-in-Internet-Explorer-browser.aspx)

JavaScript has a debugger keyword which can appear in JavaScript source. Older JavaScript engines will flag its use as a syntax error (use of a reserved word). But newer engines will allow the keyword. Engine embedders can install a callback hook to be called if and when the keyword is reached during script execution. At some future point there may be a JavaScript Debugger which will install such a hook and pop up a fully featured debugging window when this event fires. For now I have created such a hook in xpconnect which is set in DEBUG builds only. If the debugger keyword is reached then the JavaScript stack will be dumped to the native console (same as if DumpJSStack() had been called.

After hitting the debugger keword and dumping the JS call stack, JS execution will continue as if nothing unusual had happened. If you would like this to stop in your native debugger then set a breakpoint in xpc_DebuggerKeywordHandler in your native debugger. The debugger statement can be very useful as a kind of super dump as you develop your JavaScript code. You can also use it as a kind of assert: if(some_unusual_condition) debugger;

Note 1) in the example above the test will always happen even though debugger might have no effect in non-DEBUG builds 2) at some future point someone is bound to ship a JavaScript Debugger that will catch these cases (even in non-DEBUG builds). When that happens, users trying to debug their own JS code might trip over your debugger statements. So, while these debugger statements might be very useful as you write code, you may not want to leave them in permanently.

- Mozilla http://www-archive.mozilla.org/scriptable/javascript-stack-dumper.html

Friday, January 04, 2013

Automatically Attach Process When Debugging in VS

Working with a MVP and MVC and hated that I always had to go to Debug>Attach Process... to step through the MVC side of things. Found on Stack Overflow the solution I needed: http://stackoverflow.com/questions/9030071/visual-studio-2010-automatic-attach-to-process

1) Set project up as multiple startup. Right-click on the solution and select "Set Startup Projects...". In the Action set the projects that is usually the default and the ones you usually need to attach.

2) In the project you usually need to attach, right click the project and go to the properties. Set it to have no startup project or in this case web page. (Web >> Don't Open a page. Wait for a request from an exteran application.

Andrus Development

About Me