From 47372abdbde66b169a06f29e1271c5294d87321e Mon Sep 17 00:00:00 2001
From: Joost Nieuwenhuijse <joost@newhouse.nl>
Date: Sat, 21 Jan 2012 17:28:19 +0100
Subject: [PATCH] OpenJsCad parser added, to parse local files with .jscad
 extension

---
 index.html       |  40 ++++--
 processfile.html | 320 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 349 insertions(+), 11 deletions(-)
 create mode 100644 processfile.html
diff --git a/index.html b/index.html
index 1380a63..69cec19 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,8 @@ textarea:focus {
   outline: none;
 }
 
-h1, h2 { font: bold 50px/50px 'Helvetica Neue', Helvetica, Arial; }
-h2 { font-size: 30px; margin: 10px 0 0 0; }
+//h1, h2 { font: bold 50px/50px 'Helvetica Neue', Helvetica, Arial; }
+//h2 { font-size: 30px; margin: 10px 0 0 0; }
 a { color: inherit; }
 .viewer { width: 200px; height: 200px; background: #EEE url(images.png); }
 #combined .viewer { width: 150px; height: 150px; }
@@ -42,6 +42,10 @@ td { padding: 5px; text-align: center; }
 td code { background: none; border: none; color: inherit; }
 canvas { cursor: move; }
 
+#needchrome {
+  display: none;
+}
+
   </style>
 <script>
 
@@ -56,6 +60,14 @@ function isChrome()
 
 function onload()
 {
+  var needchromediv = document.getElementById("needchrome");
+  if(needchromediv)
+  {
+    if(!isChrome())
+    {
+      needchromediv.style.display="block";
+    }
+  }
   var containerelement = document.getElementById("viewer");
   gViewer = new OpenJsCad.Viewer(containerelement, 600, 600, 50);
   updateSolid();
@@ -101,15 +113,19 @@ function getStl()
 </head>
 <body onload="onload()">
   <h1>OpenJsCad</h1>
-  Please note: currently only works reliably in Google Chrome!<br>
-  Create an STL file using constructive solid modeling. Click <b>Update Preview</b> to parse the source code from the textarea.
-  Click Get STL to generate the stl data, ready for 3d printing. See below for documentation.
+<div id="needchrome">Please note: OpenJsCad currently only runs reliably on Google Chrome!</div>
+  Create an STL file for 3D printing using constructive solid modeling in Javascript. 
   <table>
     <tr>
       <td><div id="viewer" class="viewer" style="background-image:none;width:600px;height:600px;"></div></td>
     </tr>
   </table>
-  <textarea id="code">var resolution = 16; // increase to get smoother corners (will get slow!)
+  <h2>Playground</h2>
+Try it by entering some code below. Anything you enter will be lost as soon as this page is reloaded;    
+to build your own models you should instead store them in a .jscad file on your computer 
+and use the <a href="processfile.html"><b>OpenJsCad parser</b></a>.
+<br><br> 
+<textarea id="code">var resolution = 16; // increase to get smoother corners (will get slow!)
 
 var cube1 = CSG.roundedCube({center: [0,0,0], radius: [10,10,10], roundradius: 2, resolution: resolution});
 var sphere1 = CSG.sphere({center: [5, 5, 5], radius: 10, resolution: resolution });
@@ -135,11 +151,11 @@ This is intended to become a Javascript based alternative to <a href="http://www
 for 3D solid modeling.
 CSG model is contructed using Javascript. For example:<br>
 <code>var cube = CSG.cube(); return cube;</code> creates a cube with a radius of 1 and centered at the origin.
-Enter javascript code in the textbox above. The code should end in a return statement, returning a CSG solid. 
-Click on Update Preview to generate the mesh and update the viewer.
+The code should always end in a return statement, returning a CSG solid. 
 <br><br>
-Click Get STL to generate the STL file. Create a file with .stl extension in a text editor and paste the contents
-of the box into this file; this is ready to be printed on your 3d printer.
+To build your own modes, create a .jscad file with your javascript code and parse the file using the 
+<a href="processfile.html">OpenJsCad parser</a>. When finished you can generate an .stl file, 
+ready to be printed on your 3d printer.
 <h2>License</h2>
 Copyright (c) 2012 Joost Nieuwenhuijse.
 Uses CSG.js, <a href="https://github.com/evanw/csg.js">original</a> copyright (c) 2011 Evan Wallace, 
@@ -147,7 +163,9 @@ Uses CSG.js, <a href="https://github.com/evanw/csg.js">original</a> copyright (c
 Uses <a href="https://github.com/evanw/lightgl.js">lightgl.js</a> by Evan Wallace for WebGL rendering. 
 All code released under MIT license.
 <br><br>
-Contributions are welcome! To contribute go to <a href="https://github.com/joostn/csg.js">CSG.js at GitHub</a>,
+Contributions are welcome! It's all written in Javascript, so if you know how to use it you
+know how to modify it as well.<br><br>
+To contribute go to <a href="https://github.com/joostn/csg.js">CSG.js at GitHub</a>,
 <a href="http://help.github.com/fork-a-repo/">create your own fork</a> and 
 <a href="http://help.github.com/send-pull-requests/">send me a pull request</a>.
 <h2>Viewer navigation</h2>
diff --git a/processfile.html b/processfile.html
new file mode 100644
index 0000000..3d60155
--- /dev/null
+++ b/processfile.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+
+<html><head>
+  <script src="lightgl.js"></script>
+  <script src="csg.js"></script>
+  <script src="openjscad.js"></script>
+  <style>
+
+body {
+  font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 10px;
+}
+
+pre, code, textarea {
+  font: 12px/20px Monaco, monospace;
+  border: 1px solid #CCC;
+  border-radius: 3px;
+  background: #F9F9F9;
+  padding: 0 3px;
+  color: #555;
+}
+pre, textarea {
+  padding: 10px;
+  width: 100%;
+}
+textarea {
+  height: 200px;
+}
+textarea:focus {
+  outline: none;
+}
+#filedropzone {
+  border: 2px dashed #bbb;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  padding: 15px;
+  color: black;
+}
+
+#filedropzone_empty {
+  text-align: center;
+  color: #bbb;
+}
+
+#filedropzone_filled {
+  color: black;
+  display: none;
+}
+
+#filebuttons {
+  float: right;
+}
+
+a { color: inherit; }
+.viewer { width: 200px; height: 200px; background: #EEE url(images.png); }
+#combined .viewer { width: 150px; height: 150px; }
+table { border-collapse: collapse; margin: 0 auto; }
+td { padding: 5px; text-align: center; }
+td code { background: none; border: none; color: inherit; }
+canvas { cursor: move; }
+#errdiv {
+  border: 2px solid red;
+  display: none;
+  margin: 5px;
+}
+
+#needchrome {
+  display: none;
+}
+
+  </style>
+<script>
+
+var gViewer=null;
+var gSolid=new CSG();
+
+var gCurrentFile = null;
+
+function isChrome()
+{
+  return (navigator.userAgent.search("Chrome") >= 0);
+}
+
+function onload()
+{
+  var needchromediv = document.getElementById("needchrome");
+  if(needchromediv)
+  {
+    if(!isChrome())
+    {
+      needchromediv.style.display="block";
+    }
+  }
+  try
+  {
+    var containerelement = document.getElementById("viewer");
+    gViewer = new OpenJsCad.Viewer(containerelement, 600, 600, 50);
+    setupDragDrop();
+  } catch (e) {
+    alert(e.toString());
+  }
+}
+
+function updateSolid()
+{
+  if(gViewer.supported())
+  {
+    var code=document.getElementById('code').value;
+    if(code != gSolidSource)
+    {
+      gSolidSource=code;
+      var errtxt = "";
+      var csg = new CSG();
+      try {
+        csg = OpenJsCad.javaScriptToSolid(code);
+      } catch (e) {
+        errtxt = 'Error: <code>' + e.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</code>';
+      }
+      gSolid = csg;      
+      var errdiv=document.getElementById('error');
+      errdiv.innerHTML = errtxt;
+      errdiv.style.display = (errtxt == "")? "none":"block";
+      gViewer.setCsg(gSolid);
+      var stlarea = document.getElementById('stloutput');
+      stlarea.style.display = "none";
+    }
+  }
+}
+
+function getStl()
+{
+  updateSolid();
+  var stl=gSolid.toStlString();
+  var stlarea = document.getElementById('stloutput');
+  stlarea.value=stl;
+  stlarea.style.display = "inline";
+}
+
+function setupDragDrop()
+{
+  // Check for the various File API support.
+  if (window.File && window.FileReader && window.FileList) {
+    // Great success! All the File APIs are supported.
+  } else {
+    alert("Error: Your browser does not fully support the HTML File API");
+  }
+  var dropZone = document.getElementById('filedropzone');
+  dropZone.addEventListener('dragover', function(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    evt.dataTransfer.dropEffect = 'copy';
+  }, false);
+  dropZone.addEventListener('drop', handleFileSelect, false);
+}
+
+function handleFileSelect(evt)
+{
+  try
+  {
+    evt.stopPropagation();
+    evt.preventDefault();
+    
+    if(!evt.dataTransfer) throw new Error("Not a datatransfer (1)");
+    if(!evt.dataTransfer.files) throw new Error("Not a datatransfer (2)");
+    if(evt.dataTransfer.files.length != 1)
+    {
+      throw new Error("Please drop a single .jscad file");
+    }
+    var file = evt.dataTransfer.files[0];
+    if(!file.name.match(/\.jscad$/i))
+    {
+      throw new Error("Please drop a file with .jscad extension");
+    }
+    if(file.size == 0)
+    {
+      throw new Error("You have dropped an empty file");
+    }              
+    gCurrentFile = file;
+    gPreviousModificationTime = "";
+    fileChanged();
+  } catch (e) {
+    alert(e.toString());
+  }
+}
+
+function fileChanged()
+{
+  var dropZone = document.getElementById('filedropzone');
+  if(gCurrentFile)
+  {
+    var txt = "Current file: "+gCurrentFile.name;
+    document.getElementById("currentfile").innerHTML = txt;
+    document.getElementById("filedropzone_filled").style.display = "block";
+    document.getElementById("filedropzone_empty").style.display = "none";
+  }
+  else
+  {
+    document.getElementById("filedropzone_filled").style.display = "none";
+    document.getElementById("filedropzone_empty").style.display = "block";
+  }
+  parseFile();
+}
+
+function parseFile()
+{
+  setErrorText("");
+  gSolid=new CSG();
+  if(gCurrentFile)
+  {
+    var reader = new FileReader();
+    reader.onload = function(evt) {
+      var txt = evt.target.result;
+    };
+    reader.onloadend = function(evt) {
+      if (evt.target.readyState == FileReader.DONE)
+      {
+        var jscadscript = evt.target.result;
+        if(jscadscript == "")
+        {
+          alert("Could not read file. This may be due to security restrictions: in Google Chrome the File API only works if this html page is on a web server. Accessing this page from your hard drive does not work.");
+          gViewer.setCsg(gSolid);
+        }
+        else
+        {         
+          parseJscad(jscadscript);
+        }
+      }
+      else
+      {
+        alert("Failed to read file");
+        gViewer.setCsg(gSolid);
+      }
+    };
+    reader.readAsText(gCurrentFile, "UTF-8");
+  }
+}
+
+function parseJscad(script)
+{
+  try
+  {
+    var csg = OpenJsCad.javaScriptToSolid(script);
+    gSolid = csg;      
+    gViewer.setCsg(gSolid);
+    setErrorText("");
+  }
+  catch(e)
+  {
+    gSolid = new CSG();
+    gViewer.setCsg(gSolid);
+    setErrorText(e.toString());
+  }
+  enableItems();
+  var stlarea = document.getElementById('stloutput');
+  stlarea.style.display = "none";
+}
+
+function enableItems()
+{
+  var hassolid = (gSolid.polygons.length > 0);
+  document.getElementById('getstlbutton').style.display = hassolid? "inline":"none";  
+}
+
+function setErrorText(errtxt)
+{
+  var errdiv = document.getElementById("errdiv");
+  errdiv.style.display = (errtxt == "")? "none":"block";
+  errdiv.innerHTML = errtxt;
+}
+
+function getStl()
+{
+  var stl=gSolid.toStlString();
+  var stlarea = document.getElementById('stloutput');
+  stlarea.value=stl;
+  stlarea.style.display = "inline";
+}
+
+</script>
+<title>OpenJsCad parser</title> 
+<body onload="onload()">
+<h1>OpenJsCad parser</h1>
+<div id="needchrome">Please note: OpenJsCad currently only runs reliably on Google Chrome!</div>
+<div id="viewer" class="viewer" style="background-image:none;width:600px;height:600px;"></div>
+<br>
+<div id="errdiv"></div>
+<div id="filedropzone">
+  <div id="filedropzone_empty">Drop your .jscad file here</div>
+  <div id="filedropzone_filled">
+    <span id="currentfile">dfghdfgh</span>
+    <div id="filebuttons">
+      <button id="getstlbutton" style="display:none" onclick="getStl();">Get STL</button>
+      <button onclick="parseFile();">Reload</button>
+    </div>
+  </div>
+</div>
+<textarea id="stloutput" readonly style="width: 80%; height: 100px; display: none;"></textarea><br>
+<br>
+<h2>Instructions:</h2>
+Create a new file in your favorite text editor. To get started enter the following text:
+<br>
+<pre>
+var cube = CSG.roundedCube({radius: 10, roundradius: 2, resolution: 16});
+var sphere = CSG.sphere({radius: 10, resolution: 16}).translate([5, 5, 5]);
+return cube.union(sphere);
+</pre>
+Save this to a file on your desktop with .jscad extension. Then drag &amp; drop the file from your desktop
+to the box above (marked with 'drop your .jscad file here).<br><br>
+The 3d model should now appear. You can continue to make changes to your .jscad file. Just press Reload 
+to parse the changes, you do not need to drag &amp; drop the file again.
+<br><br>  
+When finished press Get STL to generate the STL file. Copy &amp; paste the STL text to a file with
+.stl extension.
+<br><br>  
+For more information about OpenJsCad see the <a href="index.html">introduction</a>.
+</body>
+</html>
\ No newline at end of file
