kevint2u/glass.html

## gistfile1.txt
<html style="width:100%; height:100%; overflow:hidden">
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<script>
function server() {
    WS.displayCardTree();
    var select = function () {WS.say('select')};
    var tap = function () {};
    var select = function (n) {return function () {WS.say('select ' + n);WS.log('select ' + n)}};
    var log = function (n) {return function () {WS.log('log ' + n)}};
    var tap = function (n) {return function () {WS.say('tap ' + n);WS.log('tap ' + n)}};
    var tree = new WS.Cards();
    var subtree = new WS.Cards();
    subtree.add('No Listeners', 's0');
    subtree.add('Select', 's1', select('s1'));
    subtree.add('Select + Tap', 's2', select('s2'), tap('s2'));
    subtree.add('Menu', 's3', 'Tap', tap('s3'), 'Log', log('s3'));
    subtree.add('Select + Menu', 's4', select('s4'), 'Tap', tap('s4'), 'Log', log('s4'));
    subtree.add('Select + Tap + Menu', 's5', select('s5'), tap('s5'), 'Tap', tap('s5'), 'Log', log('s5'));
    tree.add('HELLO WORLD!', '0');
    tree.add('Select', '1', select(1));
    tree.add('Select + Tap', '2', select(2), tap(2));
    tree.add('Menu', '3', 'Tap', tap(3), 'Log', log(3));
    tree.add('Select + Menu', '4', select(4), 'Tap', tap(4), 'Log', log(4));
    tree.add('Select + Tap + Menu', '5', select(5), tap(5), 'Tap', tap(5), 'Log', log(5));
    tree.add('Subtree', '6', subtree);
    tree.add('Subtree + Select', '7', select(7), subtree);
    tree.add('Subtree + Select + Tap', '8', select(8), tap(8), subtree);
    WS.log(JSON.stringify(tree));
    WS.cardTree(tree);
}
function main() {
    if (WS.scriptVersion(1)) return;
    WS.serverConnect('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</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" bgcolor="#000">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
function clearCanvas() {
    context.fillStyle = "rgb(0, 0, 0)";
    context.fillRect(0, 0, 640, 360);
}

function drawTextLine(text, _number) {
    var number = _number;
    if ( number === undefined ) {
        console.log("No number given, setting to 0");
        number = 0;
    }
    baseline = 40 + 50 * number;
    context.fillStyle = "rgb(200,200,200)";
    context.font = '28pt Calibri';
    context.textAlign = 'left';
    context.fillText(text, 10, baseline);
}

var theLine = "";

function draw() {
    clearCanvas();
    drawTextLine("You said: ", 2);
    drawTextLine(theLine, 3);
}

function getSpeech() {
    WS.speechRecognize("Say something already!", function(text) {
        theLine = text;
        draw();
    });
}

function main() {
    if (WS.scriptVersion(1)) return;
    context = document.getElementById('canvas').getContext("2d");
    draw();
    getSpeech();
    WS.gestureCallback('onGestureTAP', getSpeech);
}

window.onload = main;
</script>
</body>
</html>
	<html style="width:100%; height:100%; overflow:hidden">
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<script>
	function server() {
	WS.displayCardTree();
	var select = function () {WS.say('select')};
	var tap = function () {};
	var select = function (n) {return function () {WS.say('select ' + n);WS.log('select ' + n)}};
	var log = function (n) {return function () {WS.log('log ' + n)}};
	var tap = function (n) {return function () {WS.say('tap ' + n);WS.log('tap ' + n)}};
	var tree = new WS.Cards();
	var subtree = new WS.Cards();
	subtree.add('No Listeners', 's0');
	subtree.add('Select', 's1', select('s1'));
	subtree.add('Select + Tap', 's2', select('s2'), tap('s2'));
	subtree.add('Menu', 's3', 'Tap', tap('s3'), 'Log', log('s3'));
	subtree.add('Select + Menu', 's4', select('s4'), 'Tap', tap('s4'), 'Log', log('s4'));
	subtree.add('Select + Tap + Menu', 's5', select('s5'), tap('s5'), 'Tap', tap('s5'), 'Log', log('s5'));
	tree.add('HELLO WORLD!', '0');
	tree.add('Select', '1', select(1));
	tree.add('Select + Tap', '2', select(2), tap(2));
	tree.add('Menu', '3', 'Tap', tap(3), 'Log', log(3));
	tree.add('Select + Menu', '4', select(4), 'Tap', tap(4), 'Log', log(4));
	tree.add('Select + Tap + Menu', '5', select(5), tap(5), 'Tap', tap(5), 'Log', log(5));
	tree.add('Subtree', '6', subtree);
	tree.add('Subtree + Select', '7', select(7), subtree);
	tree.add('Subtree + Select + Tap', '8', select(8), tap(8), subtree);
	WS.log(JSON.stringify(tree));
	WS.cardTree(tree);
	}
	function main() {
	if (WS.scriptVersion(1)) return;
	WS.serverConnect('{{WSUrl}}', 'server');
	}
	window.onload = main;
	</script>
	</body>
	</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" bgcolor="#000">
	<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
	<script>
	function clearCanvas() {
	context.fillStyle = "rgb(0, 0, 0)";
	context.fillRect(0, 0, 640, 360);
	}

	function drawTextLine(text, _number) {
	var number = _number;
	if ( number === undefined ) {
	console.log("No number given, setting to 0");
	number = 0;
	}
	baseline = 40 + 50 * number;
	context.fillStyle = "rgb(200,200,200)";
	context.font = '28pt Calibri';
	context.textAlign = 'left';
	context.fillText(text, 10, baseline);
	}

	var theLine = "";

	function draw() {
	clearCanvas();
	drawTextLine("You said: ", 2);
	drawTextLine(theLine, 3);
	}

	function getSpeech() {
	WS.speechRecognize("Say something already!", function(text) {
	theLine = text;
	draw();
	});
	}

	function main() {
	if (WS.scriptVersion(1)) return;
	context = document.getElementById('canvas').getContext("2d");
	draw();
	getSpeech();
	WS.gestureCallback('onGestureTAP', getSpeech);
	}

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