133 lines
5.5 KiB
HTML
133 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head lang="en">
|
|
<title>Generate a model with OpenSCAD Remote</title>
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="css/custom.css">
|
|
<link rel="stylesheet" href="css/tachyons-4.12.0.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body class="bg-blue avenir">
|
|
<header class="center white tc">
|
|
<h1 class="f1 shadow">OpenSCAD Remote</h1>
|
|
</header>
|
|
<div class="br3 b--white w-90 mw5-m mw7-ns center bg-white dark-gray pa3 ph5-ns shadow-3 avenir">
|
|
<form id="files-form" enctype="multipart/form-data">
|
|
<h2 class="f4">Main SCAD file</h2>
|
|
|
|
<div class="w-100 mt2 mb2 flex fileinput">
|
|
<input class="clip" type=file name="main-file" id="fileForUpload" accept=".scad" required>
|
|
<label class="f6 pointer dim blue ba b--dark-blue w-100 ph3 pv2 link mr0 ml0 dib" for="fileForUpload"><i class="fa fa-upload" aria-hidden="true"></i> Choose a file to upload (.scad)</label>
|
|
</div>
|
|
|
|
<h2 class="f4">Parameters JSON file</h2>
|
|
|
|
<div class="w-100 mt2 mb2 flex fileinput">
|
|
<input class="clip" type=file name="parameters-file" id="paramFile" accept=".json">
|
|
<label class="f6 pointer dim blue ba b--dark-blue w-100 ph3 pv2 link mr0 ml0 dib" for="paramFile"><i class="fa fa-upload" aria-hidden="true"></i> Choose a file to upload (.json)</label>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<h3 class="f4 w-100">Extra files</h3>
|
|
<button type="button" id="add-file-button" class="f6 w5 h2 white bg-blue ba b--dark-blue ph3 pv2 db br-pill shadow-1 grow"><i class="fa fa-plus" aria-hidden="true"></i> Add a file</button>
|
|
</div>
|
|
|
|
<div class="flex flex-column" id="extra-files-list"></div>
|
|
|
|
<button type="submit" class="br2 f4 white bg-green ba b--dark-green mt2 ph4 pv3 center mw5 db shadow-1 grow" id="send-buttonbak"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send</button>
|
|
</form>
|
|
<div class="w-100 center h6 relative mt4 br3">
|
|
<div id="empty" class="flex items-center justify-center white br3 w-100 h-100 bg-black-o-30 absolute">
|
|
<div>
|
|
Please add a .scad file and press "Send" to view your model
|
|
</div>
|
|
</div>
|
|
<div id="loading" class="dn flex items-center justify-center white br3 w-100 h-100 bg-black-o-30 absolute">
|
|
<div class="rotate">
|
|
Loading
|
|
</div>
|
|
</div>
|
|
<a id="dl-link" class="w5 no-underline db disabled absolute bottom-1 right-1 br2">
|
|
<div class="w-100 f4 white bg-green ba b--dark-green flex items-center justify-center pv3 center db shadow-1 grow br2">
|
|
<i class="fa fa-download mr2" aria-hidden="true"></i>Download
|
|
</div>
|
|
</a>
|
|
<div id="three-container" class="w-100 center h-100 br3"></div>
|
|
</div>
|
|
</div>
|
|
<footer class="mt3 mb3 center white tc">
|
|
Made with <i class="fa fa-heart" aria-hidden="true"></i> by me.
|
|
</footer>
|
|
<script type="module">
|
|
import {
|
|
STLViewer,
|
|
addFileInput
|
|
} from "./js/utils.js";
|
|
|
|
import { Configuration } from "./js/config.js";
|
|
|
|
let inc = 0;
|
|
const stlviewer = new STLViewer(document.getElementById("three-container"));
|
|
|
|
[...document.getElementsByClassName("fileinput")].forEach(element => {
|
|
const input = element.getElementsByTagName("input")[0];
|
|
const label = element.getElementsByTagName("label")[0];
|
|
input.addEventListener('change', (event) => {
|
|
const fileName = event.target.value.split('\\').pop();
|
|
label.textContent = fileName ? ` ${fileName}` : " Choose a file to upload";
|
|
});
|
|
|
|
if (input.value != "") {
|
|
const fileName = input.value.split('\\').pop();
|
|
label.textContent = fileName ? ` ${fileName}` : " Choose a file to upload";
|
|
}
|
|
});
|
|
|
|
const add_button = document.getElementById("add-file-button")
|
|
add_button.addEventListener("click", (event) => {
|
|
addFileInput(
|
|
document.getElementById("extra-files-list"),
|
|
`extra-file-${inc}`
|
|
);
|
|
inc++;
|
|
});
|
|
|
|
let filename = "";
|
|
|
|
const send_form = document.getElementById("files-form");
|
|
send_form.addEventListener("submit", (event) => {
|
|
document.getElementById("empty").classList.add("dn");
|
|
document.getElementById("loading").classList.remove("dn");
|
|
fetch(Configuration.url, {
|
|
method: "POST",
|
|
body: new FormData(event.target)
|
|
})
|
|
.then(res => {
|
|
const header = res.headers.get('content-disposition');
|
|
const parts = header.split(';');
|
|
filename = parts[1].split('=')[1].replace(/['"]+/g, '');
|
|
return res.blob();
|
|
})
|
|
.then(blob => {
|
|
addResult(blob, filename);
|
|
});
|
|
event.preventDefault();
|
|
});
|
|
|
|
function addResult(blob, filename) {
|
|
const dl_link = document.getElementById("dl-link");
|
|
|
|
dl_link.href = window.URL.createObjectURL(blob);
|
|
dl_link.download = filename;
|
|
|
|
dl_link.classList.remove("disabled");
|
|
|
|
stlviewer.loadSTLBlob(blob);
|
|
document.getElementById("loading").classList.add("dn");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |