npm - circuit-json-to-lbrn - Versions diffs - 0.0.2 → 0.0.3 - Mend

circuit-json-to-lbrn 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

@@ -1,9 +1,11 @@
 {
   "name": "circuit-json-to-lbrn",
   "main": "dist/index.js",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
+    "start": "bun run site/index.html",
+    "build:site": "bun build site/index.html --outdir site-dist",
     "build": "tsup-node ./lib/index.ts --dts --format esm",
     "format": "biome format --write .",
     "format:check": "biome format ."

package/site/index.html CHANGED Viewed

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Circuit JSON to LBRN Converter</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      .spinner {
+        animation: spin 1s linear infinite;
+      }
+      .svg-container svg {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-900 text-white min-h-screen p-8">
+    <div class="max-w-7xl mx-auto">
+      <h1 class="text-4xl font-bold mb-2 text-blue-400">
+        Circuit JSON to LBRN Converter
+      </h1>
+      <p class="text-gray-400 mb-8 text-lg">
+        Convert your circuit designs to LightBurn format
+      </p>
+      <div id="errorMessage" class="hidden bg-red-500 text-white p-4 rounded-lg mb-4"></div>
+      <div
+        id="dropArea"
+        class="border-3 border-dashed border-blue-500 rounded-xl p-12 text-center cursor-pointer transition-all bg-gray-800 hover:bg-gray-750 hover:border-blue-400 hover:scale-[1.01] mb-6"
+      >
+        <div class="text-5xl mb-4">📁</div>
+        <div class="text-xl text-gray-300 mb-2">
+          Drop your Circuit JSON file here or click to browse
+        </div>
+        <div class="text-sm text-gray-500">Supports .json files</div>
+        <input
+          type="file"
+          id="fileInput"
+          class="hidden"
+          accept=".json,application/json"
+        />
+      </div>
+      <div id="loading" class="hidden text-center py-8">
+        <div
+          class="spinner border-4 border-gray-700 border-t-blue-500 rounded-full w-10 h-10 mx-auto mb-4"
+        ></div>
+        <div>Processing your file...</div>
+      </div>
+      <div id="optionsContainer" class="hidden bg-gray-800 rounded-lg p-6 mb-6">
+        <h3 class="text-lg font-semibold mb-4 text-blue-400">Conversion Options</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">
+              Origin X (mm)
+            </label>
+            <input
+              type="number"
+              id="originX"
+              value="0"
+              step="0.1"
+              class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">
+              Origin Y (mm)
+            </label>
+            <input
+              type="number"
+              id="originY"
+              value="0"
+              step="0.1"
+              class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div class="md:col-span-2">
+            <label class="flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                id="includeSilkscreen"
+                class="w-5 h-5 text-blue-500 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
+              />
+              <span class="ml-3 text-sm font-medium text-gray-300">
+                Include Silkscreen Layer
+              </span>
+            </label>
+          </div>
+        </div>
+        <button
+          id="reconvertBtn"
+          class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"
+        >
+          Apply Changes
+        </button>
+      </div>
+      <div class="flex gap-4 items-center mb-6">
+        <button
+          id="downloadBtn"
+          disabled
+          class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white px-6 py-3 rounded-lg font-semibold transition-all disabled:opacity-50 flex items-center gap-2"
+        >
+          <span>⬇</span>
+          <span>Download LBRN File</span>
+        </button>
+      </div>
+      <div id="previewContainer" class="hidden grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+          <h3 class="text-lg font-semibold mb-4 text-blue-400">
+            Circuit JSON Preview
+          </h3>
+          <div
+            id="circuitSvgContainer"
+            class="svg-container bg-white rounded-lg p-4 h-[500px] flex items-center justify-center overflow-auto"
+          >
+            <div class="text-gray-400">No file loaded</div>
+          </div>
+        </div>
+        <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+          <h3 class="text-lg font-semibold mb-4 text-blue-400">LBRN Preview</h3>
+          <div
+            id="lbrnSvgContainer"
+            class="svg-container bg-white rounded-lg p-4 h-[500px] flex items-center justify-center overflow-auto"
+          >
+            <div class="text-gray-400">No file loaded</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/site/main.tsx CHANGED Viewed

@@ -0,0 +1,220 @@
+import { convertCircuitJsonToLbrn } from "../lib/index.ts"
+import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
+import { generateLightBurnSvg } from "lbrnts"
+import type { CircuitJson } from "circuit-json"
+// Global state
+let currentLbrnProject: any = null
+let currentCircuitJson: CircuitJson | null = null
+// Get DOM elements
+const dropArea = document.getElementById("dropArea") as HTMLDivElement
+const fileInput = document.getElementById("fileInput") as HTMLInputElement
+const downloadBtn = document.getElementById("downloadBtn") as HTMLButtonElement
+const previewContainer = document.getElementById(
+  "previewContainer",
+) as HTMLDivElement
+const circuitSvgContainer = document.getElementById(
+  "circuitSvgContainer",
+) as HTMLDivElement
+const lbrnSvgContainer = document.getElementById(
+  "lbrnSvgContainer",
+) as HTMLDivElement
+const errorMessage = document.getElementById("errorMessage") as HTMLDivElement
+const loading = document.getElementById("loading") as HTMLDivElement
+const optionsContainer = document.getElementById(
+  "optionsContainer",
+) as HTMLDivElement
+const originXInput = document.getElementById("originX") as HTMLInputElement
+const originYInput = document.getElementById("originY") as HTMLInputElement
+const includeSilkscreenInput = document.getElementById(
+  "includeSilkscreen",
+) as HTMLInputElement
+const reconvertBtn = document.getElementById("reconvertBtn") as HTMLButtonElement
+// Show error message
+function showError(message: string) {
+  errorMessage.textContent = message
+  errorMessage.classList.remove("hidden")
+  setTimeout(() => {
+    errorMessage.classList.add("hidden")
+  }, 5000)
+}
+// Show loading state
+function showLoading(show: boolean) {
+  if (show) {
+    loading.classList.remove("hidden")
+    previewContainer.classList.add("hidden")
+    downloadBtn.disabled = true
+  } else {
+    loading.classList.add("hidden")
+  }
+}
+// Get conversion options from UI
+function getConversionOptions() {
+  return {
+    includeSilkscreen: includeSilkscreenInput.checked,
+    origin: {
+      x: parseFloat(originXInput.value) || 0,
+      y: parseFloat(originYInput.value) || 0,
+    },
+  }
+}
+// Process the uploaded file
+async function processFile(file: File) {
+  try {
+    showLoading(true)
+    errorMessage.classList.add("hidden")
+    // Read the file
+    const fileContent = await file.text()
+    const circuitJson: CircuitJson = JSON.parse(fileContent)
+    currentCircuitJson = circuitJson
+    // Show options container
+    optionsContainer.classList.remove("hidden")
+    // Convert to LBRN with options
+    await convertAndDisplay()
+  } catch (error) {
+    showLoading(false)
+    console.error("Error processing file:", error)
+    showError(`Error processing file: ${error.message || "Unknown error"}`)
+  }
+}
+// Convert circuit JSON to LBRN and display previews
+async function convertAndDisplay() {
+  if (!currentCircuitJson) return
+  try {
+    showLoading(true)
+    const options = getConversionOptions()
+    // Apply origin offset to circuit JSON if needed
+    let processedCircuitJson = currentCircuitJson
+    if (options.origin.x !== 0 || options.origin.y !== 0) {
+      processedCircuitJson = JSON.parse(JSON.stringify(currentCircuitJson))
+      // Apply offset to all elements with x/y coordinates
+      for (const element of processedCircuitJson as any[]) {
+        if (element.center) {
+          element.center.x += options.origin.x
+          element.center.y += options.origin.y
+        }
+        if (element.x !== undefined) {
+          element.x += options.origin.x
+        }
+        if (element.y !== undefined) {
+          element.y += options.origin.y
+        }
+        if (element.route) {
+          for (const point of element.route) {
+            if (point.x !== undefined) point.x += options.origin.x
+            if (point.y !== undefined) point.y += options.origin.y
+          }
+        }
+      }
+    }
+    // Convert to LBRN
+    console.log("Converting to LBRN with options:", options)
+    currentLbrnProject = convertCircuitJsonToLbrn(processedCircuitJson, {
+      includeSilkscreen: options.includeSilkscreen,
+    })
+    // Generate SVGs
+    console.log("Generating Circuit JSON SVG...")
+    const circuitSvg = await convertCircuitJsonToPcbSvg(processedCircuitJson)
+    console.log("Generating LBRN SVG...")
+    const lbrnSvg = await generateLightBurnSvg(currentLbrnProject)
+    // Display SVGs
+    circuitSvgContainer.innerHTML = circuitSvg
+    lbrnSvgContainer.innerHTML = lbrnSvg
+    // Show preview and enable download
+    previewContainer.classList.remove("hidden")
+    downloadBtn.disabled = false
+    showLoading(false)
+    console.log("Conversion complete!")
+  } catch (error) {
+    showLoading(false)
+    console.error("Error converting:", error)
+    showError(`Error converting: ${error.message || "Unknown error"}`)
+  }
+}
+// Handle file selection
+fileInput.addEventListener("change", (e) => {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (file) {
+    processFile(file)
+  }
+})
+// Handle drop area click
+dropArea.addEventListener("click", () => {
+  fileInput.click()
+})
+// Handle drag and drop
+dropArea.addEventListener("dragover", (e) => {
+  e.preventDefault()
+  dropArea.classList.add("border-blue-400")
+})
+dropArea.addEventListener("dragleave", () => {
+  dropArea.classList.remove("border-blue-400")
+})
+dropArea.addEventListener("drop", (e) => {
+  e.preventDefault()
+  dropArea.classList.remove("border-blue-400")
+  const file = e.dataTransfer?.files?.[0]
+  if (file) {
+    if (file.type === "application/json" || file.name.endsWith(".json")) {
+      processFile(file)
+    } else {
+      showError("Please upload a JSON file")
+    }
+  }
+})
+// Handle reconvert button
+reconvertBtn.addEventListener("click", () => {
+  convertAndDisplay()
+})
+// Handle download button
+downloadBtn.addEventListener("click", () => {
+  if (!currentLbrnProject) {
+    showError("No LBRN project to download")
+    return
+  }
+  try {
+    const lbrnString = currentLbrnProject.getString()
+    const blob = new Blob([lbrnString], { type: "application/xml" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "circuit.lbrn2"
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error("Error downloading file:", error)
+    showError(`Error downloading file: ${error.message || "Unknown error"}`)
+  }
+})
+console.log("Circuit JSON to LBRN Converter loaded!")

package/tsconfig.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",