Add QRCode page for glTF files.

2021-02-28 17:59:53 -08:00
parent bc107e7def
commit 74aa7d3c87
1 changed files with 143 additions and 0 deletions
--- a/docs/qrcode/index.html
+++ b/docs/qrcode/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Filament Remote</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
+    <link href="../favicon.png" rel="icon" type="image/x-icon" />
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+    <style>
+        html,
+        body {
+            height: 100%;
+        }
+
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+
+        .container {
+            font-family: "Open Sans";
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        a { text-decoration: none;}
+        a:visited { color: rgb(26, 65, 78);}
+
+        .central-area {
+            flex-direction: column;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            max-width: 512px;
+            max-height: 512px;
+            background: rgb(160, 190, 200);
+            border: solid 2px black;
+        }
+
+        .warn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-width: 400px;
+            width: 100%;
+            margin-bottom: 50px;
+            font-size: 14px;
+        }
+
+        .bad {
+            background: lightcoral;
+        }
+
+        .good {
+            background: lightgreen;
+        }
+    </style>
+    <script src="https://unpkg.com/qrious@4.0.2/dist/qrious.js"></script>
+</head>
+
+<body>
+
+    <div class="container">
+        <div id="central" class="central-area">
+            <div>
+                <p>Drop a <b>glb</b> file here.</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+
+        const central = document.getElementById("central");
+        const pipeId = generatePipeId();
+
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            central.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation() }, false)
+        })
+
+        central.addEventListener("dragover", dragEvent => {
+            central.classList.add("bad");
+            if (!event.dataTransfer) return;
+            if (event.dataTransfer.items[0].kind !== "file") return;
+            central.classList.remove("bad");
+            central.classList.add("good");
+        }, false);
+
+        central.addEventListener("dragleave", () => {
+            central.classList.remove("good", "bad");
+        }, false);
+
+        central.addEventListener("drop", dragEvent => {
+            central.classList.remove("good", "bad");
+            if (!event.dataTransfer) return;
+            if (event.dataTransfer.items[0].kind !== "file") return;
+            const file = event.dataTransfer.items[0].getAsFile();
+            if (!file.name.match(/\.(glb)$/i)) return;
+            console.info(`Uploading ${file.name} to ${getPipeUrl()}`)
+
+            const files = event.dataTransfer.files;
+            ([...files]).forEach(uploadFile);
+
+            central.innerHTML = `
+            <div class="warn">
+            <p>
+            This uses a third-party <a href="https://github.com/nwtgck/piping-server">piping server</a>
+            to deploy to your mobile device. This server does not store data. We use this server: https://ppng.io/
+            </p>
+            </div>
+            `;
+            const image = new Image();
+            central.appendChild(image);
+
+            new QRious({element: image, value: getPipeUrl(), size: 200});
+
+        }, false);
+
+        function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            fetch(getPipeUrl(), { method: 'POST', body: formData })
+                .then(() => { /* Done. Inform the user */ })
+                .catch(() => { /* Error. Inform the user */ });
+        }
+
+        function generatePipeId() {
+            return Math.floor(Math.random() * Math.floor(1e+20)).toString(16);
+        }
+
+        function getPipeUrl() {
+            return `https://ppng.io/filament-qrcode-${pipeId}`;
+        }
+
+    </script>
+</body>
+
+</html>