|
|
|
@ -26,7 +26,7 @@ import { |
|
|
|
} from "libmonoformat"; |
|
|
|
} from "libmonoformat"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const W = 120, H = 60; |
|
|
|
let W = 120, H = 60; |
|
|
|
|
|
|
|
|
|
|
|
// --- State -------------------------------------------------------------------
|
|
|
|
// --- State -------------------------------------------------------------------
|
|
|
|
let file: MonoDisplayFile = new MonoDisplayFile([]); |
|
|
|
let file: MonoDisplayFile = new MonoDisplayFile([]); |
|
|
|
@ -185,6 +185,15 @@ async function guardDirty(): Promise<boolean> { |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function changeDisplayLayout() { |
|
|
|
|
|
|
|
const sel = document.querySelector('.pv-label select') as HTMLSelectElement; |
|
|
|
|
|
|
|
const [w, h] = sel.value.split('×').map(s => parseInt(s.trim())); |
|
|
|
|
|
|
|
W = w as number; |
|
|
|
|
|
|
|
H = h as number; |
|
|
|
|
|
|
|
((window as any)._mdDriver as MonoDisplayDriver).setSize(W, H); |
|
|
|
|
|
|
|
((window as any)._mdDriver as MonoDisplayDriver).load(() => Promise.resolve(file.toBuffer())); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// --- Helpers -----------------------------------------------------------------
|
|
|
|
// --- Helpers -----------------------------------------------------------------
|
|
|
|
function newSec(): MonoFormatElementsAlways { |
|
|
|
function newSec(): MonoFormatElementsAlways { |
|
|
|
return { |
|
|
|
return { |
|
|
|
@ -425,7 +434,7 @@ function triggerPreview() { |
|
|
|
function buildPreview() { |
|
|
|
function buildPreview() { |
|
|
|
if (!(window as any)._mdDriver) |
|
|
|
if (!(window as any)._mdDriver) |
|
|
|
(window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 }); |
|
|
|
(window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 }); |
|
|
|
(window as any)._mdDriver.load(() => Promise.resolve(file.toBuffer())); |
|
|
|
changeDisplayLayout(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// --- Load / Export -----------------------------------------------------------
|
|
|
|
// --- Load / Export -----------------------------------------------------------
|
|
|
|
@ -518,82 +527,99 @@ const PixelCanvas: m.Component<{ img: MonoFormatPixelImage; onpaint: () => void |
|
|
|
vnode.state.drawing = false; |
|
|
|
vnode.state.drawing = false; |
|
|
|
vnode.state.drawValue = 1; |
|
|
|
vnode.state.drawValue = 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
view({ attrs: { img, onpaint }, state }) { |
|
|
|
view({ attrs: { img, onpaint }, state: s }) { |
|
|
|
function pixelFromEvent(e: MouseEvent): { x: number; y: number } | null { |
|
|
|
function pixelFromCoords(canvas: HTMLCanvasElement, clientX: number, clientY: number) { |
|
|
|
const canvas = e.currentTarget as HTMLCanvasElement; |
|
|
|
|
|
|
|
const rect = canvas.getBoundingClientRect(); |
|
|
|
const rect = canvas.getBoundingClientRect(); |
|
|
|
const scaleX = canvas.width / rect.width; |
|
|
|
const scaleX = canvas.width / rect.width; |
|
|
|
const scaleY = canvas.height / rect.height; |
|
|
|
const scaleY = canvas.height / rect.height; |
|
|
|
const x = Math.floor((e.clientX - rect.left) * scaleX / PIXEL_SCALE); |
|
|
|
const x = Math.floor((clientX - rect.left) * scaleX / PIXEL_SCALE); |
|
|
|
const y = Math.floor((e.clientY - rect.top) * scaleY / PIXEL_SCALE); |
|
|
|
const y = Math.floor((clientY - rect.top) * scaleY / PIXEL_SCALE); |
|
|
|
if (x < 0 || x >= img.width || y < 0 || y >= img.height) return null; |
|
|
|
if (x < 0 || x >= img.width || y < 0 || y >= img.height) return null; |
|
|
|
return { x, y }; |
|
|
|
return { x, y }; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function paint(e: MouseEvent) { |
|
|
|
function paintAt(canvas: HTMLCanvasElement, clientX: number, clientY: number) { |
|
|
|
const p = pixelFromEvent(e); |
|
|
|
const p = pixelFromCoords(canvas, clientX, clientY); |
|
|
|
if (!p) return; |
|
|
|
if (!p) return; |
|
|
|
img.pixels[getPixelIndex(img, p.x, p.y)] = state.drawValue; |
|
|
|
img.pixels[getPixelIndex(img, p.x, p.y)] = s.drawValue; |
|
|
|
onpaint(); |
|
|
|
onpaint(); |
|
|
|
drawPixelCanvas(e.currentTarget as HTMLCanvasElement, img); |
|
|
|
drawPixelCanvas(canvas, img); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function paint(e: MouseEvent) { |
|
|
|
|
|
|
|
paintAt(e.currentTarget as HTMLCanvasElement, e.clientX, e.clientY); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function attachTouch(canvas: HTMLCanvasElement) { |
|
|
|
|
|
|
|
canvas.addEventListener("touchstart", (e: TouchEvent) => { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
s.drawing = true; |
|
|
|
|
|
|
|
const touch = e.changedTouches[0]; |
|
|
|
|
|
|
|
const p = pixelFromCoords(canvas, touch.clientX, touch.clientY); |
|
|
|
|
|
|
|
if (p) s.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1; |
|
|
|
|
|
|
|
paintAt(canvas, touch.clientX, touch.clientY); |
|
|
|
|
|
|
|
}, { passive: false }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener("touchmove", (e: TouchEvent) => { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
if (!s.drawing) return; |
|
|
|
|
|
|
|
const touch = e.changedTouches[0]; |
|
|
|
|
|
|
|
paintAt(canvas, touch.clientX, touch.clientY); |
|
|
|
|
|
|
|
}, { passive: false }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener("touchend", (e) => { e.preventDefault(); s.drawing = false; }, { passive: false }); |
|
|
|
|
|
|
|
canvas.addEventListener("touchcancel", (e) => { e.preventDefault(); s.drawing = false; }, { passive: false }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return m("canvas.pixel-editor", { |
|
|
|
return m("canvas.pixel-editor", { |
|
|
|
width: img.width * PIXEL_SCALE, |
|
|
|
width: img.width * PIXEL_SCALE, |
|
|
|
height: img.height * PIXEL_SCALE, |
|
|
|
height: img.height * PIXEL_SCALE, |
|
|
|
oncreate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img), |
|
|
|
oncreate: ({ dom }: m.VnodeDOM) => { |
|
|
|
|
|
|
|
const canvas = dom as HTMLCanvasElement; |
|
|
|
|
|
|
|
drawPixelCanvas(canvas, img); |
|
|
|
|
|
|
|
attachTouch(canvas); |
|
|
|
|
|
|
|
}, |
|
|
|
onupdate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img), |
|
|
|
onupdate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img), |
|
|
|
|
|
|
|
|
|
|
|
onmousedown: (e: MouseEvent) => { |
|
|
|
onmousedown: (e: MouseEvent) => { |
|
|
|
state.drawing = true; |
|
|
|
s.drawing = true; |
|
|
|
const p = pixelFromEvent(e); |
|
|
|
const p = pixelFromCoords(e.currentTarget as HTMLCanvasElement, e.clientX, e.clientY); |
|
|
|
if (p) state.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1; |
|
|
|
if (p) s.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1; |
|
|
|
paint(e); |
|
|
|
paint(e); |
|
|
|
}, |
|
|
|
}, |
|
|
|
onmousemove: (e: MouseEvent) => { if (state.drawing) paint(e); }, |
|
|
|
onmousemove: (e: MouseEvent) => { if (s.drawing) paint(e); }, |
|
|
|
onmouseup: () => { state.drawing = false; }, |
|
|
|
onmouseup: () => { s.drawing = false; }, |
|
|
|
onmouseleave: () => { state.drawing = false; }, |
|
|
|
onmouseleave: () => { s.drawing = false; }, |
|
|
|
|
|
|
|
|
|
|
|
ondragover: (e: DragEvent) => { |
|
|
|
ondragover: (e: DragEvent) => { |
|
|
|
e.preventDefault(); |
|
|
|
e.preventDefault(); |
|
|
|
e.dataTransfer!.dropEffect = "copy"; |
|
|
|
e.dataTransfer!.dropEffect = "copy"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
ondrop: (e: DragEvent) => { |
|
|
|
ondrop: (e: DragEvent) => { |
|
|
|
e.preventDefault(); |
|
|
|
e.preventDefault(); |
|
|
|
const file = e.dataTransfer?.files[0]; |
|
|
|
const file = e.dataTransfer?.files[0]; |
|
|
|
if (!file || !file.type.startsWith("image/")) return; |
|
|
|
if (!file || !file.type.startsWith("image/")) return; |
|
|
|
|
|
|
|
|
|
|
|
const url = URL.createObjectURL(file); |
|
|
|
const url = URL.createObjectURL(file); |
|
|
|
const htmlImg = new Image(); |
|
|
|
const htmlImg = new Image(); |
|
|
|
htmlImg.onload = () => { |
|
|
|
htmlImg.onload = () => { |
|
|
|
// Draw the dropped image into an offscreen canvas to read pixel data
|
|
|
|
|
|
|
|
const offscreen = document.createElement("canvas"); |
|
|
|
const offscreen = document.createElement("canvas"); |
|
|
|
offscreen.width = htmlImg.width; |
|
|
|
|
|
|
|
offscreen.height = htmlImg.height; |
|
|
|
|
|
|
|
const ctx = offscreen.getContext("2d")!; |
|
|
|
const ctx = offscreen.getContext("2d")!; |
|
|
|
ctx.drawImage(htmlImg, 0, 0); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const imageData = ctx.getImageData(0, 0, htmlImg.width, htmlImg.height); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Convert to your pixel format — adjust this to match your img structure
|
|
|
|
|
|
|
|
const scale = Math.min(1, 120 / htmlImg.width, 60 / htmlImg.height); |
|
|
|
const scale = Math.min(1, 120 / htmlImg.width, 60 / htmlImg.height); |
|
|
|
const w = Math.round(htmlImg.width * scale); |
|
|
|
const w = Math.round(htmlImg.width * scale); |
|
|
|
const h = Math.round(htmlImg.height * scale); |
|
|
|
const h = Math.round(htmlImg.height * scale); |
|
|
|
|
|
|
|
|
|
|
|
offscreen.width = w; |
|
|
|
offscreen.width = w; |
|
|
|
offscreen.height = h; |
|
|
|
offscreen.height = h; |
|
|
|
ctx.drawImage(htmlImg, 0, 0, w, h); // scales the image down while drawing
|
|
|
|
ctx.drawImage(htmlImg, 0, 0, w, h); |
|
|
|
|
|
|
|
const imageData = ctx.getImageData(0, 0, w, h); |
|
|
|
img.width = w; |
|
|
|
img.width = w; |
|
|
|
img.height = h; |
|
|
|
img.height = h; |
|
|
|
// then read imageData from the scaled offscreen canvas as before
|
|
|
|
|
|
|
|
img.pixels = new Uint8Array(w * h).map((_, i) => { |
|
|
|
img.pixels = new Uint8Array(w * h).map((_, i) => { |
|
|
|
const r = imageData.data[i * 4] || 0; |
|
|
|
const r = imageData.data[i * 4]; |
|
|
|
const g = imageData.data[i * 4 + 1] || 0; |
|
|
|
const g = imageData.data[i * 4 + 1]; |
|
|
|
const b = imageData.data[i * 4 + 2] || 0; |
|
|
|
const b = imageData.data[i * 4 + 2]; |
|
|
|
const a = imageData.data[i * 4 + 3] || 0; |
|
|
|
const a = imageData.data[i * 4 + 3]; |
|
|
|
// transparent = 0, dark pixels = 1, light pixels = 0
|
|
|
|
|
|
|
|
return a > 128 && (r * 299 + g * 587 + b * 114) < 128_000 ? 0 : 1; |
|
|
|
return a > 128 && (r * 299 + g * 587 + b * 114) < 128_000 ? 0 : 1; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
URL.revokeObjectURL(url); |
|
|
|
URL.revokeObjectURL(url); |
|
|
|
m.redraw(); |
|
|
|
m.redraw(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -916,7 +942,7 @@ async function clearAll() { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Expose globals referenced by topbar inline handlers
|
|
|
|
// Expose globals referenced by topbar inline handlers
|
|
|
|
Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme }); |
|
|
|
Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme, changeDisplayLayout }); |
|
|
|
|
|
|
|
|
|
|
|
// window.addEventListener("beforeunload", (e) => {
|
|
|
|
// window.addEventListener("beforeunload", (e) => {
|
|
|
|
// if (isDirty) e.preventDefault();
|
|
|
|
// if (isDirty) e.preventDefault();
|
|
|
|
|
flop
Christian Seiler