deac/OpenJsCad
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

OpenJsCad parser added, to parse local files with .jscad extension

Browse source
This commit is contained in:
Joost Nieuwenhuijse 2012-01-21 17:28:19 +01:00
parent a66db774a2
commit 47372abdbd
2 changed files with 349 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -32,8 +32,8 @@ textarea:focus {
outline: none; outline: none;
} }
h1, h2 { font: bold 50px/50px 'Helvetica Neue', Helvetica, Arial; } //h1, h2 { font: bold 50px/50px 'Helvetica Neue', Helvetica, Arial; }
h2 { font-size: 30px; margin: 10px 0 0 0; } //h2 { font-size: 30px; margin: 10px 0 0 0; }
a { color: inherit; } a { color: inherit; }
.viewer { width: 200px; height: 200px; background: #EEE url(images.png); } .viewer { width: 200px; height: 200px; background: #EEE url(images.png); }
#combined .viewer { width: 150px; height: 150px; } #combined .viewer { width: 150px; height: 150px; }
@ -42,6 +42,10 @@ td { padding: 5px; text-align: center; }
td code { background: none; border: none; color: inherit; } td code { background: none; border: none; color: inherit; }
canvas { cursor: move; } canvas { cursor: move; }
#needchrome {
display: none;
}
</style> </style>
<script> <script>
@ -56,6 +60,14 @@ function isChrome()
function onload() function onload()
{ {
var needchromediv = document.getElementById("needchrome");
if(needchromediv)
{
if(!isChrome())
{
needchromediv.style.display="block";
}
}
var containerelement = document.getElementById("viewer"); var containerelement = document.getElementById("viewer");
gViewer = new OpenJsCad.Viewer(containerelement, 600, 600, 50); gViewer = new OpenJsCad.Viewer(containerelement, 600, 600, 50);
updateSolid(); updateSolid();
@ -101,15 +113,19 @@ function getStl()
</head> </head>
<body onload="onload()"> <body onload="onload()">
<h1>OpenJsCad</h1> <h1>OpenJsCad</h1>
Please note: currently only works reliably in Google Chrome!<br> <div id="needchrome">Please note: OpenJsCad currently only runs reliably on Google Chrome!</div>
Create an STL file using constructive solid modeling. Click <b>Update Preview</b> to parse the source code from the textarea. Create an STL file for 3D printing using constructive solid modeling in Javascript.
Click Get STL to generate the stl data, ready for 3d printing. See below for documentation.
<table> <table>
<tr> <tr>
<td><div id="viewer" class="viewer" style="background-image:none;width:600px;height:600px;"></div></td> <td><div id="viewer" class="viewer" style="background-image:none;width:600px;height:600px;"></div></td>
</tr> </tr>
</table> </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 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 }); 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. for 3D solid modeling.
CSG model is contructed using Javascript. For example:<br> 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. <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. The code should always end in a return statement, returning a CSG solid.
Click on Update Preview to generate the mesh and update the viewer.
<br><br> <br><br>
Click Get STL to generate the STL file. Create a file with .stl extension in a text editor and paste the contents To build your own modes, create a .jscad file with your javascript code and parse the file using the
of the box into this file; this is ready to be printed on your 3d printer. <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> <h2>License</h2>
Copyright (c) 2012 Joost Nieuwenhuijse. Copyright (c) 2012 Joost Nieuwenhuijse.
Uses CSG.js, <a href="https://github.com/evanw/csg.js">original</a> copyright (c) 2011 Evan Wallace, 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. Uses <a href="https://github.com/evanw/lightgl.js">lightgl.js</a> by Evan Wallace for WebGL rendering.
All code released under MIT license. All code released under MIT license.
<br><br> <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/fork-a-repo/">create your own fork</a> and
<a href="http://help.github.com/send-pull-requests/">send me a pull request</a>. <a href="http://help.github.com/send-pull-requests/">send me a pull request</a>.
<h2>Viewer navigation</h2> <h2>Viewer navigation</h2>

320
processfile.html Normal file
View file

@ -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>