diff --git a/main.go b/main.go
index ab40a46..1880d0b 100644
--- a/main.go
+++ b/main.go
@@ -53,7 +53,10 @@ func main() {
if localAssets {
httpFileServer := http.FileServer(http.Dir("web"))
- http.Handle("/", httpFileServer)
+ http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+ w.Header().Add("Cache-Control", "no-cache")
+ httpFileServer.ServeHTTP(w, r)
+ })
} else {
fs, err := fs.Sub(webFS, "web")
@@ -123,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
new file mode 100644
index 0000000..3efd9cb
--- /dev/null
+++ b/web/index.css
@@ -0,0 +1,104 @@
+.container {
+ display: flex;
+ background-color: lightyellow;
+ height: calc(100vh - 20px);
+}
+.controls {
+ background-color: lightgrey;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ flex-direction: column;
+ flex: 25%;
+}
+.imagebox {
+ padding: 2rem;
+ flex: 75%;
+}
+
+.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;
+}
+
+.templates {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.templates li {
+ list-style-type: none;
+}
+
+#page_size_selector {
+ width: 100%;
+}
+
+.template {
+ width: 100px;
+ height: 100px;
+}
+
+.template div {
+ border: 1px solid;
+}
+
+.single div {
+ width: 100%;
+ height: 100%;
+}
+
+.one-two {
+ display: grid;
+ grid-template-areas:
+ "one two"
+ "one three";
+}
+.one-two .img1{
+ grid-area: one;
+}
+
+.half-leftright {
+ display:flex;
+}
+
+.half-leftright .img {
+ flex: 50%;
+}
+
+.half-topbottom .img {
+ width: 100%;
+ height: 50%;
+}
+
+.two-one-two-leftright {
+ display: grid;
+ grid-template-areas:
+ "one two two three"
+ "four two two five";
+}
+.two-one-two-leftright .img2 {
+ grid-area: two;
+}
+
+.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 ded15a7..3ce8ad3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,85 +4,85 @@
-
-
+
+
+
-
-
+
-
+
+
+
+
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
diff --git a/web/index.js b/web/index.js
index e574df1..35c1b1e 100644
--- a/web/index.js
+++ b/web/index.js
@@ -1,10 +1,90 @@
+"use strict";
-function main() {
- initCollage("collage")
+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
+
+/** @type {HTMLButtonElement} */
+let snapButton
+
+/** @type {HTMLDivElement} */
+let collageDiv
+
+/** @type {HTMLSelectElement} */
+let pageSizeSelect
+
+/** @type {HTMLAnchorElement} */
+let collageUrlA
+
+// collage state
+
+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")
+ collageDiv = document.getElementById("collage")
+ pageSizeSelect = document.getElementById("page_size_selector")
+ collageUrlA = document.getElementById("collage-url")
+
+ snapButton.onclick = () => snap()
+ pageSizeSelect.onchange = () => pageSizeChange()
+
+ for(const tmpl of document.getElementsByClassName("template")) {
+ tmpl.onclick = () => applyTemplate(tmpl)
+ }
+
+ applyTemplate(document.getElementById("default_template"))
+}
+
+/**
+ * @param {HTMLDivElement} elem
+ * @param {string} imgUrl
+ */
function makeCroppieElem(elem, imgUrl) {
- cpie = new Croppie(elem, {
+ const cpie = new Croppie(elem, {
viewport: {
width: elem.clientWidth,
height: elem.clientHeight,
@@ -18,18 +98,16 @@ function makeCroppieElem(elem, imgUrl) {
});
return cpie
-
}
-// collage state
-var collageDivId;
-var crops = [];
+function initCollage() {
+ for(const cpie of crops) {
+ cpie.destroy()
+ }
+ crops = []
-function initCollage(divId) {
- collageDivId = divId
- const collageDiv = document.getElementById(collageDivId)
- 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
@@ -56,15 +134,14 @@ async function makeCollage(req) {
}
function snap() {
- const collageDiv = document.getElementById(collageDivId)
- col = collageDiv.offsetLeft;
- cot = collageDiv.offsetTop;
+ const col = collageDiv.offsetLeft;
+ const cot = collageDiv.offsetTop;
console.log("----------------------")
- req = {
+ const req = {
background_image: "",
aspect: {
- width: 528 * 4 * 2,
- height: 816 * 4,
+ width: pageSizes[pageSize]["width"],
+ height: pageSizes[pageSize]["height"],
},
dimension: {
width: collageDiv.clientWidth,
@@ -73,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)
@@ -111,10 +188,39 @@ function snap() {
console.log(JSON.stringify(req));
(async () => {
- collagFile = await makeCollage(req)
- // const collageUrlA = document.createElement("a");
- const collageUrlA = document.getElementById("collage-url");
+ const collagFile = await makeCollage(req)
collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`;
})();
}
+
+function pageSizeChange() {
+ collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
+ pageSize = pageSizeSelect.value
+ 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()