theepicsnail/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" bgcolor="#000">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
var words_per_minute = 300
var text = ""
var word_count = 0;

function clean_text(wiki_text) {
    return wiki_text.replace(/'''/g,"").replace(/\([^\(]*\)/g,"").replace(/<ref.*?\/(ref)?>/g,"").replace(/\[\[([^|]*?)(\|.*?)?\]\]/g, "$1").replace(/ +\./g,".").replace(/\./g," .");
}

function get_wiki_text(wiki_obj) {
    var tmp = wiki_obj.query.pages
    return tmp[Object.keys(tmp)[0]].revisions[0]["*"].split("\n}}\n\n")[1].split("\n\n")[0]
}

function on_wiki_obj(wiki_obj) {
    text = clean_text(get_wiki_text(wiki_obj)).split(" ");
    word_count = text.length;

    var interval = setInterval(function(){
        var word = text.shift();
            ctx.clearRect(0,0,640,360);
        if (word != undefined) {
            ctx.fillText(word, 320, 180);
        } else {
            clearInterval(interval);

            ctx.fillText(word_count +" words", 320, 90)
            ctx.fillText("in", 320, 180)
            ctx.fillText(Math.floor(word_count/words_per_minute*60) + " seconds", 320, 270)
        }
    }, 60000.0/words_per_minute);
}
function load(term) {
    var tag = document.createElement("script");
    tag.setAttribute("type", "text/javascript");
    tag.setAttribute("src", "http://en.wikipedia.org/w/api.php?format=json&action=query&titles=" + term + "&prop=revisions&rvprop=content&callback=on_wiki_obj")
    document.getElementsByTagName("head")[0].appendChild(tag);
}
function server() {
    ctx.font = '60pt Calibri';
    ctx.textAlign = 'center';
    ctx.fillStyle = 'white';
    load("Google_Glass");
}
function main() {
    if (WS.scriptVersion(1)) return;
    ctx = document.getElementById('canvas').getContext("2d");
    WS.serverConnect('{{WSUrl}}', server);
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{"name":"Example"}
	<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>
	var words_per_minute = 300
	var text = ""
	var word_count = 0;

	function clean_text(wiki_text) {
	return wiki_text.replace(/'''/g,"").replace(/\([^\(]\)/g,"").replace(/<ref.?\/(ref)?>/g,"").replace(/\[\[([^\|]?)(\\|.?)?\]\]/g, "$1").replace(/ +\./g,".").replace(/\./g," .");
	}

	function get_wiki_text(wiki_obj) {
	var tmp = wiki_obj.query.pages
	return tmp[Object.keys(tmp)[0]].revisions[0]["*"].split("\n}}\n\n")[1].split("\n\n")[0]
	}

	function on_wiki_obj(wiki_obj) {
	text = clean_text(get_wiki_text(wiki_obj)).split(" ");
	word_count = text.length;

	var interval = setInterval(function(){
	var word = text.shift();
	ctx.clearRect(0,0,640,360);
	if (word != undefined) {
	ctx.fillText(word, 320, 180);
	} else {
	clearInterval(interval);

	ctx.fillText(word_count +" words", 320, 90)
	ctx.fillText("in", 320, 180)
	ctx.fillText(Math.floor(word_count/words_per_minute*60) + " seconds", 320, 270)
	}
	}, 60000.0/words_per_minute);
	}
	function load(term) {
	var tag = document.createElement("script");
	tag.setAttribute("type", "text/javascript");
	tag.setAttribute("src", "http://en.wikipedia.org/w/api.php?format=json&action=query&titles=" + term + "&prop=revisions&rvprop=content&callback=on_wiki_obj")
	document.getElementsByTagName("head")[0].appendChild(tag);
	}
	function server() {
	ctx.font = '60pt Calibri';
	ctx.textAlign = 'center';
	ctx.fillStyle = 'white';
	load("Google_Glass");
	}
	function main() {
	if (WS.scriptVersion(1)) return;
	ctx = document.getElementById('canvas').getContext("2d");
	WS.serverConnect('{{WSUrl}}', server);
	}
	window.onload = main;
	</script>
	</body>
	</html>