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
This commit is contained in:
24
Dockerfile
Normal file
24
Dockerfile
Normal file
@@ -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"]
|
||||
452
cmd/web/main.go
Normal file
452
cmd/web/main.go
Normal file
@@ -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>
|
||||
`
|
||||
6
docker-compose.yml
Normal file
6
docker-compose.yml
Normal file
@@ -0,0 +1,6 @@
|
||||
services:
|
||||
zplgfa:
|
||||
build: .
|
||||
ports:
|
||||
- "4543:4543"
|
||||
restart: unless-stopped
|
||||
Reference in New Issue
Block a user