update go version

Make buttons and photos bigger and easier to hit
add tenspl template
2024-10-18 14:17:55 -04:00 · 2024-08-13 17:54:02 -04:00 · 2024-08-13 17:18:10 -04:00 · 2024-08-12 22:56:50 -04:00 · 2024-08-12 17:21:25 -04:00 · 2024-08-12 14:31:25 -04:00
9 changed files with 248 additions and 58 deletions
--- a/go.mod
+++ b/go.mod
@ -1,10 +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
 )

-require golang.org/x/image v0.1.0 // indirect
+require golang.org/x/image v0.21.0 // indirect
--- a/go.sum
+++ b/go.sum
@ -1,31 +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=
-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.1.0/go.mod h1:iyPr49SD/G/TBxYVB/9RRtGUT5eNbo2u4NamWeQcD5c=
-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/image v0.21.0 h1:c5qV36ajHpdj4Qi0GnE0jUc/yuo33OLFaa0d+crTD5s=
+golang.org/x/image v0.21.0/go.mod h1:vUbsLavqK/W303ZroQQVKQ+Af3Yl6Uz1Ppu5J/cLz78=
 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=
--- a/web/choose.css
+++ b/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;
+}
--- a/web/choose.html
+++ b/web/choose.html
@ -8,8 +8,7 @@
  </head>
  <body>
    <dialog id="notice_dialog">
-      <p id="notice_p"></p>
-      <form><button type="submit" formmethod="dialog">X</button></form>
+      <form method="dialog"><span id="notice_span"></span><button>X</button></form>
    </dialog>
    <div class="container">
      <div class="controls">
--- a/web/choose.js
+++ b/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")
@ -92,7 +92,7 @@ function closeNotice() {

 /** @param {string} notice */
 function showNotice(notice) {
-    noticeP.textContent = notice
+    noticeSpan.textContent = notice
    noticeDialog.show()
 }

--- a/web/index.css
+++ b/web/index.css
@ -9,6 +9,7 @@
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
+    gap: 0.5rem;
    flex: 25%;
    overflow: scroll;
 }
@ -17,36 +18,83 @@
    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: 6rem;
-    height: 6rem;
+    aspect-ratio: var(--collage-ap);
 }

 .template-selected {
@ -122,6 +170,27 @@
    "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; }
--- a/web/index.html
+++ b/web/index.html
@ -9,14 +9,13 @@
        <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">

-              <h2>Photo Collage</h2>
-              <p><a href="choose.html">Select Images</a></p>
-
-                <label>
-                    <span>Paper size</span>
+              <h1>Photo Collage</h1>
              <select id="page_size_selector">
                <option          value="letter-portrait"     > Letter (Portrait)  </option>
                <option selected value="letter-landscape"    > Letter (Landscape) </option>
@ -25,14 +24,22 @@
                <option          value="foursix-portrait"    > 4 × 6 (Portrait)   </option>
                <option          value="foursix-landscape"   > 4 × 6 (Landscape)  </option>
              </select>
-                </label>
-
-                <button id="snapper" class="showbuton">Snap Collage</button>
-                <div>
-                  <p><a href="/collages/" target="_blank" >All collages</a></p>
-                  <p><a href="" target="_blank" id="collage-url"></a></p>
+              <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>
@ -148,6 +155,20 @@
                            <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>

            </div>
--- a/web/index.js
+++ b/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()
--- a/web/splgrid.html
+++ b/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>
Author	SHA1	Message	Date
Balakrishnan Balasubramanian	39905787fc	update go version	2024-10-18 14:17:55 -04:00
Balakrishnan Balasubramanian	36e07b9836	Make buttons and photos bigger and easier to hit	2024-08-13 17:54:02 -04:00
Balakrishnan Balasubramanian	e67fa7b279	add tenspl template	2024-08-13 17:18:10 -04:00
Balakrishnan Balasubramanian	3d044b5076	implement reorder	2024-08-12 22:56:50 -04:00
Balakrishnan Balasubramanian	e10efabcd5	Simplify UI	2024-08-12 17:21:25 -04:00
Balakrishnan Balasubramanian	7ab601c5ed	Change template width/height as percent	2024-08-12 14:31:25 -04:00
Balakrishnan Balasubramanian	8299da3b27	Improve notice dialog	2024-08-12 13:12:49 -04:00