Original source: JavaScript/hands_viewer.html

hands_viewer.js

//..

function onHandData(mid, module, data) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var radius = 5;
    var scale = 1;

    canvas.width = imageSize.width;
    canvas.height = imageSize.height;

    if (typeof data.hands === 'undefined') return;
    for (var h = 0; h < data.hands.length; h++) {
        var joints = data.hands[h].trackedJoint;
        if (joints.length > 0) {
            var baseX = joints[0].positionImage.x;
            var baseY = joints[0].positionImage.y;
            var wristX = joints[0].positionImage.x;
            var wristY = joints[0].positionImage.y;

            for (var j = 0; j < joints.length; j++) {
                if (joints[j] == null || joints[j].confidence <= 0) continue;

                var x = joints[j].positionImage.x;
                var y = joints[j].positionImage.y;

                context.beginPath();
                context.arc(x * scale, y * scale, radius, 0, 2 * Math.PI);
                context.lineWidth = 2;
                context.strokeStyle = 'green';
                context.stroke();

                if (j == 2 || j == 6 || j == 10 || j == 14 || j == 18) {
                    baseX = wristX;
                    baseY = wristY;
                }

                context.beginPath();
                context.moveTo(baseX * scale, baseY * scale);
                context.lineTo(x * scale, y * scale);
                context.stroke();

                baseX = x;
                baseY = y;
            }
        }
    }
    for (var a = 0; a < data.alerts.length; a++) {
        $('#alerts_status').text('Alert: ' + JSON.stringify(data.alerts[a]));
    }
    for (var g = 0; g < data.gestures.length; g++) {
        $('#gestures_status').text('Gesture: ' + JSON.stringify(data.gestures[g]));
    }
}

//...