OpenJsCad parser added, to parse local files with .jscad extension
Joost Nieuwenhuijse
parent
a66db774a2
commit
47372abdbd
40
index.html
40
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>
|
||||
|
|
|
|||
|
|
@ -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, '&').replace(/</g, '<').replace(/>/g, '>') + '</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 & 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 & drop the file again.
|
||||
<br><br>
|
||||
When finished press Get STL to generate the STL file. Copy & 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>
|
||||
Loading…
Reference in New Issue