update go version

1. Move button above templates
2. Add 3 more templates
3. change px to rem

collage/collage.go

@@ -11,7 +11,6 @@ import (
 	"io/fs"
 
 	"github.com/disintegration/imaging"
-	"go.oneofone.dev/resize"
 )
 
 type Dimension struct {
@@ -65,13 +64,13 @@ func Make(req *Request, source fs.FS, output io.Writer) error {
 		}
 
 		destRect := FrameTranslate(req.Aspect, req.Dimension, photo.Frame).ToImgRect()
-		resizedImg := resize.Resize(uint(destRect.Dx()), uint(destRect.Dy()), croppedImage, resize.Lanczos3)
+		resizedImg := imaging.Resize(croppedImage, destRect.Dx(), destRect.Dy(), imaging.Lanczos)
 		draw.Draw(canvas, destRect, resizedImg, image.Point{0, 0}, draw.Src)
 	}
-	var opt jpeg.Options
-	opt.Quality = 100
 
-	return jpeg.Encode(output, canvas, &opt)
+	return jpeg.Encode(output, canvas, &jpeg.Options{
+		Quality: 100,
+	})
 }
 
 func FrameTranslate(resolution Dimension, frameSize Dimension, frame Rectangle) Rectangle {

go.mod

@@ -1,11 +1,10 @@
 module go.balki.me/collage-maker
 
-go 1.22
+go 1.23.2
 
 require (
 	github.com/disintegration/imaging v1.6.2
 	go.balki.me/anyhttp v0.3.0
-	go.oneofone.dev/resize v1.0.1
 )
 
-require golang.org/x/image v0.1.0 // indirect
+require golang.org/x/image v0.21.0 // indirect

go.sum

@@ -1,33 +1,8 @@
 github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
 github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
-github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 go.balki.me/anyhttp v0.3.0 h1:WtBQ0rnkg567sX/O4ij/+qBbdCIUt5VURSe718sITBY=
 go.balki.me/anyhttp v0.3.0/go.mod h1:JhfekOIjgVODoVqUCficjpIgmB3wwlB7jhN0eN2EZ/s=
-go.oneofone.dev/resize v1.0.1 h1:HjpVar/4pxMGrjO44ThaMX1Q5UOBw0KxzbxxRDZPQuA=
-go.oneofone.dev/resize v1.0.1/go.mod h1:zGFmn7q4EUZVlnDmxqf+b0mWpxsTt0MH2yx6ng8tpq0=
-golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.1.0 h1:r8Oj8ZA2Xy12/b5KZYj3tuv7NG/fBz3TwQVvpJ9l8Rk=
+golang.org/x/image v0.21.0 h1:c5qV36ajHpdj4Qi0GnE0jUc/yuo33OLFaa0d+crTD5s=
-golang.org/x/image v0.1.0/go.mod h1:iyPr49SD/G/TBxYVB/9RRtGUT5eNbo2u4NamWeQcD5c=
+golang.org/x/image v0.21.0/go.mod h1:vUbsLavqK/W303ZroQQVKQ+Af3Yl6Uz1Ppu5J/cLz78=
-golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
-golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
-golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
-golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=

web/choose.css

@@ -45,3 +45,10 @@
     border: 5px solid;
     border-color: red;
 }
+
+#notice_dialog button {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}

web/choose.html

@@ -8,8 +8,7 @@
   </head>
   <body>
     <dialog id="notice_dialog">
-      <p id="notice_p"></p>
+      <form method="dialog"><span id="notice_span"></span><button>X</button></form>
-      <form><button type="submit" formmethod="dialog">X</button></form>
     </dialog>
     <div class="container">
       <div class="controls">

web/choose.js

@@ -15,7 +15,7 @@ let makeCollageBtn
 let albumSelect
 
 /** @type {HTMLParagraphElement} */
-let noticeP
+let noticeSpan
 
 /** @type {HTMLDialogElement} */
 let noticeDialog
@@ -34,7 +34,7 @@ function main() {
     loadPhotosBtn = document.getElementById("load_photos_button")
     makeCollageBtn = document.getElementById("make_collage_button")
     albumSelect = document.getElementById("album_selector")
-    noticeP = document.getElementById("notice_p")
+    noticeSpan = document.getElementById("notice_span")
     noticeDialog = document.getElementById("notice_dialog")
     albumPhotosDiv = document.getElementById("album_photos")
     selectedPhotosDiv = document.getElementById("selected_photos")
@@ -43,7 +43,7 @@ function main() {
     loadPhotosBtn.onclick = () => loadPhotos()
     makeCollageBtn.onclick = () => gotoCollage()
 
-    /** @type HTMLImageElement[] */
+    /** @type HTMLCollectionOf<HTMLImageElement> */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
     for (const img of selectedPhotos) {
         img.onclick = () => {
@@ -55,6 +55,17 @@ function main() {
     selectedPhotos[0].click()
 }
 
+function moveToNextSlot() {
+    /** @type HTMLCollectionOf<HTMLImageElement> */
+    const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
+    for (const img of selectedPhotos) {
+        if(img.src.endsWith("stock.svg")) {
+            img.click()
+            return
+        }
+    }
+}
+
 function loadAlbums() {
     (async () => {
         try {
@@ -81,7 +92,7 @@ function closeNotice() {
 
 /** @param {string} notice */
 function showNotice(notice) {
-    noticeP.textContent = notice
+    noticeSpan.textContent = notice
     noticeDialog.show()
 }
 
@@ -110,11 +121,12 @@ function loadPhotos() {
                 albumPhotosDiv.appendChild(img)
             }
 
-            /** @type HTMLImageElement[] */
+            /** @type HTMLCollectionOf<HTMLImageElement> */
             const photoImgs = albumPhotosDiv.children
             for(const photo of photoImgs) {
                 photo.onclick = () => {
                     selectedPhotoImg.src = photo.src
+                    moveToNextSlot()
                 }
             }
         } catch(e) {
@@ -124,7 +136,7 @@ function loadPhotos() {
 }
 
 function gotoCollage() {
-    /** @type HTMLImageElement[] */
+    /** @type HTMLCollectionOf<HTMLImageElement> */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
     /** @type String[] */
     const photoUrls = [];

web/index.css

@@ -9,43 +9,92 @@
     align-items: center;
     justify-content: space-around;
     flex-direction: column;
+    gap: 0.5rem;
     flex: 25%;
+    overflow: scroll;
 }
 .imagebox {
     padding: 2rem;
     flex: 75%;
 }
 
+:root {
+    --collage-ap: 110 / 85;
+}
+
 .image-surface {
     overflow: hidden;
     margin: auto;
     border: 1px solid;
     height: 100%;
     width: auto;
-    --collage-ap: 110 / 85;
     aspect-ratio: var(--collage-ap);
 }
-.showbuton {
+
-    font-size: 2rem;
+#image-chooser-controls {
+    display: none;
+    width: 80%;
+}
+
+#image-preview-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 80%;
+}
+
+#image-preview-box img {
+    width: 30%;
+    aspect-ratio: 1 / 1;
+}
+
+.main-controls {
+    display: flex;
+    gap: 0.5rem;
+    width: 80%;
+}
+
+.main-controls * {
+    width: 100%;
+    height: 4rem;
+    font-size: 1.2rem;
+}
+
+#notice_dialog {
+    z-index: 10;
+    width: 50%;
+    background-color: lightblue;
+}
+
+#notice_dialog form {
+    display: flex;
+}
+
+#notice_dialog button {
+    font-size: 1.2rem;
+    margin-left: auto;
 }
 
 .templates {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
+    width: 80%;
 }
 
 .templates li {
+    width: 30%;
     list-style-type: none;
+    aspect-ratio: 1 / 1;
 }
 
 #page_size_selector {
-    width: 100%;
+    font-size: 1.2rem;
+    width: 80%;
 }
 
 .template {
-    width: 100px;
+    aspect-ratio: var(--collage-ap);
-    height: 100px;
 }
 
 .template-selected {
@@ -90,7 +139,7 @@
     "A B"
     "C C"
     "C C"
-    "D  E"
+    "D E";
 }
 
 .two-one-two-topbottom .img1 {
@@ -100,17 +149,48 @@
 .two-row {
     display: grid;
     grid-template-areas: 
-    "A B"
+    "A B";
 }
 
 .three-row {
     display: grid;
     grid-template-areas:
-    "A B C"
+    "A B C";
 }
 
 .four-row {
     display: grid;
     grid-template-areas:
-    "A B C D"
+    "A B C D";
 }
+
+.one-three-topbottom {
+    display: grid;
+    grid-template-areas:
+    "A A A"
+    "B C D";
+}
+
+.one-three-topbottom .img1 {
+    grid-area: A;
+}
+
+.ten-spl {
+    display: grid;
+    grid-template-areas:
+    "A A A B B B"
+    "C D D E E F"
+    "G D D E E H"
+    "I I I J J J";
+}
+
+.ten-spl .img1 { grid-area: A; }
+.ten-spl .img2 { grid-area: B; }
+.ten-spl .img3 { grid-area: C; }
+.ten-spl .img4 { grid-area: D; }
+.ten-spl .img5 { grid-area: E; }
+.ten-spl .img6 { grid-area: F; }
+.ten-spl .img7 { grid-area: G; }
+.ten-spl .img8 { grid-area: H; }
+.ten-spl .img9 { grid-area: I; }
+.ten-spl .img10 { grid-area: J; }

web/index.html

@@ -9,14 +9,14 @@
         <link rel="stylesheet" href="index.css" />
     </head>
     <body>
+      <dialog id="notice_dialog">
+        <form method="dialog"><span><a href="" target="_blank" id="collage-url"></a></span><button>X</button></form>
+      </dialog>
         <div class="container">
             <div class="controls">
 
-                <p><a href="choose.html">Select Images</a></p>
+              <h1>Photo Collage</h1>
-
+              <select id="page_size_selector">
-                <label>
-                    <span>Paper size</span>
-                    <select id="page_size_selector" size=6>
                 <option          value="letter-portrait"     > Letter (Portrait)  </option>
                 <option selected value="letter-landscape"    > Letter (Landscape) </option>
                 <option          value="fiveseven-portrait"  > 5 × 7 (Portrait)   </option>
@@ -24,8 +24,22 @@
                 <option          value="foursix-portrait"    > 4 × 6 (Portrait)   </option>
                 <option          value="foursix-landscape"   > 4 × 6 (Landscape)  </option>
               </select>
-                </label>
+              <div class="main-controls">
+                <a href="choose.html"><button>Select</button></a>
+                <button id="snapper" class="showbuton">Snap</button>
+                <a href="/collages/?sort=time&order=desc&layout=grid" target="_blank" ><button>All</button></a>
+                <button id="reorder_btn">Reorder</button>
+              </div>
 
+              <div id="image-chooser-controls">
+                <div>
+                  <button id="image_prev_btn">Previous</button>
+                  <button id="image_next_btn">Next</button>
+                  <button id="image_done_btn">Done</button>
+                </div>
+                <div id="image-preview-box">
+                </div>
+              </div>
 
                 <ul class="templates">
                     <li>
@@ -113,10 +127,49 @@
                             <div class="img img12"></div>
                         </div>
                     </li>
+                    <li>
+                        <div class="template three-row">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                            <div class="img img5"></div>
+                            <div class="img img6"></div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="template two-row">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                            <div class="img img5"></div>
+                            <div class="img img6"></div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="template one-three-topbottom">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="template ten-spl">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                            <div class="img img5"></div>
+                            <div class="img img6"></div>
+                            <div class="img img7"></div>
+                            <div class="img img8"></div>
+                            <div class="img img9"></div>
+                            <div class="img img10"></div>
+                        </div>
+                    </li>
                 </ul>
-                <button id="snapper" class="showbuton">Snap Collage</button>
-                <p><a href="" target="_blank" id="collage-url"></a></p>
-
 
             </div>
             <div class="imagebox">

web/index.js

@@ -44,12 +44,34 @@ let collageDiv
 /** @type {HTMLSelectElement} */
 let pageSizeSelect
 
+/** @type {HTMLDialogElement} */
+let noticeDialog
+
 /** @type {HTMLAnchorElement} */
 let collageUrlA
 
+/** @type {HTMLButtonElement} */
+let reorderButton
+
+/** @type {HTMLDivElement} */
+let previewDiv
+
+/** @type {HTMLButtonElement} */
+let imagePrevBtn
+
+/** @type {HTMLButtonElement} */
+let imageNextBtn
+
+/** @type {HTMLButtonElement} */
+let imageDoneBtn
+
+/** @type {HTMLDivElement} */
+let imageChooserControls
+
 // collage state
 
 let crops = [];
+let currentCropIndex = -1;
 let pageSize = "letter-landscape";
 /** @type {String[]} */
 let imageUrls = []
@@ -59,10 +81,47 @@ function main() {
     snapButton = document.getElementById("snapper")
     collageDiv = document.getElementById("collage")
     pageSizeSelect = document.getElementById("page_size_selector")
+    noticeDialog = document.getElementById("notice_dialog")
     collageUrlA = document.getElementById("collage-url")
+    reorderButton = document.getElementById("reorder_btn")
+    previewDiv = document.getElementById("image-preview-box")
+    imageChooserControls = document.getElementById("image-chooser-controls")
+
+    imagePrevBtn = document.getElementById("image_prev_btn")
+    imageNextBtn = document.getElementById("image_next_btn")
+    imageDoneBtn = document.getElementById("image_done_btn")
+
+    imagePrevBtn.onclick = () => {
+        let newIndex = currentCropIndex - 1;
+        if(newIndex < 0) {
+            newIndex = 0
+        }
+        currentCropIndex = newIndex
+        changeOpacity()
+    }
+
+    imageNextBtn.onclick = () => {
+        let newIndex = currentCropIndex + 1;
+        if(newIndex >= crops.length) {
+            newIndex = crops.length - 1
+        }
+        currentCropIndex = newIndex
+        changeOpacity()
+    }
+
+    imageDoneBtn.onclick = () => {
+        currentCropIndex = -1
+        imageChooserControls.style.display = 'none';
+        /** @type {HTMLCollectionOf<HTMLDivElement> */
+        const divs = collageDiv.getElementsByClassName("img")
+        for(const elem of divs) {
+            elem.style.opacity = "100%"
+        }
+    }
 
     snapButton.onclick = () => snap()
     pageSizeSelect.onchange  = () => pageSizeChange()
+    reorderButton.onclick = () => reorder()
 
     for(const tmpl of document.getElementsByClassName("template")) {
         // Assumes second class in the template is the collage's template
@@ -74,6 +133,7 @@ function main() {
     // Skipping first entry in array to make the images start with index 1
     imageUrls = [,].concat(queryUrls)
 
+    pageSizeChange()
     applyTemplate(document.getElementById("default_template"))
 }
 
@@ -171,6 +231,7 @@ function snap() {
     }
 
     (async () => {
+        noticeDialog.show()
         collageUrlA.text = "Collage is being generated...";
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
@@ -179,7 +240,8 @@ function snap() {
 }
 
 function pageSizeChange() {
-    collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
+    // https://stackoverflow.com/a/37802204
+    document.documentElement.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
     pageSize = pageSizeSelect.value
     initCollage()
 }
@@ -205,6 +267,7 @@ function applyTemplate(templateDiv) {
     collageDiv.classList.add(templateDiv.dataset.collageTemplate)
     collageDiv.dataset.collageTemplate = templateDiv.dataset.collageTemplate
     initCollage()
+    imageDoneBtn.click()
 }
 
 function loadImageUrlsFromQuery() {
@@ -213,4 +276,36 @@ function loadImageUrlsFromQuery() {
     return JSON.parse(urlsstr)
 }
 
+function reorder() {
+    imageChooserControls.style.display = 'block';
+    previewDiv.replaceChildren()
+    currentCropIndex = 0;
+    for (const index in imageUrls) {
+        const url = imageUrls[index]
+        const img = new Image()
+        img.src =  url
+        previewDiv.appendChild(img)
+        img.onclick = () => {
+            const cpie = crops[currentCropIndex]
+            const elem = cpie.element
+            elem.dataset.collageImageUrl = url
+            cpie.destroy()
+            crops[currentCropIndex] = makeCroppieElem(elem, url)
+        }
+    }
+    changeOpacity()
+}
+
+function changeOpacity() {
+    /** @type {HTMLCollectionOf<HTMLDivElement> */
+    const divs = collageDiv.getElementsByClassName("img")
+    for(const elem of divs) {
+        if (elem.dataset.collageCropieIndex != currentCropIndex) {
+            elem.style.opacity = "25%"
+        } else {
+            elem.style.opacity = "100%"
+        }
+    }
+}
+
 main()

web/splgrid.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+        <!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+      <div class="template ten-spl">
+        <div class="img img1"></div>
+        <div class="img img2"></div>
+        <div class="img img3"></div>
+        <div class="img img4"></div>
+        <div class="img img5"></div>
+        <div class="img img6"></div>
+        <div class="img img7"></div>
+        <div class="img img8"></div>
+        <div class="img img9"></div>
+        <div class="img img10"></div>
+      </div>
+    </body>
+</html>