Movement XYZ Catalogue

Operating Summary

In this aplication we can appreciate the movement of our body in each coordinate axis, to do this, we have referenced the coordinates of the sensor in the range slider.

Web

Web simulation mode has been created, you can access to this mode pressing key enter. Now we can simulate the X (horizontal) and Z (depth) axis with the mouse movement.

Code

If you want to know about how the map works click on this Link, in this application will be skipped. We will focus on trying to understand how the sensor works.

In the HTML tab we visualize the following code:

<input id="valorY" class="sliderY" type="range" min="0" max="100" value="0"> 
<input id="valorX" class="sliderX" type="range" min="0" max="100" value="0">
<input id="valorZ" class="sliderZ" type="range" min="0" max="100" value="0"> 

To these input type range we will assign the coordinates of our body.

To do this we must go to the getSkeletons function in the Ubox Event tab, there will be comments that will help you to understand the code better.

function getSkeletons(jsonObject) {

    if (context == null) { return; }

    var skl = 0;

    try {
        for (var i = 0; i < jsonObject.skeletons.length; i++) {
            skl++;

            for (var j = 0; j < jsonObject.skeletons[i].joints.length; j++) {
                 var joint = jsonObject.skeletons[i].joints[j];

                 var cordx = (joint.x * 100) / 640;
                 var cordy = 100 - ((joint.y * 100) / 480);
                 var cordz = (joint.z * 100) / 4;
                 
                 if (joint.name == 'head') {
                      document.getElementById('valorY').value = cordy;
                 }
                 if (joint.name == 'spinecenter') {
                      document.getElementById('valorX').value = cordx;
                      document.getElementById('valorZ').value = cordz;

window['xPos' + skl] = Math.round(document.getElementById('spinecenter' + skl).style.left.replace("px", ""));

window['zPos' + skl] = Number(document.getElementById('spinecenter' + skl).style.zIndex);

$('#player' + skl).css('top', ((window['zPos' + skl] - zPosMin) * 100) / zDistance + '%');
$('#player' + skl).css('left', ((window['xPos' + skl] - xPosMin) * 100) / xDistance + '%');
$('#player' + skl).show();

                 }
                 updatePos(1);
             }
}

In this case we will look at the bold text of the code.

When we use if(joint.name == ‘ ‘)  we select the part of the body from which we want to extract the information. In this case we have selected the head (head) to refer with cordy (from ‘head’) to the value of the range slider.

Now we will do the same with the x & z coordinate but using the spinecenter instead of the head, we can check it in the bold letter of the code.