2012-01-21 17:28:19 +01:00
<!DOCTYPE html>
< html > < head >
< script src = "lightgl.js" > < / script >
< script src = "csg.js" > < / script >
< script src = "openjscad.js" > < / script >
2012-02-14 18:04:17 +01:00
< style >
2012-01-21 17:28:19 +01:00
body {
font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
2012-02-13 18:19:37 +01:00
max-width: 820px;
2012-01-21 17:28:19 +01:00
}
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:focus {
outline: none;
}
a { color: inherit; }
2012-02-14 18:04:17 +01:00
< / style >
2012-01-21 17:28:19 +01:00
2012-02-14 18:04:17 +01:00
< link rel = "stylesheet" href = "openjscad.css" type = "text/css" >
2012-01-21 17:28:19 +01:00
< script >
2012-02-13 18:19:37 +01:00
var gCurrentFile = null;
2012-02-13 15:29:37 +01:00
var gProcessor=null;
2012-01-21 17:28:19 +01:00
2012-02-13 18:19:37 +01:00
// Show all exceptions to the user:
OpenJsCad.AlertUserOfUncaughtExceptions();
2012-01-21 17:28:19 +01:00
function onload()
{
2012-02-13 18:19:37 +01:00
gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
setupDragDrop();
2012-01-21 17:28:19 +01:00
}
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 {
2012-02-13 18:19:37 +01:00
throw new Error("Error: Your browser does not fully support the HTML File API");
2012-01-21 17:28:19 +01:00
}
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)
{
2012-02-13 18:19:37 +01:00
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)
2012-01-21 17:28:19 +01:00
{
2012-02-13 18:19:37 +01:00
throw new Error("Please drop a single .jscad file");
2012-01-21 17:28:19 +01:00
}
2012-02-13 18:19:37 +01:00
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();
2012-01-21 17:28:19 +01:00
}
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";
}
2012-02-14 18:04:17 +01:00
parseFile(false);
2012-01-21 17:28:19 +01:00
}
2012-02-14 18:04:17 +01:00
function parseFile(debugging)
2012-01-21 17:28:19 +01:00
{
if(gCurrentFile)
{
var reader = new FileReader();
reader.onload = function(evt) {
var txt = evt.target.result;
};
reader.onloadend = function(evt) {
2012-02-13 18:19:37 +01:00
if (evt.target.readyState == FileReader.DONE)
2012-01-21 17:28:19 +01:00
{
2012-02-13 18:19:37 +01:00
var jscadscript = evt.target.result;
if(jscadscript == "")
2012-01-21 17:28:19 +01:00
{
2012-02-13 18:19:37 +01:00
if(document.location.toString().match(/^file\:\//i))
2012-02-13 15:29:37 +01:00
{
2012-02-13 18:19:37 +01:00
throw new Error("Could not read file. You are using a local copy of OpenJsCad; if you are using Chrome, you need to launch it with the following command line option:\n\n--allow-file-access-from-files\n\notherwise the browser will not have access to uploaded files due to security restrictions.");
2012-02-13 15:29:37 +01:00
}
else
2012-02-13 18:19:37 +01:00
{
throw new Error("Could not read file.");
}
2012-01-21 17:28:19 +01:00
}
else
2012-02-13 18:19:37 +01:00
{
if(gProcessor)
{
var filename = gCurrentFile.name;
filename = filename.replace(/^.*\/([^\/]*)$/, "$1");
2012-02-14 18:04:17 +01:00
gProcessor.setDebugging(debugging);
2012-02-13 18:19:37 +01:00
gProcessor.setJsCad(jscadscript, filename);
}
2012-01-21 17:28:19 +01:00
}
}
2012-02-13 18:19:37 +01:00
else
2012-01-21 17:28:19 +01:00
{
2012-02-13 18:19:37 +01:00
throw new Error("Failed to read file");
if(gProcessor) gProcessor.clearViewer();
2012-01-21 17:28:19 +01:00
}
};
reader.readAsText(gCurrentFile, "UTF-8");
}
}
< / script >
< title > OpenJsCad parser< / title >
< body onload = "onload()" >
< h1 > OpenJsCad parser< / h1 >
2012-02-13 15:29:37 +01:00
< div id = "viewer" > < / div >
2012-01-21 17:28:19 +01:00
< br >
< 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 >
2012-02-14 18:04:17 +01:00
< button onclick = "parseFile(false);" > Reload< / button >
< button onclick = "parseFile(true);" > Debug (see below)< / button >
2012-01-21 17:28:19 +01:00
< / div >
< / div >
< / div >
< br >
< h2 > Instructions:< / h2 >
Create a new file in your favorite text editor. To get started enter the following text:
< br >
2012-02-13 15:29:37 +01:00
< pre > function main() {
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);
}
2012-01-21 17:28:19 +01:00
< / 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 >
2012-02-13 15:29:37 +01:00
When finished press Generate STL to generate the STL file. Then click Save STL and save it to
a file with .stl extension.
2012-01-21 17:28:19 +01:00
< br > < br >
For more information about OpenJsCad see the < a href = "index.html" > introduction< / a > .
2012-02-14 18:04:17 +01:00
< h2 > Debugging< / h2 >
By default your .jscad file is parsed in a separate thread (in a Web Worker). This allows long running
scripts to be executed while the web browser stays responsive. The web browser's debugger does not
have access to scripts running in web workers however. To allow debugging you can use the Debug button above to execute
your jscad code in the main thread instead of in a web worker.
< br > < br >
To debug your code in Google Chrome: open the Developer Tools by typing Ctrl+Shift+I (or Command+Option+I on mac).
Then press the Debug button above. The debugger will stop just before executing your main() function.
< br > < br >
For more information about debugging in Chrome see
< a href = "http://code.google.com/chrome/devtools/docs/overview.html" target = "_blank" > Chrome Developer Tools: Overview< / a >
2012-02-21 17:11:29 +01:00
< br > < br >
You can output log messages from your script using:
< pre >
OpenJsCad.log("Hello");
< / pre >
The log messages will appear in the browser's console (shown using Ctrl+Shift+I in Chrome). They will appear
even while not actually debugging.
2012-02-14 18:04:17 +01:00
< br > < br >
2012-01-21 17:28:19 +01:00
< / body >
< / html >
