From a8f9d87b47b01142ff795a90be031e0b98689628 Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Fri, 1 Sep 2023 23:12:52 -0400 Subject: [PATCH 1/6] css cleanup --- web/index.html | 76 +++++++++++++++++++++++++++++++++++--------------- web/index.js | 4 +-- 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/web/index.html b/web/index.html index ded15a7..ae05372 100644 --- a/web/index.html +++ b/web/index.html @@ -13,19 +13,6 @@ height: 11in; -->
-- 2.34.1 From 00bc1661483dacd1ac24d2919ef7f34f9c83042f Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Tue, 5 Sep 2023 18:42:47 -0400 Subject: [PATCH 3/6] add page size select --- main.go | 1 - web/index.css | 5 +++- web/index.html | 23 +++++++++++---- web/index.js | 78 +++++++++++++++++++++++++++++++++++++++++--------- 4 files changed, 86 insertions(+), 21 deletions(-) diff --git a/main.go b/main.go index 3b8cebe..1880d0b 100644 --- a/main.go +++ b/main.go @@ -126,7 +126,6 @@ func MakeCollage(req *collage.Request) (string, error) { out, err := os.Create(path.Join(collageDir, collageFile)) if err != nil { return "", fmt.Errorf("failed to create collage output file, err: %w", err) - // slog.Error("failed to create collage output file", "error", err) } if err := collage.Make(req, imagesDirFs, out); err != nil { return "", fmt.Errorf("failed to make collage, err: %w", err) diff --git a/web/index.css b/web/index.css index 8bae6b0..65b4e31 100644 --- a/web/index.css +++ b/web/index.css @@ -14,12 +14,15 @@ padding: 2rem; flex: 70%; } + .image-surface { overflow: hidden; margin: auto; border: 1px solid; height: 100%; - width: 100%; + width: auto; + --collage-ap: 110 / 85; + aspect-ratio: var(--collage-ap); } .showbuton { font-size: 2rem; diff --git a/web/index.html b/web/index.html index 0fc3c2e..2165dfb 100644 --- a/web/index.html +++ b/web/index.html @@ -4,8 +4,8 @@ - - + + - +
- +
+ +
+

-
+
diff --git a/web/index.js b/web/index.js index 162e0d3..aa5c1be 100644 --- a/web/index.js +++ b/web/index.js @@ -1,6 +1,54 @@ +const pageSizes = { + "letter-portrait" : { + "ap": "85 / 110", + "width": 3264, + "height": 4224, + }, + "letter-landscape" : { + "ap": "110 / 85", + "width": 4224, + "height": 3264, + }, + "fiveseven-portrait" : { + "ap": "5 / 7", + "width": 2250, + "height": 3150, + }, + "fiveseven-landscape" : { + "ap": "7 / 5", + "width": 3150, + "height": 2250, + }, + "foursix-portrait" : { + "ap": "4 / 6", + "width": 1800, + "height": 2700, + }, + "foursix-landscape" : { + "ap": "6 / 4", + "width": 2700, + "height": 1800, + }, +} + +// elements -- dummy createElement for language server type hint +var snapButton = document.createElement("button") +var collageDiv = document.createElement("div") +var pageSizeSelect = document.createElement("select") +var collageUrlA = document.createElement("a"); + +// collage state +var crops = []; +var pageSize = "letter-landscape"; function main() { - initCollage("collage") + snapButton = document.getElementById("snapper") + collageDiv = document.getElementById("collage") + pageSizeSelect = document.getElementById("page_size_selector") + collageUrlA = document.getElementById("collage-url") + initCollage() + snapButton.onclick = () => snap() + pageSizeSelect.onchange = () => pageSizeChange(pageSizeSelect) } function makeCroppieElem(elem, imgUrl) { @@ -18,17 +66,14 @@ function makeCroppieElem(elem, imgUrl) { }); return cpie - } -// collage state -var collageDivId; -var crops = []; - -function initCollage(divId) { - collageDivId = divId - const collageDiv = document.getElementById(collageDivId) +function initCollage() { + for(cpie of crops) { + cpie.destroy() + } + crops = [] for(elem of collageDiv.getElementsByClassName("collage-img")) { const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl) const lastLen = crops.push(cpie) @@ -56,15 +101,14 @@ async function makeCollage(req) { } function snap() { - const collageDiv = document.getElementById(collageDivId) col = collageDiv.offsetLeft; cot = collageDiv.offsetTop; console.log("----------------------") req = { background_image: "", aspect: { - width: 3150, - height: 2250, + width: pageSizes[pageSize]["width"], + height: pageSizes[pageSize]["height"], }, dimension: { width: collageDiv.clientWidth, @@ -112,9 +156,15 @@ function snap() { console.log(JSON.stringify(req)); (async () => { collagFile = await makeCollage(req) - // const collageUrlA = document.createElement("a"); - const collageUrlA = document.getElementById("collage-url"); collageUrlA.href = `collages/${collagFile}`; collageUrlA.text = `${collagFile} generated`; })(); } + +function pageSizeChange(selectElem) { + document.getElementById("collage").style.setProperty('--collage-ap', pageSizes[selectElem.value]["ap"]) + pageSize = selectElem.value + initCollage() +} + +main() -- 2.34.1 From 8a566399208292349c583a467a1efeb78b573b75 Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Wed, 6 Sep 2023 18:56:02 -0400 Subject: [PATCH 4/6] Add jsdoc typehints --- web/index.js | 35 +++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/web/index.js b/web/index.js index aa5c1be..cfa8bc2 100644 --- a/web/index.js +++ b/web/index.js @@ -1,4 +1,4 @@ -const pageSizes = { +var pageSizes = { "letter-portrait" : { "ap": "85 / 110", "width": 3264, @@ -31,13 +31,22 @@ const pageSizes = { }, } -// elements -- dummy createElement for language server type hint -var snapButton = document.createElement("button") -var collageDiv = document.createElement("div") -var pageSizeSelect = document.createElement("select") -var collageUrlA = document.createElement("a"); +// elements + +/** @type {HTMLButtonElement} */ +var snapButton + +/** @type {HTMLDivElement} */ +var collageDiv + +/** @type {HTMLSelectElement} */ +var pageSizeSelect + +/** @type {HTMLAnchorElement} */ +var collageUrlA // collage state + var crops = []; var pageSize = "letter-landscape"; @@ -46,11 +55,17 @@ function main() { collageDiv = document.getElementById("collage") pageSizeSelect = document.getElementById("page_size_selector") collageUrlA = document.getElementById("collage-url") + initCollage() + snapButton.onclick = () => snap() - pageSizeSelect.onchange = () => pageSizeChange(pageSizeSelect) + pageSizeSelect.onchange = () => pageSizeChange() } +/** + * @param {HTMLDivElement} elem + * @param {string} imgUrl + */ function makeCroppieElem(elem, imgUrl) { cpie = new Croppie(elem, { viewport: { @@ -161,9 +176,9 @@ function snap() { })(); } -function pageSizeChange(selectElem) { - document.getElementById("collage").style.setProperty('--collage-ap', pageSizes[selectElem.value]["ap"]) - pageSize = selectElem.value +function pageSizeChange() { + collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"]) + pageSize = pageSizeSelect.value initCollage() } -- 2.34.1 From 8034acb5043b4f3612a1f500f005de8462d09d76 Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Wed, 6 Sep 2023 23:44:29 -0400 Subject: [PATCH 5/6] Implement selecting template for collage --- web/index.css | 94 ++++++++++++++++++++++++++++-------------------- web/index.html | 97 +++++++++++++++++++++++++++++++++++++------------- web/index.js | 75 +++++++++++++++++++++++++++++--------- 3 files changed, 186 insertions(+), 80 deletions(-) diff --git a/web/index.css b/web/index.css index 65b4e31..3efd9cb 100644 --- a/web/index.css +++ b/web/index.css @@ -7,12 +7,13 @@ background-color: lightgrey; display: flex; align-items: center; - justify-content: center; - flex: 30%; + justify-content: space-around; + flex-direction: column; + flex: 25%; } .imagebox { padding: 2rem; - flex: 70%; + flex: 75%; } .image-surface { @@ -28,32 +29,32 @@ font-size: 2rem; } -// paper sizes -.letter-portrait { - aspect-ratio: 85 / 110; -} -.letter-landscape { - aspect-ratio: 110 / 85; -} -.fiveseven-portrait { - aspect-ratio: 5 / 7; -} -.fiveseven-landscape { - aspect-ratio: 7 / 5; -} -.foursix-portrait { - aspect-ratio: 4 / 6; -} -.foursix-landscape { - aspect-ratio: 6 / 4; +.templates { + display: flex; + flex-wrap: wrap; + gap: 1rem; } -.half-landscape { - display:flex; +.templates li { + list-style-type: none; } -.half-landscape .collage-img { - flex: 50%; +#page_size_selector { + width: 100%; +} + +.template { + width: 100px; + height: 100px; +} + +.template div { + border: 1px solid; +} + +.single div { + width: 100%; + height: 100%; } .one-two { @@ -66,21 +67,38 @@ grid-area: one; } -.letter-portrait .collage-img { +.half-leftright { + display:flex; +} + +.half-leftright .img { + flex: 50%; +} + +.half-topbottom .img { + width: 100%; height: 50%; } -.letter-landscape-2 { - display:flex; - // width: 80vh; - height: 100%; - // margin: auto; - aspect-ratio: 110 / 85; - // aspect-ratio: 7 / 5; - gap: 1rem; + +.two-one-two-leftright { + display: grid; + grid-template-areas: + "one two two three" + "four two two five"; } -.letter-landscape-2 .img1 { - flex: 60%; +.two-one-two-leftright .img2 { + grid-area: two; } -.letter-landscape-2 .img2 { - flex: 40%; + +.two-one-two-topbottom { + display: grid; + grid-template-areas: + "one two" + "three three" + "three three" + "four five" +} + +.two-one-two-topbottom .img3 { + grid-area: three; } diff --git a/web/index.html b/web/index.html index 2165dfb..049c6a9 100644 --- a/web/index.html +++ b/web/index.html @@ -17,33 +17,80 @@
-
-
- -
- -

-
+ + + + + +
    +
  • +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    • +
+ +

+ +
-
-
-
-
-
-
-
-
+
diff --git a/web/index.js b/web/index.js index cfa8bc2..35c1b1e 100644 --- a/web/index.js +++ b/web/index.js @@ -1,4 +1,6 @@ -var pageSizes = { +"use strict"; + +const pageSizes = { "letter-portrait" : { "ap": "85 / 110", "width": 3264, @@ -34,21 +36,32 @@ var pageSizes = { // elements /** @type {HTMLButtonElement} */ -var snapButton +let snapButton /** @type {HTMLDivElement} */ -var collageDiv +let collageDiv /** @type {HTMLSelectElement} */ -var pageSizeSelect +let pageSizeSelect /** @type {HTMLAnchorElement} */ -var collageUrlA +let collageUrlA // collage state -var crops = []; -var pageSize = "letter-landscape"; +let crops = []; +let pageSize = "letter-landscape"; +const imageUrls = [ + , // images start with index 1 + "images/img1.jpg", + "images/img2.jpg", + "images/img3.jpg", + "images/img4.jpg", + "images/img5.jpg", + "images/img6.jpg", + "images/img7.jpg", +] + function main() { snapButton = document.getElementById("snapper") @@ -56,10 +69,14 @@ function main() { pageSizeSelect = document.getElementById("page_size_selector") collageUrlA = document.getElementById("collage-url") - initCollage() - snapButton.onclick = () => snap() pageSizeSelect.onchange = () => pageSizeChange() + + for(const tmpl of document.getElementsByClassName("template")) { + tmpl.onclick = () => applyTemplate(tmpl) + } + + applyTemplate(document.getElementById("default_template")) } /** @@ -67,7 +84,7 @@ function main() { * @param {string} imgUrl */ function makeCroppieElem(elem, imgUrl) { - cpie = new Croppie(elem, { + const cpie = new Croppie(elem, { viewport: { width: elem.clientWidth, height: elem.clientHeight, @@ -85,11 +102,12 @@ function makeCroppieElem(elem, imgUrl) { function initCollage() { - for(cpie of crops) { + for(const cpie of crops) { cpie.destroy() } crops = [] - for(elem of collageDiv.getElementsByClassName("collage-img")) { + + for(const elem of collageDiv.getElementsByClassName("img")) { const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl) const lastLen = crops.push(cpie) elem.dataset.collageCropieIndex = lastLen - 1 @@ -116,10 +134,10 @@ async function makeCollage(req) { } function snap() { - col = collageDiv.offsetLeft; - cot = collageDiv.offsetTop; + const col = collageDiv.offsetLeft; + const cot = collageDiv.offsetTop; console.log("----------------------") - req = { + const req = { background_image: "", aspect: { width: pageSizes[pageSize]["width"], @@ -132,7 +150,7 @@ function snap() { photos: [], }; - for(elem of collageDiv.getElementsByClassName("collage-img")) { + for(const elem of collageDiv.getElementsByClassName("img")) { const cpie = crops[elem.dataset.collageCropieIndex] // console.log(cpie.get().points) // console.log(elem.offsetLeft - col) @@ -170,7 +188,7 @@ function snap() { console.log(JSON.stringify(req)); (async () => { - collagFile = await makeCollage(req) + const collagFile = await makeCollage(req) collageUrlA.href = `collages/${collagFile}`; collageUrlA.text = `${collagFile} generated`; })(); @@ -182,4 +200,27 @@ function pageSizeChange() { initCollage() } +/** + * @param {HTMLDivElement} templateDiv + */ +function applyTemplate(templateDiv) { + /** @type {HTMLDivElement} */ + const templateClone = templateDiv.cloneNode(true) + for (const index in imageUrls) { + const url = imageUrls[index] + const imgClass = `img${index}` + + const [imgDiv] = templateClone.getElementsByClassName(imgClass) + if(imgDiv === undefined) { + break; + } + imgDiv.dataset.collageImageUrl = url; + } + collageDiv.replaceChildren(...templateClone.children) + collageDiv.classList.remove(collageDiv.dataset.collageTemplate) + collageDiv.classList.add(templateDiv.dataset.collageTemplate) + collageDiv.dataset.collageTemplate = templateDiv.dataset.collageTemplate + initCollage() +} + main() -- 2.34.1 From b7fe2e81921cb403bdcdca066d2efc04e4470fd5 Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Wed, 6 Sep 2023 23:58:21 -0400 Subject: [PATCH 6/6] cleanup --- web/index.html | 34 +++++++++++++--------------------- 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/web/index.html b/web/index.html index 049c6a9..3ce8ad3 100644 --- a/web/index.html +++ b/web/index.html @@ -21,13 +21,13 @@ @@ -35,34 +35,26 @@
  • -
    -
    +
  • -
    -
    -
    -
    -
    -
    +
    +
    +
  • -
    -
    -
    -
    +
    +
  • -
    -
    -
    -
    +
    +
  • -- 2.34.1