Template:Jscad: Difference between revisions

From BITPlan Wiki
Jump to navigation Jump to search
(Undo revision 9242 by Wf (talk))
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 12: Line 12:
}  
}  
}}
}}
[[Category:Template]]
<pre>
</noinclude><includeonly>
{{#tag:html|
  <script src="/extensions/OpenJsCad/lightgl.js"></script>
  <script src="/extensions/OpenJsCad/csg.js"></script>
  <script src="/extensions/OpenJsCad/openjscad.js"></script>
   <style>
   <style>
pre, code, textarea {
pre, code, textarea {
Line 39: 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()
  {
    let viewer = document.getElementById("jscadviewer");
    gProcessor = new OpenJsCad.Processor(viewer);
    updateSolid();
  }
 
  function updateSolid()
  {
    gProcessor.setJsCad(document.getElementById('jscadcode').value);
  }
</script>
<h1>{{{title|}}}</h1>
<div id="jscadviewer"></div>
<h2>Playground</h2>
You can try out modifications of the source code right here.
<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>
}}
= Source code =
= Source code =
Just cut&paste the source code below to https://www.openjscad.org/
{{#tag:source|{{{code|}}}|lang=javascript}}
{{#tag:source|{{{code|}}}|lang=javascript}}
[[Category:OpenJSCAD]]
[[Category:OpenJSCAD]]
</includeonly>
</includeonly>

Latest revision as of 08: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>