UbClicks Catalogue

Operating Summary

It is an application that allows us to observe the use of coordinate Z (depth) and its possibilities.

For this we have implemented three images that will be at a certain distance on the z axis and according to the distance at which our the hands and head, they will be located ahead or behind these images.

Web

No web test.

Code

Go to HTML tab:

<div id="block1" class="block"></div>
<div id="block2" class="block"></div>
<div id="block3" class="block"></div>

In this tab we can see the divs with id block, these divs will be the images that appear on the screen.

Now we move to the CSS tab and look for the properties of the blocks.

.block {
   position:absolute;
   display:block;
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 0;
}

#block1{
   background-image: url('{resources:images/planta1.png}');
   width: 400px;
   height: 400px;
   z-index: 60;
   left: 1345px;
   top: 535px;
}

#block2{
   background-image: url('{resources:images/silla.png}');
   width: 460px;
   height: 460px;
   z-index: 100;
   left: 810px;
   top: 570px;
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
} 

#block3{
   background-image: url('{resources:images/planta2.png}');
   width: 700px;
   height: 700px;
   z-index: 140;
   left: 30px;
   top: 340px;
}

We will focus on the code marked in bold, with background-image we will define the image that will appear in the block and with z-index we will indicate the distance at which the image is.

Now we will go to the Ubox Event tab and look for the getSkeletons function.

function getSkeletons(jsonObject) {

       ...
       if(joint.name == 'head'){
            document.getElementById('head' + skl).style.left = cordx + 'px';
            document.getElementById('head' + skl).style.top = cordy + 'px';
            document.getElementById('head' + skl).style.width = (cordz + 50) + 'px';
            document.getElementById('head' + skl).style.height = (cordz + 50) + 'px';
            document.getElementById('head' + skl).style.borderRadius  = cordz + 'px';
            document.getElementById('head' + skl).style.zIndex = Math.floor(cordz);   
      }

      if(joint.name == 'handleft'){
            document.getElementById('handleft' + skl).style.left = cordx + 'px';
            document.getElementById('handleft' + skl).style.top = cordy + 'px';
            document.getElementById('handleft' + skl).style.width = cordz + 'px';
            document.getElementById('handleft' + skl).style.height = cordz + 'px';
            document.getElementById('handleft' + skl).style.borderRadius  = cordz + 'px';
            document.getElementById('handleft' + skl).style.zIndex = Math.floor(cordz);
      }

      if(joint.name == 'handright'){
            document.getElementById('handright' + skl).style.left = cordx + 'px';
            document.getElementById('handright' + skl).style.top = cordy + 'px';
            document.getElementById('handright' + skl).style.width = cordz + 'px';
            document.getElementById('handright' + skl).style.height = cordz + 'px';
            document.getElementById('handright' + skl).style.borderRadius = cordz + 'px';
            document.getElementById('handright' + skl).style.zIndex = Math.floor(cordz); 
      }

      mainZPos = window['zPos' + selectedSkl];
      mainXPos = window['xPos' + selectedSkl];
      updatePos(selectedSkl);
    }
  }
}

Again we will focus on the bold text, in this case we will use head, handright and handleft. From them we will extract coordinate Z and apply it to the z-index of the CSS with document.getElementById (‘ ‘) .style.zIndex = Math.floor (cordz) to their respective div, then if it is coordinate exceeds or not the z-index set in the image (block) will be ahead or behind.

The rest of the coordinates are used to give the div a position or size according to the coordinates.