Difference between revisions of "Template:Jscad"

From BITPlan Wiki
Jump to navigation Jump to search
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<noinclude>
 
<noinclude>
 
= Usage =
 
= Usage =
−
Put your JSCAD code inside a source tag and add a call of this template
 
 
<pre>
 
<pre>
−
{{jscad|title=OpenJSCAD example|code=function main()
+
{{jscad|title=OpenJSCAD example|code=function main() {
−
{
+
    return CSG.cube();
−
  var resolution = 24; // 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 });
 
−
  var sphere2 = sphere1.translate([12, 5, 0]);
 
−
  var sphere3 = CSG.sphere({center: [20, 0, 0], radius: 30, resolution: resolution });
 
−
 
 
−
  var result = cube1;
 
−
  result = result.union(sphere1);
 
−
  result = result.subtract(sphere2);
 
−
  result = result.intersect(sphere3);
 
−
  return result;
 
 
}
 
}
 
}}
 
}}
−
[[Category:Template]]
+
</pre>
−
</noinclude><includeonly>
+
= Example =
−
{{#tag:html|
+
{{jscad|title=OpenJSCAD example|code=function main() {
−
  <script src="/extensions/OpenJsCad/lightgl.js"></script>
+
    return CSG.cube();
−
  <script src="/extensions/OpenJsCad/csg.js"></script>
+
}
−
  <script src="/extensions/OpenJsCad/openjscad.js"></script>
+
}}
 +
<pre>
 
   <style>
 
   <style>
 
pre, code, textarea {
 
pre, code, textarea {
Line 46: Line 34:
 
canvas { cursor: move; }
 
canvas { cursor: move; }
 
</style>
 
</style>
−
<link rel="stylesheet" href="/extensions/OpenJsCad/openjscad.css" type="text/css">
+
</pre>
−
<script>
+
[[Category:Template]]
−
  var gProcessor=null;
+
</noinclude><includeonly>
−
  // Show all exceptions to the user:
+
= {{{title|}}} =
−
  OpenJsCad.AlertUserOfUncaughtExceptions();
+
The preview below currently only works for older JSCad code using the CSG syntax. See [https://github.com/jscad/OpenJSCAD.org/issues/448 OpenJsCad Issue 448]
−
 
+
{{#tag:jscad|{{{code|}}}}}
−
  function renderJscad()
+
= Source code =
−
  {
+
Just cut&paste the source code below to https://www.openjscad.org/
−
    let viewer = document.getElementById("jscadviewer");
+
{{#tag:source|{{{code|}}}|lang=javascript}}
−
    gProcessor = new OpenJsCad.Processor(viewer);
+
[[Category:OpenJSCAD]]
−
    updateSolid();
 
−
  }
 
−
 
 
−
  function updateSolid()
 
−
  {
 
−
    gProcessor.setJsCad(document.getElementById('jscadcode').value);
 
−
  }
 
−
</script>
 
−
<h1>{{{title|}}}</h1>
 
−
<div id="jscadviewer"></div>
 
−
<h2>Source code</h2>
 
−
Below is the OpenJsCad script.
 
−
<textarea id='jscadcode' style="height: 500px">{{{code|}}}</textarea>
 
−
<input type="submit" value="Update" onclick="updateSolid(); return false;">
 
−
<script>
 
−
  // call javascript in middle of page
 
−
  // https://stackoverflow.com/a/19869671/1497139
 
−
  renderJscad();
 
−
</script>
 
−
}}
 
−
= Syntaxh highlighted source code =
 
−
{{#tag:source|lang=javascript|{{{code|}}} }}
 
 
</includeonly>
 
</includeonly>

Latest revision as of 10:37, 18 June 2019

Usage

{{jscad|title=OpenJSCAD example|code=function main() {
    return CSG.cube();
}
}}

Example

OpenJSCAD example

The preview below currently only works for older JSCad code using the CSG syntax. See OpenJsCad Issue 448 <jscad>function main() { 

   return CSG.cube();

}</jscad>

Source code

Just cut&paste the source code below to https://www.openjscad.org/ 

function main() {
    return CSG.cube();
}

  <style>
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;
}
canvas { cursor: move; }
</style>
Retrieved from "https://wiki.bitplan.com/index.php?title=Template:Jscad&oldid=9282"