212 lines
6.4 KiB
HTML
212 lines
6.4 KiB
HTML
<!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: 820px;
|
|
}
|
|
|
|
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; }
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="openjscad.css" type="text/css">
|
|
|
|
<script>
|
|
|
|
|
|
var gCurrentFile = null;
|
|
var gProcessor=null;
|
|
|
|
// Show all exceptions to the user:
|
|
OpenJsCad.AlertUserOfUncaughtExceptions();
|
|
|
|
function onload()
|
|
{
|
|
gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
|
|
setupDragDrop();
|
|
}
|
|
|
|
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 {
|
|
throw new Error("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)
|
|
{
|
|
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();
|
|
}
|
|
|
|
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(false);
|
|
}
|
|
|
|
function parseFile(debugging)
|
|
{
|
|
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 == "")
|
|
{
|
|
if(document.location.toString().match(/^file\:\//i))
|
|
{
|
|
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.");
|
|
}
|
|
else
|
|
{
|
|
throw new Error("Could not read file.");
|
|
}
|
|
}
|
|
else
|
|
{
|
|
if(gProcessor)
|
|
{
|
|
var filename = gCurrentFile.name;
|
|
filename = filename.replace(/^.*\/([^\/]*)$/, "$1");
|
|
gProcessor.setDebugging(debugging);
|
|
gProcessor.setJsCad(jscadscript, filename);
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
throw new Error("Failed to read file");
|
|
if(gProcessor) gProcessor.clearViewer();
|
|
}
|
|
};
|
|
reader.readAsText(gCurrentFile, "UTF-8");
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<title>OpenJsCad parser</title>
|
|
<body onload="onload()">
|
|
<h1>OpenJsCad parser</h1>
|
|
<div id="viewer"></div>
|
|
<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(false);">Reload</button>
|
|
<button onclick="parseFile(true);">Debug (see below)</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>
|
|
<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);
|
|
}
|
|
</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 Generate STL to generate the STL file. Then click Save STL and save it to
|
|
a file with .stl extension.
|
|
<br><br>
|
|
For more information about OpenJsCad see the <a href="index.html">introduction</a>.
|
|
|
|
<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>
|
|
<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.
|
|
<br><br>
|
|
|
|
</body>
|
|
</html> |