Serve web files in go

2023-08-31 20:27:43 -04:00
parent e1e6e3650a
commit 1c742809a1
6 changed files with 37 additions and 33 deletions
--- a/web/index.js
+++ b/web/index.js
@@ -0,0 +1,107 @@
+
+function main() {
+    initCollage("collage")
+}
+
+function makeCroppieElem(elem, imgUrl) {
+    cpie = new Croppie(elem, {
+        viewport: {
+            width: elem.clientWidth,
+            height: elem.clientHeight,
+            type: 'square'
+        },
+        showZoomer: false,
+    });
+
+    cpie.bind({
+        url: imgUrl
+    });
+
+    return cpie
+
+}
+
+// collage state
+
+var collageDivId;
+var crops = [];
+
+function initCollage(divId) {
+    collageDivId = divId
+    const collageDiv = document.getElementById(collageDivId)
+    for(elem of collageDiv.getElementsByClassName("collage-img")) {
+        const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
+        const lastLen = crops.push(cpie)
+        elem.dataset.collageCropieIndex = lastLen - 1
+    }
+}
+
+function showCrop() {
+    for(cpie of crops) {
+        console.log(cpie.get())
+        console.log(cpie.element.clientWidth)
+        console.log(cpie.element.clientHeight)
+    }
+}
+
+async function ip() {
+    const resp = await fetch("dummy.txt")
+    console.log(await resp.text())
+}
+
+function snap() {
+    const collageDiv = document.getElementById(collageDivId)
+    col = collageDiv.offsetLeft;
+    cot = collageDiv.offsetTop;
+    console.log("----------------------")
+    req = {
+        background_image: "",
+        aspect: {
+            width: 528 * 4 * 2,
+            height: 816 * 4,
+        },
+        dimension: {
+            width: collageDiv.clientWidth,
+            height: collageDiv.clientHeight,
+        },
+        photos: [],
+    };
+
+    for(elem of collageDiv.getElementsByClassName("collage-img")) {
+        const cpie = crops[elem.dataset.collageCropieIndex]
+        // console.log(cpie.get().points)
+        // console.log(elem.offsetLeft - col)
+        // console.log(elem.offsetTop - cot)
+        // console.log(elem.clientWidth)
+        // console.log(elem.clientHeight)
+        const fsx = elem.offsetLeft - col
+        const fsy = elem.offsetTop - cot
+        const [sx, sy, ex, ey] = cpie.get().points;
+        const photo = {
+            image: elem.dataset.collageImageUrl,
+            crop: {
+                start: {
+                    x: parseInt(sx),
+                    y: parseInt(sy),
+                },
+                end: {
+                    x: parseInt(ex),
+                    y: parseInt(ey),
+                },
+            },
+            frame: {
+                start: {
+                    x: fsx,
+                    y: fsy,
+                },
+                end: {
+                    x: fsx + elem.clientWidth,
+                    y: fsy + elem.clientHeight,
+                },
+            },
+        };
+        req.photos.push(photo)
+    }
+    console.log(JSON.stringify(req));
+    ip()
+}