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()