catnote/app.py
2025-06-23 16:47:38 -03:00

700 lines
23 KiB
Python

import io
import tempfile
import subprocess
import requests
import base64
from flask import Flask, render_template_string, request, send_from_directory, session
from PIL import Image, ImageDraw, ImageFont
import os
import re
import argparse
app = Flask(__name__)
app.secret_key = 'TpfxYMxUJxJMtCCTraBSg1rbd6NLz38JTmIfpBLsotcI47EqXU'
FONT_PATH = "/usr/share/fonts/truetype/DejaVuSansMono.ttf"
FONT_PATH_BOLD = "/usr/share/fonts/truetype/DejaVuSansMono-Bold.ttf"
FONT_PATH_OBLIQUE = "/usr/share/fonts/truetype/DejaVuSansMono-Oblique.ttf"
FONT_PATH_BOLDITALIC = "/usr/share/fonts/truetype/DejaVuSansMono-BoldOblique.ttf"
FONT_SIZE = 24
HEADER_SIZE_1 = 56
HEADER_SIZE_2 = 34
HEADER_SIZE_3 = 28
IMAGE_WIDTH = 384
BULLET_CHAR = ""
HTML_FORM = '''
<!doctype html>
<title>CatNote</title>
<link rel="manifest" href="/static/manifest.json">
<style>
body {
font-family: sans-serif;
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 {
background: #23282d;
padding: 2em 1.4em 1em 1.4em;
border-radius: 1.5em;
box-shadow: 0 0 12px 0 #0007;
min-width: 400px;
max-width: 400px;
text-align: center;
box-sizing: border-box;
margin-left: 0;
}
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;
margin-left: 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;
background: #fff;
padding: 10px 15px;
margin-top: 1em;
overflow: hidden;
}
.print-frame::before,
.print-frame::after {
content: "";
position: absolute;
left: 0;
width: 101%;
height: 10px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1vcGFjaXR5PSIuOTc2NDciPgo8cmVjdCB4PSItNS41NTExZS0xNyIgd2lkdGg9IjQuMjMzMyIgaGVpZ2h0PSI0LjIzMzMiIGZpbGw9IiMyMjI4MmMiIHN0cm9rZS13aWR0aD0iLjE5MjI2Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L2c+Cjwvc3ZnPgo=') repeat-x left;
background-size: 10px 384px;
z-index: 1;
}
.print-frame::before {
top: 0;
}
.print-frame::after {
bottom: 0;
transform: rotate(180deg);
}
.print-frame img {
display: block;
margin: 0 auto;
border-radius: 0;
box-shadow: none;
position: relative;
z-index: 2;
}
textarea {
font-size: 1.16em !important;
padding: 1em;
min-height: 12em;
}
@media (max-width: 1000px) {
body {
font-size: 1.28em !important; /* Big bump */
}
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
}
}
</style>
<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="buttons">
<button type=submit name="generate">📷 Generar</button>
<button type=submit name="print">🖨️ Imprimir</button>
</div>
</form>
{% if printed %}
<div class="status-msg">✅ Enviado a impresora</div>
{% endif %}
{% if error %}
<div class="status-msg status-err">⚠️ {{ error }}</div>
{% endif %}
</div>
<div class="preview-card">
{% if img %}
<h3 style="margin-top:0.1em;margin-bottom:0.6em;">Vista previa</h3>
<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>![Texto alternativo](Enlace a imágen)</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():
path = session.pop('uploaded_img_path', None)
if path and os.path.exists(path):
try:
os.remove(path)
except Exception:
pass
def bleh_image_from_url(url):
resp = requests.get(url, stream=True)
resp.raise_for_status()
bleh = subprocess.Popen(
["./bleh", "-o", "-", "-mode", "1bpp", "-d", "floyd", "-"],
stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
out, err = bleh.communicate(resp.content)
if bleh.returncode != 0:
raise RuntimeError(f"Driver failed: {err.decode()}")
img = Image.open(io.BytesIO(out)).convert("L")
# Optionally check width, pad/resize if needed
if img.width != IMAGE_WIDTH:
img = img.resize((IMAGE_WIDTH, img.height), Image.LANCZOS)
return img
def bleh_image_from_bytes(image_bytes):
bleh = subprocess.Popen(
["./bleh", "-o", "-", "-mode", "1bpp", "-d", "floyd", "-"],
stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE
)
out, err = bleh.communicate(image_bytes)
if bleh.returncode != 0:
raise RuntimeError(f"Driver failed: {err.decode()}")
img = Image.open(io.BytesIO(out)).convert("L")
if img.width != IMAGE_WIDTH:
img = img.resize((IMAGE_WIDTH, img.height), Image.LANCZOS)
return img
def parse_line(line):
if re.match(r"!\(img\)", line) or re.match(r"!\[.*\]\(img\)", line):
return ('userimage', None)
image_match = re.match(r"^!\[(.*?)\]\((.+?)\)", line)
if image_match:
alt = image_match.group(1)
url = image_match.group(2)
return ('image', url, alt)
if re.match(r'^\s*---\s*$', line):
return ('hr', [])
header_match = re.match(r"^(#{1,3}) +(.*)", line)
if header_match:
header_level = len(header_match.group(1))
line = header_match.group(2)
return ('header', header_level, parse_segments(line))
bullet_match = re.match(r"^\s*([-*\u2022]) +(.*)", line)
if bullet_match:
return ('bullet', parse_segments(bullet_match.group(2)))
ordered_match = re.match(r"^\s*(\d+)\. +(.*)", line)
if ordered_match:
return ('ordered', int(ordered_match.group(1)), parse_segments(ordered_match.group(2)))
return ('text', parse_segments(line))
def parse_segments(line):
# Handle escaped asterisks: replace them with a placeholder
line = line.replace(r'\*', '\x07')
# Apply formatting
bi = re.findall(r"\*\*\*(.+?)\*\*\*", line)
for x in bi:
line = line.replace(f"***{x}***", f"\x01{x}\x02")
b = re.findall(r"\*\*(.+?)\*\*", line)
for x in b:
line = line.replace(f"**{x}**", f"\x03{x}\x04")
i = re.findall(r"\*(.+?)\*", line)
for x in i:
line = line.replace(f"*{x}*", f"\x05{x}\x06")
# Split into styled segments
segments = []
i = 0
while i < len(line):
if line[i] == '\x01':
i += 1
start = i
while i < len(line) and line[i] != '\x02': i += 1
segments.append(('bolditalic', line[start:i]))
i += 1
elif line[i] == '\x03':
i += 1
start = i
while i < len(line) and line[i] != '\x04': i += 1
segments.append(('bold', line[start:i]))
i += 1
elif line[i] == '\x05':
i += 1
start = i
while i < len(line) and line[i] != '\x06': i += 1
segments.append(('italic', line[start:i]))
i += 1
else:
start = i
while i < len(line) and line[i] not in '\x01\x03\x05': i += 1
if i > start:
segments.append(('text', line[start:i]))
# Restore literal asterisks
segments = [(style, text.replace('\x07', '*')) for style, text in segments]
return segments
def font_for_style(style, font, font_bold, font_italic, font_bolditalic):
if style == 'bolditalic':
return font_bolditalic or font_bold or font_italic or font
elif style == 'bold':
return font_bold
elif style == 'italic':
return font_italic
else:
return font
def wrap_segments(segments, font, font_bold, font_italic, font_bolditalic, max_width, start_x=0):
line = []
x = start_x
for style, text in segments:
words = re.split(r'(\s+)', text)
for word in words:
if word == '':
continue
f = font_for_style(style, font, font_bold, font_italic, font_bolditalic)
w = f.getbbox(word)[2] - f.getbbox(word)[0]
if x + w > max_width and line:
yield line
line = []
x = start_x
line.append((style, word))
x += w
if line:
yield line
def render(md, uploaded_img_bytes=None):
font = ImageFont.truetype(FONT_PATH, FONT_SIZE)
font_bold = ImageFont.truetype(FONT_PATH_BOLD, FONT_SIZE)
font_italic = ImageFont.truetype(FONT_PATH_OBLIQUE, FONT_SIZE)
try:
font_bolditalic = ImageFont.truetype(FONT_PATH_BOLDITALIC, FONT_SIZE)
except:
font_bolditalic = None
font_h1 = ImageFont.truetype(FONT_PATH_BOLD, HEADER_SIZE_1)
font_h2 = ImageFont.truetype(FONT_PATH_BOLD, HEADER_SIZE_2)
font_h3 = ImageFont.truetype(FONT_PATH_BOLD, HEADER_SIZE_3)
lines_out = []
for src_line in md.splitlines():
if src_line.strip() == '':
lines_out.append(('blank', []))
continue
tag = parse_line(src_line)
if tag[0] == 'image':
try:
image = bleh_image_from_url(tag[1])
lines_out.append(('image', image))
except Exception as e:
lines_out.append(('text', [('text', f"[Imagen inválida: {e}]")], font, FONT_SIZE))
elif tag[0] == 'userimage':
if uploaded_img_bytes:
try:
image = bleh_image_from_bytes(uploaded_img_bytes)
lines_out.append(('image', image))
except Exception as e:
lines_out.append(('text', [('text', f"[Error al procesar imágen subida: {e}]")], font, FONT_SIZE))
else:
lines_out.append(('text', [('text', "[No se subió una imagen]")], font, FONT_SIZE))
elif tag[0] == 'hr':
lines_out.append(('hr',))
elif tag[0] == 'header':
header_level = tag[1]
segments = tag[2]
if header_level == 1:
font_h = font_h1
size_h = HEADER_SIZE_1
elif header_level == 2:
font_h = font_h2
size_h = HEADER_SIZE_2
else:
font_h = font_h3
size_h = HEADER_SIZE_3
for wrapped in wrap_segments(segments, font_h, font_h, font_h, font_h, IMAGE_WIDTH):
lines_out.append(('header', wrapped, font_h, size_h))
elif tag[0] == 'bullet':
segments = tag[1]
bullet_font = font
bullet_w = bullet_font.getbbox(BULLET_CHAR)[2] - bullet_font.getbbox(BULLET_CHAR)[0]
wrapped_lines = list(wrap_segments(segments, font, font_bold, font_italic, font_bolditalic, IMAGE_WIDTH - bullet_w, start_x=0))
for i, wrapped in enumerate(wrapped_lines):
if i == 0:
lines_out.append(('bullet', wrapped, bullet_font, FONT_SIZE, True, bullet_w))
else:
lines_out.append(('bullet', wrapped, bullet_font, FONT_SIZE, False, bullet_w))
elif tag[0] == 'ordered':
idx, segments = tag[1], tag[2]
num_str = f"{idx}. "
number_font = font
num_w = number_font.getbbox(num_str)[2] - number_font.getbbox(num_str)[0]
wrapped_lines = list(wrap_segments(segments, font, font_bold, font_italic, font_bolditalic, IMAGE_WIDTH - num_w, start_x=0))
for i, wrapped in enumerate(wrapped_lines):
if i == 0:
lines_out.append(('ordered', wrapped, number_font, FONT_SIZE, num_str, True, num_w))
else:
lines_out.append(('ordered', wrapped, number_font, FONT_SIZE, num_str, False, num_w))
else: # normal text
segments = tag[1]
for wrapped in wrap_segments(segments, font, font_bold, font_italic, font_bolditalic, IMAGE_WIDTH):
lines_out.append(('text', wrapped, font, FONT_SIZE))
# Compute total height, including images
height = 10 # Top margin
for item in lines_out:
if item[0] in ('header', 'text', 'bullet', 'ordered'):
height += item[3]
elif item[0] == 'hr':
height += 10
elif item[0] == 'blank':
height += FONT_SIZE
elif item[0] == 'image':
img = item[1]
height += img.height + 10 # add margin below image
image = Image.new("L", (IMAGE_WIDTH, height), 255)
draw = ImageDraw.Draw(image)
y = 0
for item in lines_out:
if item[0] == 'blank':
y += FONT_SIZE
elif item[0] == 'hr':
draw.line((0, y + 5, IMAGE_WIDTH, y + 5), fill=0, width=2)
y += 10
elif item[0] == 'header':
segments, fnt, sz = item[1], item[2], item[3]
x = 0
for style, text in segments:
draw.text((x, y), text, font=fnt, fill=0)
x += fnt.getbbox(text)[2] - fnt.getbbox(text)[0]
y += sz
elif item[0] == 'bullet':
segments, bullet_font, sz, show_bullet, bullet_w = item[1], item[2], item[3], item[4], item[5]
x = 0
if show_bullet:
draw.text((x, y), BULLET_CHAR, font=bullet_font, fill=0)
x += bullet_w
else:
x += bullet_w
for style, text in segments:
f = font_for_style(style, bullet_font, font_bold, font_italic, font_bolditalic)
draw.text((x, y), text, font=f, fill=0)
x += f.getbbox(text)[2] - f.getbbox(text)[0]
y += sz
elif item[0] == 'ordered':
segments, number_font, sz, num_str, show_num, num_w = item[1], item[2], item[3], item[4], item[5], item[6]
x = 0
if show_num:
draw.text((x, y), num_str, font=number_font, fill=0)
x += num_w
else:
x += num_w
for style, text in segments:
f = font_for_style(style, number_font, font_bold, font_italic, font_bolditalic)
draw.text((x, y), text, font=f, fill=0)
x += f.getbbox(text)[2] - f.getbbox(text)[0]
y += sz
elif item[0] == 'text':
segments, fnt, sz = item[1], item[2], item[3]
x = 0
for style, text in segments:
f = font_for_style(style, font, font_bold, font_italic, font_bolditalic)
draw.text((x, y), text, font=f, fill=0)
x += f.getbbox(text)[2] - f.getbbox(text)[0]
y += sz
elif item[0] == 'image':
img = item[1]
# Center image horizontally if narrower
img_x = (IMAGE_WIDTH - img.width) // 2 if img.width < IMAGE_WIDTH else 0
image.paste(img, (img_x, y))
y += img.height + 10 # vertical margin after image
return image
@app.route("/", methods=["GET", "POST"])
def index():
img_data = None
md = ""
printed = False
error = None
if request.method == "POST":
userimg = request.files.get("userimg")
uploaded_img_bytes = None
if userimg and userimg.filename:
# Remove old temp file if present
remove_uploaded_img()
# Save new file to a temp location
with tempfile.NamedTemporaryFile(delete=False, suffix=".catnote") as tmpf:
userimg.save(tmpf)
tmpf.flush()
session['uploaded_img_path'] = tmpf.name
tmpf.seek(0)
uploaded_img_bytes = tmpf.read()
elif 'uploaded_img_path' in session:
path = session['uploaded_img_path']
if os.path.exists(path):
with open(path, "rb") as f:
uploaded_img_bytes = f.read()
else:
# If file was deleted or missing, remove from session
session.pop('uploaded_img_path', None)
else:
remove_uploaded_img()
md = request.form["md"]
image = render(md, uploaded_img_bytes)
buf = io.BytesIO()
image.save(buf, format="PNG")
buf.seek(0)
img_data = base64.b64encode(buf.getvalue()).decode()
# If print button pressed, send to driver
if "print" in request.form:
try:
with tempfile.NamedTemporaryFile(suffix=".png", delete=True) as tmpfile:
image.save(tmpfile, format="PNG")
tmpfile.flush()
# Run the bleh command
# You can set dither method here if desired
result = subprocess.run([
"sudo",
"./bleh",
"-mode", "1bpp",
"-intensity", "100",
tmpfile.name
], capture_output=True, text=True, timeout=90)
if result.returncode != 0:
error = f"Printer error: {result.stderr or result.stdout}"
else:
printed = True
except Exception as e:
error = f"Failed to print: {e}"
return render_template_string(HTML_FORM, img=img_data, default_md=md,
printed=printed, error=error)
@app.route('/manifest.json')
def manifest():
return send_from_directory('static', 'manifest.json')
@app.route('/icon512_maskable.png')
def icon_maskable():
return send_from_directory('static', 'icon512_maskable.png')
@app.route('/icon512_rounded.png')
def icon_rounded():
return send_from_directory('static', 'icon512_rounded.png')
if __name__ == "__main__":
parser = argparse.ArgumentParser(description='CatNote: Server for Markdown to MXW01 Cat Printer')
parser.add_argument('-p', '--port', type=int, default=5000, help='Port to run the server on (default: 5000)')
args = parser.parse_args()
app.run(host='0.0.0.0', port=args.port)