Spaces:
Running
<!DOCTYPE html>
Browse files<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plasma CNC Controller</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/opencv-js@1.2.1/opencv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/potrace@2.1.8/dist/potrace.min.js"></script>
<style>
canvas {
border: 1px solid #ccc;
max-width: 100%;
}
.jog-btn {
width: 60px;
height: 60px;
font-size: 24px;
}
.jog-center {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
#processingIndicator {
display: none;
}
.processing #processingIndicator {
display: block;
}
#vectorPreview {
background-color: #f0f0f0;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-6xl mx-auto">
<h1 class="text-3xl font-bold text-center mb-6">Plasma CNC Controller</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column: Image Processing -->
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4">Image Processing</h2>
<div class="mb-4">
<label class="block mb-2">Upload Image</label>
<input type="file" id="imageUpload" accept="image/*" class="w-full p-2 border rounded">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block mb-1">Threshold</label>
<input type="range" id="threshold" min="0" max="255" value="128" class="w-full">
<span id="thresholdValue">128</span>
</div>
<div>
<label class="block mb-1">Detail</label>
<input type="range" id="detail" min="1" max="10" value="5" class="w-full">
<span id="detailValue">5</span>
</div>
<div>
<label class="block mb-1">Contrast</label>
<input type="range" id="contrast" min="-100" max="100" value="0" class="w-full">
<span id="contrastValue">0</span>
</div>
<div>
<label class="block mb-1">Simplify</label>
<input type="range" id="simplify" min="0" max="100" value="50" class="w-full">
<span id="simplifyValue">50</span>
</div>
</div>
<div class="mb-4">
<button id="processBtn" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
Process Image
</button>
</div>
<div class="relative">
<canvas id="imageCanvas" width="400" height="400"></canvas>
<div id="processingIndicator" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white">
Processing...
</div>
</div>
</div>
<!-- Middle Column: Vector Preview -->
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4">Vector Preview</h2>
<div class="mb-4">
<label class="block mb-1">Pierce Delay (ms)</label>
<input type="number" id="pierceDelay" min="0" max="10000" value="2000" class="w-full p-2 border rounded">
</div>
<div class="mb-4">
<label class="block mb-1">Cutting Speed (mm/min)</label>
<input type="number" id="cuttingSpeed" min="100" max="5000" value="1000" class="w-full p-2 border rounded">
</div>
<div class="mb-4">
<label class="block mb-1">Torch Height (mm)</label>
<input type="number" id="torchHeight" min="1" max="50" value="3" class="w-full p-2 border rounded">
</div>
<canvas id="vectorPreview" width="400" height="400"></canvas>
<div class="mt-4">
<button id="generateGcodeBtn" class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
Generate G-code
</button>
</div>
</div>
<!-- Right Column: Machine Control -->
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4">Machine Control</h2>
<div class="mb-6">
<div class="grid grid-cols-3 gap-2 place-items-center mb-2">
<div></div>
<button id="jogYPlus" class="jog-btn bg-gray-200 rounded hover:bg-gray-300">↑</button>
<div></div>
<button id="jogXMinus" class="jog-btn bg-gray-200 rounded hover:bg-gray-300">←</button>
<div class="jog-center">X/Y</div>
<button id="jogXPlus" class="jog-btn bg-gray-200 rounded hover:bg-gray-300">→</button>
<div></div>
<button id="jogYMinus" class="jog-btn bg-gray-200 rounded hover:bg-gray-300">↓</button>
<div></div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block mb-1">Jog Speed (mm/min)</label>
<input type="number" id="jogSpeed" min="100" max="5000" value="1000" class="w-full p-2 border rounded">
</div>
<div>
<label class="block mb-1">Jog Step (mm)</label>
<input type="number" id="jogStep" min="0.1" max="100" step="0.1" value="1" class="w-full p-2 border rounded">
</div>
</div>
</div>
<div class="mb-4">
<button id="connectBtn" class="w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700">
Connect to Machine
</button>
</div>
<div class="mb-4">
<label class="block mb-1">Manual G-code</label>
<input type="text" id="manualGcode" class="w-full p-2 border rounded mb-2" placeholder="Enter G-code command">
<button id="sendGcodeBtn" class="w-full bg-gray-600 text-white py-2 rounded hover:bg-gray-700">
Send Command
</button>
</div>
<div class="mb-4">
<label class="block mb-1">G-code Output</label>
<textarea id="gcodeOutput" class="w-full h-32 p-2 border rounded" readonly></textarea>
</div>
<div class="grid grid-cols-2 gap-2">
<button id="sendToMachineBtn" class="bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
Send to Machine
</button>
<button id="downloadGcodeBtn" class="bg-green-600 text-white py-2 rounded hover:bg-green-700">
Download G-code
</button>
</div>
</div>
</div>
</div>
<script>
// DOM elements
const imageUpload = document.getElementById('imageUpload');
const imageCanvas = document.getElementById('imageCanvas');
const vectorPreview = document.getElementById('vectorPreview');
const processBtn = document.getElementById('processBtn');
const generateGcodeBtn = document.getElementById('generateGcodeBtn');
const threshold = document.getElementById('threshold');
const detail = document.getElementById('detail');
const contrast = document.getElementById('contrast');
const simplify = document.getElementById('simplify');
const thresholdValue = document.getElementById('thresholdValue');
const detailValue = document.getElementById('detailValue');
const contrastValue = document.getElementById('contrastValue');
const simplifyValue = document.getElementById('simplifyValue');
const pierceDelay = document.getElementById('pierceDelay');
const cuttingSpeed = document.getElementById('cuttingSpeed');
const torchHeight = document.getElementById('torchHeight');
const jogXPlus = document.getElementById('jogXPlus');
const jogXMinus = document.getElementById('jogXMinus');
const jogYPlus = document.getElementById('jogYPlus');
const jogYMinus = document.getElementById('jogYMinus');
const jogSpeed = document.getElementById('jogSpeed');
const jogStep = document.getElementById('jogStep');
const connectBtn = document.getElementById('connectBtn');
const manualGcode = document.getElementById('manualGcode');
const sendGcodeBtn = document.getElementById('sendGcodeBtn');
const gcodeOutput = document.getElementById('gcodeOutput');
const sendToMachineBtn = document.getElementById('sendToMachineBtn');
const downloadGcodeBtn = document.getElementById('downloadGcodeBtn');
// State variables
let originalImage = null;
let processedImage = null;
let vectorPaths = [];
let serialPort = null;
let serialWriter = null;
let isConnected = false;
/
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: DeepSite Project
|
| 3 |
+
colorFrom: yellow
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|