CODEWITHSUNDEEP
javascriptmediawikiopenjscad
Wolfgang Fahl
Wolfgang Fahl

Reputation: 15769

Integrating OpenJSCAD into MediaWiki

The current solutions I know of for displaying JSCad Designs:

all need quite some infrastructure to work.

https://www.openjscad.org/
is based on node The Userguide

https://www.openjscad.org/dokuwiki/doku.php?id=user_guide_website states

The website can be integrated into an existing website.

But does not say how.

https://danmarshall.github.io/jscad-gallery/

Has it's sources at https://github.com/danmarshall/jscad-gallery. These were last modified in 2017 (some 2 years ago as of this post). It use some dozen javascript files and jekyll to fulfill it's purpose.

Example: https://danmarshall.github.io/jscad-gallery/s-hook

The source code of a page is quite small:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSCAD Gallery s-hook</title>
    <link rel="stylesheet" type="text/css" href="/jscad-gallery/site.css"/>
    <script src='/jscad-gallery/browser_modules/@jscad/csg/0.3.7.js' type="text/javascript"></script>
    <script src='/jscad-gallery/js/jscad-viewer.js' type="text/javascript"></script>
    <script src='/jscad-gallery/js/ui.js' type="text/javascript"></script></head>
<body>
    <h1>s-hook</h1>

<p>a simple S-hook design</p>


<div id="detail-viewer"></div>

<div id="inputs"></div>

<button onclick="detailView.export('stl', document.getElementById('download'))">Generate STL</button>
<div id="download"></div>

<script>

    var design = {
        title: "s-hook",
        updated: null,
        author: "Joost Nieuwenhuijse",
        version: "1.0.0",
        dependencies: [{"@jscad/scad-api":"^0.4.2"}],
        image: "/browser_modules/s-hook/thumbnail.png",
        camera: {"angle":{"x":-60,"y":0,"z":-45},"position":{"x":0,"y":0,"z":116}}
    };

    var detailView = new JscadGallery.DesignView();
    detailView.load(document.getElementById('detail-viewer'), design, document.getElementById('inputs'));

</script>


    <footer>
        <a href="https://github.com/danmarshall/jscad-gallery">Jscad-gallery on GitHub</a>
    </footer>
</body>
</html>

I am looking for a (hopefully) simple solution that can be embedded in Mediawiki. For a start a plain html page with a bit of javascript would do for me.

see also:

https://openjscad.nodebb.com/topic/98/displaying-jscad-designs-in-media-wiki-or-plain-html-for-a-start

For a start I created http://wiki.bitplan.com/index.php/ParametricLampShade by simply copying the html from https://risacher.org/OpenJsCad/lampshadedemo.html.

I put the files:

  1. csg.js
  2. lightgl.js
  3. openjscad.js

into the folder extensions/OpenJsCad.

With this simplistic approach i get the error:

Error in line 466: NetworkError: Failed to load worker script at http://wiki.bitplan.com/index.php/csg.js (nsresult = 0x804b001d)

The reasons seems to be in openjscad.js:

// callback: should be function(error, csg)
OpenJsCad.parseJsCadScriptASync = function(script, mainParameters, options, callback) {
  var baselibraries = [
    "csg.js",
    "openjscad.js"
  ];

  var baseurl = document.location.href.replace(/\?.*$/, '');
  var openjscadurl = baseurl;
  if (options['openJsCadPath'] != null) {
    openjscadurl = OpenJsCad.makeAbsoluteUrl( options['openJsCadPath'], baseurl );
  }

  var libraries = [];
  if (options['libraries'] != null) {
    libraries = options['libraries'];
  }
  ...
}

the openjscadurl is taken from the basepath which for Mediawiki is ../index.php.

How could I fix this?

What is the minimum set of javascript files needed and would be the proper versions of these files?

Upvotes: 3

Views: 544

Answers (2)

John Cole
John Cole

Reputation: 77

The 1.10.0 version of https://www.npmjs.com/package/@jscad/web allows you to host a JsCad file with a single package. https://github.com/jscad/OpenJSCAD.org/pull/413

While this doesn't directly help you, I have a Vue component that allows you to show a JsCad file at https://gitlab.com/johnwebbcole/vue-openjscad

You may be able to use that to update your Mediawiki plugin.

J

Upvotes: 3

Wolfgang Fahl
Wolfgang Fahl

Reputation: 15769

Changing the baseurl calculation to:

  //alert(document.location);
  var baseurl = document.location.href.replace(/index.php\/.*$/, 'extensions/OpenJsCad/');
  //alert(baseurl);

fixed the issue.

See http://wiki.bitplan.com/index.php/ParametricLampShade for the result.

As a proof of concept

http://wiki.bitplan.com/index.php/Template:Jscad now has a Mediawiki Template.

I'd still like to learn about the javascript files and versions that should be used. Since the current approach use some outdated javascript files and can't even render the OpenJSCAD logo code from http://openjscad.org

Upvotes: 3

Related Questions