Difference between revisions of "Template:Jscad"

From BITPlan Wiki
Jump to navigation Jump to search
 
(33 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>
<source lang='javascript'></source>
+
{{jscad|title=OpenJSCAD example|code=function main() {
{{jscad}}
+
    return CSG.cube();
 +
}
 +
}}
 
</pre>
 
</pre>
[[Category:Template]]
+
= Example =
</noinclude><includeonly>
+
{{jscad|title=OpenJSCAD example|code=function main() {
<jscad nocache>{{subst:code}}</jscad>
+
    return CSG.cube();
<html><head>
+
}
  <script src="/extensions/OpenJsCad/lightgl.js"></script>
+
}}
  <script src="/extensions/OpenJsCad/csg.js"></script>
+
<pre>
  <script src="/extensions/OpenJsCad/openjscad.js"></script>
 
 
   <style>
 
   <style>
 
body {
 
  font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
  max-width: 820px;
 
  margin: 0 auto;
 
  padding: 10px;
 
}
 
 
 
pre, code, textarea {
 
pre, code, textarea {
 
   font: 12px/20px Monaco, monospace;
 
   font: 12px/20px Monaco, monospace;
Line 40: Line 32:
 
   outline: none;
 
   outline: none;
 
}
 
}
 
 
canvas { cursor: move; }
 
canvas { cursor: move; }
 
+
</style>
  </style>
+
</pre>
<link rel="stylesheet" href="/extensions/OpenJsCad/openjscad.css" type="text/css">
+
[[Category:Template]]
 
+
</noinclude><includeonly>
<script>
+
= {{{title|}}} =
 
+
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]
var gProcessor=null;
+
{{#tag:jscad|{{{code|}}}}}
 
+
= Source code =
// Show all exceptions to the user:
+
Just cut&paste the source code below to https://www.openjscad.org/
OpenJsCad.AlertUserOfUncaughtExceptions();
+
{{#tag:source|{{{code|}}}|lang=javascript}}
 
+
[[Category:OpenJSCAD]]
function onload()
 
{
 
  let viewer = document.getElementById("viewer");
 
  gProcessor = new OpenJsCad.Processor(viewer);
 
  updateSolid();
 
}
 
 
 
function updateSolid()
 
{
 
  gProcessor.setJsCad(document.getElementById('code').value);
 
}
 
</script>
 
<title>OpenJsCad demo: Parametric Lamp Shade</title>
 
</head>
 
<body onload="onload()">
 
<input type="submit" value="Update" onclick="updateSolid(); return false;">
 
<html>
 
 
</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>