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

Implement selecting template for collage #14

Merged
balki merged 6 commits from template-chooser into main 2023-09-06 23:59:07 -04:00
Conversation 0 Commits 6 Files Changed 4 +86 -21
4 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 00bc166148 - Show all commits

1
main.go
View File

@ -126,7 +126,6 @@ func MakeCollage(req *collage.Request) (string, error) {
out, err := os.Create(path.Join(collageDir, collageFile)) out, err := os.Create(path.Join(collageDir, collageFile))
if err != nil { if err != nil {
return "", fmt.Errorf("failed to create collage output file, err: %w", err) 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 { if err := collage.Make(req, imagesDirFs, out); err != nil {
return "", fmt.Errorf("failed to make collage, err: %w", err) return "", fmt.Errorf("failed to make collage, err: %w", err)

5
web/index.css
View File

@ -14,12 +14,15 @@
padding: 2rem; padding: 2rem;
flex: 70%; flex: 70%;
} }
.image-surface { .image-surface {
overflow: hidden; overflow: hidden;
margin: auto; margin: auto;
border: 1px solid; border: 1px solid;
height: 100%; height: 100%;
width: 100%; width: auto;
--collage-ap: 110 / 85;
aspect-ratio: var(--collage-ap);
} }
.showbuton { .showbuton {
font-size: 2rem; font-size: 2rem;

23
web/index.html
View File

@ -4,8 +4,8 @@
<link rel="stylesheet" href="croppie.css" /> <link rel="stylesheet" href="croppie.css" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=" /> <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<script src="http://localhost:35729/livereload.js"></script> <script src="http://localhost:35729/livereload.js"></script>
<script src="croppie.js"></script> <script src="croppie.js" defer></script>
<script src="index.js"></script> <script src="index.js" defer></script>
<link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="index.css" />
<!-- <!--
width: 3264px; width: 3264px;
@ -14,16 +14,29 @@
height: 11in; height: 11in;
--> -->
</head> </head>
<body onload="main()"> <body>
<div class="container"> <div class="container">
<div class="controls"> <div class="controls">
<div> <div>
<button class="showbuton" onClick="snap()">Snap Collage</button> <div>
<label>
Page size
<select id="page_size_selector" size=8 onChange="pageSizeChange(this)">
<option value="letter-portrait">Letter (Portrait)</option>
<option selected value="letter-landscape">Letter (Landscape)</option>
<option value="fiveseven-portrait">5 X 7 (Portrait)</option>
<option value="fiveseven-landscape">7 X 5 (Landscape)</option>
<option value="foursix-portrait">4 X 6 (Portrait)</option>
<option value="foursix-landscape">4 X 6 (Landscape)</option>
</select>
</label>
</div>
<button id="snapper" class="showbuton">Snap Collage</button>
<p><a href="" target="_blank" id="collage-url"></a></p> <p><a href="" target="_blank" id="collage-url"></a></p>
</div> </div>
</div> </div>
<div class="imagebox"> <div class="imagebox">
<div id="collage" class="image-surface fiveseven-landscape one-two"> <div id="collage" class="image-surface one-two">
<div class="collage-img img1" data-collage-image-url="images/img1.jpg"> <div class="collage-img img1" data-collage-image-url="images/img1.jpg">
</div> </div>
<div class="collage-img img2" data-collage-image-url="images/img2.jpg"> <div class="collage-img img2" data-collage-image-url="images/img2.jpg">

78
web/index.js
View File

@ -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() { 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) { function makeCroppieElem(elem, imgUrl) {
@ -18,17 +66,14 @@ function makeCroppieElem(elem, imgUrl) {
}); });
return cpie return cpie
} }
// collage state
var collageDivId; function initCollage() {
var crops = []; for(cpie of crops) {
cpie.destroy()
function initCollage(divId) { }
collageDivId = divId crops = []
const collageDiv = document.getElementById(collageDivId)
for(elem of collageDiv.getElementsByClassName("collage-img")) { for(elem of collageDiv.getElementsByClassName("collage-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)
@ -56,15 +101,14 @@ async function makeCollage(req) {
} }
function snap() { function snap() {
const collageDiv = document.getElementById(collageDivId)
col = collageDiv.offsetLeft; col = collageDiv.offsetLeft;
cot = collageDiv.offsetTop; cot = collageDiv.offsetTop;
console.log("----------------------") console.log("----------------------")
req = { req = {
background_image: "", background_image: "",
aspect: { aspect: {
width: 3150, width: pageSizes[pageSize]["width"],
height: 2250, height: pageSizes[pageSize]["height"],
}, },
dimension: { dimension: {
width: collageDiv.clientWidth, width: collageDiv.clientWidth,
@ -112,9 +156,15 @@ function snap() {
console.log(JSON.stringify(req)); console.log(JSON.stringify(req));
(async () => { (async () => {
collagFile = await makeCollage(req) collagFile = await makeCollage(req)
// const collageUrlA = document.createElement("a");
const collageUrlA = document.getElementById("collage-url");
collageUrlA.href = `collages/${collagFile}`; collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`; collageUrlA.text = `${collagFile} generated`;
})(); })();
} }
function pageSizeChange(selectElem) {
document.getElementById("collage").style.setProperty('--collage-ap', pageSizes[selectElem.value]["ap"])
pageSize = selectElem.value
initCollage()
}
main()