balki/collage-maker
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Implement selecting template for collage

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2023-09-06 23:44:29 -04:00
parent 8a56639920
commit 8034acb504
3 changed files with 186 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
web/index.css
View File

@ -7,12 +7,13 @@
background-color: lightgrey; background-color: lightgrey;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-around;
flex: 30%; flex-direction: column;
flex: 25%;
} }
.imagebox { .imagebox {
padding: 2rem; padding: 2rem;
flex: 70%; flex: 75%;
} }
.image-surface { .image-surface {
@ -28,32 +29,32 @@
font-size: 2rem; font-size: 2rem;
} }
// paper sizes .templates {
.letter-portrait { display: flex;
aspect-ratio: 85 / 110; flex-wrap: wrap;
} gap: 1rem;
.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;
} }
.half-landscape { .templates li {
display:flex; list-style-type: none;
} }
.half-landscape .collage-img { #page_size_selector {
flex: 50%; width: 100%;
}
.template {
width: 100px;
height: 100px;
}
.template div {
border: 1px solid;
}
.single div {
width: 100%;
height: 100%;
} }
.one-two { .one-two {
@ -66,21 +67,38 @@
grid-area: one; grid-area: one;
} }
.letter-portrait .collage-img { .half-leftright {
display:flex;
}
.half-leftright .img {
flex: 50%;
}
.half-topbottom .img {
width: 100%;
height: 50%; height: 50%;
} }
.letter-landscape-2 {
display:flex; .two-one-two-leftright {
// width: 80vh; display: grid;
height: 100%; grid-template-areas:
// margin: auto; "one two two three"
aspect-ratio: 110 / 85; "four two two five";
// aspect-ratio: 7 / 5;
gap: 1rem;
} }
.letter-landscape-2 .img1 { .two-one-two-leftright .img2 {
flex: 60%; 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;
} }

97
web/index.html
View File

@ -17,33 +17,80 @@
<body> <body>
<div class="container"> <div class="container">
<div class="controls"> <div class="controls">
<div>
<div>
<label> <label>
Page size <span>Paper size</span>
<select id="page_size_selector" size=8 onChange="pageSizeChange(this)"> <select id="page_size_selector" size=8 onChange="pageSizeChange(this)">
<option value="letter-portrait">Letter (Portrait)</option> <option value="letter-portrait">Letter (Portrait)</option>
<option selected value="letter-landscape">Letter (Landscape)</option> <option selected value="letter-landscape">Letter (Landscape)</option>
<option value="fiveseven-portrait">5 X 7 (Portrait)</option> <option value="fiveseven-portrait">5 X 7 (Portrait)</option>
<option value="fiveseven-landscape">7 X 5 (Landscape)</option> <option value="fiveseven-landscape">7 X 5 (Landscape)</option>
<option value="foursix-portrait">4 X 6 (Portrait)</option> <option value="foursix-portrait">4 X 6 (Portrait)</option>
<option value="foursix-landscape">4 X 6 (Landscape)</option> <option value="foursix-landscape">4 X 6 (Landscape)</option>
</select> </select>
</label> </label>
</div>
<button id="snapper" class="showbuton">Snap Collage</button>
<p><a href="" target="_blank" id="collage-url"></a></p> <ul class="templates">
</div> <li>
<div id="default_template" class="template single" data-collage-template="single">
<div class="img img1">
</div>
</div>
</li>
<li>
<div class="template one-two" data-collage-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="img img1">
</div>
<div class="img img2">
</div>
</div>
</li>
<li>
<div class="template half-topbottom" data-collage-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="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>
<li>
<div class="template two-one-two-topbottom" data-collage-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>
</ul>
<button id="snapper" class="showbuton">Snap Collage</button>
<p><a href="" target="_blank" id="collage-url"></a></p>
</div> </div>
<div class="imagebox"> <div class="imagebox">
<div id="collage" class="image-surface one-two"> <div id="collage" class="image-surface"></div>
<div class="collage-img img1" data-collage-image-url="images/img1.jpg">
</div>
<div class="collage-img img2" data-collage-image-url="images/img2.jpg">
</div>
<div class="collage-img img3" data-collage-image-url="images/img3.jpg">
</div>
</div>
</div> </div>
</div> </div>
</body> </body>

75
web/index.js
View File

@ -1,4 +1,6 @@
var pageSizes = { "use strict";
const pageSizes = {
"letter-portrait" : { "letter-portrait" : {
"ap": "85 / 110", "ap": "85 / 110",
"width": 3264, "width": 3264,
@ -34,21 +36,32 @@ var pageSizes = {
// elements // elements
/** @type {HTMLButtonElement} */ /** @type {HTMLButtonElement} */
var snapButton let snapButton
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
var collageDiv let collageDiv
/** @type {HTMLSelectElement} */ /** @type {HTMLSelectElement} */
var pageSizeSelect let pageSizeSelect
/** @type {HTMLAnchorElement} */ /** @type {HTMLAnchorElement} */
var collageUrlA let collageUrlA
// collage state // collage state
var crops = []; let crops = [];
var pageSize = "letter-landscape"; 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() { function main() {
snapButton = document.getElementById("snapper") snapButton = document.getElementById("snapper")
@ -56,10 +69,14 @@ function main() {
pageSizeSelect = document.getElementById("page_size_selector") pageSizeSelect = document.getElementById("page_size_selector")
collageUrlA = document.getElementById("collage-url") collageUrlA = document.getElementById("collage-url")
initCollage()
snapButton.onclick = () => snap() snapButton.onclick = () => snap()
pageSizeSelect.onchange = () => pageSizeChange() 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 * @param {string} imgUrl
*/ */
function makeCroppieElem(elem, imgUrl) { function makeCroppieElem(elem, imgUrl) {
cpie = new Croppie(elem, { const cpie = new Croppie(elem, {
viewport: { viewport: {
width: elem.clientWidth, width: elem.clientWidth,
height: elem.clientHeight, height: elem.clientHeight,
@ -85,11 +102,12 @@ function makeCroppieElem(elem, imgUrl) {
function initCollage() { function initCollage() {
for(cpie of crops) { for(const cpie of crops) {
cpie.destroy() cpie.destroy()
} }
crops = [] crops = []
for(elem of collageDiv.getElementsByClassName("collage-img")) {
for(const elem of collageDiv.getElementsByClassName("img")) {
const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl) const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
const lastLen = crops.push(cpie) const lastLen = crops.push(cpie)
elem.dataset.collageCropieIndex = lastLen - 1 elem.dataset.collageCropieIndex = lastLen - 1
@ -116,10 +134,10 @@ async function makeCollage(req) {
} }
function snap() { function snap() {
col = collageDiv.offsetLeft; const col = collageDiv.offsetLeft;
cot = collageDiv.offsetTop; const cot = collageDiv.offsetTop;
console.log("----------------------") console.log("----------------------")
req = { const req = {
background_image: "", background_image: "",
aspect: { aspect: {
width: pageSizes[pageSize]["width"], width: pageSizes[pageSize]["width"],
@ -132,7 +150,7 @@ function snap() {
photos: [], photos: [],
}; };
for(elem of collageDiv.getElementsByClassName("collage-img")) { for(const elem of collageDiv.getElementsByClassName("img")) {
const cpie = crops[elem.dataset.collageCropieIndex] const cpie = crops[elem.dataset.collageCropieIndex]
// console.log(cpie.get().points) // console.log(cpie.get().points)
// console.log(elem.offsetLeft - col) // console.log(elem.offsetLeft - col)
@ -170,7 +188,7 @@ function snap() {
console.log(JSON.stringify(req)); console.log(JSON.stringify(req));
(async () => { (async () => {
collagFile = await makeCollage(req) const collagFile = await makeCollage(req)
collageUrlA.href = `collages/${collagFile}`; collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`; collageUrlA.text = `${collagFile} generated`;
})(); })();
@ -182,4 +200,27 @@ function pageSizeChange() {
initCollage() 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() main()