Added 4bpp option
This commit is contained in:
parent
d21f5f662f
commit
638228a88d
821
app.py
821
app.py
@ -36,392 +36,443 @@ DITHERING_MODES = {
|
|||||||
|
|
||||||
HTML_FORM = '''
|
HTML_FORM = '''
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<title>CatNote</title>
|
<html>
|
||||||
<link rel="manifest" href="/static/manifest.json">
|
<head>
|
||||||
<style>
|
<title>CatNote</title>
|
||||||
body {
|
<link rel="manifest" href="/static/manifest.json">
|
||||||
font-family: sans-serif;
|
<style>
|
||||||
background: #181c1f;
|
|
||||||
color: #ddd;
|
|
||||||
min-height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.centered-flex {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
height: 100vh;
|
|
||||||
gap: 2.6em;
|
|
||||||
padding-top: 2em;
|
|
||||||
}
|
|
||||||
.form-card {
|
|
||||||
background: #22282c;
|
|
||||||
padding: 2em 2em 1em 2em;
|
|
||||||
border-radius: 1.5em;
|
|
||||||
box-shadow: 0 0 12px 0 #000a;
|
|
||||||
min-width: 410px;
|
|
||||||
max-width: 450px;
|
|
||||||
margin-right: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-ref {
|
|
||||||
background: #22282c;
|
|
||||||
border-radius: 1.2em;
|
|
||||||
box-shadow: 0 0 12px 0 #000a;
|
|
||||||
padding: 2em 2em 1.5em 2em;
|
|
||||||
color: #b6c8e0;
|
|
||||||
font-size: 1.08rem;
|
|
||||||
font-family: inherit;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 410px;
|
|
||||||
}
|
|
||||||
.markdown-ref h4 {
|
|
||||||
margin: 0 0 0.4em 0;
|
|
||||||
color: #88e0ff;
|
|
||||||
font-size: 1.12rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
}
|
|
||||||
.markdown-ref ul {
|
|
||||||
margin: 0.6em 0 0.3em 0.1em;
|
|
||||||
padding-left: 1.1em;
|
|
||||||
}
|
|
||||||
.markdown-ref li {
|
|
||||||
margin-bottom: 0.36em;
|
|
||||||
}
|
|
||||||
.markdown-ref code {
|
|
||||||
background: #181c1f;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.12em 0.46em;
|
|
||||||
color: #aef6cb;
|
|
||||||
font-size: 0.98rem;
|
|
||||||
margin-left: 0.18em;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 14em;
|
|
||||||
padding: 0.75em;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
border: 1.5px solid #444;
|
|
||||||
background: #181c1f;
|
|
||||||
color: #eee;
|
|
||||||
font-size: 1.06rem;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
resize: vertical;
|
|
||||||
font-family: 'DejaVu Sans Mono', 'Fira Mono', 'monospace';
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-right: 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 1em;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
button[type=submit] {
|
|
||||||
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
|
||||||
color: #222;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.12rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
padding: 0.5em 1.6em;
|
|
||||||
margin-top: 0.1em;
|
|
||||||
box-shadow: 0 2px 12px #1116;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: filter 0.2s, box-shadow 0.2s;
|
|
||||||
filter: brightness(1);
|
|
||||||
}
|
|
||||||
button[type=submit]:hover {
|
|
||||||
filter: brightness(1.12);
|
|
||||||
box-shadow: 0 4px 18px #2229;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[type=submit][name=print] {
|
|
||||||
background: linear-gradient(90deg, #ffeb3b, #ff9100);
|
|
||||||
color:#181c1f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #23282d;
|
|
||||||
padding: 2em 1.4em 1em 1.4em;
|
|
||||||
border-radius: 1.5em;
|
|
||||||
box-shadow: 0 0 12px 0 #0007;
|
|
||||||
min-width: 400px;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-left: 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
margin-top: 1em;
|
|
||||||
max-width: 100%;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 8px 1px #111a;
|
|
||||||
}
|
|
||||||
.status-msg {
|
|
||||||
margin: 0.6em 0 0.1em 0;
|
|
||||||
font-size: 1.12rem;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
background: #294b3a;
|
|
||||||
color: #9fffc6;
|
|
||||||
padding: 0.55em 1.2em;
|
|
||||||
font-weight: 600;
|
|
||||||
box-shadow: 0 0 6px #183a24a0;
|
|
||||||
display: inline-block;
|
|
||||||
border-left: 4px solid #4ffab0;
|
|
||||||
}
|
|
||||||
.status-err {
|
|
||||||
background: #48202c;
|
|
||||||
color: #ffdbe4;
|
|
||||||
border-left: 4px solid #ff6384;
|
|
||||||
box-shadow: 0 0 8px #22000690;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-size: 1em;
|
|
||||||
padding: 0 1em 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=file] {
|
|
||||||
margin: 0.5em 1em 1.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=file]::file-selector-button {
|
|
||||||
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
|
||||||
color: #222;
|
|
||||||
font-weight: bold;
|
|
||||||
border: none;
|
|
||||||
padding: 0.5em 1.2em;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
box-shadow: 0 2px 12px #1116;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: filter 0.2s, box-shadow 0.2s;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=file]::file-selector-button:hover {
|
|
||||||
filter: brightness(1.12);
|
|
||||||
box-shadow: 0 4px 18px #2229;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-frame {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px 0 10px 0;
|
|
||||||
margin-top: 1em;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 424px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-frame::before,
|
|
||||||
.print-frame::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utb3BhY2l0eT0iLjk3NjQ3IiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L3N2Zz4K') repeat-x left;
|
|
||||||
background-size: 10px 384px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-frame::before {
|
|
||||||
top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-frame::after {
|
|
||||||
bottom: 1px;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-frame img {
|
|
||||||
background: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-shadow: none;
|
|
||||||
position: relative;
|
|
||||||
width: 100%
|
|
||||||
max-width: 384px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
font-size: 1.16em !important;
|
|
||||||
padding: 1em;
|
|
||||||
min-height: 12em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: left;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background: #181c1f;
|
|
||||||
text-align: center;
|
|
||||||
text-align-last: center;
|
|
||||||
border: 1.5px solid #444;
|
|
||||||
color: #eee;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
margin: 1em;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
select option {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=number] {
|
|
||||||
background: #181c1f;
|
|
||||||
text-align: center;
|
|
||||||
border: 1.5px solid #444;
|
|
||||||
color: #eee;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
margin: 1em;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=number]::-webkit-inner-spin-button,
|
|
||||||
input[type=number]::-webkit-outer-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-dithering,
|
|
||||||
.options-intensity {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
body {
|
body {
|
||||||
font-size: 1.28em !important; /* Big bump */
|
font-family: sans-serif;
|
||||||
|
background: #181c1f;
|
||||||
|
color: #ddd;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
h2, h3, h4 {
|
|
||||||
font-size: 2em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.centered-flex {
|
.centered-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 100vh;
|
||||||
|
gap: 2.6em;
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
.form-card {
|
||||||
|
background: #22282c;
|
||||||
|
padding: 2em 2em 1em 2em;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
box-shadow: 0 0 12px 0 #000a;
|
||||||
|
min-width: 410px;
|
||||||
|
max-width: 450px;
|
||||||
|
margin-right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
height: auto;
|
|
||||||
gap: 1.6em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-card,
|
|
||||||
.preview-card,
|
|
||||||
.markdown-ref {
|
.markdown-ref {
|
||||||
font-size: 1.18em !important;
|
background: #22282c;
|
||||||
min-width: auto;
|
border-radius: 1.2em;
|
||||||
max-width: 90vw;
|
box-shadow: 0 0 12px 0 #000a;
|
||||||
|
padding: 2em 2em 1.5em 2em;
|
||||||
|
color: #b6c8e0;
|
||||||
|
font-size: 1.08rem;
|
||||||
|
font-family: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0.8em 0;
|
max-width: 410px;
|
||||||
|
}
|
||||||
|
.markdown-ref h4 {
|
||||||
|
margin: 0 0 0.4em 0;
|
||||||
|
color: #88e0ff;
|
||||||
|
font-size: 1.12rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
.markdown-ref ul {
|
||||||
|
margin: 0.6em 0 0.3em 0.1em;
|
||||||
|
padding-left: 1.1em;
|
||||||
|
}
|
||||||
|
.markdown-ref li {
|
||||||
|
margin-bottom: 0.36em;
|
||||||
|
}
|
||||||
|
.markdown-ref code {
|
||||||
|
background: #181c1f;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 0.12em 0.46em;
|
||||||
|
color: #aef6cb;
|
||||||
|
font-size: 0.98rem;
|
||||||
|
margin-left: 0.18em;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 14em;
|
||||||
|
padding: 0.75em;
|
||||||
|
border-radius: 0.7em;
|
||||||
|
border: 1.5px solid #444;
|
||||||
|
background: #181c1f;
|
||||||
|
color: #eee;
|
||||||
|
font-size: 1.06rem;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
resize: vertical;
|
||||||
|
font-family: 'DejaVu Sans Mono', 'Fira Mono', 'monospace';
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-right: 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
button[type=submit] {
|
||||||
|
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
||||||
|
color: #222;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.12rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.7em;
|
||||||
|
padding: 0.5em 1.6em;
|
||||||
|
margin-top: 0.1em;
|
||||||
|
box-shadow: 0 2px 12px #1116;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: filter 0.2s, box-shadow 0.2s;
|
||||||
|
filter: brightness(1);
|
||||||
|
}
|
||||||
|
button[type=submit]:hover {
|
||||||
|
filter: brightness(1.12);
|
||||||
|
box-shadow: 0 4px 18px #2229;
|
||||||
|
}
|
||||||
|
button[type=submit][name=print] {
|
||||||
|
background: linear-gradient(90deg, #ffeb3b, #ff9100);
|
||||||
|
color: #181c1f;
|
||||||
|
}
|
||||||
|
.preview-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #23282d;
|
||||||
|
padding: 2em 1.4em 1em 1.4em;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
box-shadow: 0 0 12px 0 #0007;
|
||||||
|
min-width: 400px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin-top: 1em;
|
||||||
|
max-width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 8px 1px #111a;
|
||||||
|
}
|
||||||
|
.status-msg {
|
||||||
|
margin: 0.6em 0 0.1em 0;
|
||||||
|
font-size: 1.12rem;
|
||||||
|
border-radius: 0.7em;
|
||||||
|
background: #294b3a;
|
||||||
|
color: #9fffc6;
|
||||||
|
padding: 0.55em 1.2em;
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow: 0 0 6px #183a24a0;
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 4px solid #4ffab0;
|
||||||
|
}
|
||||||
|
.status-err {
|
||||||
|
background: #48202c;
|
||||||
|
color: #ffdbe4;
|
||||||
|
border-left: 4px solid #ff6384;
|
||||||
|
box-shadow: 0 0 8px #22000690;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 0 1em 0 1em;
|
||||||
|
}
|
||||||
|
input[type=file] {
|
||||||
|
margin: 0.5em 1em 1.5em 1em;
|
||||||
|
}
|
||||||
|
input[type=file]::file-selector-button {
|
||||||
|
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
||||||
|
color: #222;
|
||||||
|
font-weight: bold;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5em 1.2em;
|
||||||
|
border-radius: 0.7em;
|
||||||
|
box-shadow: 0 2px 12px #1116;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: filter 0.2s, box-shadow 0.2s;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
input[type=file]::file-selector-button:hover {
|
||||||
|
filter: brightness(1.12);
|
||||||
|
box-shadow: 0 4px 18px #2229;
|
||||||
|
}
|
||||||
|
.print-frame {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px 0 10px 0;
|
||||||
|
margin-top: 1em;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 424px;
|
||||||
|
}
|
||||||
|
.print-frame::before,
|
||||||
|
.print-frame::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utb3BhY2l0eT0iLjk3NjQ3IiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L3N2Zz4K') repeat-x left;
|
||||||
|
background-size: 10px 384px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.print-frame::before {
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
.print-frame::after {
|
||||||
|
bottom: 1px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.print-frame img {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-shadow: none;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 384px;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
font-size: 1.16em !important;
|
font-size: 1.16em !important;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
min-height: 12em;
|
min-height: 12em;
|
||||||
}
|
}
|
||||||
.status-msg {
|
.options {
|
||||||
font-size: 1.25em !important;
|
display: flex;
|
||||||
padding: 0.8em 1.6em;
|
flex-direction: column;
|
||||||
}
|
align-items: left;
|
||||||
button[type=submit] {
|
justify-content: space-between;
|
||||||
font-size: 1.3em !important;
|
margin-bottom: 1.2em;
|
||||||
padding: 0.9em 2.2em;
|
|
||||||
}
|
|
||||||
input[type=file] {
|
|
||||||
font-size: 1.16em !important;
|
|
||||||
padding: inherit 2.2em
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
font-size: 1.16em !important;
|
|
||||||
padding: inherit 2.2em
|
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
font-size: 1.16em !important;
|
background: #181c1f;
|
||||||
padding: 0.6em 1.2em;
|
text-align: center;
|
||||||
|
text-align-last: center;
|
||||||
|
border: 1.5px solid #444;
|
||||||
|
color: #eee;
|
||||||
|
border-radius: 0.7em;
|
||||||
|
margin: 1em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
select option {
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
input[type=number] {
|
input[type=number] {
|
||||||
font-size: 1.16em !important;
|
background: #181c1f;
|
||||||
padding: 0.6em 1.2em;
|
text-align: center;
|
||||||
|
border: 1.5px solid #444;
|
||||||
|
color: #eee;
|
||||||
|
border-radius: 0.7em;
|
||||||
|
margin: 1em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
}
|
}
|
||||||
}
|
input[type=number]::-webkit-inner-spin-button,
|
||||||
|
input[type=number]::-webkit-outer-spin-button {
|
||||||
</style>
|
-webkit-appearance: none;
|
||||||
<div class="centered-flex">
|
margin: 0;
|
||||||
<div class="form-card">
|
}
|
||||||
<center>
|
.options-dithering,
|
||||||
<h2 style="margin-top:0.2em;">😺 CatNote 🖨️</h2>
|
.options-intensity,
|
||||||
</center>
|
.options-rotation,
|
||||||
<form method=post enctype=multipart/form-data>
|
.options-printmode {
|
||||||
<textarea name=md placeholder="Ingrese Markdown aquí...">{{ default_md }}</textarea><br>
|
display: flex;
|
||||||
<label for="userimg" style="display: inline-block; margin-bottom: 0.5em;">Subir imagen (opcional):</label><br>
|
flex-direction: column;
|
||||||
<input type="file" name="userimg" accept="image/png, image/jpeg"><br>
|
}
|
||||||
<div class="options">
|
#loading-box {
|
||||||
<div class="options-dithering">
|
display: none;
|
||||||
<label for="dithering">Dithering:</label>
|
flex-direction: column;
|
||||||
<select name="dithering">
|
text-align: center;
|
||||||
{% for label, mode in dithering_modes.items() %}
|
box-sizing: border-box;
|
||||||
<option value="{{ mode }}" {% if mode == current_dithering %}selected="selected"{% endif %}> {{ label }}</option>
|
width: 100%;
|
||||||
{% endfor %}
|
padding: 1em;
|
||||||
</select>
|
}
|
||||||
|
#printing-text {
|
||||||
|
color: #eee;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 18px;
|
||||||
|
background: #181c1f;
|
||||||
|
border: 1.5px solid #444;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 12px #1116;
|
||||||
|
}
|
||||||
|
.progress-bar-inner {
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
||||||
|
border-radius: 12px;
|
||||||
|
position: absolute;
|
||||||
|
left: -40%;
|
||||||
|
animation: indeterminate-bar 1.2s infinite
|
||||||
|
}
|
||||||
|
@keyframes indeterminate-bar {
|
||||||
|
0% { left: 0%; }
|
||||||
|
50% { left: calc(100% - 40%); }
|
||||||
|
100% { left: 0%; }
|
||||||
|
}
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.28em !important;
|
||||||
|
}
|
||||||
|
h2, h3, h4 {
|
||||||
|
font-size: 2em !important;
|
||||||
|
}
|
||||||
|
.centered-flex {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: auto;
|
||||||
|
gap: 1.6em;
|
||||||
|
}
|
||||||
|
.form-card,
|
||||||
|
.preview-card,
|
||||||
|
.markdown-ref {
|
||||||
|
font-size: 1.18em !important;
|
||||||
|
min-width: auto;
|
||||||
|
max-width: 90vw;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.8em 0;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
font-size: 1.16em !important;
|
||||||
|
padding: 1em;
|
||||||
|
min-height: 12em;
|
||||||
|
}
|
||||||
|
.status-msg {
|
||||||
|
font-size: 1.25em !important;
|
||||||
|
padding: 0.8em 1.6em;
|
||||||
|
}
|
||||||
|
button[type=submit] {
|
||||||
|
font-size: 1.3em !important;
|
||||||
|
padding: 0.9em 2.2em;
|
||||||
|
}
|
||||||
|
input[type=file] {
|
||||||
|
font-size: 1.16em !important;
|
||||||
|
padding: inherit 2.2em;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-size: 1.16em !important;
|
||||||
|
padding: inherit 2.2em;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
font-size: 1.16em !important;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
}
|
||||||
|
input[type=number] {
|
||||||
|
font-size: 1.16em !important;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="centered-flex">
|
||||||
|
<div class="form-card">
|
||||||
|
<center>
|
||||||
|
<h2 style="margin-top:0.2em;">😺 CatNote 🖨️</h2>
|
||||||
|
</center>
|
||||||
|
<form method="post" enctype="multipart/form-data">
|
||||||
|
<textarea name="md" placeholder="Ingrese Markdown aquí...">{{ default_md }}</textarea><br>
|
||||||
|
<label for="userimg" style="display: inline-block; margin-bottom: 0.5em;">Subir imagen (opcional):</label><br>
|
||||||
|
<input type="file" name="userimg" accept="image/png, image/jpeg"><br>
|
||||||
|
<div class="options">
|
||||||
|
<div class="options-dithering">
|
||||||
|
<label for="dithering">Dithering:</label>
|
||||||
|
<select name="dithering">
|
||||||
|
{% for label, mode in dithering_modes.items() %}
|
||||||
|
<option value="{{ mode }}" {% if mode == current_dithering %}selected="selected"{% endif %}>{{ label }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="options-intensity">
|
||||||
|
<label for="intensity">Intensidad:</label>
|
||||||
|
<input type="number" name="intensity" value="85" min="0" max="100" step="1">
|
||||||
|
</div>
|
||||||
|
<div class="options-rotation">
|
||||||
|
<label for="rotation">Rotar imagen:</label>
|
||||||
|
<select name="rotation">
|
||||||
|
<option value="0" {% if 0 == current_rotation %}selected="selected"{% endif %}>0°</option>
|
||||||
|
<option value="90" {% if 90 == current_rotation %}selected="selected"{% endif %}>90°</option>
|
||||||
|
<option value="180" {% if 180 == current_rotation %}selected="selected"{% endif %}>180°</option>
|
||||||
|
<option value="270" {% if 270 == current_rotation %}selected="selected"{% endif %}>270°</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="options-printmode">
|
||||||
|
<label for="printmode">Modo de impresión:</label>
|
||||||
|
<select name="printmode">
|
||||||
|
<option value="1bpp" {% if "1bpp" == current_printmode %}selected="selected"{% endif %}>1-bit</option>
|
||||||
|
<option value="4bpp" {% if "4bpp" == current_printmode %}selected="selected"{% endif %}>4-bit</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div id="loading-box">
|
||||||
|
<div id="printing-text">Imprimiendo...</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-bar-inner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="options-intensity">
|
<div class="buttons">
|
||||||
<label for="intensity">Intensidad:</label>
|
<button type="submit" name="generate">📷 Generar</button>
|
||||||
<input type="number" name="intensity" value="85" min="0" max="100" step="1">
|
<button type="submit" name="print">🖨️ Imprimir</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
<div class="buttons">
|
{% if printed %}
|
||||||
<button type=submit name="generate">📷 Generar</button>
|
<div class="status-msg">✅ Enviado a impresora</div>
|
||||||
<button type=submit name="print">🖨️ Imprimir</button>
|
{% endif %}
|
||||||
</div>
|
{% if error %}
|
||||||
</form>
|
<div class="status-msg status-err">⚠️ {{ error }}</div>
|
||||||
{% if printed %}
|
{% endif %}
|
||||||
<div class="status-msg">✅ Enviado a impresora</div>
|
</div>
|
||||||
{% endif %}
|
<div class="preview-card">
|
||||||
{% if error %}
|
{% if img %}
|
||||||
<div class="status-msg status-err">⚠️ {{ error }}</div>
|
<h2 style="margin-top:0.1em; margin-bottom:0;">Vista previa</h2>
|
||||||
{% endif %}
|
<div class="print-frame">
|
||||||
|
<img src="data:image/png;base64,{{ img }}">
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p style="opacity:.6;">Su vista previa aparecerá aquí</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="markdown-ref">
|
||||||
|
<h4>Referencia rápida de Markdown</h4>
|
||||||
|
<ul>
|
||||||
|
<li><b>Negrita:</b> <code>**texto**</code></li>
|
||||||
|
<li><b>Cursiva:</b> <code>*texto*</code></li>
|
||||||
|
<li><b>Negrita y cursiva:</b> <code>***texto***</code></li>
|
||||||
|
<li><b>Encabezado grande:</b> <code># Título</code></li>
|
||||||
|
<li><b>Encabezado mediano:</b> <code>## Título</code></li>
|
||||||
|
<li><b>Encabezado chico:</b> <code>### Título</code></li>
|
||||||
|
<li><b>Lista con viñetas:</b> <code>- Elemento</code></li>
|
||||||
|
<li><b>Lista numerada:</b> <code>1. Elemento</code></li>
|
||||||
|
<li><b>Imágen:</b> <code></code></li>
|
||||||
|
<li><b>Salto de línea:</b> Deje una línea vacía</li>
|
||||||
|
<li><b>Imagen subida:</b> <code>!(img)</code> (usa la imagen cargada abajo)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="preview-card">
|
<script>
|
||||||
{% if img %}
|
document.querySelector('form').addEventListener('submit', function(e) {
|
||||||
<h2 style="margin-top:0.1em; margin-bottom:0;">Vista previa</h2>
|
if (document.activeElement && document.activeElement.name === "print") {
|
||||||
<div class="print-frame">
|
document.getElementById('loading-box').style.display = 'flex';
|
||||||
<img src="data:image/png;base64,{{ img }}">
|
}
|
||||||
</div>
|
});
|
||||||
{% else %}
|
</script>
|
||||||
<p style="opacity:.6;">Su vista previa aparecerá aquí</p>
|
</body>
|
||||||
{% endif %}
|
</html>
|
||||||
</div>
|
|
||||||
<div class="markdown-ref">
|
|
||||||
<h4>Referencia rápida de Markdown</h4>
|
|
||||||
<ul>
|
|
||||||
<li><b>Negrita:</b> <code>**texto**</code></li>
|
|
||||||
<li><b>Cursiva:</b> <code>*texto*</code></li>
|
|
||||||
<li><b>Negrita y cursiva:</b> <code>***texto***</code></li>
|
|
||||||
<li><b>Encabezado grande:</b> <code># Título</code></li>
|
|
||||||
<li><b>Encabezado mediano:</b> <code>## Título</code></li>
|
|
||||||
<li><b>Encabezado chico:</b> <code>### Título</code></li>
|
|
||||||
<li><b>Lista con viñetas:</b> <code>- Elemento</code></li>
|
|
||||||
<li><b>Lista numerada:</b> <code>1. Elemento</code></li>
|
|
||||||
<li><b>Imágen:</b> <code></code></li>
|
|
||||||
<li><b>Salto de línea:</b> Deje una línea vacía</li>
|
|
||||||
<li><b>Imagen subida:</b> <code>!(img)</code> (usa la imagen cargada abajo)</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
'''
|
'''
|
||||||
|
|
||||||
def remove_uploaded_img():
|
def remove_uploaded_img():
|
||||||
@ -432,11 +483,11 @@ def remove_uploaded_img():
|
|||||||
except Exception:
|
except Exception:
|
||||||
pass
|
pass
|
||||||
|
|
||||||
def bleh_image_from_url(url, dithering):
|
def bleh_image_from_url(url, dithering, mode):
|
||||||
resp = requests.get(url, stream=True)
|
resp = requests.get(url, stream=True)
|
||||||
resp.raise_for_status()
|
resp.raise_for_status()
|
||||||
bleh = subprocess.Popen(
|
bleh = subprocess.Popen(
|
||||||
["./bleh", "-o", "-", "-mode", "1bpp", "-d", f"{dithering}", "-"],
|
["./bleh", "-o", "-", "-mode", f"{mode}", "-d", f"{dithering}", "-"],
|
||||||
stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
|
stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
|
||||||
out, err = bleh.communicate(resp.content)
|
out, err = bleh.communicate(resp.content)
|
||||||
if bleh.returncode != 0:
|
if bleh.returncode != 0:
|
||||||
@ -447,9 +498,9 @@ def bleh_image_from_url(url, dithering):
|
|||||||
img = img.resize((IMAGE_WIDTH, img.height), Image.LANCZOS)
|
img = img.resize((IMAGE_WIDTH, img.height), Image.LANCZOS)
|
||||||
return img
|
return img
|
||||||
|
|
||||||
def bleh_image_from_bytes(image_bytes, dithering):
|
def bleh_image_from_bytes(image_bytes, dithering, mode):
|
||||||
bleh = subprocess.Popen(
|
bleh = subprocess.Popen(
|
||||||
["./bleh", "-o", "-", "-mode", "1bpp", "-d", f"{dithering}", "-"],
|
["./bleh", "-o", "-", "-mode", f"{mode}", "-d", f"{dithering}", "-"],
|
||||||
stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE
|
stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE
|
||||||
)
|
)
|
||||||
out, err = bleh.communicate(image_bytes)
|
out, err = bleh.communicate(image_bytes)
|
||||||
@ -460,6 +511,15 @@ def bleh_image_from_bytes(image_bytes, dithering):
|
|||||||
img = img.resize((IMAGE_WIDTH, img.height), Image.LANCZOS)
|
img = img.resize((IMAGE_WIDTH, img.height), Image.LANCZOS)
|
||||||
return img
|
return img
|
||||||
|
|
||||||
|
def rotate_image_bytes(image_bytes, rotation):
|
||||||
|
if rotation == 0:
|
||||||
|
return image_bytes
|
||||||
|
img = Image.open(io.BytesIO(image_bytes))
|
||||||
|
img = img.rotate(-rotation, expand=True) # PIL rotates counterclockwise, negative for clockwise
|
||||||
|
buf = io.BytesIO()
|
||||||
|
img.save(buf, format="PNG")
|
||||||
|
return buf.getvalue()
|
||||||
|
|
||||||
def parse_line(line):
|
def parse_line(line):
|
||||||
if re.match(r"!\(img\)", line) or re.match(r"!\[.*\]\(img\)", line):
|
if re.match(r"!\(img\)", line) or re.match(r"!\[.*\]\(img\)", line):
|
||||||
return ('userimage', None)
|
return ('userimage', None)
|
||||||
@ -559,7 +619,7 @@ def wrap_segments(segments, font, font_bold, font_italic, font_bolditalic, max_w
|
|||||||
if line:
|
if line:
|
||||||
yield line
|
yield line
|
||||||
|
|
||||||
def render(md, dithering, uploaded_img_bytes=None):
|
def render(md, dithering, printmode, uploaded_img_bytes=None):
|
||||||
font = ImageFont.truetype(FONT_PATH, FONT_SIZE)
|
font = ImageFont.truetype(FONT_PATH, FONT_SIZE)
|
||||||
font_bold = ImageFont.truetype(FONT_PATH_BOLD, FONT_SIZE)
|
font_bold = ImageFont.truetype(FONT_PATH_BOLD, FONT_SIZE)
|
||||||
font_italic = ImageFont.truetype(FONT_PATH_OBLIQUE, FONT_SIZE)
|
font_italic = ImageFont.truetype(FONT_PATH_OBLIQUE, FONT_SIZE)
|
||||||
@ -578,14 +638,14 @@ def render(md, dithering, uploaded_img_bytes=None):
|
|||||||
tag = parse_line(src_line)
|
tag = parse_line(src_line)
|
||||||
if tag[0] == 'image':
|
if tag[0] == 'image':
|
||||||
try:
|
try:
|
||||||
image = bleh_image_from_url(tag[1], dithering)
|
image = bleh_image_from_url(tag[1], dithering, printmode)
|
||||||
lines_out.append(('image', image))
|
lines_out.append(('image', image))
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
lines_out.append(('text', [('text', f"[Imagen inválida: {e}]")], font, FONT_SIZE))
|
lines_out.append(('text', [('text', f"[Imagen inválida: {e}]")], font, FONT_SIZE))
|
||||||
elif tag[0] == 'userimage':
|
elif tag[0] == 'userimage':
|
||||||
if uploaded_img_bytes:
|
if uploaded_img_bytes:
|
||||||
try:
|
try:
|
||||||
image = bleh_image_from_bytes(uploaded_img_bytes, dithering)
|
image = bleh_image_from_bytes(uploaded_img_bytes, dithering, printmode)
|
||||||
lines_out.append(('image', image))
|
lines_out.append(('image', image))
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
lines_out.append(('text', [('text', f"[Error al procesar imagen]")], font, FONT_SIZE))
|
lines_out.append(('text', [('text', f"[Error al procesar imagen]")], font, FONT_SIZE))
|
||||||
@ -714,6 +774,7 @@ def index():
|
|||||||
if request.method == "POST":
|
if request.method == "POST":
|
||||||
userimg = request.files.get("userimg")
|
userimg = request.files.get("userimg")
|
||||||
uploaded_img_bytes = None
|
uploaded_img_bytes = None
|
||||||
|
rotation = int(request.form.get("rotation", "0"))
|
||||||
if userimg and userimg.filename:
|
if userimg and userimg.filename:
|
||||||
# Remove old temp file if present
|
# Remove old temp file if present
|
||||||
remove_uploaded_img()
|
remove_uploaded_img()
|
||||||
@ -734,10 +795,19 @@ def index():
|
|||||||
session.pop('uploaded_img_path', None)
|
session.pop('uploaded_img_path', None)
|
||||||
else:
|
else:
|
||||||
remove_uploaded_img()
|
remove_uploaded_img()
|
||||||
|
if uploaded_img_bytes and rotation in (90, 180, 270):
|
||||||
|
try:
|
||||||
|
uploaded_img_bytes = rotate_image_bytes(uploaded_img_bytes, rotation)
|
||||||
|
except Exception as e:
|
||||||
|
error = f"Error rotating image: {e}"
|
||||||
|
uploaded_img_bytes = None
|
||||||
md = request.form["md"]
|
md = request.form["md"]
|
||||||
dithering = request.form.get("dithering", "floyd")
|
dithering = request.form.get("dithering", "floyd")
|
||||||
image = render(md, dithering, uploaded_img_bytes)
|
printmode = request.form.get("printmode", "1bpp")
|
||||||
|
image = render(md, dithering, printmode, uploaded_img_bytes)
|
||||||
session['dithering'] = dithering
|
session['dithering'] = dithering
|
||||||
|
session['printmode'] = printmode
|
||||||
|
session['rotation'] = rotation
|
||||||
buf = io.BytesIO()
|
buf = io.BytesIO()
|
||||||
image.save(buf, format="PNG")
|
image.save(buf, format="PNG")
|
||||||
buf.seek(0)
|
buf.seek(0)
|
||||||
@ -750,7 +820,6 @@ def index():
|
|||||||
except ValueError:
|
except ValueError:
|
||||||
error = "Intensidad debe ser un número entre 0 y 100"
|
error = "Intensidad debe ser un número entre 0 y 100"
|
||||||
intensity = 85
|
intensity = 85
|
||||||
# Store intensity in session for later use
|
|
||||||
session['intensity'] = intensity
|
session['intensity'] = intensity
|
||||||
# If print button pressed, send to driver
|
# If print button pressed, send to driver
|
||||||
if "print" in request.form:
|
if "print" in request.form:
|
||||||
@ -761,7 +830,7 @@ def index():
|
|||||||
# Run the bleh command
|
# Run the bleh command
|
||||||
result = subprocess.run([
|
result = subprocess.run([
|
||||||
"./bleh",
|
"./bleh",
|
||||||
"-mode", "1bpp",
|
"-mode", f"{printmode}",
|
||||||
"-intensity", f"{intensity}",
|
"-intensity", f"{intensity}",
|
||||||
tmpfile.name
|
tmpfile.name
|
||||||
], capture_output=True, text=True, timeout=90)
|
], capture_output=True, text=True, timeout=90)
|
||||||
@ -772,7 +841,7 @@ def index():
|
|||||||
except Exception as e:
|
except Exception as e:
|
||||||
error = f"Failed to print: {e}"
|
error = f"Failed to print: {e}"
|
||||||
return render_template_string(HTML_FORM, dithering_modes=DITHERING_MODES, img=img_data, default_md=md,
|
return render_template_string(HTML_FORM, dithering_modes=DITHERING_MODES, img=img_data, default_md=md,
|
||||||
printed=printed, error=error, current_dithering=session.get('dithering', 'floyd'))
|
printed=printed, error=error, current_dithering=session.get('dithering', 'floyd'), current_rotation=session.get('rotation', 0), current_printmode=session.get('printmode', '1bpp'))
|
||||||
|
|
||||||
@app.route('/manifest.json')
|
@app.route('/manifest.json')
|
||||||
def manifest():
|
def manifest():
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user