Makefile

@@ -1,7 +1,11 @@
-#         livereload: github.com/omeid/go-livereload/cmd/livereload@v0.0.0-20180903043807-18d58b752b26
+
+# go install github.com/omeid/go-livereload/cmd/livereload
 livereload:
-	livereload . &
+	cd web; livereload . | ts
 
-server:
+local:
-	python3 -m http.server 8082 &
+	go run main.go --local-assets --images-dir w.tmp/images --collages-dir w.tmp
 
+update_croppie:
+	curl -Lo web/croppie.min.js https://github.com/Foliotek/Croppie/raw/v2.6.5/croppie.min.js
+	curl -Lo web/croppie.css https://github.com/Foliotek/Croppie/raw/v2.6.5/croppie.css

cmd/run.go

@@ -1,56 +0,0 @@
-package main
-
-import (
-	"encoding/json"
-	"fmt"
-	"os"
-
-	"go.balki.me/collage-maker/collage"
-)
-
-func main() {
-	req := collage.Request{}
-	/*
-			reqStr := []byte(`
-		{
-		  "background_image": "",
-		  "aspect": { "width": 4224, "height": 3264 },
-		  "dimension": { "width": 1187, "height": 848 },
-		  "photos": [
-			{
-			  "image": "img1.jpg",
-			  "crop": {
-				"start": { "x": 419, "y": 667 },
-				"end": { "x": 2707, "y": 3389 }
-			  },
-			  "frame": {
-				"start": { "x": 0, "y": 0 },
-				"end": { "x": 712, "y": 848 }
-			  }
-			},
-			{
-			  "image": "img2.jpg",
-			  "crop": {
-				"start": { "x": 331, "y": 44 },
-				"end": { "x": 1132, "y": 1468 }
-			  },
-			  "frame": {
-				"start": { "x": 712, "y": 0 },
-				"end": { "x": 1187, "y": 848 }
-			  }
-			}
-		  ]
-		}
-		`)
-	*/
-	// {"background_image":"","aspect":{"width":4224,"height":3264},"dimension":{"width":1187,"height":848},"photos":[{"image":"img1.jpg","crop":{"start":{"x":528,"y":3},"end":{"x":2696,"y":2583}},"frame":{"start":{"x":0,"y":0},"end":{"x":712,"y":848}}},{"image":"img2.jpg","crop":{"start":{"x":410,"y":0},"end":{"x":1014,"y":1074}},"frame":{"start":{"x":712,"y":0},"end":{"x":1187,"y":848}}}]}
-	reqStr := []byte(`
-{"background_image":"","aspect":{"width":4224,"height":3264},"dimension":{"width":1097,"height":848},"photos":[{"image":"img1.jpg","crop":{"start":{"x":448,"y":595},"end":{"x":2721,"y":3560}},"frame":{"start":{"x":0,"y":0},"end":{"x":649,"y":848}}},{"image":"img2.jpg","crop":{"start":{"x":418,"y":1},"end":{"x":1022,"y":1180}},"frame":{"start":{"x":665,"y":0},"end":{"x":1098,"y":848}}}]}
-`)
-	err := json.Unmarshal(reqStr, &req)
-	fmt.Println(err)
-	out, err := os.Create("./collage.jpg")
-	fmt.Println(err)
-	err = collage.Make(&req, os.DirFS("."), out)
-	fmt.Println(err)
-}

collage/collage_test.go

@@ -104,17 +104,6 @@ func TestCrop(t *testing.T) {
 	if string(refImgPrefix) != croppedImgPrefix {
 		t.Fatalf("Cropped image is not the same as reference image")
 	}
-	// SavePrefix(cropped)
-	// expectedImage, err := GetImage(testDataFS, "test_output.jpg")
-	// if err != nil {
-	// 	t.Fatalf("failed to get reference crop image %v", err)
-	// }
-	// fmt.Printf("%v\n", cropped)
-	// fmt.Printf("%v\n", expectedImage)
-	// if fmt.Sprintf("%#v", cropped) != fmt.Sprintf("%#v", expectedImage) {
-	// 	t.Fatalf("Cropped image is not the same as reference image")
-	// }
-	// SaveImage(cropped)
 }
 
 // Save first 1000 bytes of string representation to compare against reference

dummy.txt

@@ -1 +0,0 @@
-hello world

main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"bytes"
 	"context"
 	"crypto/rand"
 	"embed"
@@ -12,6 +13,7 @@ import (
 	"net/http"
 	"os"
 	"path"
+	"regexp"
 	"sync/atomic"
 	"time"
 
@@ -30,14 +32,14 @@ var (
 	imagesDirFs    fs.FS
 	listenAddr     string
 
-	// go:embed web/*
+	//go:embed web
 	webFS embed.FS
 )
 
 func main() {
 	flag.StringVar(&imagesDir, "images-dir", "images", "Sets the images dir")
 	flag.StringVar(&collageDir, "collages-dir", "collages", "Sets the collages dir")
-	flag.BoolVar(&localAssets, "local-assets", false, "Serve local assets for testing")
+	flag.BoolVar(&localAssets, "local-assets", false, "Serve local assets during development")
 	flag.StringVar(&listenAddr, "addr", "127.0.0.1:8767", "Web listen address, see https://pkg.go.dev/go.balki.me/anyhttp#readme-address-syntax")
 
 	flag.Parse()
@@ -48,7 +50,6 @@ func main() {
 	collagesPath := "collages"
 
 	addFileServer := func(path, dir string) {
-
 		httpFileServer := http.FileServer(http.Dir(dir))
 		http.Handle("/"+path+"/", http.StripPrefix("/"+path, httpFileServer))
 	}
@@ -63,14 +64,29 @@ func main() {
 			httpFileServer.ServeHTTP(w, r)
 		})
 	} else {
-		fs, err := fs.Sub(webFS, "web")
+		indexModTime := time.Now()
-
+		indexHTML := func() io.ReadSeeker {
-		if err != nil {
+			indexHTMLContent, err := webFS.ReadFile("web/index.html")
-			panic(err)
+			if err != nil {
-		}
+				panic(err)
-
+			}
-		httpFileServer := http.FileServer(http.FS(fs))
+			devOnlyRegex := regexp.MustCompile("\n[^\n]*<!-- DEVONLY[^\n]*")
-		http.Handle("/", httpFileServer)
+			return bytes.NewReader(devOnlyRegex.ReplaceAllLiteral(indexHTMLContent, nil))
+		}()
+		httpFileServer := func() http.Handler {
+			webrootFs, err := fs.Sub(webFS, "web")
+			if err != nil {
+				panic(err)
+			}
+			return http.FileServer(http.FS(webrootFs))
+		}()
+		http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+			if r.URL.Path == "/" {
+				http.ServeContent(w, r, "index.html", indexModTime, indexHTML)
+			} else {
+				httpFileServer.ServeHTTP(w, r)
+			}
+		})
 	}
 
 	http.HandleFunc("/make-collage", func(w http.ResponseWriter, r *http.Request) {
@@ -105,7 +121,8 @@ func main() {
 		if err := idle.Wait(30 * time.Minute); err != nil {
 			slog.Error("Failed to wait for idler", "error", err)
 		}
-		ctx, _ := context.WithTimeout(context.Background(), 1*time.Minute) // Don't want any stuck connections
+		ctx, cancel := context.WithTimeout(context.Background(), 1*time.Minute) // Don't want any stuck connections
+		defer cancel()
 		if err := server.Shutdown(ctx); err != nil {
 			slog.Error("http server Shutdown failed", "error", err)
 		}
@@ -152,5 +169,3 @@ func MakeCollage(req *collage.Request) (string, error) {
 	}
 	return collageFile, nil
 }
-
-// curl -D - --json @req.json http://localhost:8767/make-collage

standard.go

@@ -1,24 +0,0 @@
-package main
-
-type Resolution struct {
-	X uint
-	Y uint
-}
-
-// increased by factor 1.5
-// https://www.adorama.com/alc/pixels-and-printing-size-matters/
-
-var Letter = Resolution{
-	X: 3264,
-	Y: 4224,
-}
-
-var FiveXSeven = Resolution{
-	X: 2250,
-	Y: 3150,
-}
-
-var FourXSix = Resolution{
-	X: 1800,
-	Y: 2700,
-}

template.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
-        <style>
-.paper {
-    width: 8.5in;
-    height: 11in;
-    overflow: hidden;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    background-color: gainsboro;
-}
-.img1, .img2 {
-    width: 7in;
-    height: 5in;
-}
-.img1 {
-    background-color: blue;
-}
-
-.img2 {
-    background-color: yellow;
-}
-        </style>
-    </head>
-    <body>
-        <div class="paper">
-            <div class="img1"></div>
-            <div class="img2"></div>
-        </div>
-    </body>
-</html>

web/index.html

@@ -1,18 +1,12 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="stylesheet" href="croppie.css" />
         <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
-        <script src="http://localhost:35729/livereload.js"></script>
+        <!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
-        <script src="croppie.js" defer></script>
+        <link rel="stylesheet" href="croppie.css" />
+        <script src="croppie.min.js" defer></script>
         <script src="index.js" defer></script>
         <link rel="stylesheet" href="index.css" />
-        <!--
-            width: 3264px;
-            height: 4224px;
-            width: 8.5in;
-            height: 11in;
-        -->
     </head>
     <body>
         <div class="container">

web/index.js

@@ -114,14 +114,6 @@ function initCollage() {
     }
 }
 
-function showCrop() {
-    for(cpie of crops) {
-        console.log(cpie.get())
-        console.log(cpie.element.clientWidth)
-        console.log(cpie.element.clientHeight)
-    }
-}
-
 async function makeCollage(req) {
     const resp = await fetch("make-collage", {
         method: "POST",
@@ -136,7 +128,6 @@ async function makeCollage(req) {
 function snap() {
     const col = collageDiv.offsetLeft;
     const cot = collageDiv.offsetTop;
-    console.log("----------------------")
     const req = {
         background_image: "",
         aspect: {
@@ -152,11 +143,6 @@ function snap() {
 
     for(const elem of collageDiv.getElementsByClassName("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;
@@ -186,7 +172,6 @@ function snap() {
         req.photos.push(photo)
     }
 
-    console.log(JSON.stringify(req));
     (async () => {
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;