[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Converter } from "@/components/converter" export default function Home() { return (

SVG to DST Converter

Upload an SVG file and convert it to DST format for embroidery machines

) } [V0_FILE]typescriptreact:file="components/progress-bar.tsx" isMerged="true" interface ProgressBarProps { progress: number } export function ProgressBar({ progress }: ProgressBarProps) { return (

Progress {Math.round(progress)}%

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/file-uploader.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Upload, X } from "lucide-react" interface FileUploaderProps { onFileChange: (file: File | null) => void } export function FileUploader({ onFileChange }: FileUploaderProps) { const [dragActive, setDragActive] = useState(false) const [selectedFile, setSelectedFile] = useState(null) const inputRef = useRef(null) const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true) } else if (e.type === "dragleave") { setDragActive(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setDragActive(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { const file = e.dataTransfer.files[0] if (file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg")) { setSelectedFile(file) onFileChange(file) } else { alert("Please upload an SVG file") } } } const handleChange = (e: React.ChangeEvent) => { e.preventDefault() if (e.target.files && e.target.files[0]) { const file = e.target.files[0] // Accept both SVG MIME type and files with .svg extension if (file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg")) { setSelectedFile(file) onFileChange(file) } else { alert("Please upload an SVG file") e.target.value = "" } } } const handleClick = () => { inputRef.current?.click() } const handleRemove = () => { setSelectedFile(null) if (inputRef.current) inputRef.current.value = "" onFileChange(null) } return (

{!selectedFile ? (

Drag and drop your SVG file here, or

Only SVG files are supported

) : (

{selectedFile.name}

{(selectedFile.size / 1024).toFixed(2)} KB

)}

) } [V0_FILE]typescriptreact:file="components/svg-preview.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface SvgPreviewProps { svgContent: string | null } export function SvgPreview({ svgContent }: SvgPreviewProps) { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current || !svgContent) return // Clear previous content containerRef.current.innerHTML = "" try { // Create a blob URL for the SVG content const blob = new Blob([svgContent], { type: "image/svg+xml" }) const url = URL.createObjectURL(blob) // Create an image element to display the SVG const img = document.createElement("img") img.src = url img.className = "max-w-full max-h-full object-contain" img.alt = "SVG Preview" // Clean up the blob URL when the image loads or errors img.onload = () => URL.revokeObjectURL(url) img.onerror = () => { URL.revokeObjectURL(url) containerRef.current!.innerHTML = "

Error loading SVG preview

" } containerRef.current.appendChild(img) } catch (error) { containerRef.current.innerHTML = "

Invalid SVG content

" console.error("Error displaying SVG:", error) } }, [svgContent]) return (

) } [V0_FILE]typescriptreact:file="lib/converter.ts" isFixed="true" isEdit="true" isQuickEdit="true" /** * Converts SVG to DST format with progress updates */ export async function convertSvgToDst(svgContent: string, onProgress: (progress: number) => void): Promise { // Parse SVG const parser = new DOMParser() const svgDoc = parser.parseFromString(svgContent, "image/svg+xml") const svgElement = svgDoc.documentElement // Extract viewBox or width/height let viewBox = svgElement.getAttribute("viewBox")?.split(/\s+/).map(Number) const width = Number.parseFloat(svgElement.getAttribute("width") || "100") const height = Number.parseFloat(svgElement.getAttribute("height") || "100") if (!viewBox) { viewBox = [0, 0, width, height] } // Simulate the conversion process with steps const steps = [ { name: "Parsing SVG", duration: 500, progress: 10 }, { name: "Extracting paths", duration: 800, progress: 30 }, { name: "Converting to stitch points", duration: 1200, progress: 70 }, { name: "Optimizing stitch path", duration: 700, progress: 90 }, { name: "Generating DST file", duration: 800, progress: 100 }, ] // Create a simulated DST header (512 bytes) let dstContent = "LA:SVG to DST ST: 0 CO: 1 + " dstContent = dstContent.padEnd(512, " ") // Extract all paths from the SVG const paths = Array.from(svgDoc.querySelectorAll("path, rect, circle, ellipse, line, polyline, polygon")) // Store all stitch points const stitchPoints = [] let currentX = 0 let currentY = 0 // Process each step with progress updates for (let i = 0; i < steps.length; i++) { const step = steps[i] const startProgress = i === 0 ? 0 : steps[i - 1].progress const endProgress = step.progress // Simulate processing time for this step const startTime = Date.now() await new Promise((resolve) => { const interval = setInterval(() => { const elapsed = Date.now() - startTime const stepProgress = Math.min(elapsed / step.duration, 1) const totalProgress = startProgress + stepProgress * (endProgress - startProgress) onProgress(totalProgress) if (elapsed >= step.duration) { clearInterval(interval) resolve(null) } }, 50) }) // Perform actual work for each step if (step.name === "Extracting paths") { // This is where we would extract the actual paths // For now, we'll just log the number of paths found console.log(`Found ${paths.length} paths/shapes in SVG`) } else if (step.name === "Converting to stitch points") { // Convert paths to stitch points for (const path of paths) { const pathPoints = extractPointsFromElement(path, viewBox) // Add a jump stitch to the first point of each path if (pathPoints.length > 0) { const firstPoint = pathPoints[0] stitchPoints.push({ x: firstPoint.x, y: firstPoint.y, jump: true, }) currentX = firstPoint.x currentY = firstPoint.y // Add the rest of the points as normal stitches for (let i = 1; i < pathPoints.length; i++) { const point = pathPoints[i] stitchPoints.push({ x: point.x, y: point.y, jump: false, }) currentX = point.x currentY = point.y } } } // If no paths were found, create a simple shape if (stitchPoints.length === 0) { const centerX = viewBox[2] / 2 const centerY = viewBox[3] / 2 const size = Math.min(viewBox[2], viewBox[3]) * 0.8 // Create a square stitchPoints.push({ x: centerX - size / 2, y: centerY - size / 2, jump: true }) stitchPoints.push({ x: centerX + size / 2, y: centerY - size / 2, jump: false }) stitchPoints.push({ x: centerX + size / 2, y: centerY + size / 2, jump: false }) stitchPoints.push({ x: centerX - size / 2, y: centerY + size / 2, jump: false }) stitchPoints.push({ x: centerX - size / 2, y: centerY - size / 2, jump: false }) } } } // Store the stitch points in localStorage for the preview component to use localStorage.setItem("stitchPoints", JSON.stringify(stitchPoints)) // Ensure we reach 100% onProgress(100) return dstContent } /** * Extracts points from an SVG element */ function extractPointsFromElement(element: Element, viewBox: number[]): { x: number; y: number }[] { const points: { x: number; y: number }[] = [] const tagName = element.tagName.toLowerCase() // Handle different SVG element types switch (tagName) { case "path": return extractPointsFromPath(element.getAttribute("d") || "", viewBox) case "rect": const x = Number.parseFloat(element.getAttribute("x") || "0") const y = Number.parseFloat(element.getAttribute("y") || "0") const width = Number.parseFloat(element.getAttribute("width") || "0") const height = Number.parseFloat(element.getAttribute("height") || "0") // Create a rectangle path points.push({ x, y }) points.push({ x: x + width, y }) points.push({ x: x + width, y: y + height }) points.push({ x, y: y + height }) points.push({ x, y }) break case "circle": const cx = Number.parseFloat(element.getAttribute("cx") || "0") const cy = Number.parseFloat(element.getAttribute("cy") || "0") const r = Number.parseFloat(element.getAttribute("r") || "0") // Create a circle with points for (let angle = 0; angle <= 360; angle += 10) { const radians = (angle * Math.PI) / 180 points.push({ x: cx + r * Math.cos(radians), y: cy + r * Math.sin(radians), }) } break case "ellipse": const ecx = Number.parseFloat(element.getAttribute("cx") || "0") const ecy = Number.parseFloat(element.getAttribute("cy") || "0") const rx = Number.parseFloat(element.getAttribute("rx") || "0") const ry = Number.parseFloat(element.getAttribute("ry") || "0") // Create an ellipse with points for (let angle = 0; angle <= 360; angle += 10) { const radians = (angle * Math.PI) / 180 points.push({ x: ecx + rx * Math.cos(radians), y: ecy + ry * Math.sin(radians), }) } break case "line": const x1 = Number.parseFloat(element.getAttribute("x1") || "0") const y1 = Number.parseFloat(element.getAttribute("y1") || "0") const x2 = Number.parseFloat(element.getAttribute("x2") || "0") const y2 = Number.parseFloat(element.getAttribute("y2") || "0") points.push({ x: x1, y: y1 }) points.push({ x: x2, y: y2 }) break case "polyline": case "polygon": const pointsAttr = element.getAttribute("points") || "" const pointPairs = pointsAttr.trim().split(/\s+|,/) for (let i = 0; i < pointPairs.length; i += 2) { if (i + 1 < pointPairs.length) { points.push({ x: Number.parseFloat(pointPairs[i]), y: Number.parseFloat(pointPairs[i + 1]), }) } } // Close the polygon if needed if (tagName === "polygon" && points.length > 0) { points.push({ ...points[0] }) } break } return points } /** * Extracts points from an SVG path */ function extractPointsFromPath(pathData: string, viewBox: number[]): { x: number; y: number }[] { if (!pathData) return [] const points: { x: number; y: number }[] = [] let currentX = 0 let currentY = 0 // Simple path parser for common commands // This is a simplified version and doesn't handle all SVG path commands perfectly const commands = pathData.match(/[a-zA-Z][^a-zA-Z]*/g) || [] for (const cmd of commands) { const type = cmd[0] const args = cmd .slice(1) .trim() .split(/[\s,]+/) .map(Number.parseFloat) switch (type) { case "M": // Move to (absolute) if (args.length >= 2) { currentX = args[0] currentY = args[1] points.push({ x: currentX, y: currentY }) // Handle multiple coordinate pairs for (let i = 2; i < args.length; i += 2) { if (i + 1 < args.length) { currentX = args[i] currentY = args[i + 1] points.push({ x: currentX, y: currentY }) } } } break case "m": // Move to (relative) if (args.length >= 2) { currentX += args[0] currentY += args[1] points.push({ x: currentX, y: currentY }) // Handle multiple coordinate pairs for (let i = 2; i < args.length; i += 2) { if (i + 1 < args.length) { currentX += args[i] currentY += args[i + 1] points.push({ x: currentX, y: currentY }) } } } break case "L": // Line to (absolute) for (let i = 0; i < args.length; i += 2) { if (i + 1 < args.length) { currentX = args[i] currentY = args[i + 1] points.push({ x: currentX, y: currentY }) } } break case "l": // Line to (relative) for (let i = 0; i < args.length; i += 2) { if (i + 1 < args.length) { currentX += args[i] currentY += args[i + 1] points.push({ x: currentX, y: currentY }) } } break case "H": // Horizontal line (absolute) for (const x of args) { currentX = x points.push({ x: currentX, y: currentY }) } break case "h": // Horizontal line (relative) for (const x of args) { currentX += x points.push({ x: currentX, y: currentY }) } break case "V": // Vertical line (absolute) for (const y of args) { currentY = y points.push({ x: currentX, y: currentY }) } break case "v": // Vertical line (relative) for (const y of args) { currentY += y points.push({ x: currentX, y: currentY }) } break case "Z": case "z": // Close path if (points.length > 0) { const firstPoint = points[0] if (currentX !== firstPoint.x || currentY !== firstPoint.y) { currentX = firstPoint.x currentY = firstPoint.y points.push({ x: currentX, y: currentY }) } } break // For curves (C, c, S, s, Q, q, T, t, A, a), we'll approximate with line segments // This is a simplification - a real implementation would calculate points along the curve case "C": // Cubic Bezier (absolute) if (args.length >= 6) { // End point of the curve currentX = args[4] currentY = args[5] points.push({ x: currentX, y: currentY }) } break case "c": // Cubic Bezier (relative) if (args.length >= 6) { // End point of the curve currentX += args[4] currentY += args[5] points.push({ x: currentX, y: currentY }) } break case "S": // Smooth cubic Bezier (absolute) if (args.length >= 4) { // End point of the curve currentX = args[2] currentY = args[3] points.push({ x: currentX, y: currentY }) } break case "s": // Smooth cubic Bezier (relative) if (args.length >= 4) { // End point of the curve currentX += args[2] currentY += args[3] points.push({ x: currentX, y: currentY }) } break case "Q": // Quadratic Bezier (absolute) if (args.length >= 4) { // End point of the curve currentX = args[2] currentY = args[3] points.push({ x: currentX, y: currentY }) } break case "q": // Quadratic Bezier (relative) if (args.length >= 4) { // End point of the curve currentX += args[2] currentY += args[3] points.push({ x: currentX, y: currentY }) } break case "T": // Smooth quadratic Bezier (absolute) if (args.length >= 2) { // End point of the curve currentX = args[0] currentY = args[1] points.push({ x: currentX, y: currentY }) } break case "t": // Smooth quadratic Bezier (relative) if (args.length >= 2) { // End point of the curve currentX += args[0] currentY += args[1] points.push({ x: currentX, y: currentY }) } break case "A": // Elliptical arc (absolute) if (args.length >= 7) { // End point of the arc currentX = args[5] currentY = args[6] points.push({ x: currentX, y: currentY }) } break case "a": // Elliptical arc (relative) if (args.length >= 7) { // End point of the arc currentX += args[5] currentY += args[6] points.push({ x: currentX, y: currentY }) } break } } return points } [V0_FILE]typescriptreact:file="lib/dst-parser.ts" isFixed="true" isEdit="true" isQuickEdit="true" interface StitchPoint { x: number y: number jump: boolean } /** * Parses DST data to extract stitch points */ export function parseDstData(dstData: string): StitchPoint[] { // In a real implementation, this would parse the actual DST binary data // For now, we'll retrieve the stitch points we stored in localStorage try { const storedPoints = localStorage.getItem("stitchPoints") if (storedPoints) { return JSON.parse(storedPoints) } } catch (error) { console.error("Error parsing stitch points:", error) } // Fallback to a simple pattern if no stitch points are found return generateFallbackPattern() } /** * Generates a fallback pattern if no stitch points are available */ function generateFallbackPattern(): StitchPoint[] { const stitchPoints: StitchPoint[] = [] const centerX = 0 const centerY = 0 const size = 100 // Create a square stitchPoints.push({ x: centerX - size / 2, y: centerY - size / 2, jump: true }) stitchPoints.push({ x: centerX + size / 2, y: centerY - size / 2, jump: false }) stitchPoints.push({ x: centerX + size / 2, y: centerY + size / 2, jump: false }) stitchPoints.push({ x: centerX - size / 2, y: centerY + size / 2, jump: false }) stitchPoints.push({ x: centerX - size / 2, y: centerY - size / 2, jump: false }) // Add diagonals stitchPoints.push({ x: centerX - size / 2, y: centerY - size / 2, jump: true }) stitchPoints.push({ x: centerX + size / 2, y: centerY + size / 2, jump: false }) stitchPoints.push({ x: centerX + size / 2, y: centerY - size / 2, jump: true }) stitchPoints.push({ x: centerX - size / 2, y: centerY + size / 2, jump: false }) return stitchPoints } [V0_FILE]typescriptreact:file="components/dst-preview.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" import { parseDstData } from "@/lib/dst-parser" interface DstPreviewProps { dstData: string | null } export function DstPreview({ dstData }: DstPreviewProps) { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current || !dstData) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Parse the DST data to get stitch points const stitchPoints = parseDstData(dstData) // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // If no stitch points, show a message if (stitchPoints.length === 0) { ctx.font = "14px Arial" ctx.fillStyle = "#666" ctx.textAlign = "center" ctx.fillText("No stitch data available", canvas.width / 2, canvas.height / 2) return } // Find the bounds of the stitch points let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY for (const point of stitchPoints) { minX = Math.min(minX, point.x) minY = Math.min(minY, point.y) maxX = Math.max(maxX, point.x) maxY = Math.max(maxY, point.y) } // Calculate scale to fit the canvas const width = maxX - minX || 1 const height = maxY - minY || 1 const padding = 20 const scaleX = (canvas.width - padding * 2) / width const scaleY = (canvas.height - padding * 2) / height const scale = Math.min(scaleX, scaleY) // Calculate offset to center the design const offsetX = padding + (canvas.width - padding * 2 - width * scale) / 2 - minX * scale const offsetY = padding + (canvas.height - padding * 2 - height * scale) / 2 - minY * scale // Draw the stitch points ctx.lineWidth = 1 const isFirstPoint = true let currentPath: StitchPoint[] = [] // Group stitches by jumps for (let i = 0; i < stitchPoints.length; i++) { const point = stitchPoints[i] if (point.jump && currentPath.length > 0) { // Draw the current path drawStitchPath(ctx, currentPath, scale, offsetX, offsetY) currentPath = [point] } else { currentPath.push(point) } } // Draw the last path if (currentPath.length > 0) { drawStitchPath(ctx, currentPath, scale, offsetX, offsetY) } // Draw points at each stitch ctx.fillStyle = "#007bff" for (const point of stitchPoints) { const x = point.x * scale + offsetX const y = point.y * scale + offsetY ctx.beginPath() ctx.arc(x, y, 1.5, 0, Math.PI * 2) ctx.fill() } // Draw a legend ctx.font = "12px Arial" ctx.fillStyle = "#333" ctx.fillText("● Stitch Points", 10, canvas.height - 30) ctx.strokeStyle = "#333" ctx.beginPath() ctx.moveTo(10, canvas.height - 15) ctx.lineTo(50, canvas.height - 15) ctx.stroke() ctx.fillText("Normal Stitches", 60, canvas.height - 12) ctx.strokeStyle = "#ff6b6b" ctx.setLineDash([3, 3]) ctx.beginPath() ctx.moveTo(150, canvas.height - 15) ctx.lineTo(190, canvas.height - 15) ctx.stroke() ctx.setLineDash([]) ctx.fillText("Jump Stitches", 200, canvas.height - 12) }, [dstData]) return (

) } interface StitchPoint { x: number y: number jump: boolean } /** * Draws a path of stitches */ function drawStitchPath( ctx: CanvasRenderingContext2D, path: StitchPoint[], scale: number, offsetX: number, offsetY: number, ) { if (path.length < 2) return const isJump = path[0].jump ctx.strokeStyle = isJump ? "#ff6b6b" : "#333" ctx.setLineDash(isJump ? [3, 3] : []) ctx.beginPath() const firstPoint = path[0] ctx.moveTo(firstPoint.x * scale + offsetX, firstPoint.y * scale + offsetY) for (let i = 1; i < path.length; i++) { const point = path[i] ctx.lineTo(point.x * scale + offsetX, point.y * scale + offsetY) } ctx.stroke() ctx.setLineDash([]) } [V0_FILE]typescriptreact:file="components/converter.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { FileUploader } from "./file-uploader" import { ProgressBar } from "./progress-bar" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Download, RefreshCw, Info } from "lucide-react" import { convertSvgToDst } from "@/lib/converter" import { SvgPreview } from "./svg-preview" import { DstPreview } from "./dst-preview" export function Converter() { const [file, setFile] = useState(null) const [svgContent, setSvgContent] = useState(null) const [progress, setProgress] = useState(0) const [converting, setConverting] = useState(false) const [completed, setCompleted] = useState(false) const [dstData, setDstData] = useState(null) const [error, setError] = useState(null) const [conversionDetails, setConversionDetails] = useState([]) // Handle file upload const handleFileChange = (uploadedFile: File | null) => { setFile(uploadedFile) setCompleted(false) setDstData(null) setError(null) setProgress(0) setConversionDetails([]) if (uploadedFile) { const reader = new FileReader() reader.onload = (e) => { const content = e.target?.result as string setSvgContent(content) } reader.readAsText(uploadedFile) } else { setSvgContent(null) } } // Start conversion process const handleConvert = async () => { if (!svgContent) return setConverting(true) setCompleted(false) setProgress(0) setError(null) setConversionDetails([]) try { // Log conversion steps const details: string[] = [] // Parse SVG to get basic info const parser = new DOMParser() const svgDoc = parser.parseFromString(svgContent, "image/svg+xml") const paths = svgDoc.querySelectorAll("path, rect, circle, ellipse, line, polyline, polygon") details.push(`Found ${paths.length} shapes/paths in the SVG`) // Simulate conversion with progress updates const result = await convertSvgToDst(svgContent, (progress) => { setProgress(progress) }) // Get stitch points count let stitchPoints = [] try { const storedPoints = localStorage.getItem("stitchPoints") if (storedPoints) { stitchPoints = JSON.parse(storedPoints) details.push(`Generated ${stitchPoints.length} stitch points`) // Count jumps const jumps = stitchPoints.filter((p) => p.jump).length details.push(`Created ${jumps} jump stitches`) } } catch (error) { console.error("Error parsing stitch points:", error) } setConversionDetails(details) setDstData(result) setCompleted(true) // Save to localStorage localStorage.setItem("lastConvertedSvg", svgContent) localStorage.setItem("lastConvertedDst", result) } catch (err) { setError(err instanceof Error ? err.message : "An unknown error occurred") } finally { setConverting(false) } } // Handle download const handleDownload = () => { if (!dstData || !file) return const blob = new Blob([dstData], { type: "application/octet-stream" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `${file.name.replace(/\.[^/.]+$/, "")}.dst` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } // Check localStorage for previous conversion useEffect(() => { const savedSvg = localStorage.getItem("lastConvertedSvg") const savedDst = localStorage.getItem("lastConvertedDst") if (savedSvg && savedDst) { setSvgContent(savedSvg) setDstData(savedDst) setCompleted(true) } }, []) return (

{svgContent && (

SVG Preview

)} {svgContent && (

Conversion

{completed && ( )}

{error &&

Error: {error}

} {completed &&

Conversion completed successfully!

} {conversionDetails.length > 0 && (

Conversion Details

{detail}

)} )} {completed && dstData && (

DST Preview

)}

) }