Embedding 1.6.1

I’ve used openjscad as an embedded feature on my website for a number of years, but the version I was using was very old (I’m not sure which one, but here’s a link to the source - it has a couple of small modifications for viewer size control). Examples of the embedded versions using the old openjscad are Grinder Gauges and Lathe Threading Gauges.

I’m now using 1.6.1 on this page, but getting it working took me quite a lot of hours and was very frustrating.

Expected Behaviour

I expected to be able to embed openjscad 1.6.1 on a website and customise settings such as whether the “plate” or the axes are shown. I also expected the size of the viewerContext to affect the size of the canvas and not for it to be made about 25% wider and only 13 pixels high.

Actual Behaviour - First Problem

When I set up the openjscad 1.6.1 viewer (dist/opt.js) on my web server, the canvas wasn’t viewable. After a lot of hacking around, I found that LightGLEngine.prototype’s init() declaration wasn’t doing what I would expect it to do. This is the patch I applied - the original this.containerEl.width was returning undefined. I initially changed it to this.containerEl.style.width but this didn’t seem to work (maybe something to do with containerEl having it’s width set to 100% rather than a px value in Processor.createElements?)

--- a/static/libraries/openjscad/1.6.1/opt.js
+++ b/static/libraries/openjscad/1.6.1/opt.js
@@ -40779,8 +40765,13 @@
 LightGLEngine.prototype = {
   init: function init() {
     // set initial canvas size
-    this.gl.canvas.width = this.containerEl.width;
-    this.gl.canvas.height = this.containerEl.height;
+    // ASB: This doesn't seem to work as released,
+    // ASB: (should be style.width but even then it
+    // ASB: gets 100% instead of an actual value).
+    //this.gl.canvas.width = this.containerEl.width;
+    //this.gl.canvas.height = this.containerEl.height;
+    this.gl.canvas.width = this.containerEl.parentNode.clientWidth;
+    this.gl.canvas.height = this.containerEl.parentNode.clientHeight;

     this.handleResize();
   },

Actual Behaviour - Second Problem

I also had a problem with the resizeCanvas function as it was taking my fixed pixel size (690 pixels in this case) and multiplying it by 1.25 as that was what Chrome was returning as the devicePixelRatio. I fixed this by forcing devicePixelRatio to be 1. Now I must admit that this was done at the same time as the above, so it could be that fixing the one above makes the following unnecessary, but I’m happy with it at the moment and don’t want to break my working version!

--- a/static/libraries/openjscad/1.6.1/opt.js
+++ b/static/libraries/openjscad/1.6.1/opt.js
@@ -41371,7 +41362,8 @@
   resizeCanvas: function resizeCanvas() {
     var canvas = this.canvas;

-    var devicePixelRatio = window.devicePixelRatio || 1;
+      // ASB: Changed pixel ratio to 1
+    var devicePixelRatio = 1; //window.devicePixelRatio || 1;
     canvas.width = this.containerEl.clientWidth * devicePixelRatio;
     canvas.height = this.containerEl.clientHeight * devicePixelRatio;
   },

Actual Behaviour - Third Problem

As I was reading opts.js, I saw a comment in the Viewer function: “see the defaults method on how to change these”. As I was looking to change the settings, I went to the defaults method, but was none the wiser as it wasn’t at all clear. I’m sure I could hack the code and change the defaults, but I hoped this would be more of a library and I could have a single instance of opts.js on my web server and adjust the settings on each page that has a model. After many hours of searching, I gave up in this and did the following hacks in order to make it possible:

--- a/static/libraries/openjscad/1.6.1/opt.js
+++ b/static/libraries/openjscad/1.6.1/opt.js
@@ -40647,21 +40647,7 @@
   var viewer = document.getElementById('viewerContext');
   var design = viewer.getAttribute('design-url');

-  gProcessor = new Processor(viewer, { viewer: { plate: { size: 1000,
-        m: { i: 1,
-          color: { r: 0.8, g: 0.8, b: 0.8, a: 0.5 }
-        },
-        M: { i: 100,
-          color: { r: 0.5, g: 0.5, b: 0.5, a: 0.5 }
-        }
-      },
-      camera: { position: { x: 0, y: 0, z: 1000 },
-        clip: { min: 0.5, max: 3000 }
-      },
-      axis: { draw: true
-      }
-    }
-  });
+  gProcessor = new Processor(viewer);

   // load the given design
   if (design) {
@@ -41447,6 +41439,16 @@
   }
 };

+// ASB: Added rather hacky method of customising settings
+//      as I couldn't find a supported way of doing so.
+if (typeof(viewerCustomisation) == "function") {
+    Viewer = viewerCustomisation(Viewer);
+}
+else {
+    console.log("No viewer customisation");
+}
+
+
 module.exports = Viewer;

 },{"./jscad-viewer-helpers":380,"./jscad-viewer-lightgl":381}],383:[function(require,module,exports){

Then in my main html file, I added:

<script type="text/javascript">
       function viewerCustomisation(Viewer) {
               var standard_defaults = Viewer.defaults();
               Viewer.defaults = function() {
                       var mydefaults = jQuery.extend(true, {}, standard_defaults);
                       mydefaults['axis']['draw'] = false;
                       mydefaults['plate']['draw'] = false;
                       mydefaults['camera']['position']['z'] = 250;
                       return mydefaults;
               };
               return Viewer;
       }
</script>

I’m sure there must be a better way of doing this, but Viewer isn’t accessible outside the script (due to the browserify magic) and I couldn’t find any documentation anywhere on how to do this.

Please accept my apologies if I’ve been missing a really obvious wiki page that explains all of this.

Specifications

• Version: 1.6.1
• Platform: My website (details above)
• Environment: Custom web server, Google Chrome on Windows 10

[kaosat-dev]

@danmarshall we really need to talk, pinged you on hangouts 😃 ok so this is very interesting, if I get this right it converts a current ‘vanilla’ jscad file into a common.js module : that could be very handy as a tool to make it easier for people to publish their current script to github/npm as common.js 😃

[danmarshall]

@kaosat-dev that is really cool - you are loading a module from a string ??? Nice!

I have a conversion script that takes a .jscad file from the disk, and creates a module on the disk. The module is just a folder with 2 files in it: package.json and index.js. The index.js is created from a template. All of the jscad code is in one file thanks to Includify 😃

Once it is a module on the disk it can be browserified or, checked into GitHub, published to NPM etc.

I could generalize this script if you might find it useful.