51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2408,"use client"; import { useCallback, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { UnlumenSlider } from "@/components/ui/unlumen-slider"; import { type Frame, Matrix } from "@/components/unlumen-ui/matrix"; const DEFAULT_ROWS = 16; const DEFAULT_COLS = 16; const MIN_SIZE = 4; const MAX_SIZE = 32; function imageToFrame( image: HTMLImageElement, rows: number, cols: number, threshold: number, invert: boolean, ): Frame { const canvas = document.createElement("canvas"); canvas.width = cols; canvas.height = rows; const ctx = canvas.getContext("2d")!; ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = "high"; ctx.drawImage(image, 0, 0, cols, rows); const { data } = ctx.getImageData(0, 0, cols, rows); const frame: Frame = []; for (let r = 0; r < rows; r++) { const row: number[] = []; for (let c = 0; c < cols; c++) { const i = (r * cols + c) * 4; const luma = (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]) / 255; const alpha = data[i + 3] / 255; const value = invert ? luma : 1 - luma; row.push(value * alpha >= threshold ? 1 : 0); } frame.push(row); } return frame; } function frameToCode(frame: Frame): string { const inner = frame.map((row) => ` [${row.join(", ")}]`).join(",\n"); return `const frame: Frame = [\n${inner},\n];`; } function loadImageElement(file: File): Promise { return new Promise((resolve, reject) => { const url = URL.createObjectURL(file); const img = new Image(); img.onload = () => { URL.revokeObjectURL(url); resolve(img); }; img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("Failed to load image")); }; img.src = url; }); } export default function MatrixImageToFrameDemo() { const [frame, setFrame] = useState(null); const [rows, setRows] = useState(DEFAULT_ROWS); const [cols, setCols] = useState(DEFAULT_COLS); const [threshold, setThreshold] = useState(0.5); const [invert, setInvert] = useState(false); const [isDragging, setIsDragging] = useState(false); const [copied, setCopied] = useState(false); const imageRef = useRef(null); const inputRef = useRef(null); const recompute = useCallback( (img: HTMLImageElement, r: number, c: number, t: number, inv: boolean) => { setFrame(imageToFrame(img, r, c, t, inv)); }, [], ); const handleFile = useCallback( async (file: File) => { if (!file.type.startsWith("image/")) return; const img = await loadImageElement(file); imageRef.current = img; recompute(img, rows, cols, threshold, invert); }, [rows, cols, threshold, invert, recompute], ); const handleRows = useCallback( (v: number) => { setRows(v); if (imageRef.current) recompute(imageRef.current, v, cols, threshold, invert); }, [cols, threshold, invert, recompute], ); const handleCols = useCallback( (v: number) => { setCols(v); if (imageRef.current) recompute(imageRef.current, rows, v, threshold, invert); }, [rows, threshold, invert, recompute], ); const handleThreshold = useCallback( (v: number) => { setThreshold(v); if (imageRef.current) recompute(imageRef.current, rows, cols, v, invert); }, [rows, cols, invert, recompute], ); const handleInvert = useCallback(() => { const next = !invert; setInvert(next); if (imageRef.current) recompute(imageRef.current, rows, cols, threshold, next); }, [invert, rows, cols, threshold, recompute]); const handleCopy = useCallback(() => { if (!frame) return; navigator.clipboard.writeText(frameToCode(frame)); setCopied(true); setTimeout(() => setCopied(false), 1800); }, [frame]); const pixelSize = Math.max(2, Math.floor(320 / Math.max(rows, cols)) - 1); return (

{!frame ? ( ) : (

handleRows(v as number)} min={MIN_SIZE} max={MAX_SIZE} step={1} label="rows" valuePosition="right" className="flex-1" /> handleCols(v as number)} min={MIN_SIZE} max={MAX_SIZE} step={1} label="cols" valuePosition="right" className="flex-1" />

handleThreshold(v as number)} min={0.1} max={0.9} step={0.01} label="threshold" valuePosition="right" formatValue={(v) => v.toFixed(2)} />

)} { const file = e.target.files?.[0]; if (file) handleFile(file); e.target.value = ""; }} />

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@unlumen-ui","registryDependencies":["@unlumen-ui/matrix"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/demo/components/unlumen/matrix-image-to-frame/index.tsx","content":"$53","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]