BiRabittoh/artbound-python
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix, update footer, polish

Browse Source
This commit is contained in:
Marco Andronaco 2023-08-10 18:04:34 +02:00
parent 61c699ca6f
commit 5ef1788dfa
5 changed files with 103 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
artbound_python/static/script.js
View File

@ -10,6 +10,8 @@ const MAX_WIDTH = MAX_HEIGHT = 1000,
WATERMARK = new Image(), WATERMARK = new Image(),
IG_TEMPLATE = new Image(), IG_TEMPLATE = new Image(),
fanarts = new Array(),
months = new Set(),
last_updated_link = document.getElementById("last-updated-link"), last_updated_link = document.getElementById("last-updated-link"),
month_input = document.getElementById("month_input"), month_input = document.getElementById("month_input"),
month_div = document.getElementById("month_div"), month_div = document.getElementById("month_div"),
@ -23,8 +25,7 @@ const MAX_WIDTH = MAX_HEIGHT = 1000,
canvas_ig = document.getElementById("instagram-canvas"), canvas_ig = document.getElementById("instagram-canvas"),
fanart_template = document.getElementById("fanart-template").innerHTML; fanart_template = document.getElementById("fanart-template").innerHTML;
let fanarts = new Array(), let new_entries = 0;
new_entries = 0;
WATERMARK.src = WATERMARK_SRC; WATERMARK.src = WATERMARK_SRC;
IG_TEMPLATE.src = IG_TEMPLATE_SRC; IG_TEMPLATE.src = IG_TEMPLATE_SRC;
@ -85,7 +86,7 @@ function getNewCardHtml(element) {
async function updateFanartList() { async function updateFanartList() {
content_div.innerHTML = ""; content_div.innerHTML = "";
get_button.disabled = false; get_button.disabled = false;
get_button.innerText = "Aggiungi"; get_button.innerText = emoji_get;
let i = 0; let i = 0;
for (fanart of fanarts) { for (fanart of fanarts) {
@ -104,7 +105,7 @@ async function updateFanartList() {
} }
function getFanart(id) { function getFanart(id) {
return fanarts.find(element => element.id == id) return fanarts.find(element => element.id == id);
} }
function toggleEntry(id) { function toggleEntry(id) {
@ -112,13 +113,13 @@ function toggleEntry(id) {
if (!entry) return; if (!entry) return;
entry.enabled = !entry.enabled; entry.enabled = !entry.enabled;
updateFanartList() updateFanartList();
} }
function saveCanvas(my_canvas, filename) { function saveCanvas(my_canvas, filename) {
canvas_link.href = my_canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); canvas_link.href = my_canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
canvas_link.setAttribute("download", filename); canvas_link.setAttribute("download", filename);
canvas_link.click() canvas_link.click();
} }
function reloadEntry(id) { function reloadEntry(id) {
@ -132,7 +133,7 @@ function reloadEntry(id) {
function selectAllNone(toggle) { function selectAllNone(toggle) {
fanarts.map(x => x.enabled = toggle) fanarts.map(x => x.enabled = toggle)
updateFanartList() updateFanartList();
} }
function clickCoordsToCanvas(clickX, clickY, c) { function clickCoordsToCanvas(clickX, clickY, c) {
@ -180,7 +181,6 @@ function moveUpDown(id, amount) {
const new_pos = pos + amount; const new_pos = pos + amount;
if (new_pos <= -1 || new_pos >= fanarts.length) return; if (new_pos <= -1 || new_pos >= fanarts.length) return;
[fanarts[pos], fanarts[new_pos]] = [fanarts[new_pos], fanarts[pos]]; [fanarts[pos], fanarts[new_pos]] = [fanarts[new_pos], fanarts[pos]];
updateFanartList(); updateFanartList();
} }
@ -190,7 +190,7 @@ function toggleInvert(id, button) {
if (!entry) return; if (!entry) return;
if (!entry.enabled) return; if (!entry.enabled) return;
entry.watermark.invert = entry.watermark.invert == '' ? 'invert(1)' : ''; entry.watermark.invert = entry.watermark.invert == '' ? 'invert(1)' : '';
button.innerText = entry.watermark.invert ? "⚫" : "⚪"; button.innerText = entry.watermark.invert ? emoji_color_black : emoji_color;
const ctx = entry.canvas.getContext('2d'); const ctx = entry.canvas.getContext('2d');
setBaseImage(entry.image, entry.canvas, ctx); setBaseImage(entry.image, entry.canvas, ctx);
drawWatermark(entry.watermark, ctx); drawWatermark(entry.watermark, ctx);
@ -228,13 +228,16 @@ function saveEntryIG(id) {
} }
function getArtworks() { function getArtworks() {
const month_value = month_input.value;
if (months.has(month_value)) return;
get_button.disabled = true; get_button.disabled = true;
get_button.innerText = "…" get_button.innerText = "🔄"
postData("/", { month: month_input.value }).then((data) => { postData("/", { month: month_value }).then((data) => {
fanarts = fanarts.concat(data); fanarts.push(...data);
controls_div.hidden = false; controls_div.hidden = false;
updateOpacity(); updateOpacity();
updateFanartList(); updateFanartList();
months.add(month_value);
}); });
} }
@ -261,6 +264,6 @@ function updateDb() {
last_updated_link.innerText = data.timestamp; last_updated_link.innerText = data.timestamp;
if (data.new == 0) return; if (data.new == 0) return;
new_entries += data.new; new_entries += data.new;
last_updated_link.innerText += ` (+${new_entries})`; last_updated_link.innerText += ` (+${ new_entries })`;
}); });
} }

13
artbound_python/static/style.css
View File

@ -57,6 +57,11 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.card-text {
display: block;
padding-bottom: 10px;
}
body { body {
background-color: var(--background0); background-color: var(--background0);
color: var(--text); color: var(--text);
@ -98,3 +103,11 @@ a:hover {
.text-row { .text-row {
margin-top: 20px; margin-top: 20px;
} }
footer a {
text-decoration: underline;
}
footer a:hover {
text-decoration: none;
}

54
artbound_python/templates/help.html
View File

@ -34,8 +34,8 @@
<div class="row text-row"> <div class="row text-row">
<div class="col-md-12"> <div class="col-md-12">
<p> <p>
ArtBound Panel è un modo intelligente per selezionare, ridimensionare, rinominare e marchiare ArtBound Panel è uno strumento che aiuta a selezionare, ridimensionare, rinominare e marchiare
le fanart che arrivano ad EarthBound Café. con facilità le fanart che arrivano ad Earthbound Café.
</p> </p>
</div> </div>
</div> </div>
@ -43,16 +43,33 @@
<div class="col-md-12"> <div class="col-md-12">
<h2 class="lead">Istruzioni</h2> <h2 class="lead">Istruzioni</h2>
<ol> <ol>
<li>Per prima cosa, seleziona il mese da cui vuoi estrarre le fanart e clicca sul tasto a <li>Per prima cosa, seleziona il mese da cui vuoi estrarre le fanart e clicca sul tasto {{ emoji["get_first"] }} a
fianco. Se le immagini non sono in cache potrebbe volerci un attimo.</li> fianco. Se le immagini non sono in cache potrebbe volerci un attimo.</li>
<li>Ripeti l'operazione precedente per integrare le fanart di eventuali altri mesi.</li> <li>Ripeti l'operazione precedente ({{ emoji["get"] }}) per integrare le fanart di eventuali altri mesi.</li>
<li>Disabilita le fanart non necessarie e ordina opportunamente il resto.</li> <li>Disabilita ({{ emoji["toggle"] }}) le fanart non necessarie e ordina ({{ emoji["prev"] }}, {{ emoji["next"] }}) opportunamente il resto.</li>
<li>Usa il mouse o il touch screen per posizionare il watermark su ciascuna immagine.</li> <li>Usa il mouse o il touch screen per posizionare il watermark su ciascuna immagine.</li>
<li>Usa i tasti {{ emoji["save"] }} o {{ emoji["save_ig"] }} per salvare i risultati su file. <li>Usa i tasti {{ emoji["save"] }} o {{ emoji["save_ig"] }} per salvare i risultati su file.
</li> </li>
</ol> </ol>
</div> </div>
</div> </div>
<div class="row text-row">
<div class="col-md-12">
<h2 class="lead">Comandi fanart</h2>
<p>
Questi comandi sono posizionati lungo la parte inferiore destra di ogni fanart e permettono di
agire su di essa.
</p>
<ul>
<li>{{ emoji["prev"] }}: porta indietro la fanart;</li>
<li>{{ emoji["toggle"] }}: abilita o disabilita la fanart;</li>
<li>{{ emoji["color"] }}/{{ emoji["color_black"] }}: alterna tra watermark bianco e nero;</li>
<li>{{ emoji["save"] }}: salva la fanart nel formato base, per Facebook, Mastodon, Twitter e Google Forms;</li>
<li>{{ emoji["save_ig"] }}: salva la fanart nel formato storia, per Instagram.</li>
<li>{{ emoji["next"] }}: porta avanti la fanart.</li>
</ul>
</div>
</div>
<div class="row text-row"> <div class="row text-row">
<div class="col-md-12"> <div class="col-md-12">
<h2 class="lead">Comandi globali</h2> <h2 class="lead">Comandi globali</h2>
@ -64,40 +81,21 @@
<li>{{ emoji["select_all"] }}: abilita tutte le fanart;</li> <li>{{ emoji["select_all"] }}: abilita tutte le fanart;</li>
<li>{{ emoji["select_none"] }}: disabilita tutte le fanart;</li> <li>{{ emoji["select_none"] }}: disabilita tutte le fanart;</li>
<li>Slider: cambia l'opacità dei prossimi watermark;</li> <li>Slider: cambia l'opacità dei prossimi watermark;</li>
<li>{{ emoji["save"] }}: salva tutte le fanart nel formato base, per Facebook e Google Forms; <li>{{ emoji["save"] }}: salva tutte le fanart nel formato base;</li>
</li> <li>{{ emoji["save_ig"] }}: salva tutte le fanart nel formato storia.</li>
<li>{{ emoji["save_ig"] }}: salva tutte le fanart nel formato storia, per Instagram.</li>
</ul>
</div>
</div>
<div class="row text-row">
<div class="col-md-12">
<h2 class="lead">Comandi fanart</h2>
<p>
Questi comandi sono posizionati lungo la parte inferiore destra di ogni fanart e permettono di
agire su di essa.
</p>
<ul>
<li>{{ emoji["prev"] }}: porta indietro la fanart;</li>
<li>{{ emoji["toggle"] }}: abilita/disabilita la fanart;</li>
<li>{{ emoji["color"] }}: alterna tra watermark bianco e nero;</li>
<li>{{ emoji["save"] }}: salva la fanart nel formato base, per Facebook e Google Forms;</li>
<li>{{ emoji["save_ig"] }}: salva la fanart nel formato storia, per Instagram.</li>
<li>{{ emoji["next"] }}: porta avanti la fanart.</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="row text-row"> <div class="row text-row">
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<a href="/" class="btn btn-primary">Home 🏠</a> <a href="/" class="btn btn-primary">Home {{ emoji["home"] }}</a>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<footer> <footer>
<div class="container"> <div class="container">
<p>&copy; Earthbound Café, realizzato da <a href="mailto:andronacomarco@gmail.com">Marco Andronaco</a> <p>&copy; <a href="https://linktr.ee/earthboundcafe">Earthbound Café</a>, realizzato da <a href="https://birabittoh.github.io/">BiRabittoh</a>.</p>
(BiRabittoh).</p>
</div> </div>
</footer> </footer>
<script src="/static/ext/js/jquery-3.2.1.slim.min.js"></script> <script src="/static/ext/js/jquery-3.2.1.slim.min.js"></script>

67
artbound_python/templates/index.html
View File

@ -7,14 +7,13 @@
<meta name="description" content="Un modo semplice e veloce per gestire le fanart di ArtBound."> <meta name="description" content="Un modo semplice e veloce per gestire le fanart di ArtBound.">
<meta name="author" content="BiRabittoh"> <meta name="author" content="BiRabittoh">
<link rel="icon" <link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✏️</text></svg>"> href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ emoji["favicon"] }}</text></svg>'>
<title>ArtBound Panel</title> <title>ArtBound Panel</title>
<link href="/static/ext/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/ext/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<a id="canvas-download" hidden></a>
<main role="main"> <main role="main">
<section class="jumbotron text-center"> <section class="jumbotron text-center">
<div class="container"> <div class="container">
@ -25,35 +24,47 @@
<polygon points="14 2 18 6 7 17 3 17 3 13 14 2"></polygon> <polygon points="14 2 18 6 7 17 3 17 3 13 14 2"></polygon>
<line x1="3" y1="22" x2="21" y2="22"></line> <line x1="3" y1="22" x2="21" y2="22"></line>
</svg> </svg>
ArtBound Panel</a> ArtBound Panel
</h1> </h1>
<svg fill="white" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg fill="white" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
width="15" height="15" viewBox="0 0 420.827 420.827" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" viewBox="0 0 420.827 420.827"
xml:space="preserve"> xml:space="preserve">
<g><g><path d="M210.29,0C156,0,104.43,20.693,65.077,58.269C25.859,95.715,2.794,146.022,0.134,199.921 <g>
<g>
<path
d="M210.29,0C156,0,104.43,20.693,65.077,58.269C25.859,95.715,2.794,146.022,0.134,199.921
c-0.135,2.734,0.857,5.404,2.744,7.388c1.889,1.983,4.507,3.105,7.244,3.105h45.211c5.275,0,9.644-4.098,9.979-9.362 c-0.135,2.734,0.857,5.404,2.744,7.388c1.889,1.983,4.507,3.105,7.244,3.105h45.211c5.275,0,9.644-4.098,9.979-9.362
c4.871-76.214,68.553-135.914,144.979-135.914c80.105,0,145.275,65.171,145.275,145.276c0,80.105-65.17,145.276-145.275,145.276 c4.871-76.214,68.553-135.914,144.979-135.914c80.105,0,145.275,65.171,145.275,145.276c0,80.105-65.17,145.276-145.275,145.276
c-18.109,0-35.772-3.287-52.501-9.771l17.366-15.425c2.686-2.354,3.912-5.964,3.217-9.468c-0.696-3.506-3.209-6.371-6.592-7.521 c-18.109,0-35.772-3.287-52.501-9.771l17.366-15.425c2.686-2.354,3.912-5.964,3.217-9.468c-0.696-3.506-3.209-6.371-6.592-7.521
l-113-32.552c-3.387-1.149-7.122-0.407-9.81,1.948c-2.686,2.354-3.913,5.963-3.218,9.467L69.71,403.157 l-113-32.552c-3.387-1.149-7.122-0.407-9.81,1.948c-2.686,2.354-3.913,5.963-3.218,9.467L69.71,403.157
c0.696,3.505,3.209,6.372,6.591,7.521c3.383,1.147,7.122,0.408,9.81-1.946l18.599-16.298 c0.696,3.505,3.209,6.372,6.591,7.521c3.383,1.147,7.122,0.408,9.81-1.946l18.599-16.298
c31.946,18.574,68.456,28.394,105.581,28.394c116.021,0,210.414-94.392,210.414-210.414C420.705,94.391,326.312,0,210.29,0z"/> c31.946,18.574,68.456,28.394,105.581,28.394c116.021,0,210.414-94.392,210.414-210.414C420.705,94.391,326.312,0,210.29,0z" />
<path d="M195.112,237.9h118.5c2.757,0,5-2.242,5-5v-30c0-2.757-2.243-5-5-5h-83.5v-91c0-2.757-2.243-5-5-5h-30 <path d="M195.112,237.9h118.5c2.757,0,5-2.242,5-5v-30c0-2.757-2.243-5-5-5h-83.5v-91c0-2.757-2.243-5-5-5h-30
c-2.757,0-5,2.243-5,5v126C190.112,235.658,192.355,237.9,195.112,237.9z"/></g></g></svg> c-2.757,0-5,2.243-5,5v126C190.112,235.658,192.355,237.9,195.112,237.9z" />
<a id="last-updated-link" href="#" class="lead" onclick="updateDb();"><?xml version="1.0" encoding="iso-8859-1"?> </g>
{{ last_updated }}</a> </g>
</svg>
<a id="last-updated-link" href="#" class="lead" onclick="updateDb();">
<?xml version="1.0" encoding="iso-8859-1"?>
{{ last_updated }}
</a>
<div id="month_div"> <div id="month_div">
<label for="month_input" style="margin-right: 10px;">Scegli il mese: </label> <label for="month_input" style="margin-right: 10px;">Scegli il mese: </label>
<input id="month_input" type="month" value="{{ current_month }}"> <input id="month_input" type="month" value="{{ current_month }}">
<a href="#" class="btn my-2 btn-go" onclick="handleAuthClick();" id="authorize_button" hidden>Vai</a> <button class="btn btn-secondary my-2" onclick="getArtworks();" id="get_button">{{ emoji["get_first"] }}</button>
<button class="btn btn-secondary my-2" onclick="getArtworks();" id="get_button">Ottieni</button>
</div> </div>
<div id="controls" hidden> <div id="controls" hidden>
<a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(1);" id="selectall_button">{{ emoji["select_all"] }}</a> <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(1);" id="selectall_button">{{
<a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(0);" id="selectnone_button">{{ emoji["select_none"] }}</a> emoji["select_all"] }}</a>
<input type="range" class="form-range" id="opacity_range" min="0" max="1" step="0.01" oninput="updateOpacity();" value="0.4"> <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(0);" id="selectnone_button">{{
emoji["select_none"] }}</a>
<input type="range" class="form-range" id="opacity_range" min="0" max="1" step="0.01"
oninput="updateOpacity();" value="0.4">
<label for="opacity_range" class="form-label" id="opacity_label"></label> <label for="opacity_range" class="form-label" id="opacity_label"></label>
<a href="#" class="btn btn-secondary my-2" onclick="saveAll();" id="saveall_button">{{ emoji["save"] }}</a> <a href="#" class="btn btn-secondary my-2" onclick="saveAll();" id="saveall_button">{{ emoji["save"]
<a href="#" class="btn btn-secondary my-2" onclick="saveAllIG();" id="saveallig_button">{{ emoji["save_ig"] }}</a> }}</a>
<a href="#" class="btn btn-secondary my-2" onclick="saveAllIG();" id="saveallig_button">{{
emoji["save_ig"] }}</a>
</div> </div>
</div> </div>
</section> </section>
@ -62,7 +73,7 @@
<div class="row" id="content"></div> <div class="row" id="content"></div>
<div class="row text-row"> <div class="row text-row">
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<a href="/help" class="btn btn-primary">Info ❔</a> <a href="/help" class="btn btn-primary">Info {{ emoji["help"] }}</a>
</div> </div>
</div> </div>
</div> </div>
@ -70,18 +81,18 @@
</main> </main>
<footer> <footer>
<div class="container"> <div class="container">
<p>&copy; Earthbound Café, realizzato da <a href="mailto:andronacomarco@gmail.com">Marco Andronaco</a> (BiRabittoh).</p> <p>&copy; <a href="https://linktr.ee/earthboundcafe">Earthbound Café</a>, realizzato da <a
href="https://birabittoh.github.io/">BiRabittoh</a>.</p>
</div> </div>
</footer> </footer>
<template id="fanart-template"> <template id="fanart-template">
<div class="col-md-4 entry{| disabled |}" id="{| id |}" data-index="{| index |}"> <div class="col-lg-4 entry{| disabled |}" id="{| id |}" data-index="{| index |}">
<div class="card mb-4 box-shadow my-card"> <div class="card mb-4 box-shadow my-card">
<canvas class="card-img-top entry-img" <canvas class="card-img-top entry-img" id="{| id |}" data-name="{| name |}" data-content="{| content |}"
id="{| id |}" data-name="{| name |}"
data-content="{| content |}"
data-filename="{| filename |}"></canvas> data-filename="{| filename |}"></canvas>
<div class="card-body"> <div class="card-body">
<a class="card-text" title="Clicca per copiare." onclick="navigator.clipboard.writeText(this.innerText);">{| filename |}</a> <a class="card-text" title="Clicca per copiare."
onclick="navigator.clipboard.writeText(this.innerText);">{| filename |}</a>
<div class="d-flex justify-content-between align-items-center card-controls"> <div class="d-flex justify-content-between align-items-center card-controls">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">{{ emoji["prev"] }}</button> <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">{{ emoji["prev"] }}</button>
@ -96,10 +107,16 @@
</div> </div>
</div> </div>
</template> </template>
<a id="canvas-download" hidden></a>
<canvas width="1080" height="1920" id="instagram-canvas" hidden></canvas> <canvas width="1080" height="1920" id="instagram-canvas" hidden></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="/static/ext/js/jquery-3.2.1.slim.min.js"></script> <script src="/static/ext/js/jquery-3.2.1.slim.min.js"></script>
<script src="/static/ext/js/bootstrap.min.js"></script> <script src="/static/ext/js/bootstrap.min.js"></script>
<script>
const emoji_color = '{{ emoji["color"] }}';
const emoji_color_black = '{{ emoji["color_black"] }}';
const emoji_get = '{{ emoji["get"] }}';
</script>
<script src="/static/script.js"></script> <script src="/static/script.js"></script>
</body> </body>

6
artbound_python/views.py
View File

@ -7,14 +7,20 @@ from artbound_python.cache import DB, clear_cache
database = DB() database = DB()
emoji = { emoji = {
"favicon": "✏️",
"select_all": "✅", "select_all": "✅",
"select_none": "❎", "select_none": "❎",
"save": "💾", "save": "💾",
"save_ig": "📷", "save_ig": "📷",
"prev": "⬅️", "prev": "⬅️",
"next": "➡️", "next": "➡️",
"get_first": "🔽",
"get": "⏬",
"toggle": "♻️", "toggle": "♻️",
"color": "⚪", "color": "⚪",
"color_black": "⚫",
"help": "❔",
"home": "🏠",
} }
@app.route('/', methods=['GET', 'POST']) @app.route('/', methods=['GET', 'POST'])