mirror of
https://gitea.com/gitea/docs.git
synced 2026-07-22 02:37:42 +00:00
Change STL preview to CAD file preview (#199)
Based on [this Issue on GitHub]([url](https://github.com/go-gitea/gitea/issues/34135)) I created a pull request. This implementation allows for all other kinds CAD files to be previewed in Gitea. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Reviewed-on: https://gitea.com/gitea/docs/pulls/199 Reviewed-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: recoolcz <petrvanek31@gmail.com> Co-committed-by: recoolcz <petrvanek31@gmail.com>
This commit is contained in:
recoolcz
Lunny Xiao
@@ -165,50 +165,110 @@ Alice <-- Bob: Another authentication Response
|
|||||||
|
|
||||||
The script will detect tags with `class="language-plantuml"`, but you can change this by providing a second argument to `parsePlantumlCodeBlocks`.
|
The script will detect tags with `class="language-plantuml"`, but you can change this by providing a second argument to `parsePlantumlCodeBlocks`.
|
||||||
|
|
||||||
### Example: STL Preview
|
### Example: CAD Files Preview
|
||||||
|
|
||||||
You can display STL file directly in Gitea by adding:
|
You can implement your own CAD file viewer inside your Gitea instance.
|
||||||
|
|
||||||
```html
|
This implementation supports 3D preview for of these file formats:
|
||||||
<script>
|
'3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb',
|
||||||
function lS(src) {
|
'gltf', 'ifc', 'igs', 'iges', 'stp', 'step', 'stl', 'obj', 'off', 'ply', 'wrl'
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
let s = document.createElement("script");
|
|
||||||
s.src = src;
|
Add template
|
||||||
s.addEventListener("load", () => {
|
|
||||||
resolve();
|
In $GITEA_CUSTOM we need to add our template.
|
||||||
|
This template needs to be saved in "$GITEA_CUSTOM/templates/custom/".
|
||||||
|
Here create file "footer.tmpl" and add following text into it:
|
||||||
|
|
||||||
|
```<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Supported 3D file types
|
||||||
|
const fileTypes = ['3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb', 'gltf', 'ifc', 'igs', 'iges', 'step', 'stl', 'obj', 'off', 'ply', 'wrl'];
|
||||||
|
|
||||||
|
// Select matching link
|
||||||
|
const links = Array.from(document.querySelectorAll('a.ui.mini.basic.button'));
|
||||||
|
const link3D = links.find(link => {
|
||||||
|
const href = link.href.toLowerCase();
|
||||||
|
return href.includes('/raw/') && fileTypes.some(ext => href.endsWith(`.${ext}`));
|
||||||
});
|
});
|
||||||
document.body.appendChild(s);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($('.view-raw>a[href$=".stl" i]').length) {
|
if (link3D) {
|
||||||
$("body").append(
|
const script = document.createElement('script');
|
||||||
'<link href="/assets/Madeleine.js/src/css/Madeleine.css" rel="stylesheet">'
|
script.onload = () => {
|
||||||
);
|
const fileUrl = link3D.getAttribute('href');
|
||||||
Promise.all([
|
|
||||||
lS("/assets/Madeleine.js/src/lib/stats.js"),
|
// Prepare the container for the viewer
|
||||||
lS("/assets/Madeleine.js/src/lib/detector.js"),
|
const fileView = document.querySelector('.file-view');
|
||||||
lS("/assets/Madeleine.js/src/lib/three.min.js"),
|
if (fileView) {
|
||||||
lS("/assets/Madeleine.js/src/Madeleine.js"),
|
fileView.setAttribute('id', 'view-3d');
|
||||||
]).then(function () {
|
fileView.style.padding = '0';
|
||||||
$(".view-raw")
|
fileView.style.margin = '0';
|
||||||
.attr("id", "view-raw")
|
fileView.style.height = '400px';
|
||||||
.attr("style", "padding: 0;margin-bottom: -10px;");
|
fileView.style.width = '100%';
|
||||||
new Madeleine({
|
fileView.innerHTML = '';
|
||||||
target: "view-raw",
|
}
|
||||||
data: $('.view-raw>a[href$=".stl" i]').attr("href"),
|
|
||||||
path: "/assets/Madeleine.js/src",
|
// Initialize viewer
|
||||||
});
|
const parentDiv = document.getElementById('view-3d');
|
||||||
$('.view-raw>a[href$=".stl"]').remove();
|
if (parentDiv) {
|
||||||
|
const viewer = new OV.EmbeddedViewer(parentDiv, {
|
||||||
|
backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // Transparent
|
||||||
|
defaultColor: new OV.RGBColor(200, 200, 200),
|
||||||
|
edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
|
||||||
|
environmentSettings: new OV.EnvironmentSettings([
|
||||||
|
'/assets/o3dv/envmaps/fishermans_bastion/negx.jpg',
|
||||||
|
'/assets/o3dv/envmaps/fishermans_bastion/posx.jpg',
|
||||||
|
'/assets/o3dv/envmaps/fishermans_bastion/posy.jpg',
|
||||||
|
'/assets/o3dv/envmaps/fishermans_bastion/negy.jpg',
|
||||||
|
'/assets/o3dv/envmaps/fishermans_bastion/posz.jpg',
|
||||||
|
'/assets/o3dv/envmaps/fishermans_bastion/negz.jpg'
|
||||||
|
], false)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load the model
|
||||||
|
viewer.LoadModelFromUrlList([fileUrl]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
script.src = '/assets/o3dv/o3dv.min.js';
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
to the file `templates/custom/footer.tmpl`
|
|
||||||
|
|
||||||
You also need to download the content of the library [Madeleine.js](https://github.com/beige90/Madeleine.js) and place it under `$GITEA_CUSTOM/public/assets/` folder.
|
Add public files
|
||||||
|
|
||||||
|
Now we need to download latest version of O3DV. Go to "$GITEA_CUSTOM/public/assets/".
|
||||||
|
Create folder using (and cd into it):
|
||||||
|
|
||||||
|
```mkdir o3dv
|
||||||
|
cd o3dv
|
||||||
|
```
|
||||||
|
|
||||||
|
Copy latest release zip link from [`GitHub`](https://github.com/kovacsv/Online3DViewer/releases) (v0.15.0 as of now).
|
||||||
|
Here use e.g. wget to download the file:
|
||||||
|
```wget https://github.com/kovacsv/Online3DViewer/releases/download/0.15.0/o3dv.zip
|
||||||
|
```
|
||||||
|
|
||||||
|
Use e.g. unzip to unzip the archive:
|
||||||
|
```unzip o3dv.zip
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
Folder permissions
|
||||||
|
|
||||||
|
Now the last thing. Change permissions on the "footer.tmpl":
|
||||||
|
```chown git:git $GITEA_CUSTOM/templates/custom/footer.tmpl
|
||||||
|
chmod 770 $GITEA_CUSTOM/templates/custom/footer.tmpl
|
||||||
|
```
|
||||||
|
|
||||||
|
And on the public folder:
|
||||||
|
```chown -R git:git $GITEA_CUSTOM/public
|
||||||
|
```
|
||||||
|
|
||||||
|
Now we have everything ready! Restart you gitea instance to apply these changes and you can test it in your browser.
|
||||||
|
|
||||||
You should end-up with a folder structure similar to:
|
You should end-up with a folder structure similar to:
|
||||||
|
|
||||||
@@ -218,48 +278,15 @@ $GITEA_CUSTOM/templates
|
|||||||
`-- footer.tmpl
|
`-- footer.tmpl
|
||||||
|
|
||||||
$GITEA_CUSTOM/public/assets/
|
$GITEA_CUSTOM/public/assets/
|
||||||
-- Madeleine.js
|
-- o3dv
|
||||||
|-- LICENSE
|
|-- o3dv_0.15.0.zip
|
||||||
|-- README.md
|
|-- o3dv.license.md
|
||||||
|-- css
|
|-- o3dv.min.js
|
||||||
| |-- pygment_trac.css
|
|-- envmaps
|
||||||
| `-- stylesheet.css
|
\...
|
||||||
|-- examples
|
|
||||||
| |-- ajax.html
|
|
||||||
| |-- index.html
|
|
||||||
| `-- upload.html
|
|
||||||
|-- images
|
|
||||||
| |-- bg_hr.png
|
|
||||||
| |-- blacktocat.png
|
|
||||||
| |-- icon_download.png
|
|
||||||
| `-- sprite_download.png
|
|
||||||
|-- models
|
|
||||||
| |-- dino2.stl
|
|
||||||
| |-- ducati.stl
|
|
||||||
| |-- gallardo.stl
|
|
||||||
| |-- lamp.stl
|
|
||||||
| |-- octocat.stl
|
|
||||||
| |-- skull.stl
|
|
||||||
| `-- treefrog.stl
|
|
||||||
`-- src
|
|
||||||
|-- Madeleine.js
|
|
||||||
|-- css
|
|
||||||
| `-- Madeleine.css
|
|
||||||
|-- icons
|
|
||||||
| |-- logo.png
|
|
||||||
| |-- madeleine.eot
|
|
||||||
| |-- madeleine.svg
|
|
||||||
| |-- madeleine.ttf
|
|
||||||
| `-- madeleine.woff
|
|
||||||
`-- lib
|
|
||||||
|-- MadeleineConverter.js
|
|
||||||
|-- MadeleineLoader.js
|
|
||||||
|-- detector.js
|
|
||||||
|-- stats.js
|
|
||||||
`-- three.min.js
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Then restart Gitea and open a STL file on your Gitea instance.
|
Now we have everything ready! Restart you gitea instance to apply these changes and you can test it in your browser.
|
||||||
|
|
||||||
## Customizing Gitea mails
|
## Customizing Gitea mails
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user