Difference between revisions of "Template:Jscad"

From BITPlan Wiki
Jump to navigation Jump to search
Line 59: Line 59:
 
<h1>{{{title|}}}</h1>
 
<h1>{{{title|}}}</h1>
 
<div id="jscadviewer"></div>
 
<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 =
 
{{#tag:source|{{{code|}}}|lang=javascript}}
 
{{#tag:source|{{{code|}}}|lang=javascript}}
 
[[Category:OpenJSCAD]]
 
[[Category:OpenJSCAD]]
 
</includeonly>
 
</includeonly>

Revision as of 16:29, 16 June 2019

Usage

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

Example

{{#tag:html|

 <script src="/extensions/OpenJsCad/lightgl.js"></script>
 <script src="/extensions/OpenJsCad/csg.js"></script>
 <script src="/extensions/OpenJsCad/openjscad.js"></script>
 <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> <link rel="stylesheet" href="/extensions/OpenJsCad/openjscad.css" type="text/css"> <script>

 var gProcessor=null;
 // Show all exceptions to the user:
 OpenJsCad.AlertUserOfUncaughtExceptions();
 function renderJscad()
 {
   let viewer = document.getElementById("jscadviewer");
   gProcessor = new OpenJsCad.Processor(viewer);
   updateSolid();
 }
 function updateSolid()
 {
   gProcessor.setJsCad(document.getElementById('jscadcode').value);
 }

</script>

OpenJSCAD example

Source code

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