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 >
< style >
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;
}
#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; }
2012-02-13 15:29:37 +01:00
canvas { cursor: move; }
2012-01-21 17:28:19 +01:00
< / style >
< 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";
}
parseFile();
}
function parseFile()
{
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");
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 >
< button onclick = "parseFile();" > Reload< / button >
< / 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 > .
< / body >
< / html >