Frontend improvements

1. Simplify template css to use grid always and use ABCD for area names
2. Add 3 new templates
3. Set data attribute dynamically for templates
4. Minor reformatting in js files
5. Fix URL path

collage/collage.go

@@ -10,6 +10,7 @@ import (
 	"io"
 	"io/fs"
 
+	"github.com/disintegration/imaging"
 	"go.oneofone.dev/resize"
 )
 
@@ -102,6 +103,6 @@ func GetImage(source fs.FS, imageName string) (image.Image, error) {
 	if err != nil {
 		return nil, err
 	}
-	img, _, err := image.Decode(imgF)
+	img, err := imaging.Decode(imgF, imaging.AutoOrientation(true))
 	return img, err
 }

go.mod

@@ -3,6 +3,7 @@ module go.balki.me/collage-maker
 go 1.22
 
 require (
+	github.com/disintegration/imaging v1.6.2
 	go.balki.me/anyhttp v0.3.0
 	go.oneofone.dev/resize v1.0.1
 )

go.sum

@@ -1,3 +1,5 @@
+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=
@@ -5,6 +7,7 @@ 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.1.0/go.mod h1:iyPr49SD/G/TBxYVB/9RRtGUT5eNbo2u4NamWeQcD5c=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=

main.go

@@ -24,7 +24,6 @@ import (
 )
 
 var (
-	imagesDir       string
 	collageDir      string
 	photosDir       string
 	devMode         bool
@@ -41,7 +40,6 @@ var (
 func main() {
 	var ppURL string
 
-	flag.StringVar(&imagesDir, "images-dir", "images", "Sets the images dir")
 	flag.StringVar(&collageDir, "collages-dir", "collages", "Sets the collages dir")
 	flag.StringVar(&photosDir, "photos-dir", "photos", "Cache directory for downloaded photos")
 	flag.BoolVar(&devMode, "dev", false, "Serve local assets during development")
@@ -59,8 +57,7 @@ func main() {
 		return photoPrismURL
 	}()
 	collageNameGen = NewNameGen()
-	imagesDirFs = os.DirFS(imagesDir)
+	imagesDirFs = os.DirFS(photosDir)
-	imagesURLPath := "images"
 	collagesPath := "collages"
 	photosPath := "photos"
 
@@ -69,7 +66,6 @@ func main() {
 		http.Handle("/"+path+"/", http.StripPrefix("/"+path, httpFileServer))
 	}
 
-	addFileServer(imagesURLPath, imagesDir)
 	addFileServer(collagesPath, collageDir)
 	addFileServer(photosPath, photosDir)
 

web/choose.js

@@ -30,21 +30,20 @@ let selectedPhotosDiv
 let selectedPhotoImg
 
 function main() {
-    albumSelect = document.getElementById("album_selector")
     loadAlbumsBtn = document.getElementById("load_albums_button")
     loadPhotosBtn = document.getElementById("load_photos_button")
     makeCollageBtn = document.getElementById("make_collage_button")
+    albumSelect = document.getElementById("album_selector")
+    noticeP = document.getElementById("notice_p")
     noticeDialog = document.getElementById("notice_dialog")
     albumPhotosDiv = document.getElementById("album_photos")
     selectedPhotosDiv = document.getElementById("selected_photos")
-    noticeP = document.getElementById("notice_p")
+
     loadAlbumsBtn.onclick = () => loadAlbums()
     loadPhotosBtn.onclick = () => loadPhotos()
     makeCollageBtn.onclick = () => gotoCollage()
 
-    /**
+    /** @type HTMLImageElement[] */
-     * @type HTMLImageElement[]
-     */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
     for (const img of selectedPhotos) {
         img.onclick = () => {
@@ -80,9 +79,7 @@ function closeNotice() {
     noticeDialog.close()
 }
 
-/**
+/** @param {string} notice */
- * @param {string} notice
- */
 function showNotice(notice) {
     noticeP.textContent = notice
     noticeDialog.show()
@@ -100,9 +97,7 @@ function loadPhotos() {
     (async () => {
         try {
             const resp = await fetch(`load-photos/${elem.value}`)
-            /**
+            /** @type String[] */
-             * @type String[]
-             */
             const photos = await resp.json()
             if(photos.length == 0) {
                 showNotice("No Photos found")
@@ -115,9 +110,7 @@ function loadPhotos() {
                 albumPhotosDiv.appendChild(img)
             }
 
-            /**
+            /** @type HTMLImageElement[] */
-             * @type HTMLImageElement[]
-             */
             const photoImgs = albumPhotosDiv.children
             for(const photo of photoImgs) {
                 photo.onclick = () => {
@@ -131,18 +124,14 @@ function loadPhotos() {
 }
 
 function gotoCollage() {
-    /**
+    /** @type HTMLImageElement[] */
-     * @type HTMLImageElement[]
-     */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
-    /**
+    /** @type String[] */
-     * @type String[]
+    const photoUrls = [];
-     */
-    let photoUrls = [];
 
     for (const img of selectedPhotos) {
         if (!img.src.endsWith("stock.svg")) {
-            photoUrls.push(img.src)
+            photoUrls.push((new URL(img.src)).pathname)
         }
     }
     const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))

web/index.css

@@ -32,7 +32,7 @@
 .templates {
     display: flex;
     flex-wrap: wrap;
-     gap: 1rem;
+    gap: 1rem;
 }
 
 .templates li {
@@ -56,53 +56,61 @@
     border: 1px solid;
 }
 
-.single div {
+.single {
-    width: 100%;
+    display: grid;
-    height: 100%;
 }
 
 .one-two {
     display: grid;
     grid-template-areas: 
-    "one two"
+    "A B"
-    "one three";
+    "A C";
 }
 .one-two .img1{
-    grid-area: one;
+    grid-area: A;
 }
 
-.half-leftright {
+.half-topbottom {
-    display:flex;
+    display: grid;
-}
-
-.half-leftright .img {
-    flex: 50%;
-}
-
-.half-topbottom .img {
-    width: 100%;
-    height: 50%;
 }
 
 .two-one-two-leftright {
     display: grid;
-    grid-template-areas: 
+    grid-template-areas:
-    "one two two three"
+    "A  B  B  C"
-    "four two two five";
+    "D  B  B  E";
 }
-.two-one-two-leftright .img2 {
+.two-one-two-leftright .img1 {
-    grid-area: two;
+    grid-area: B;
 }
 
 .two-one-two-topbottom {
     display: grid;
     grid-template-areas: 
-    "one two"
+    "A  B"
-    "three three"
+    "C  C"
-    "three three"
+    "C  C"
-    "four five"
+    "D  E"
 }
 
-.two-one-two-topbottom .img3 {
+.two-one-two-topbottom .img1 {
-    grid-area: three;
+    grid-area: C;
+}
+
+.two-row {
+    display: grid;
+    grid-template-areas: 
+    "A B"
+}
+
+.three-row {
+    display: grid;
+    grid-template-areas:
+    "A B C"
+}
+
+.four-row {
+    display: grid;
+    grid-template-areas:
+    "A B C D"
 }

web/index.html

@@ -12,10 +12,11 @@
         <div class="container">
             <div class="controls">
 
+                <p><a href="choose.html">Select Images</a></p>
 
                 <label>
                     <span>Paper size</span>
-                    <select id="page_size_selector" size=8>
+                    <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>
@@ -28,31 +29,31 @@
 
                 <ul class="templates">
                     <li>
-                        <div id="default_template" class="template single" data-collage-template="single">
+                        <div id="default_template" class="template single">
                             <div class="img img1"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template one-two" data-collage-template="one-two">
+                        <div class="template one-two">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                             <div class="img img3"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template half-leftright" data-collage-template="half-leftright">
+                        <div class="template two-row">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template half-topbottom" data-collage-template="half-topbottom">
+                        <div class="template half-topbottom">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template two-one-two-leftright" data-collage-template="two-one-two-leftright">
+                        <div class="template two-one-two-leftright">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                             <div class="img img3"></div>
@@ -61,13 +62,56 @@
                         </div>
                     </li>
                     <li>
-                        <div class="template two-one-two-topbottom" data-collage-template="two-one-two-topbottom">
+                        <div class="template two-one-two-topbottom">
                             <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>
+                    <li>
+                        <div class="template four-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 class="img img7"></div>
+                            <div class="img img8"></div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="template four-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 class="img img7"></div>
+                            <div class="img img8"></div>
+                            <div class="img img9"></div>
+                            <div class="img img10"></div>
+                            <div class="img img11"></div>
+                            <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 class="img img7"></div>
+                            <div class="img img8"></div>
+                            <div class="img img9"></div>
+                            <div class="img img10"></div>
+                            <div class="img img11"></div>
+                            <div class="img img12"></div>
+                        </div>
                     </li>
                 </ul>
                 <button id="snapper" class="showbuton">Snap Collage</button>

web/index.js

@@ -51,16 +51,8 @@ let collageUrlA
 
 let crops = [];
 let pageSize = "letter-landscape";
-let imageUrls = [
+/** @type {String[]} */
-    , // images start with index 1
+let imageUrls = []
-    "images/img1.jpg",
-    "images/img2.jpg",
-    "images/img3.jpg",
-    "images/img4.jpg",
-    "images/img5.jpg",
-    "images/img6.jpg",
-    "images/img7.jpg",
-]
 
 
 function main() {
@@ -73,9 +65,13 @@ function main() {
     pageSizeSelect.onchange  = () => pageSizeChange()
 
     for(const tmpl of document.getElementsByClassName("template")) {
+        // Assumes second class in the template is the collage's template
+        const [_, collageTemplate] = tmpl.classList
+        tmpl.dataset.collageTemplate = collageTemplate
         tmpl.onclick = () => applyTemplate(tmpl)
     }
     const queryUrls = loadImageUrlsFromQuery()
+    // Skipping first entry in array to make the images start with index 1
     imageUrls = [,].concat(queryUrls)
 
     applyTemplate(document.getElementById("default_template"))
@@ -149,7 +145,7 @@ function snap() {
         const fsy = elem.offsetTop - cot
         const [sx, sy, ex, ey] = cpie.get().points;
         const photo = {
-            image: elem.dataset.collageImageUrl.slice("images/".length),
+            image: elem.dataset.collageImageUrl.slice("/photos/".length),
             crop: {
                 start: {
                     x: parseInt(sx),
@@ -175,6 +171,7 @@ function snap() {
     }
 
     (async () => {
+        collageUrlA.text = "Collage is being generated...";
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
         collageUrlA.text = `${collagFile} generated`;
@@ -187,9 +184,7 @@ function pageSizeChange() {
     initCollage()
 }
 
-/** 
+/** @param {HTMLDivElement} templateDiv */
- * @param {HTMLDivElement} templateDiv 
- */
 function applyTemplate(templateDiv) {
     document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
     /** @type {HTMLDivElement} */