demos/tests/test5.html

<html><head>
<script src="../../src/NyAs3Utils.js"></script>
<script src="../../src/FLARArrayUtil.js"></script>
<script src="../../src/FLARException.js"></script>
<script src="../../src/FLARMat.js"></script>
<script src="../../src/FLARRgbPixelReader.js"></script>
<script src="../../src/NyARHistogramAnalyzer.js"></script>
<script src="../../src/NyARPca2d.js"></script>
<script src="../../src/NyARRasterReader.js"></script>
<script src="../../src/NyARTypes.js"></script>
<script src="../../src/FLARRasterFilter.js"></script>
<script src="../../src/FLARTypes.js"></script>
<script src="../../src/NyARLabel.js"></script>
<script src="../../src/FLARLabeling.js"></script>
<script src="../../src/NyARParam.js"></script>
<script src="../../src/FLARParam.js"></script>
<script src="../../src/NyARRaster.js"></script>
<script src="../../src/FLARRaster.js"></script>
<script src="../../src/NyARCode.js"></script>
<script src="../../src/FLARCode.js"></script>
<script src="../../src/NyARMatch.js"></script>
<script src="../../src/NyARRasterAnalyzer.js"></script>
<script src="../../src/FLARRasterAnalyzer.js"></script>
<script src="../../src/NyARRasterFilter.js"></script>
<script src="../../src/NyARSquareDetect.js"></script>
<script src="../../src/FLARSquareDetect.js"></script>
<script src="../../src/NyARTransMat.js"></script>
<script src="../../src/FLARTransMat.js"></script>
<script src="../../src/NyARUtils.js"></script>
<script src="../../src/NyARIdMarker.js"></script>
<script src="../../src/NyARPickup.js"></script>
<script src="../../src/FLARProcessor.js"></script>
<script src="../../src/NyARDetector.js"></script>
<script src="../../src/FLARDetector.js"></script>
<script src="../../src/FLARIdMarkerDetector.js"></script>
<script src="../../src/NyARSingleMarkerProcesser.js"></script>
<script src="../../src/NyUtils.js"></script>
<script src="../magi.js"></script>
<script>
/**
  CPSQueue serializes a bunch of callbacks, which is useful for e.g. loading
  images in order.

  To use CPSQueue, first create it passing the call function as argument:

    var q = new CPSQueue(function(src, callback, onError){
      var img = new Image()
      img.onload = callback
      img.onerror = onError
      img.onabort = onError
      img.src = src
    })

  Then use the queue by calling append:

    Rg(1,10).forEach(function(i){
      q.append(i+".jpg",
        function(){ console.log("Loaded "+this.src) },
        function(){ console.log("Failed to load "+this.src) })
    })

  Now you should see that the images load (or fail to load) in the same order
  as they were appended, even if 1.jpg is 5MB and 2.jpg is 1kB in size.
  */
CPSQueue = Klass({
  initialize : function(call, cond, merge) {
    this.queue = [];
    if (call) this.call = call;
    if (cond) this.cond = cond;
    if (merge) this.merge = merge;
  },

  append : function (args, callback, onError) {
    if (this.cond.call(this, args)) {
      if (callback) callback(args);
    } else {
      this.queue.push({args: args, callback: callback, onError: onError});
      this.process();
    }
  },

  abort : function() {
    this.queue = [];
    this.aborted = true;
  },

  process : function() {
    if (this.processing) return;
    this.aborted = false;
    this.processing = true;
    this.queue = this.merge(this.queue);
    var t = this.queue.shift();
    while (t) {
      if (this.cond.call(this, t.args)) {
        if (t.callback) t.callback(t.args);
        t = this.queue.shift();
      } else {
        break;
      }
    }
    if (!t) {
      this.processing = false;
      return;
    }
    var self = this;
    this.call(t.args, function(arg) {
      if (!self.aborted) {
        if (t.callback) t.callback(t.args, arg);
      }
      self.processing = false;
      self.process();
    }, function(arg) {
      if (t.onError) t.onError(t.args, arg);
      self.processing = false;
      self.process();
    })
  },

  merge : function(q) {
    return q;
  },

  call : function(args, cb) {
    cb(args);
  },

  cond : function(args) {
    return false;
  }
});

UploadNotification = Klass({
  initialize : function(file, container) {
    this.file = file;
    this.progressElem = E.canvas(30, 30);
    this.elem = DIV({className: 'uploadNotification'},
      this.progressElem,
      H3(file.name),
      SPAN(this.formatSize(file.size, "B"))
    );
    container.appendChild(this.elem);
  },

  formatSize : function(b, unit) {
    var mags = ["", "k", "M", "G", "T", "P", "E"];
    var i,j;
    for (i=0, j=1000; i<mags.length && j<b; i++, j*=1000)
      null;
    if (i == 0) {
      return b + unit;
    } else {
      var s = parseInt(10 * b / (j/1000)) / 10;
      return s + mags[i] + unit;
    }
  },

  onprogress : function(x) {
    var w = this.progressElem.width, h = this.progressElem.height;
    var ctx = this.progressElem.getContext('2d');
    ctx.clearRect(0,0,w,h);
    var r = Math.min(w,h) / 2 - 5;
    ctx.beginPath();
    ctx.arc(w/2,h/2, r, 0, Math.PI*2, false);
    ctx.strokeStyle = "rgba(255,255,255, 0.2)"
    ctx.lineWidth = 8;
    ctx.stroke();
    ctx.beginPath();
    var top = -Math.PI/2;
    var frac = x.loaded / x.total;
    if (x.type == 'load') frac = 1;
    if (x.type == 'loadstart') frac = 0;
    ctx.arc(w/2,h/2, r, top, top+frac*Math.PI*2, false);
    ctx.strokeStyle = "rgba(0,192,255, 0.8)"
    ctx.lineWidth = 9;
    ctx.stroke();
  },

  upload : function(callback, onerror) {
    var self = this;
    this.xhr = DnDUpload.uploadFile(this.file, {}, function(x) {
      self.fadeStart = new Date();
      self.fadeInterval = setInterval(function() {
        var elapsed = new Date() - self.fadeStart;
        var f = elapsed / 500;
        if (f >= 1) {
          f = 1;
          self.elem.parentNode.removeChild(self.elem);
          clearInterval(self.fadeInterval);
        }
        self.elem.opacity = 1 - f;
      }, 15);
      callback();
    }, function(x) {
      self.elem.appendChild(H3("Error: " + x.toString()));
      onerror();
    },
    function(x){ self.onprogress(x) });
  }
});

DnDUpload = Klass({
  formData : function(name, value, filename, headers) {
    var CRLF = '\r\n';
    var s = 'Content-Disposition: form-data; ';
    s += 'name="'+name+'"';
    if (filename) s += '; filename="'+filename+'"';
    if (headers) s += CRLF + headers;
    s += CRLF + CRLF + value + CRLF;
    return s;
  },

  generateBoundary : function(parts) {
    var b;
    var found = true;
    while (found) {
      found = false;
      b = Math.random() + "---BOUNDARY---" + new Date().getTime();
      for (var i=0; i<parts.length; i++) {
        if (parts[i].indexOf(b) != -1) {
          found = true;
          break;
        }
      }
    }
    return b;
  },

  sendFileUpload : function(xhr, parts, callback, onerror, onprogress) {
    xhr.open("POST", this.path);
    if (callback)
      xhr.addEventListener('load', callback, false);
    if (onerror)
      xhr.addEventListener('error', onerror, false);
    if (onprogress) {
      xhr.upload.addEventListener('error', function(x) {
      }, false);
      xhr.upload.addEventListener('load', onprogress, false);
      xhr.upload.addEventListener('loadstart', onprogress, false);
      xhr.upload.addEventListener('progress', onprogress, false);
    }
    if (window.FormData && parts instanceof window.FormData) {
      xhr.send(parts);
    } else {
      var CRLF = '\r\n';
      var boundary = this.generateBoundary(parts);
      var req = "--" + boundary + CRLF +
                parts.join("--" + boundary + CRLF) +
                "--" + boundary + "--" + CRLF;
      var ct = "multipart/form-data; boundary=" + boundary;
      xhr.setRequestHeader("Content-Type", ct);
      xhr.sendAsBinary(req);
    }
  },

  uploadFile : function(file, opts, callback, onerror, onprogress) {
    return this.uploadFiles([file], opts, callback, onerror, onprogress);
  },

  uploadFiles : function(files, opts, callback, onerror, onprogress) {
    var xhr = new XMLHttpRequest;
    if (!(window.FormData || xhr.sendAsBinary))
      throw("Can't upload files!");
    var self = this;
    var parts;
    if (window.FormData) {
      parts = new FormData();
    } else {
      parts = [];
      parts.append = function(key, value) {
        if (value.getAsBinary)
          this.push( self.formData(key, value.getAsBinary(), value.name, "Content-Type: "+value.type) );
        else
          this.push( self.formData(key, value) );
      };
    }
    for (var i=0; i<files.length; i++)
      parts.append("files", files[i]);
    self.sendFileUpload(xhr, parts, callback, onerror, onprogress);
    return xhr;
  },

  getUploadQueue : function() {
    if (!this.uploadQueue)
      this.uploadQueue = new CPSQueue(function(notification, callback, onerror) {
        notification.upload(callback, onerror);
      });
    return this.uploadQueue;
  },

  upload : function(files, notificationElement) {
    var uq = this.getUploadQueue();
    toArray(files).forEach(function(file) {
      var notification = new UploadNotification(file, notificationElement);
      uq.append(notification);
    });
  },

  setupTarget : function(cont, callback) {
    var self = this;

    var hasFiles = function(ev) {
      return ev.dataTransfer &&
            (ev.dataTransfer.hasOwnProperty('files') ||
             ev.dataTransfer.__lookupGetter__('files'));
    };

    cont.addEventListener('dragenter', function(ev) {
      if (!hasFiles(ev)) return;
      this.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
      Event.stop(ev);
    }, false);
    cont.addEventListener('dragleave', function(ev) {
      if (!hasFiles(ev)) return;
      this.style.backgroundColor = 'transparent';
      Event.stop(ev);
    }, false);
    cont.addEventListener('dragover', function(ev) {
      if (!hasFiles(ev)) return;
      this.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
      Event.stop(ev);
    }, false);
    cont.addEventListener('drop', function(ev) {
      if (!hasFiles(ev)) return;
      this.style.backgroundColor = 'transparent';
      Event.stop(ev);
      if (callback)
        callback(ev.dataTransfer.files, this);
      else
        self.upload(ev.dataTransfer.files, this);
    }, false);
  }
});
</script>
<script>
  threshold = 103;
  DEBUG = true;
  window.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 320;
    canvas.height = 240;
    canvas.style.display = 'block';
    byId('controls').appendChild(canvas);

    canvas.id = 'debugCanvas';

    var raster = new NyARRgbRaster_Canvas2D(canvas);
    var param = new FLARParam(320,240);

    var resultMat = new NyARTransMatResult();

    var detector = new FLARMultiIdMarkerDetector(param, 80);
    detector.setContinueMode(true);

    video = new Image();
    DnDUpload.setupTarget(document.documentElement, function(files) {
      var reader = new FileReader();
      reader.onload = function(){
        video.src = reader.result;
      };
      reader.readAsDataURL(files[0]);
    });

    var glCanvas = document.createElement('canvas');
    glCanvas.width = 640;
    glCanvas.height = 480;
    byId('display').appendChild(glCanvas);
    var display = new Magi.Scene(glCanvas);
    param.copyCameraMatrix(display.camera.perspectiveMatrix, 100, 10000);
    display.camera.useProjectionMatrix = true;
    var videoTex = new Magi.FlipFilterQuad();
    videoTex.material.textures.Texture0 = new Magi.Texture();
    videoTex.material.textures.Texture0.image = video;
    videoTex.material.textures.Texture0.generateMipmaps = false;
    display.scene.appendChild(videoTex);
    display.scene.bounceVector = [0,0];
    display.scene.addFrameListener(function(){
      if (display.changed) {
        video.onload();
        display.changed = false;
      }
      glCanvas.style.marginLeft = -5+this.bounceVector[0]+'px';
      glCanvas.style.marginTop = -5+this.bounceVector[1]+'px';
      this.bounceVector[0] = this.bounceVector[1] = 0;
    });
    display.scene.afterTransform(function(m) {
      mat4.set(m, Magi.DefaultMaterial.lightMatrix);
    });

    var ctx = canvas.getContext('2d');
    ctx.font = "24px URW Gothic L, Arial, Sans-serif";

    var times = [];
    var pastResults = {};
    var lastTime = 0;
    var cubes = {};

    window.updateImage = function() {
      display.changed = true;
    }

    video.onload = function(){
      var detectThreshold = false;
      if (this.previousSource != this.src) {
        for (var i in pastResults) delete pastResults[i];
        this.previousSource = this.src;
        detectThreshold = true;
      }
      byId('threshold-value').textContent = threshold;
      byId('threshold').value = threshold;

      videoTex.material.textures.Texture0.changed = true;

      ctx.drawImage(video, 0,0,320,240);
      canvas.changed = true;

      var t = new Date();
      for (var ithreshold=39; ithreshold<200; ithreshold+=8) {
        if (!detectThreshold)
          ithreshold = threshold;
        var detected = detector.detectMarkerLite(raster, ithreshold);
        for (var idx = 0; idx<detected; idx++) {
          var id = detector.getIdMarkerData(idx);
          //read data from i_code via Marsial--Marshal経由で読み出す
          var currId;
          if (id.packetLength > 4) {
            currId = -1;
          }else{
            currId=0;
            //最大4バイト繋げて１個のint値に変換
            for (var i = 0; i < id.packetLength; i++ ) {
              currId = (currId << 8) | id.getPacketData(i);
              //console.log("id[", i, "]=", id.getPacketData(i));
            }
          }
          //console.log("[add] : ID = " + currId);
          if (!pastResults[currId]) {
            pastResults[currId] = {};
          }
          detector.getTransformMatrix(idx, resultMat);
          pastResults[currId].age = 0;
          pastResults[currId].transform = Object.asCopy(resultMat);
        }
        if (!detectThreshold)
          break;
      }
      for (var i in pastResults) {
        var r = pastResults[i];
        if (r.age > 0) delete pastResults[i];
        //r.age++;
      }
      for (var i in cubes) cubes[i].display = false;
      for (var i in pastResults) {
        if (!cubes[i]) {
          var pivot = new Magi.Node();
          pivot.transform = mat4.identity();
          pivot.setScale(80);
          var cube;
          cube = new Magi.Cube();
          cube.setZ(-0.125);
          cube.scaling[2] = 0.25;
          cube.setAxis(0,0,1);
          cube.bounce = 100;
          var txt = new Magi.Text(i.toString());
          cube.texts = ['WebGL', 'Canvas', 'JavaScript', 'ARToolKit', 'HTML5'];
          cube.bounceDir = vec3.create(0,0,-1);
          cube.zeroVec = vec3.create(0,0,0);
          cube.pivot = pivot;
          cube.markerId = toInt(i);
          cube.txt = txt;
          cube.addFrameListener(function(t,dt) {
            t += this.markerId*90;
            if (!this.pivot.display) return;
            var s = Math.sin(t/500);
            var prev = Math.sin((t-dt)/500)
            this.bounce -= dt;
            if (this.bounce < 0) this.bounce = 0;
            if (prev > 0 != s > 0) this.bounce = 100;
            if (this.bounce > 0) {
              this.zeroVec[0] = this.zeroVec[1] = this.zeroVec[2] = 0;
              this.bounceDir[0] = this.bounceDir[1] = 0; this.bounceDir[2] = -1;
              mat4.multiplyVec3(this.pivot.matrix, this.zeroVec);
              mat4.multiplyVec3(this.pivot.matrix, this.bounceDir);
              vec3.subtract(this.bounceDir,this.zeroVec);
              //console.log(toArray(this.bounceDir));
              display.scene.bounceVector[0] += toInt(-this.bounceDir[0]*0.001*this.bounce);
              display.scene.bounceVector[1] += toInt(this.bounceDir[1]*0.001*this.bounce);
            }
            if (this.bounce == 100) this.txt.setText(this.texts.rotate());
            //var sca = 0.5*s + 1.0;
            //this.setScale(sca,sca,sca);
            this.setZ(-Math.abs(s)-0.105);
            this.setAngle(t/500);
          });
          pivot.appendChild(cube);
          txt.setColor('#f0f0d8');
          txt.setFont('URW Gothic L, Arial, Sans-serif');
          txt.setFontSize(32);
          txt.setAlign(txt.leftAlign, txt.bottomAlign)
              .setPosition(-0.45, -0.48, -0.51)
              .setScale(1/190,1/190,1);
          for (var k=0; k<10; k++) {
            var ring = new Magi.Ring(0.05, Math.PI*1.95, 64, 1);
            ring.sc = 0.7+Math.random()*0.2;
            ring.setScale(ring.sc);
            ring.speed = 0.5+Math.random();
            ring.direction = Math.random() > 0.5 ? 1 : -1;
            ring.addFrameListener(function(t,dt) {
              var y = Math.sin(this.speed*t/400)*0.3+0.7;
              this.setY(y);
              this.setScale(this.sc + y*(this.cube.bounce / 400));
              this.setAngle(this.speed*this.direction*t/300);
            });
            ring.blendFuncSrc = ring.blendFuncDst = 'ONE';
            ring.blend = true;
            ring.transparent = true;
            ring.cube = cube;
            var ringPivot = new Magi.Node();
            ringPivot.appendChild(ring);
            ringPivot.setAxis(1,0,0);
            ringPivot.setAngle(-Math.PI/2);
            pivot.appendChild(ringPivot);
          }
          cube.appendChild(txt);
          cube.material.floats.MaterialAmbient = vec4.create([1,1,1,0.5]);
          cube.material.floats.MaterialDiffuse = vec4.create([1,0.15,0.1,1.0]);
          cube.material.floats.MaterialSpecular = vec4.create([1,0.15,0.1,1.0]);
          cube.material.floats.LightPos = vec4.create([-300, -100, -200, 1.0]);
          cube.material.floats.LightAmbient = vec4.create([0.15, 0.1, 0.1, 1]);
          pivot.cube = cube;
          pivot.txt = txt;
          display.scene.appendChild(pivot);
          cubes[i] = pivot;
        }
        cubes[i].display = true;
        var mat = pastResults[i].transform;
        var cm = cubes[i].transform;
        cm[0] = mat.m00;
        cm[1] = -mat.m10;
        cm[2] = mat.m20;
        cm[3] = 0;
        cm[4] = mat.m01;
        cm[5] = -mat.m11;
        cm[6] = mat.m21;
        cm[7] = 0;
        cm[8] = -mat.m02;
        cm[9] = mat.m12;
        cm[10] = -mat.m22;
        cm[11] = 0;
        cm[12] = mat.m03;
        cm[13] = -mat.m13;
        cm[14] = mat.m23;
        cm[15] = 1;
      }
    }
    video.src = "../images/chalk_multi.jpg";
  }
</script>

</head>
<body>
<div id="controls" style="position:absolute;left:660px;">
  <h3 style="margin-top:0px;">Drag an image here somewhere</h3>
  <div>
  <select onchange="video.src=this.value;threshold=parseInt(this.options[this.selectedIndex].getAttribute('threshold'));">
    <option value="../images/chalk_multi.jpg" threshold="100">Chalkboard AR flowers</option>
    <option value="../images/kuva.jpg" threshold="103">Drawer</option>
    <option value="../images/armchair.jpg" threshold="160">Armchair</option>
  </select>
  </div>
  Threshold <input id="threshold" type="range" min="0" max="255" value="100" onchange="threshold=this.value;updateImage();" style="vertical-align:middle;"></input>
  <span id="threshold-value">100</span>
</div>
<div id="display" style="overflow:hidden;width:630px;height:470px;"></div>
</body>
</html>