Menu
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:
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?
689
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
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With