view STL files

[a7hybnj2]

Description

feature request: view, see, and track changes (visually) with .stl and other 3d files. (like github does)

Thanks!

I find this an amazing feature that github has and it would be even more amazing if gitea could implement similar functionality.

[lunny]

Maybe you can do it via third-party tools and add some config on app.ini

[a7hybnj2]

If anyone has had success with third-party tools let me know. I would gladly try it out but I have no idea where to even start.

Thanks.

[lunny]

At first, are there any command line tools or scripts could convert the files to HTML files?

[sapk]

How do you run gitea ? on windows, linux, ... ? Do you use the docker image ?

[sapk]

I have a script that can render .scad and .stl file but it will need openscad that may not be easily installable depending of your installation https://gist.github.com/sapk/ce1c246dd39a5f434554b31d0ca8ecdb

[a7hybnj2]

@sapk I am running in a freebsd jail installed with ports.

I will take a look at that script but it seems like a static render...right?

github does this: https://imgur.com/a/eZxCIHI which is amazing. It also highlights the parts of the STLs when you look at the commit diffs...

[lafriks]

We could use something like this: https://github.com/kaitlynhova/Three.js-STL-Viewer

[sapk]

@lafriks there is various JS lib mostly all not maintained. The more advanced I found is https://github.com/kovacsv/Online3DViewer I feel like we should not support it but allow the use of direct HTML (no sanitize) via external render if requested by option (and add libs under public).

[zeripath]

Would it be better to still in general sanitise but allow an external renderer to add some standard page sections?

[vmario89]

i am looking for the same feature because i am doing tons of open hardware stuff with git. the github feature to render STL is really nice but i think github blows up and slows down. so need and want to host viewable cad files with clean versioning for my own. i am running gitea for a year now.

maybe the stl feature could be done with Githubiverse templates and if another missing feature 'pages' would be there:

• https://github.com/cscott/thing-tracker
• https://github.com/garyhodgson/githubiverse-template
• https://github.com/garyhodgson/thing-tracker-site-template

[dsmrs]

at Github they use Three.js for the STL viewer.
We could indeed use https://github.com/kovacsv/Online3DViewer it seems to be the more active open-source STL online viewer.

The process for the diff is explained here: https://github.blog/2013-09-17-3d-file-diffs/ Not a 3D expert, but it doesn't look that complex no? (but CPU/GPU consuming for the gitea server).

[vmario89]

gitea added this feature in documentation. i integrated madeleine.js (three.js wrapper) into our environent succesfully. i had to adjust some things to make it render with complete width on smarthpones and computers (tested with firefox and chrome)

https://gitea.fablabchemnitz.de/MarioVoigt/Madeleine.js-for-Gitea

happy for more fixes to make it clean.

the docs for integration are provided here: https://docs.gitea.io/en-us/customizing-gitea/

[Codeberg-org]

FWIW an alternative STL previewer based rendering directly with three.js has been implemented in https://codeberg.org/Codeberg/build-deploy-gitea/pulls/31 -- we believe controls are a bit more intuitive (especially on mobile, also no gimbal lock in rotation; trackball-style control). Implementation is a single JS file, but threejs is added as dependency.

Try and visit: https://codeberg.org/Codeberg/three.js/src/branch/dev/examples/models/stl/binary/colored.stl

[a7hybnj2]

@vmario89 I tried to get madeleine.js up and running and it isn't working. Here is my setup:

git@raspberrypi:~/gitea/custom/templates/custom $ la
-rw-r--r-- 1 git git  868 Aug 24 18:12 footer.tmpl
git@raspberrypi:~/gitea/custom/templates/custom $ cat footer.tmpl 
<script>
function lS(src){
  return new Promise(function(resolve, reject) {
    let s = document.createElement('script')
    s.src = src
    s.addEventListener('load', () => {
      resolve()
    })
    document.body.appendChild(s)
  });
}

if($('.view-raw>a[href$=".stl" i]').length){
  $('body').append('<link href="/Madeleine.js/src/css/Madeleine.css" rel="stylesheet">');
  Promise.all([lS("/Madeleine.js/src/lib/stats.js"),lS("/Madeleine.js/src/lib/detector.js"), lS("/Madeleine.js/src/lib/three.min.js"), lS("/Madeleine.js/src/Madeleine.js")]).then(function() {
    $('.view-raw').attr('id', 'view-raw').attr('style', 'padding: 0;margin-bottom: -10px;');
    new Madeleine({
      target: 'view-raw',
      data: $('.view-raw>a[href$=".stl" i]').attr('href'),
      path: '/Madeleine.js/src'
    });
    $('.view-raw>a[href$=".stl"]').remove()
  });
}
</script>

git@raspberrypi:~/gitea/custom/public/Madeleine.js $ la
drwxr-xr-x 2 git git 4096 Dec 17  2019 css
drwxr-xr-x 2 git git 4096 Dec 17  2019 examples
drwxr-xr-x 2 git git 4096 Dec 17  2019 images
-rwxr-xr-x 1 git git 1077 Dec 17  2019 LICENSE
drwxr-xr-x 2 git git 4096 Dec 17  2019 models
-rwxr-xr-x 1 git git 3223 Dec 17  2019 README.md
drwxr-xr-x 5 git git 4096 Dec 17  2019 src

public and templates/custom folders were not present inside the custom directory so I created them.
I restarted the gitea service.
I am using an .stl that I generated from an openScad project and I just see the 'raw' text.

any thoughts to help get this up and running?

additional maybe helpful data I pulled from site admin - config

Repository Root Path
    /home/git/gitea-repositories
Static File Root Path
    /home/git/gitea
Custom File Root Path
    /home/git/gitea/custom
Log Path
    /home/git/gitea/log
Script Type
    bash
Reverse Authentication User
    X-WEBAUTH-USER

[vmario89]

Hey,

i documented it for myself some weeks ago the following (hopefully correct):

cd /opt/gitea/custom/templates/
mkdir base/
cd base/
vim /opt/gitea/custom/templates/base/footer.tmpl

<script>
function lS(src){
  return new Promise(function(resolve, reject) {
    let s = document.createElement('script')
    s.src = src
    s.addEventListener('load', () => {
      resolve()
    })
    document.body.appendChild(s)
  });
}
 
if($('.view-raw>a[href$=".stl" i]').length){
  $('body').append('<link href="/Madeleine.js/src/css/Madeleine.css" rel="stylesheet">');
  Promise.all([lS("/Madeleine.js/src/lib/stats.js"),lS("/Madeleine.js/src/lib/detector.js"), lS("/Madeleine.js/src/lib/three.min.js"), lS("/Madeleine.js/src/Madeleine.js")]).then(function() {
    $('.view-raw').attr('id', 'view-raw').attr('style', 'padding: 0;margin-bottom: -10px;');
    new Madeleine({
      target: 'view-raw',
      data: $('.view-raw>a[href$=".stl" i]').attr('href'),
      path: '/Madeleine.js/src'
    });
    $('.view-raw>a[href$=".stl"]').remove()
  });
}
</script>

chown git:git footer.tmpl
chmod 770 footer.tmpl

cd /opt/gitea/custom/
mkdir public/
cd public/
git clone https://github.com/JinJunho/Madeleine.js.git Madeleine.js/
chown -R git:git /opt/gitea/custom/public

service gitea restart

Check your browser's console output for possible css/js/whatever errors :-)

[sapk]

I will close this issue as it can be setup by many ways and at least one is in docs.
Feel free to comment or open an new issue for more specific case or come on the discord to discuss it.