将OpenJSCAD集成到MediaWiki

时间:2019-06-10 05:02:24

标签: javascript mediawiki openjscad

我知道的用于显示JSCad设计的当前解决方案:

所有人都需要相当多的基础架构才能工作。

https://www.openjscad.org/
基于节点《用户指南》

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

  

该网站可以集成到现有网站中。

但不说怎么做。

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

其来源为https://github.com/danmarshall/jscad-gallery。这些内容的最新修改时间为2017年(截至本帖子发布大约2年前)。 它使用十几个javascript文件和jekyll来实现其目的。

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

页面的源代码很小:

<!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>

我正在寻找一个(希望)可以嵌入Mediawiki的简单解决方案。首先,一个普通的html页面加上一些javascript会对我有用。

另请参阅:

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

首先,我只是通过复制http://wiki.bitplan.com/index.php/ParametricLampShade中的html来创建https://risacher.org/OpenJsCad/lampshadedemo.html

我放了文件:

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

进入文件夹扩展名/ OpenJsCad。

通过这种简单的方法,我得到了错误:

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

原因似乎出在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'];
  }
  ...
}

openjscadurl取自基本路径,对于Mediawiki,基本路径为../ index.php。

我该如何解决?

需要最少的一组javascript文件,这些文件的正确版本是什么?

2 个答案:

答案 0 :(得分:2)

https://www.npmjs.com/package/@jscad/web的1.10.0版本允许您使用单个程序包托管JsCad文件。 https://github.com/jscad/OpenJSCAD.org/pull/413

虽然这不能直接帮助您,但我有一个Vue组件,可让您在https://gitlab.com/johnwebbcole/vue-openjscad上显示JsCad文件

您也许可以使用它来更新Mediawiki插件。

J

答案 1 :(得分:1)

将baseurl计算更改为:

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

解决了该问题。

有关结果,请参见http://wiki.bitplan.com/index.php/ParametricLampShade

作为概念证明

http://wiki.bitplan.com/index.php/Template:Jscad现在具有Mediawiki模板。

我仍然想了解应该使用的javascript文件和版本。由于当前方法使用了一些过时的javascript文件,甚至无法通过http://openjscad.org

呈现OpenJSCAD徽标代码