Skip to content

Instantly share code, notes, and snippets.

@bwhite

bwhite/glass.html

Forked from amiller/glass.html
Last active November 7, 2018 22:14
Show Gist options
  • Save bwhite/9985986 to your computer and use it in GitHub Desktop.
Save bwhite/9985986 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript] AR Tag Warping
Raw
glass.html
<html style="width:100%; height:100%; overflow:hidden">
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="offscreen" width="640" height="360" style="display:hidden"></canvas>
<script>
HEIGHT = 360;
WIDTH = 640;
function drawCircle(x, y,tag) {
var width = WIDTH;
var height = HEIGHT;
var c = document.getElementById("offscreen");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, width, height);
for (var i = 0; i < 50; i++) {
ctx.beginPath();
ctx.arc(x,y,10+15*i,0,2*Math.PI);
ctx.closePath();
ctx.strokeStyle = 'red'
ctx.stroke();
}
ctx.font="20px Georgia";
ctx.fillStyle="white"
ctx.fillText(tag,x,y);
var dataURL = c.toDataURL();
return dataURL; // Need to strip prefix?
}
function rangeToTag(t) {
// Crude distance estimation, based on the focal length of the glass
// camera and the diagonal distance of the AR fiducial. This is only valid
// when looking *head-on* at the the fiducial marker.
var x0 = t[1];
var y0 = t[2];
var x1 = t[5];
var y1 = t[6];
var distPx = Math.sqrt((x0-x1)*(x0-x1) + (y0-y1)*(y0-y1));
var focalLengthPx = 2968.5/8; // Focal length, for 640x360 view
var distMeters = 0.287; // Diagonal size of AR tags printed out.
var rangeMeters = distMeters * focalLengthPx / distPx;
return rangeMeters;
}
function printTagName(x,y,tag) {
var width = WIDTH;
var height = HEIGHT;
WS.log("Tag" + tag);
var c = document.getElementById("offscreen");
var ctx = c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillStyle="blue"
ctx.fillText(tag,x,y);
}
function getData() {
var c = document.getElementById("offscreen");
var ctx = c.getContext("2d");
var dataURL = c.toDataURL();
return dataURL; // Need to strip prefix?
}
function printClear() {
var width = WIDTH;
var height = HEIGHT;
var c = document.getElementById("offscreen");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, width, height);
var dataURL = c.toDataURL();
return dataURL;
}
function setImage(imageb64) {
var imageObj = new Image();
imageObj.onload = function() {
var c = document.getElementById("offscreen");
var ctx = c.getContext("2d");
ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'data:image/jpg;base64,' + imageb64;
}
function cb(h) {
WS.log(h)
}
function HMultPoint(a, b) {
var c = [0, 0, 0];
c[2] = a[6] * b[0] + a[7] * b[1] + a[8];
c[0] = (a[0] * b[0] + a[1] * b[1] + a[2]) / c[2];
c[1] = (a[3] * b[0] + a[4] * b[1] + a[5]) / c[2];
return [c[0], c[1]];
}
function server() {
WS.cameraOn(.25, HEIGHT, WIDTH);
WS.cvInit(function () {
WS.displayWarpView([3.0439236881258753, -0.09811170052611454, -1351.6367347302782, 0.03321587552236447, 3.053154626691264, -40.341560801335376, -0.00010172584427831437, -5.8759263127489935e-05, 1.0]);
WS.log('inited');
WS.picarusARTagFactory(function (model) {
WS.say('Loaded');
model.processWarpTargets(function (tags) {
WS.log('Got tags: ' + JSON.stringify(tags));
WS.log(JSON.stringify(tags));
var out = 'Tag';
for (var i = 0; i < tags.length; i++)
out += ' ' + tags[i].id;
if (tags.length)
WS.say(out);
var numTags = tags.length;
printClear();
//if (tags.length) {
//return;
//WS.say(tags[0].length + " tags. Range, " + Math.round(rangeToTag(tags[0])*10)/10. + " meters.");
for(var cnt=0; cnt < numTags; cnt++) {
var x = 0;
var y = 0;
for (var i = 0; i < 4; i++) {
x += tags[cnt].xy[i][0];
y += tags[cnt].xy[i][1];
}
printTagName(x / 4, y / 4, tags[cnt].id);
}
WSRAW.warpSetOverlay(getData().split(',')[1]);
});
});
});
/*WS.subscribe('warptags:sample', function (channel, tags) {
})*/
function sample() {
WS.warpPreviewSampleGlass(function (data) {
WS.log('got data');
setImage(data);
});
}
WS.dataLog(false, true, .15);
WS.gestureCallback('onGesture', function (gesture) {
if (gesture === 'TAP') {
WS.sound('SUCCESS');
sample();
}
});
}
function main() {
if (WS.scriptVersion(1)) return;
WS.serverConnect('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</html>
Raw
manifest.json
{"name":"AR Tag Warping"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment