💄 Make the page more static
This commit is contained in:
parent
ecdd850791
commit
3ea25b63f9
|
@ -30,4 +30,25 @@
|
||||||
|
|
||||||
#three-container canvas {
|
#three-container canvas {
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-black-o-30 {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dn {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate {
|
||||||
|
animation: rotation 2s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotation {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -15,7 +15,7 @@ class STLViewer {
|
||||||
1,
|
1,
|
||||||
1000
|
1000
|
||||||
);
|
);
|
||||||
this.camera.position.set(10, 10, 10);
|
this.camera.position.set(100, 100, 100);
|
||||||
|
|
||||||
// Renderer
|
// Renderer
|
||||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||||
|
@ -27,19 +27,24 @@ class STLViewer {
|
||||||
|
|
||||||
// World
|
// World
|
||||||
this.scene = new THREE.Scene();
|
this.scene = new THREE.Scene();
|
||||||
this.scene.background = new THREE.Color( 0xdddddd );
|
this.scene.background = new THREE.Color(0xefefef);
|
||||||
//scene.fog = new THREE.Fog(0xdddddd, 10, 100);
|
|
||||||
|
|
||||||
// Ground
|
const axes = new THREE.AxesHelper(100);
|
||||||
const plane = new THREE.Mesh(
|
this.scene.add(axes);
|
||||||
new THREE.PlaneGeometry( 1000, 1000 ),
|
|
||||||
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
|
|
||||||
);
|
|
||||||
plane.rotation.x = - Math.PI / 2;
|
|
||||||
plane.position.y = - 0.5;
|
|
||||||
this.scene.add( plane );
|
|
||||||
|
|
||||||
plane.receiveShadow = true;
|
const gridXZ = new THREE.GridHelper(100, 10, new THREE.Color(0x006600));
|
||||||
|
gridXZ.position.set(0, 0, 0);
|
||||||
|
this.scene.add(gridXZ);
|
||||||
|
|
||||||
|
const gridXY = new THREE.GridHelper(100, 10, new THREE.Color(0x000066));
|
||||||
|
gridXY.position.set(0, 0, 0);
|
||||||
|
gridXY.rotation.x = Math.PI/2;
|
||||||
|
this.scene.add(gridXY);
|
||||||
|
|
||||||
|
const gridYZ = new THREE.GridHelper(100, 10, new THREE.Color(0x660000));
|
||||||
|
gridYZ.position.set(0, 0, 0);
|
||||||
|
gridYZ.rotation.z = Math.PI/2;
|
||||||
|
this.scene.add(gridYZ);
|
||||||
|
|
||||||
// Lights
|
// Lights
|
||||||
this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
|
this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
|
||||||
|
|
|
@ -2,17 +2,19 @@
|
||||||
<html>
|
<html>
|
||||||
<head lang="en">
|
<head lang="en">
|
||||||
<title>Generate a model with OpenSCAD Remote</title>
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="css/custom.css">
|
<link rel="stylesheet" href="css/custom.css">
|
||||||
<link rel="stylesheet" href="css/tachyons-4.12.0.min.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">
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="bg-blue">
|
<body class="bg-blue avenir">
|
||||||
<header class="center white avenir tc">
|
<header class="center white tc">
|
||||||
<h1 class="f1 shadow">OpenSCAD Remote</h1>
|
<h1 class="f1 shadow">OpenSCAD Remote</h1>
|
||||||
</header>
|
</header>
|
||||||
<div class="br3 b--white mw5 mw7-ns center bg-white dark-gray pa3 ph5-ns shadow-3 avenir">
|
<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">
|
<form id="files-form" enctype="multipart/form-data">
|
||||||
<h2 class="f4">Main SCAD file</h2>
|
<h2 class="f4">Main SCAD file</h2>
|
||||||
|
|
||||||
|
@ -38,6 +40,16 @@
|
||||||
<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>
|
<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>
|
</form>
|
||||||
<div class="w-100 center h6 relative mt4 br3">
|
<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">
|
<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">
|
<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
|
<i class="fa fa-download mr2" aria-hidden="true"></i>Download
|
||||||
|
@ -46,7 +58,7 @@
|
||||||
<div id="three-container" class="w-100 center h-100 br3"></div>
|
<div id="three-container" class="w-100 center h-100 br3"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="mt3 mb3 center white avenir tc">
|
<footer class="mt3 mb3 center white tc">
|
||||||
Made with <i class="fa fa-heart" aria-hidden="true"></i> by me.
|
Made with <i class="fa fa-heart" aria-hidden="true"></i> by me.
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
|
@ -87,6 +99,8 @@
|
||||||
|
|
||||||
const send_form = document.getElementById("files-form");
|
const send_form = document.getElementById("files-form");
|
||||||
send_form.addEventListener("submit", (event) => {
|
send_form.addEventListener("submit", (event) => {
|
||||||
|
document.getElementById("empty").classList.add("dn");
|
||||||
|
document.getElementById("loading").classList.remove("dn");
|
||||||
fetch(Configuration.url, {
|
fetch(Configuration.url, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: new FormData(event.target)
|
body: new FormData(event.target)
|
||||||
|
@ -112,6 +126,7 @@
|
||||||
dl_link.classList.remove("disabled");
|
dl_link.classList.remove("disabled");
|
||||||
|
|
||||||
stlviewer.loadSTLBlob(blob);
|
stlviewer.loadSTLBlob(blob);
|
||||||
|
document.getElementById("loading").classList.add("dn");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue