Embedding 1.6.1

[abudden]

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

[z3dev]

@abudden Thanks for the information. Things have changed over the last few years so issues during reintegration should be expected.

For issue #1, the canvas for LightGL is set to the size of the HTML element. I would guess that the element name has changed, and the HTML of your page needs to adjust. You might try this again.

For issue #2, the code is interesting. I didn’t know the pixel ratio was used. I’m not sure it would be necessary but maybe Mark knows a little more.

For issue #3, this code change might be a better solution. How about submitting a patch to opt.js?

[kaosat-dev]

Hello @abudden , very sorry for the inconveniences !
It is true that the current 'pre-built's are not really thought out for customisation: this will change in the very near future: we are currently working on a set of 'reusable/embeddable' pieces namely:

• new 3D viewer that is trivial to customize (an early prototype / wip is here
• broken out 'core' of openjscad to convert scripts to CSG/CAG
• set of utilies
  that should make this considerable easier.
  In the meantime:

1 - this is sadly a generic issue with canvas elements + webgl, (implicit size vs container vs px size) , it tends to be heavily dependent on the wrapper element : does it have an absolute or relative size ?
2 - PixelRatio use is necessary, and normally webgl resolution tends to be off if it is not used, but it should still be user settable , so I'll add that to the new viewer
3 - As opts.js is a prebuilt file, it is not possible to patch it directly, but it should be possible to insert such functions outside the browserify scope .

[danmarshall]

• broken out 'core' of openjscad to convert scripts to CSG/CAG

Hi Mark - @kaosat-dev - can you give more details about this conversion? Specifically, what is the export of the module? And how will getParameterDefinitions() be exported?

[kaosat-dev]

@danmarshall not 100% sure yet, but there will not be breaking changes, it will likely be something like exposing the various sub folders here in src/ (like cli, core, etc) as independant packages that will be used by the main UI

[z3dev]

@danmarshall Are you thinking of a similar functionality for your library/web? If so, how would you like to use it?

[danmarshall]

@z3dev - yes that's what I'm thinking. But now that I'm re-reading this I think I had it confused with something else. I was thinking of "conversion" of jscad to commonjs. Which I suppose is already being discussed in #245 ?

[kaosat-dev]

@danmarshall yes that is the correct topic ... annd you might be interested in this here : https://github.com/jscad/jscad-desktop/blob/master/src/core/scripLoading.js#L75
loads either jscad code as common.js modules OR creates a virtual common.js module for jscad scripts which are not using it explicitly :)

I think there might be a way to do something very similar in the browser, stay tuned!

[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.

[kaosat-dev]

Very cool @danmarshall ! My brain is completely fried right now, but I'll take it for a spin first thing tomorrow :)

[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 :)