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

bugfix, update footer, polish

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(),
IG_TEMPLATE = new Image(),
fanarts = new Array(),
months = new Set(),
last_updated_link = document.getElementById("last-updated-link"),
month_input = document.getElementById("month_input"),
month_div = document.getElementById("month_div"),
@ -23,8 +25,7 @@ const MAX_WIDTH = MAX_HEIGHT = 1000,
canvas_ig = document.getElementById("instagram-canvas"),
fanart_template = document.getElementById("fanart-template").innerHTML;
let fanarts = new Array(),
new_entries = 0;
let new_entries = 0;
WATERMARK.src = WATERMARK_SRC;
IG_TEMPLATE.src = IG_TEMPLATE_SRC;
@ -85,7 +86,7 @@ function getNewCardHtml(element) {
async function updateFanartList() {
content_div.innerHTML = "";
get_button.disabled = false;
get_button.innerText = "Aggiungi";
get_button.innerText = emoji_get;
let i = 0;
for (fanart of fanarts) {
@ -104,7 +105,7 @@ async function updateFanartList() {
}
function getFanart(id) {
return fanarts.find(element => element.id == id)
return fanarts.find(element => element.id == id);
}
function toggleEntry(id) {
@ -112,13 +113,13 @@ function toggleEntry(id) {
if (!entry) return;
entry.enabled = !entry.enabled;
updateFanartList()
updateFanartList();
}
function saveCanvas(my_canvas, filename) {
canvas_link.href = my_canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
canvas_link.setAttribute("download", filename);
canvas_link.click()
canvas_link.click();
}
function reloadEntry(id) {
@ -132,7 +133,7 @@ function reloadEntry(id) {
function selectAllNone(toggle) {
fanarts.map(x => x.enabled = toggle)
updateFanartList()
updateFanartList();
}
function clickCoordsToCanvas(clickX, clickY, c) {
@ -180,7 +181,6 @@ function moveUpDown(id, amount) {
const new_pos = pos + amount;
if (new_pos <= -1 || new_pos >= fanarts.length) return;
[fanarts[pos], fanarts[new_pos]] = [fanarts[new_pos], fanarts[pos]];
updateFanartList();
}
@ -190,7 +190,7 @@ function toggleInvert(id, button) {
if (!entry) return;
if (!entry.enabled) return;
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');
setBaseImage(entry.image, entry.canvas, ctx);
drawWatermark(entry.watermark, ctx);
@ -228,13 +228,16 @@ function saveEntryIG(id) {
}
function getArtworks() {
const month_value = month_input.value;
if (months.has(month_value)) return;
get_button.disabled = true;
get_button.innerText = "…"
postData("/", { month: month_input.value }).then((data) => {
fanarts = fanarts.concat(data);
get_button.innerText = "🔄"
postData("/", { month: month_value }).then((data) => {
fanarts.push(...data);
controls_div.hidden = false;
updateOpacity();
updateFanartList();
months.add(month_value);
});
}
@ -261,6 +264,6 @@ function updateDb() {
last_updated_link.innerText = data.timestamp;
if (data.new == 0) return;
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;
}
.card-text {
display: block;
padding-bottom: 10px;
}
body {
background-color: var(--background0);
color: var(--text);
@ -98,3 +103,11 @@ a:hover {
.text-row {
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="col-md-12">
<p>
ArtBound Panel è un modo intelligente per selezionare, ridimensionare, rinominare e marchiare
le fanart che arrivano ad EarthBound Café.
ArtBound Panel è uno strumento che aiuta a selezionare, ridimensionare, rinominare e marchiare
con facilità le fanart che arrivano ad Earthbound Café.
</p>
</div>
</div>
@ -43,16 +43,33 @@
<div class="col-md-12">
<h2 class="lead">Istruzioni</h2>
<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>
<li>Ripeti l'operazione precedente per integrare le fanart di eventuali altri mesi.</li>
<li>Disabilita le fanart non necessarie e ordina opportunamente il resto.</li>
<li>Ripeti l'operazione precedente ({{ emoji["get"] }}) per integrare le fanart di eventuali altri mesi.</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 i tasti {{ emoji["save"] }} o {{ emoji["save_ig"] }} per salvare i risultati su file.
</li>
</ol>
</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="col-md-12">
<h2 class="lead">Comandi globali</h2>
@ -64,40 +81,21 @@
<li>{{ emoji["select_all"] }}: abilita tutte le fanart;</li>
<li>{{ emoji["select_none"] }}: disabilita tutte le fanart;</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>
<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>
<li>{{ emoji["save"] }}: salva tutte le fanart nel formato base;</li>
<li>{{ emoji["save_ig"] }}: salva tutte le fanart nel formato storia.</li>
</ul>
</div>
</div>
<div class="row text-row">
<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>
</main>
<footer>
<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>
</footer>
<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="author" content="BiRabittoh">
<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>
<link href="/static/ext/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
</head>
<body>
<a id="canvas-download" hidden></a>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
@ -25,35 +24,47 @@
<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>
</svg>
ArtBound Panel</a>
ArtBound Panel
</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"
width="15" height="15" viewBox="0 0 420.827 420.827"
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
<svg fill="white" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" viewBox="0 0 420.827 420.827"
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
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
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
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
c-2.757,0-5,2.243-5,5v126C190.112,235.658,192.355,237.9,195.112,237.9z"/></g></g></svg>
<a id="last-updated-link" href="#" class="lead" onclick="updateDb();"><?xml version="1.0" encoding="iso-8859-1"?>
{{ last_updated }}</a>
c-2.757,0-5,2.243-5,5v126C190.112,235.658,192.355,237.9,195.112,237.9z" />
</g>
</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">
<label for="month_input" style="margin-right: 10px;">Scegli il mese: </label>
<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">Ottieni</button>
<button class="btn btn-secondary my-2" onclick="getArtworks();" id="get_button">{{ emoji["get_first"] }}</button>
</div>
<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(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">
<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(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>
<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="saveAllIG();" id="saveallig_button">{{ emoji["save_ig"] }}</a>
<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="saveAllIG();" id="saveallig_button">{{
emoji["save_ig"] }}</a>
</div>
</div>
</section>
@ -62,7 +73,7 @@
<div class="row" id="content"></div>
<div class="row text-row">
<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>
@ -70,18 +81,18 @@
</main>
<footer>
<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>
</footer>
<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">
<canvas class="card-img-top entry-img"
id="{| id |}" data-name="{| name |}"
data-content="{| content |}"
<canvas class="card-img-top entry-img" id="{| id |}" data-name="{| name |}" data-content="{| content |}"
data-filename="{| filename |}"></canvas>
<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="btn-group">
<button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">{{ emoji["prev"] }}</button>
@ -96,10 +107,16 @@
</div>
</div>
</template>
<a id="canvas-download" hidden></a>
<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="/static/ext/js/jquery-3.2.1.slim.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>
</body>

6
artbound_python/views.py
View File

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