charlesfracchia/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>
-->
<script src="http://goessner.net/download/prj/jsonxml/xml2json.js"></script>
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
function parseXml(xml) {
   var dom = null;
   if (window.DOMParser) {
      try {
         dom = (new DOMParser()).parseFromString(xml, "text/xml");
      }
      catch (e) { dom = null; }
   }
   else if (window.ActiveXObject) {
      try {
         dom = new ActiveXObject('Microsoft.XMLDOM');
         dom.async = false;
         if (!dom.loadXML(xml)) // parse error ..

            window.alert(dom.parseError.reason + dom.parseError.srcText);
      }
      catch (e) { dom = null; }
   }
   else
      alert("cannot parse xml string!");
   return dom;
}
</script>
<script>
    xml = '<animals><dog><name>Rufus</name><breed>labrador</breed></dog><dog><name>Marty</name><breed>whippet</breed></dog><cat name="Matilda"/></animals>';
    dom = parseXml(xml),
    json = xml2json(dom),
    WS.log(json);
</script>
<script type="text/html" id="intro">
    <article>
        <section>
            <h1 style="font-size:60;">&lambda;<sub>red</sub> Recombination</h1>
            <p style="font-size:30">Last run on: 04/24/14<br>
            Created: 04/20/14<br>
            Author: Charles Fracchia</p><br>
        </section>
    </article>
</script>
<script type="text/html" id="step1">
    <article>
      <section>
        <h1 style="font-size:45;">1. Grow overnight culture</h1>
        <p style="font-size:30;">Grow from fresh monoclonal culture/colony/glycerol stock</p>
      </section>
      <footer>
        <p style="text-align:right;">Step 1/45</p>
      </footer>
    </article>
</script>
<script type="text/html" id="step2">
    <article>
      <section>
        <h1 style="font-size:45;">2. Innoculate growth cultures</h1>
        <p style="font-size:30;">Innoculate 30&micro;L into 30mL</p>
      </section>
      <footer>
        <p style="text-align:right;">Step 2/45</p>
      </footer>
    </article>
</script>
<script type="text/html" id="step3">
    <article>
      <section>
        <h1 style="font-size:45;">3. Incubate growth cultures</h1>
        <p style="font-size:30;">Incubate growth cultures with shaking at 34&deg;C until OD<sub>600</sub>=0.4</p><br>
        <p style="font-size:30;"><em>Current OD<sub>600</sub>: <font style="color:red;">0.2</font> (1 minute ago)</em></p>
      </section>
      <footer>
        <p style="text-align:right;">Step 3/45</p>
      </footer>
    </article>
</script>

<script>
function server() {
    WS.say('Welcome to BioBright');
    WS.sound('SUCCESS');
    var tree = new WS.Cards();
    tree.addHTML('intro')
        .addHTML('step1', 'Mark as Done', function () {WS.say('Marked as Done'); })
        .addHTML('step2', 'Mark as Done', function () {WS.say('Marked as Done'); })
        .addHTML('step3', 'Mark as Done', function () {WS.say('Marked as Done'); }, 'Update data now', function () {WS.say('Updating data now'); }, 'Update interval', function () {WS.say('Changing update interval'); });
    WS.cardTree(tree);
    WS.displayCardTree();
}
function main() {
    if (WS.scriptVersion(1)) return;
    WS.serverConnect('{{WSUrl}}', server);
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{"name":""}
	<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>
	-->
	<script src="http://goessner.net/download/prj/jsonxml/xml2json.js"></script>
	</head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
	<script>
	function parseXml(xml) {
	var dom = null;
	if (window.DOMParser) {
	try {
	dom = (new DOMParser()).parseFromString(xml, "text/xml");
	}
	catch (e) { dom = null; }
	}
	else if (window.ActiveXObject) {
	try {
	dom = new ActiveXObject('Microsoft.XMLDOM');
	dom.async = false;
	if (!dom.loadXML(xml)) // parse error ..

	window.alert(dom.parseError.reason + dom.parseError.srcText);
	}
	catch (e) { dom = null; }
	}
	else
	alert("cannot parse xml string!");
	return dom;
	}
	</script>
	<script>
	xml = '<animals><dog><name>Rufus</name><breed>labrador</breed></dog><dog><name>Marty</name><breed>whippet</breed></dog><cat name="Matilda"/></animals>';
	dom = parseXml(xml),
	json = xml2json(dom),
	WS.log(json);
	</script>
	<script type="text/html" id="intro">
	<article>
	<section>
	<h1 style="font-size:60;">λ<sub>red</sub> Recombination</h1>
	<p style="font-size:30">Last run on: 04/24/14<br>
	Created: 04/20/14<br>
	Author: Charles Fracchia</p><br>
	</section>
	</article>
	</script>
	<script type="text/html" id="step1">
	<article>
	<section>
	<h1 style="font-size:45;">1. Grow overnight culture</h1>
	<p style="font-size:30;">Grow from fresh monoclonal culture/colony/glycerol stock</p>
	</section>
	<footer>
	<p style="text-align:right;">Step 1/45</p>
	</footer>
	</article>
	</script>
	<script type="text/html" id="step2">
	<article>
	<section>
	<h1 style="font-size:45;">2. Innoculate growth cultures</h1>
	<p style="font-size:30;">Innoculate 30µL into 30mL</p>
	</section>
	<footer>
	<p style="text-align:right;">Step 2/45</p>
	</footer>
	</article>
	</script>
	<script type="text/html" id="step3">
	<article>
	<section>
	<h1 style="font-size:45;">3. Incubate growth cultures</h1>
	<p style="font-size:30;">Incubate growth cultures with shaking at 34°C until OD<sub>600</sub>=0.4</p><br>
	<p style="font-size:30;"><em>Current OD<sub>600</sub>: <font style="color:red;">0.2</font> (1 minute ago)</em></p>
	</section>
	<footer>
	<p style="text-align:right;">Step 3/45</p>
	</footer>
	</article>
	</script>

	<script>
	function server() {
	WS.say('Welcome to BioBright');
	WS.sound('SUCCESS');
	var tree = new WS.Cards();
	tree.addHTML('intro')
	.addHTML('step1', 'Mark as Done', function () {WS.say('Marked as Done'); })
	.addHTML('step2', 'Mark as Done', function () {WS.say('Marked as Done'); })
	.addHTML('step3', 'Mark as Done', function () {WS.say('Marked as Done'); }, 'Update data now', function () {WS.say('Updating data now'); }, 'Update interval', function () {WS.say('Changing update interval'); });
	WS.cardTree(tree);
	WS.displayCardTree();
	}
	function main() {
	if (WS.scriptVersion(1)) return;
	WS.serverConnect('{{WSUrl}}', server);
	}
	window.onload = main;
	</script>
	</body>
	</html>