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

Compare commits

base: balki:12b4386f14b7ceffd21ec2d92010ed90af477f3d
Branches Tags
balki:main
balki:photoprism-fetch
balki:uploadexp
balki:v0.1.1
balki:v0.1.0
balki:expdone
..
compare: balki:efda3b72b8f433ff80b8b3d93f36d66d67d43a98
Branches Tags
balki:main
balki:photoprism-fetch
balki:uploadexp
balki:v0.1.1
balki:v0.1.0
balki:expdone

No commits in common. "12b4386f14b7ceffd21ec2d92010ed90af477f3d" and "efda3b72b8f433ff80b8b3d93f36d66d67d43a98" have entirely different histories.
12b4386f14 ... efda3b72b8

4 changed files with 76 additions and 108 deletions
Show Stats Expand all files Collapse all files

33
web/choose.js
View File

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

64
web/index.css
View File

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

58
web/index.html
View File

@ -12,11 +12,10 @@
<div class="container"> <div class="container">
<div class="controls"> <div class="controls">
<p><a href="choose.html">Select Images</a></p>
<label> <label>
<span>Paper size</span> <span>Paper size</span>
<select id="page_size_selector" size=6> <select id="page_size_selector" size=8>
<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 × 7 (Portrait) </option> <option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
@ -29,31 +28,31 @@
<ul class="templates"> <ul class="templates">
<li> <li>
<div id="default_template" class="template single"> <div id="default_template" class="template single" data-collage-template="single">
<div class="img img1"></div> <div class="img img1"></div>
</div> </div>
</li> </li>
<li> <li>
<div class="template one-two"> <div class="template one-two" data-collage-template="one-two">
<div class="img img1"></div> <div class="img img1"></div>
<div class="img img2"></div> <div class="img img2"></div>
<div class="img img3"></div> <div class="img img3"></div>
</div> </div>
</li> </li>
<li> <li>
<div class="template two-row"> <div class="template half-leftright" data-collage-template="half-leftright">
<div class="img img1"></div> <div class="img img1"></div>
<div class="img img2"></div> <div class="img img2"></div>
</div> </div>
</li> </li>
<li> <li>
<div class="template half-topbottom"> <div class="template half-topbottom" data-collage-template="half-topbottom">
<div class="img img1"></div> <div class="img img1"></div>
<div class="img img2"></div> <div class="img img2"></div>
</div> </div>
</li> </li>
<li> <li>
<div class="template two-one-two-leftright"> <div class="template two-one-two-leftright" data-collage-template="two-one-two-leftright">
<div class="img img1"></div> <div class="img img1"></div>
<div class="img img2"></div> <div class="img img2"></div>
<div class="img img3"></div> <div class="img img3"></div>
@ -62,56 +61,13 @@
</div> </div>
</li> </li>
<li> <li>
<div class="template two-one-two-topbottom"> <div class="template two-one-two-topbottom" data-collage-template="two-one-two-topbottom">
<div class="img img1"></div> <div class="img img1"></div>
<div class="img img2"></div> <div class="img img2"></div>
<div class="img img3"></div> <div class="img img3"></div>
<div class="img img4"></div> <div class="img img4"></div>
<div class="img img5"></div> <div class="img img5"></div>
</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> </li>
</ul> </ul>
<button id="snapper" class="showbuton">Snap Collage</button> <button id="snapper" class="showbuton">Snap Collage</button>

27
web/index.js
View File

@ -51,8 +51,16 @@ let collageUrlA
let crops = []; let crops = [];
let pageSize = "letter-landscape"; let pageSize = "letter-landscape";
/** @type {String[]} */ let imageUrls = [
let 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() {
@ -65,13 +73,9 @@ function main() {
pageSizeSelect.onchange = () => pageSizeChange() pageSizeSelect.onchange = () => pageSizeChange()
for(const tmpl of document.getElementsByClassName("template")) { 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) tmpl.onclick = () => applyTemplate(tmpl)
} }
const queryUrls = loadImageUrlsFromQuery() const queryUrls = loadImageUrlsFromQuery()
// Skipping first entry in array to make the images start with index 1
imageUrls = [,].concat(queryUrls) imageUrls = [,].concat(queryUrls)
applyTemplate(document.getElementById("default_template")) applyTemplate(document.getElementById("default_template"))
@ -144,8 +148,12 @@ function snap() {
const fsx = elem.offsetLeft - col const fsx = elem.offsetLeft - col
const fsy = elem.offsetTop - cot const fsy = elem.offsetTop - cot
const [sx, sy, ex, ey] = cpie.get().points; const [sx, sy, ex, ey] = cpie.get().points;
const imageFile = (() => {
const u = new URL(elem.dataset.collageImageUrl)
return u.pathname.slice("/photos/".length)
})();
const photo = { const photo = {
image: elem.dataset.collageImageUrl.slice("/photos/".length), image: imageFile,
crop: { crop: {
start: { start: {
x: parseInt(sx), x: parseInt(sx),
@ -171,7 +179,6 @@ function snap() {
} }
(async () => { (async () => {
collageUrlA.text = "Collage is being generated...";
const 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`;
@ -184,7 +191,9 @@ function pageSizeChange() {
initCollage() initCollage()
} }
/** @param {HTMLDivElement} templateDiv */ /**
* @param {HTMLDivElement} templateDiv
*/
function applyTemplate(templateDiv) { function applyTemplate(templateDiv) {
document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected") document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */