Using Zigfu (kinect) in canvas element of HTML5

Question

I went through the initial tutorial for making a user radar on Zigfu's website. I am having trouble getting this radar to work in the canvas element.

I want to using the drawing methods in canvas, so I don't want it in the container.

Here is my code so far taken directly from the tutorial. Thanks so much for reading!

function loaded() {

   var radardiv = document.getElementById('container');

   var radar = {
      onuserfound: function (user) {
        var userdiv = document.createElement('div');
        userdiv.className = 'user';
        user.radarelement = userdiv;
        radardiv.appendChild(user.radarelement);
      },
      onuserlost: function (user) {
        radardiv.removeChild(user.radarelement);
      },
      ondataupdate: function (zigdata){
        for (var userid in zigdata.users){
            var user = zigdata.users[userid];
            var pos = user.position;
          //console.log(pos);
            var el = user.radarelement;
            var parentElement = el.parentNode;
            var zrange = 2000;
            var xrange = 700;
            var pixelwidth = parentElement.offsetWidth;
            var pixelheight = parentElement.offsetHeight;
            var heightscale = pixelheight / zrange;
            var widthscale = pixelwidth / xrange;
            el.style.left = (((pos[0] / xrange) + 0.5) * pixelwidth - (el.offsetWidth / 2)) + "px";
            el.style.top = ((pos[2] / zrange) * pixelheight - (el.offsetHeight / 2)) - 150 + "px";
        }

      }
   };

   zig.addListener(radar);
}
document.addEventListener('DOMContentLoaded', loaded, false);



<body>

<div id = 'container'></div>
</body>
</html>

<style>
div#container {
width: 800px;
height: 600px;
border: 1px solid black;
overflow: hidden;
 }
 div.user {
position: relative;
width: 10px;
height: 10px;
background-color: red;
  }

score 0 · Answer 1 · answered Jun 03 '12 at 15:31

0

It seems you are missing tags around the javascript, as well as some css for the users radar. Also - your 'container' div is missing a >

Try copying the code from the bottom of http://zigfu.com/en/zdk/tutorials/, or - check out http://zigfu.com/en/zdk/recipes/#omercy16 for a cleaner implementation of the users radar.

answered Jun 03 '12 at 15:31

Shlomo Zippel

681
4
5

Sorry I wasn't more clear. I have already got the tutorial working for the radar. I just want it to be in the canvas element instead of a normal div. – Zach Jun 03 '12 at 22:41

score 0 · Answer 2 · edited May 23 '17 at 11:56

The radar used in the tutorial makes use of DOM div placement and positioning.
Unfortunately this can't be used inside the canvas element.

There are ways to overlay over the canvas and other workarounds. See: Placing a <div> within a <canvas>

You can also take the data directly from the plugin and draw to the canvas yourself. Here is a demo using three.js and zigfu to draw the skeleton onto a canvas: http://blog.kinect.tonkworks.com/post/30569123887/kinect-online-app-javascript-dev-tutorial-1

Using Zigfu (kinect) in canvas element of HTML5

2 Answers2