updated acorn demo

asalga · Jul 12, 2010 · f94b360 · f94b360
1 parent 9929918
commit f94b360
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/demos/acorn/acorn.html b/demos/acorn/acorn.html
@@ -6,6 +6,7 @@
     <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
     <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
 
+    <link rel="stylesheet" type="text/css" href="../style.css" />
     <script src="../../pointstream.js"></script>
     <script src="acorn.js"></script>
   </head>
@@ -52,11 +53,17 @@
         });
       </script>
 
-    <canvas id="canvas" width="500" height="500"></canvas><br />  
+    <input type="button" value="Take Screenshot" onClick="addPNG();"/>
+    <input type="button" value="clear" onClick="clearPNG();"/><br />
+    <canvas id="canvas" width="500" height="500"></canvas>
+    <span id="test"></span>
+    <br />
+    <span>Last key Pressed:</span> <span id="key">None</span>
+    <br />
     Constant: <span id="const"> </span><div id="constant"></div><br/>
     Linear:  <span id="lin"> </span><div id="linear"></div><br/>
     Quadratic:  <span id="quad"> </span><div id="quadratic"></div><br/>
-    <div id="test"></div>
+
   </body>
 
 </html>
diff --git a/demos/acorn/acorn.js b/demos/acorn/acorn.js
@@ -6,11 +6,11 @@ var zoomed = -50;
 var rot =[0,0];
 var curCoords = [0,0];
 
-window.onresize = function(){
+/*window.onresize = function(){
   ps.resize(window.innerWidth, window.innerHeight);
   ps.background([0,0,0,1]);
   ps.pointSize(5);
-};
+};*/
 
 function addPNG(){
   var img = document.createElement('img');
@@ -20,6 +20,17 @@ function addPNG(){
   img.height = 100;
 }
 
+/*
+  Remove all screenshots
+*/
+function clearPNG(){
+  var test = document.getElementById('test');
+
+  while(test.childNodes){
+    test.removeChild(test.childNodes[0]);
+  }
+}
+
 function zoom(amt){
   zoomed += amt * 2;
   if(buttonDown){
@@ -38,7 +49,7 @@ function mouseReleased(){
 }
 
 function keyDown(){
-  alert(key);
+    document.getElementById('key').innerHTML = key;
 }
 
 function render() {

diff --git a/demos/style.css b/demos/style.css
@@ -1,10 +1,12 @@
+
+/* prevent the window scrollbars from appearing
+which conflict with zooming.*/
 html {
   overflow-x: hidden;
   overflow-y: hidden;
 }
 
 span{
-  vertical-align: top;
   font-family: monospace;
 }
 
@@ -20,8 +22,12 @@ body{
   color: green;
 }
 
+img{
+  vertical-align: top;
+  border: 1px solid #000;
+}
+
 canvas{
-  border: 0px solid #0000FF;
   width: 500;
   height: 500;
 }