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 button {
        width: 100%;
        height: 10%;
        font-size: 100px;

    }
    #image {
        width: 100%;
        height: 30%;
    }
</style>
<div>
    <img id="image" />
</div>
<div id="container"></div>
<script>
var signs = [
    "",
"Hello, World!",
"Construction Zone",
"DANGER!",
"Emergency Exit Only",
"The bathroom is on the right.",
"Conference Room 1105",
"Student Center",

];
PHONE = "e899c47bcea5";

cont = document.getElementById('container');
image = document.getElementById('image');
signs.forEach(function(sign) {
    var btn=document.createElement("BUTTON");
    var t=document.createTextNode(sign);
    btn.appendChild(t);
    btn.onclick = function(e) { sendText(sign)};
    cont.appendChild(btn);
});

function sayText(channel, msg) {
    var tree = new WS.Cards();
    tree.add(msg, '');
    WS.cardTree(tree);
    WS.say(msg);
}

function sendText(text) {
    WS.publish("text", text)
};

function updateImage(channel, data) {
    WS.log(data);
    image.src = "data:image/png;base64," + data;
}

function server() {
    if (WS.device() == PHONE) {
        WS.subscribe('img', updateImage);
    } else {
        WS.subscribe('text', sayText);
        var tree = new WS.Cards();
        tree.add('Searching...', '');
        WS.cardTree(tree);
        WS.displayCardTree();
        WS.cameraOn(0.5, 180, 320, function(data) {
            WS.publish('img', data);
        } );
    }
};

function main() {
    if (WS.scriptVersion(1)) return;
        WS.serverConnect('{{WSUrl}}', server);
    if (WS.device() == PHONE) {
        WS.log("Vision Controller");
    } else {
        WS.log("Vision Receiver");
        var tree = new WS.Cards();
        tree.add('Connecting to server.', '');
        WS.cardTree(tree);
        WS.displayCardTree();
    }
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{
  "name":"Vision for Glass (Wizard)"
}
	<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 button {
	width: 100%;
	height: 10%;
	font-size: 100px;

	}
	#image {
	width: 100%;
	height: 30%;
	}
	</style>
	<div>
	<img id="image" />
	</div>
	<div id="container"></div>
	<script>
	var signs = [
	"",
	"Hello, World!",
	"Construction Zone",
	"DANGER!",
	"Emergency Exit Only",
	"The bathroom is on the right.",
	"Conference Room 1105",
	"Student Center",

	];
	PHONE = "e899c47bcea5";

	cont = document.getElementById('container');
	image = document.getElementById('image');
	signs.forEach(function(sign) {
	var btn=document.createElement("BUTTON");
	var t=document.createTextNode(sign);
	btn.appendChild(t);
	btn.onclick = function(e) { sendText(sign)};
	cont.appendChild(btn);
	});

	function sayText(channel, msg) {
	var tree = new WS.Cards();
	tree.add(msg, '');
	WS.cardTree(tree);
	WS.say(msg);
	}

	function sendText(text) {
	WS.publish("text", text)
	};

	function updateImage(channel, data) {
	WS.log(data);
	image.src = "data:image/png;base64," + data;
	}

	function server() {
	if (WS.device() == PHONE) {
	WS.subscribe('img', updateImage);
	} else {
	WS.subscribe('text', sayText);
	var tree = new WS.Cards();
	tree.add('Searching...', '');
	WS.cardTree(tree);
	WS.displayCardTree();
	WS.cameraOn(0.5, 180, 320, function(data) {
	WS.publish('img', data);
	} );
	}
	};

	function main() {
	if (WS.scriptVersion(1)) return;
	WS.serverConnect('{{WSUrl}}', server);
	if (WS.device() == PHONE) {
	WS.log("Vision Controller");
	} else {
	WS.log("Vision Receiver");
	var tree = new WS.Cards();
	tree.add('Connecting to server.', '');
	WS.cardTree(tree);
	WS.displayCardTree();
	}
	}
	window.onload = main;
	</script>
	</body>
	</html>