colegleason/glass.html

## glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
<!-- You can include external scripts here like so... -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<style>
    #container {
        width: 640px;
        height: 480px;
    }

    #image {
        width: 100%;
        height: 100%;
        -webkit-transform: scale(1);
    }
</style>
<div id="container">
    <img id="image" />
</div>

<script>
image = document.getElementById('image');
bounce = false;
function getZoomLevel() {
    var val = image.style['-webkit-transform'][6];
    if (val == undefined) val = 1;
    return Number(val);
}

function toggleZoom() {
    var curr = getZoomLevel();
    if (curr == 1) {
        setZoomLevel(2);
    } else {
        setZoomLevel(1);
    }
}

function setZoomLevel(level) {
    level = Number(level);
    WS.log(level);
    if (level < 1) level = 1;
    if (level > 5) level = 5;
    image.style['-webkit-transform'] = 'scale(' + level + ')';
}

function server() {
    WS.cameraOn(.3, 120, 160, function(data) {
      image.src = "data:image/png;base64," + data;
    });
    WS.gestureCallback('onEyeGestureDOUBLE_BLINK', function () {
        toggleZoom();
    });
    WS.gestureCallback('onGestureSWIPE_RIGHT', function () {
        if (bounce) return;
        setZoomLevel(getZoomLevel() + 1);
        bounce = true;
        setTimeout(function() { bounce = false;}, 100);
    });
    WS.gestureCallback('onGestureSWIPE_LEFT', function () {
        if (bounce) return;
        setZoomLevel(getZoomLevel() -1);
        bounce = true;
        setTimeout(function() { bounce = false;}, 100);
    });
    WS.gestureCallback('onGestureTAP', function () {
        setZoomLevel(1)
    });
}

function main() {
    if (WS.scriptVersion(1)) return;
    WS.serverConnect('{{WSUrl}}', server);
}

window.onload = main;
</script>
</body>
</html>

## manifest.json
{
  "name":"Magnify"
	<html style="width:100%; height:100%; overflow:hidden">
	<head>
	<!-- You can include external scripts here like so... -->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
	</head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<style>
	#container {
	width: 640px;
	height: 480px;
	}

	#image {
	width: 100%;
	height: 100%;
	-webkit-transform: scale(1);
	}
	</style>
	<div id="container">
	<img id="image" />
	</div>

	<script>
	image = document.getElementById('image');
	bounce = false;
	function getZoomLevel() {
	var val = image.style['-webkit-transform'][6];
	if (val == undefined) val = 1;
	return Number(val);
	}

	function toggleZoom() {
	var curr = getZoomLevel();
	if (curr == 1) {
	setZoomLevel(2);
	} else {
	setZoomLevel(1);
	}
	}

	function setZoomLevel(level) {
	level = Number(level);
	WS.log(level);
	if (level < 1) level = 1;
	if (level > 5) level = 5;
	image.style['-webkit-transform'] = 'scale(' + level + ')';
	}

	function server() {
	WS.cameraOn(.3, 120, 160, function(data) {
	image.src = "data:image/png;base64," + data;
	});
	WS.gestureCallback('onEyeGestureDOUBLE_BLINK', function () {
	toggleZoom();
	});
	WS.gestureCallback('onGestureSWIPE_RIGHT', function () {
	if (bounce) return;
	setZoomLevel(getZoomLevel() + 1);
	bounce = true;
	setTimeout(function() { bounce = false;}, 100);
	});
	WS.gestureCallback('onGestureSWIPE_LEFT', function () {
	if (bounce) return;
	setZoomLevel(getZoomLevel() -1);
	bounce = true;
	setTimeout(function() { bounce = false;}, 100);
	});
	WS.gestureCallback('onGestureTAP', function () {
	setZoomLevel(1)
	});
	}

	function main() {
	if (WS.scriptVersion(1)) return;
	WS.serverConnect('{{WSUrl}}', server);
	}

	window.onload = main;
	</script>
	</body>
	</html>