4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51: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 = ""; }} />

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":["@unlumen-ui/matrix"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.unlumen.com/r/demo-matrix-image-to-frame.json","proxyUrl":"https://shadcnregistry.com/r/unlumen-ui/demo-matrix-image-to-frame","itemId":"@unlumen-ui/demo-matrix-image-to-frame"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/demo/components/unlumen/matrix-image-to-frame/index.tsx","content":"$51","type":"registry:example"}]}]]}],"$L52"]}]

Matrix Image To Frame

Installation

Files

components

Styles