feat: add web UI and Docker setup for ZPLify

- HTTP server wrapping zplgfa library (port 4543)
- File upload with drag-and-drop, width/height resize, encoding selection, image edits
- /convert endpoint returns ZPL output; /preview returns image dimensions
- Dockerfile (multi-stage, Alpine) and docker-compose.yml

Dockerfile

@@ -0,0 +1,24 @@
+FROM golang:1.22-alpine AS builder
+
+WORKDIR /src
+
+# Copy module files and download deps
+COPY go.mod go.sum ./
+RUN go mod download
+
+# Copy source
+COPY . .
+
+# Build the web server
+RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w" -o /zplgfa-web ./cmd/web
+
+# ─── Final stage ────────────────────────────────────────────────────────────
+FROM alpine:3.20
+
+RUN apk add --no-cache ca-certificates
+
+COPY --from=builder /zplgfa-web /usr/local/bin/zplgfa-web
+
+EXPOSE 4543
+
+ENTRYPOINT ["/usr/local/bin/zplgfa-web"]

cmd/web/main.go

@@ -0,0 +1,452 @@
+package main
+
+import (
+	"bytes"
+	"fmt"
+	"image"
+	"image/color"
+	_ "image/gif"
+	_ "image/jpeg"
+	_ "image/png"
+	"log"
+	"math"
+	"net/http"
+	"strconv"
+	"strings"
+
+	"github.com/anthonynsimon/bild/blur"
+	"github.com/anthonynsimon/bild/effect"
+	"github.com/anthonynsimon/bild/segment"
+	"github.com/nfnt/resize"
+
+	"simonwaldherr.de/go/zplgfa"
+)
+
+const maxUploadSize = 20 << 20 // 20 MB
+
+func getGraphicType(t string) zplgfa.GraphicType {
+	switch strings.ToUpper(t) {
+	case "ASCII":
+		return zplgfa.ASCII
+	case "BINARY":
+		return zplgfa.Binary
+	default:
+		return zplgfa.CompressedASCII
+	}
+}
+
+func invertImage(img image.Image) image.Image {
+	b := img.Bounds()
+	out := image.NewNRGBA(b)
+	for y := b.Min.Y; y < b.Max.Y; y++ {
+		for x := b.Min.X; x < b.Max.X; x++ {
+			r, g, bv, a := img.At(x, y).RGBA()
+			out.Set(x, y, color.RGBA{
+				R: uint8((65535 - r) >> 8),
+				G: uint8((65535 - g) >> 8),
+				B: uint8((65535 - bv) >> 8),
+				A: uint8(a >> 8),
+			})
+		}
+	}
+	return out
+}
+
+func monochromeImage(img image.Image) image.Image {
+	b := img.Bounds()
+	out := image.NewNRGBA(b)
+	for y := b.Min.Y; y < b.Max.Y; y++ {
+		for x := b.Min.X; x < b.Max.X; x++ {
+			r, g, bv, a := img.At(x, y).RGBA()
+			var v uint8
+			if r > math.MaxUint16/2 || g > math.MaxUint16/2 || bv > math.MaxUint16/2 {
+				v = 255
+			}
+			out.Set(x, y, color.RGBA{R: v, G: v, B: v, A: uint8(a >> 8)})
+		}
+	}
+	return out
+}
+
+func processImage(img image.Image, editFlag string, width, height uint) image.Image {
+	if strings.Contains(editFlag, "monochrome") {
+		img = monochromeImage(img)
+	}
+	bounds := img.Bounds()
+	if strings.Contains(editFlag, "blur") {
+		img = blur.Gaussian(img, float64(bounds.Dx())/300)
+	}
+	if strings.Contains(editFlag, "edge") {
+		img = effect.Sobel(img)
+	}
+	if strings.Contains(editFlag, "segment") {
+		img = segment.Threshold(img, 128)
+	}
+	if strings.Contains(editFlag, "invert") {
+		img = invertImage(img)
+	}
+	if width > 0 || height > 0 {
+		img = resize.Resize(width, height, img, resize.MitchellNetravali)
+	}
+	return img
+}
+
+func convertHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	if err := r.ParseMultipartForm(maxUploadSize); err != nil {
+		http.Error(w, "file too large", http.StatusBadRequest)
+		return
+	}
+
+	file, _, err := r.FormFile("file")
+	if err != nil {
+		http.Error(w, "missing file", http.StatusBadRequest)
+		return
+	}
+	defer file.Close()
+
+	img, _, err := image.Decode(file)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("cannot decode image: %s", err), http.StatusBadRequest)
+		return
+	}
+
+	var w2, h2 uint
+	if v, err := strconv.ParseUint(r.FormValue("width"), 10, 32); err == nil {
+		w2 = uint(v)
+	}
+	if v, err := strconv.ParseUint(r.FormValue("height"), 10, 32); err == nil {
+		h2 = uint(v)
+	}
+
+	editFlag := r.FormValue("edit")
+	graphicType := getGraphicType(r.FormValue("type"))
+
+	img = processImage(img, editFlag, w2, h2)
+	flat := zplgfa.FlattenImage(img)
+	zpl := zplgfa.ConvertToZPL(flat, graphicType)
+
+	w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+	w.Header().Set("Content-Disposition", `attachment; filename="label.zpl"`)
+	fmt.Fprint(w, zpl)
+}
+
+func previewHandler(w http.ResponseWriter, r *http.Request) {
+	// Returns image info (dimensions) before conversion
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+	if err := r.ParseMultipartForm(maxUploadSize); err != nil {
+		http.Error(w, "file too large", http.StatusBadRequest)
+		return
+	}
+	file, _, err := r.FormFile("file")
+	if err != nil {
+		http.Error(w, "missing file", http.StatusBadRequest)
+		return
+	}
+	defer file.Close()
+
+	var buf bytes.Buffer
+	buf.ReadFrom(file)
+	cfg, _, err := image.DecodeConfig(bytes.NewReader(buf.Bytes()))
+	if err != nil {
+		http.Error(w, "cannot decode image", http.StatusBadRequest)
+		return
+	}
+	w.Header().Set("Content-Type", "application/json")
+	fmt.Fprintf(w, `{"width":%d,"height":%d}`, cfg.Width, cfg.Height)
+}
+
+func main() {
+	mux := http.NewServeMux()
+	mux.HandleFunc("/convert", convertHandler)
+	mux.HandleFunc("/preview", previewHandler)
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		w.Write([]byte(indexHTML))
+	})
+
+	addr := ":4543"
+	log.Printf("zplgfa web UI listening on %s", addr)
+	log.Fatal(http.ListenAndServe(addr, mux))
+}
+
+const indexHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>zplgfa – Image to ZPL Converter</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: system-ui, sans-serif;
+    background: #0f1117;
+    color: #e2e8f0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+  }
+  .card {
+    background: #1e2130;
+    border: 1px solid #2d3348;
+    border-radius: 12px;
+    padding: 2rem;
+    width: 100%;
+    max-width: 640px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+  }
+  h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
+  .subtitle { color: #718096; font-size: 0.875rem; margin-bottom: 1.75rem; }
+
+  .drop-zone {
+    border: 2px dashed #3a4060;
+    border-radius: 8px;
+    padding: 2.5rem 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: border-color .2s, background .2s;
+    margin-bottom: 1.5rem;
+  }
+  .drop-zone:hover, .drop-zone.over { border-color: #6366f1; background: #1a1e2e; }
+  .drop-zone input { display: none; }
+  .drop-zone .icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
+  .drop-zone .hint { color: #718096; font-size: 0.85rem; }
+  .preview-info { margin-top: 0.75rem; font-size: 0.8rem; color: #a0aec0; min-height: 1.2em; }
+
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
+  label { display: block; font-size: 0.8rem; font-weight: 600; color: #a0aec0; margin-bottom: 0.35rem; }
+  input[type=number], select {
+    width: 100%;
+    background: #252a3d;
+    border: 1px solid #3a4060;
+    border-radius: 6px;
+    color: #e2e8f0;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+    outline: none;
+    transition: border-color .2s;
+  }
+  input[type=number]:focus, select:focus { border-color: #6366f1; }
+
+  .checks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
+  .checks label {
+    display: flex; align-items: center; gap: 0.4rem;
+    background: #252a3d; border: 1px solid #3a4060;
+    border-radius: 6px; padding: 0.35rem 0.7rem;
+    cursor: pointer; font-size: 0.8rem; font-weight: 500; color: #cbd5e0;
+    margin-bottom: 0;
+    transition: border-color .2s, background .2s;
+  }
+  .checks label:hover { border-color: #6366f1; }
+  .checks input[type=checkbox] { accent-color: #6366f1; width: 14px; height: 14px; }
+
+  button {
+    width: 100%;
+    background: #6366f1;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    padding: 0.75rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background .2s, opacity .2s;
+  }
+  button:hover { background: #4f52d0; }
+  button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  .output {
+    margin-top: 1.5rem;
+    display: none;
+  }
+  .output-header {
+    display: flex; justify-content: space-between; align-items: center;
+    margin-bottom: 0.5rem;
+  }
+  .output-header span { font-size: 0.8rem; font-weight: 600; color: #a0aec0; }
+  .copy-btn {
+    background: #252a3d; border: 1px solid #3a4060; border-radius: 6px;
+    color: #a0aec0; font-size: 0.75rem; padding: 0.25rem 0.6rem;
+    width: auto; font-weight: 500;
+  }
+  .copy-btn:hover { background: #2d3348; }
+  textarea {
+    width: 100%; height: 220px;
+    background: #0f1117; border: 1px solid #2d3348; border-radius: 6px;
+    color: #7dd3fc; font-family: monospace; font-size: 0.75rem;
+    padding: 0.75rem; resize: vertical; outline: none;
+  }
+  .dl-btn {
+    margin-top: 0.75rem;
+    background: #2d6a4f;
+  }
+  .dl-btn:hover { background: #215040; }
+  .error { color: #fc8181; font-size: 0.85rem; margin-top: 0.75rem; display: none; }
+  .spinner {
+    display: none; width: 18px; height: 18px;
+    border: 2px solid #ffffff40; border-top-color: #fff;
+    border-radius: 50%; animation: spin .6s linear infinite;
+    margin: 0 auto;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+</style>
+</head>
+<body>
+<div class="card">
+  <h1>zplgfa</h1>
+  <p class="subtitle">Convert images to ZPL Graphic Fields for Zebra label printers</p>
+
+  <div class="drop-zone" id="dropZone">
+    <input type="file" id="fileInput" accept="image/png,image/jpeg,image/gif">
+    <div class="icon">🖼️</div>
+    <div>Drop an image here or <strong>click to browse</strong></div>
+    <div class="hint">PNG, JPEG, GIF — max 20 MB</div>
+    <div class="preview-info" id="previewInfo"></div>
+  </div>
+
+  <div class="grid">
+    <div>
+      <label for="width">Width (px) <span style="font-weight:400;color:#718096">0 = auto</span></label>
+      <input type="number" id="width" min="0" value="0" placeholder="0">
+    </div>
+    <div>
+      <label for="height">Height (px) <span style="font-weight:400;color:#718096">0 = auto</span></label>
+      <input type="number" id="height" min="0" value="0" placeholder="0">
+    </div>
+  </div>
+
+  <div class="grid" style="margin-bottom:1rem">
+    <div>
+      <label for="enctype">Encoding</label>
+      <select id="enctype">
+        <option value="CompressedASCII" selected>CompressedASCII (default)</option>
+        <option value="ASCII">ASCII</option>
+        <option value="Binary">Binary</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="checks">
+    <label><input type="checkbox" name="edit" value="monochrome"> Monochrome</label>
+    <label><input type="checkbox" name="edit" value="invert"> Invert</label>
+    <label><input type="checkbox" name="edit" value="blur"> Blur</label>
+    <label><input type="checkbox" name="edit" value="edge"> Edge detect</label>
+    <label><input type="checkbox" name="edit" value="segment"> Segment</label>
+  </div>
+
+  <button id="convertBtn" disabled>Convert to ZPL</button>
+  <div class="spinner" id="spinner"></div>
+  <div class="error" id="error"></div>
+
+  <div class="output" id="output">
+    <div class="output-header">
+      <span>ZPL Output</span>
+      <button class="copy-btn" id="copyBtn">Copy</button>
+    </div>
+    <textarea id="zplOutput" readonly></textarea>
+    <button class="dl-btn" id="dlBtn">⬇ Download .zpl</button>
+  </div>
+</div>
+
+<script>
+const dropZone = document.getElementById('dropZone');
+const fileInput = document.getElementById('fileInput');
+const previewInfo = document.getElementById('previewInfo');
+const convertBtn = document.getElementById('convertBtn');
+const spinner = document.getElementById('spinner');
+const output = document.getElementById('output');
+const zplOutput = document.getElementById('zplOutput');
+const errorEl = document.getElementById('error');
+let selectedFile = null;
+
+dropZone.addEventListener('click', () => fileInput.click());
+dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('over'); });
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('over'));
+dropZone.addEventListener('drop', e => {
+  e.preventDefault();
+  dropZone.classList.remove('over');
+  if (e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]);
+});
+fileInput.addEventListener('change', () => { if (fileInput.files[0]) setFile(fileInput.files[0]); });
+
+function setFile(file) {
+  selectedFile = file;
+  previewInfo.textContent = 'Loading…';
+  convertBtn.disabled = true;
+
+  const fd = new FormData();
+  fd.append('file', file);
+  fetch('/preview', { method: 'POST', body: fd })
+    .then(r => r.ok ? r.json() : Promise.reject())
+    .then(info => {
+      previewInfo.textContent = file.name + ' — ' + info.width + ' × ' + info.height + ' px';
+      // Pre-fill dimensions
+      document.getElementById('width').value = info.width;
+      document.getElementById('height').value = info.height;
+      convertBtn.disabled = false;
+    })
+    .catch(() => {
+      previewInfo.textContent = file.name;
+      convertBtn.disabled = false;
+    });
+}
+
+convertBtn.addEventListener('click', async () => {
+  if (!selectedFile) return;
+  errorEl.style.display = 'none';
+  convertBtn.style.display = 'none';
+  spinner.style.display = 'block';
+  output.style.display = 'none';
+
+  const edits = [...document.querySelectorAll('input[name=edit]:checked')].map(c => c.value);
+  const fd = new FormData();
+  fd.append('file', selectedFile);
+  fd.append('width', document.getElementById('width').value);
+  fd.append('height', document.getElementById('height').value);
+  fd.append('type', document.getElementById('enctype').value);
+  fd.append('edit', edits.join(','));
+
+  try {
+    const res = await fetch('/convert', { method: 'POST', body: fd });
+    if (!res.ok) {
+      const msg = await res.text();
+      throw new Error(msg);
+    }
+    const text = await res.text();
+    zplOutput.value = text;
+    output.style.display = 'block';
+  } catch (e) {
+    errorEl.textContent = 'Error: ' + e.message;
+    errorEl.style.display = 'block';
+  } finally {
+    spinner.style.display = 'none';
+    convertBtn.style.display = 'block';
+  }
+});
+
+document.getElementById('copyBtn').addEventListener('click', () => {
+  navigator.clipboard.writeText(zplOutput.value);
+  document.getElementById('copyBtn').textContent = 'Copied!';
+  setTimeout(() => document.getElementById('copyBtn').textContent = 'Copy', 1500);
+});
+
+document.getElementById('dlBtn').addEventListener('click', () => {
+  const blob = new Blob([zplOutput.value], { type: 'text/plain' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = (selectedFile ? selectedFile.name.replace(/\.[^.]+$/, '') : 'label') + '.zpl';
+  a.click();
+});
+</script>
+</body>
+</html>
+`

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  zplgfa:
+    build: .
+    ports:
+      - "4543:4543"
+    restart: unless-stopped