| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bantam Tools NextDraw - Adobe Illustrator Extension</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --bantam-blue: #0066ff; |
| --bantam-dark: #2d3748; |
| --bantam-light: #f7fafc; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
| |
| .pulse-animation { |
| animation: pulse 1.5s ease-in-out infinite; |
| } |
| |
| .progress-gradient { |
| background: linear-gradient(90deg, var(--bantam-blue) 0%, #00ccff 100%); |
| } |
| |
| .tooltip { |
| position: relative; |
| } |
| |
| .tooltip:hover .tooltip-content { |
| visibility: visible; |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .tooltip-content { |
| visibility: hidden; |
| position: absolute; |
| z-index: 50; |
| bottom: 100%; |
| left: 50%; |
| transform: translateY(5px) translateX(-50%); |
| background-color: var(--bantam-dark); |
| color: white; |
| padding: 6px 10px; |
| border-radius: 4px; |
| font-size: 12px; |
| white-space: nowrap; |
| opacity: 0; |
| transition: all 0.2s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .slider-thumb::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background: var(--bantam-blue); |
| cursor: pointer; |
| border: 2px solid white; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| } |
| |
| .tab-content { |
| display: none; |
| animation: fadeIn 0.3s ease-out; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(5px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .machine-bed { |
| background-image: |
| linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); |
| background-size: 20px 20px; |
| } |
| |
| .pen-path { |
| stroke: var(--bantam-blue); |
| stroke-width: 2; |
| fill: none; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans text-gray-800"> |
| <div class="container mx-auto p-4 max-w-6xl"> |
| |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> |
| <div class="flex items-center"> |
| <img src="https://bantamtools.com/wp-content/uploads/2019/12/bantam-logo.svg" alt="Bantam Tools" class="h-10 mr-3"> |
| <div> |
| <h1 class="text-2xl font-bold text-gray-800">NextDraw Control Panel</h1> |
| <p class="text-sm text-gray-500">Adobe Illustrator Extension</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div id="connectionStatus" class="flex items-center px-4 py-2 rounded-lg bg-green-50 border border-green-200"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-sm font-medium text-gray-700">Connected to Bantam Tools NextDraw</span> |
| <span class="ml-2 text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">v2.1.4</span> |
| </div> |
| |
| <div class="flex space-x-2"> |
| <button id="settingsBtn" class="p-2 rounded-full hover:bg-gray-200 transition tooltip"> |
| <i class="fas fa-cog text-gray-600"></i> |
| <span class="tooltip-content">Settings</span> |
| </button> |
| <button id="helpBtn" class="p-2 rounded-full hover:bg-gray-200 transition tooltip"> |
| <i class="fas fa-question-circle text-gray-600"></i> |
| <span class="tooltip-content">Help & Documentation</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex overflow-x-auto border-b border-gray-200 mb-6 scrollbar-hide"> |
| <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="control"> |
| <i class="fas fa-sliders-h mr-2"></i> Control |
| </button> |
| <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="pen"> |
| <i class="fas fa-pen-nib mr-2"></i> Pen Settings |
| </button> |
| <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="walkhome"> |
| <i class="fas fa-home mr-2"></i> Walk Home |
| </button> |
| <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="preview"> |
| <i class="fas fa-eye mr-2"></i> Preview |
| </button> |
| <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="stats"> |
| <i class="fas fa-chart-bar mr-2"></i> Statistics |
| </button> |
| <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="advanced"> |
| <i class="fas fa-cogs mr-2"></i> Advanced |
| </button> |
| </div> |
|
|
| |
| <div id="control" class="tab-content active"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <div class="flex justify-between items-center mb-3"> |
| <h3 class="font-medium text-gray-800">Job Progress</h3> |
| <div class="flex items-center"> |
| <span id="progressPercent" class="text-sm font-medium text-blue-600 mr-2">0%</span> |
| <span id="timeRemaining" class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded">--:--:-- remaining</span> |
| </div> |
| </div> |
| |
| <div class="w-full bg-gray-100 rounded-full h-3 mb-2"> |
| <div id="progressBar" class="progress-gradient h-3 rounded-full" style="width: 0%"></div> |
| </div> |
| |
| <div class="grid grid-cols-3 gap-4 text-center mt-4"> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Time Elapsed</p> |
| <p id="timeElapsed" class="text-lg font-semibold">00:00:00</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Distance Done</p> |
| <p id="distanceDone" class="text-lg font-semibold">0.0 m</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Distance Left</p> |
| <p id="distanceLeft" class="text-lg font-semibold">12.5 m</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Plotter Controls</h3> |
| |
| <div class="flex flex-wrap justify-center gap-4"> |
| <button id="playBtn" class="flex flex-col items-center justify-center w-24 h-24 rounded-2xl bg-green-500 text-white hover:bg-green-600 transition tooltip"> |
| <i class="fas fa-play text-2xl mb-1"></i> |
| <span class="text-xs">Start</span> |
| <span class="tooltip-content">Start plotting (Ctrl+P)</span> |
| </button> |
| |
| <button id="pauseBtn" class="flex flex-col items-center justify-center w-24 h-24 rounded-2xl bg-yellow-500 text-white hover:bg-yellow-600 transition tooltip"> |
| <i class="fas fa-pause text-2xl mb-1"></i> |
| <span class="text-xs">Pause</span> |
| <span class="tooltip-content">Pause plotting (Space)</span> |
| </button> |
| |
| <button id="stopBtn" class="flex flex-col items-center justify-center w-24 h-24 rounded-2xl bg-red-500 text-white hover:bg-red-600 transition tooltip"> |
| <i class="fas fa-stop text-2xl mb-1"></i> |
| <span class="text-xs">Stop</span> |
| <span class="tooltip-content">Stop plotting (Esc)</span> |
| </button> |
| |
| <button id="safePauseBtn" class="flex flex-col items-center justify-center w-24 h-24 rounded-2xl bg-purple-500 text-white hover:bg-purple-600 transition tooltip"> |
| <i class="fas fa-hand-paper text-2xl mb-1"></i> |
| <span class="text-xs">Safe Pause</span> |
| <span class="tooltip-content">Lift pen and pause (Shift+Space)</span> |
| </button> |
| |
| <button id="penUpBtn" class="flex flex-col items-center justify-center w-24 h-24 rounded-2xl bg-blue-500 text-white hover:bg-blue-600 transition tooltip"> |
| <i class="fas fa-arrow-up text-2xl mb-1"></i> |
| <span class="text-xs">Pen Up</span> |
| <span class="tooltip-content">Lift pen (U)</span> |
| </button> |
| |
| <button id="penDownBtn" class="flex flex-col items-center justify-center w-24 h-24 rounded-2xl bg-blue-500 text-white hover:bg-blue-600 transition tooltip"> |
| <i class="fas fa-arrow-down text-2xl mb-1"></i> |
| <span class="text-xs">Pen Down</span> |
| <span class="tooltip-content">Lower pen (D)</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Job Information</h3> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">File Name</p> |
| <p id="fileName" class="text-sm font-medium truncate">Current_Design.ai</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Document Size</p> |
| <p id="fileDimensions" class="text-sm font-medium">210 × 297 mm (A4)</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Total Distance</p> |
| <p id="totalDistance" class="text-sm font-medium">12.5 meters</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Estimated Time</p> |
| <p id="estimatedTime" class="text-sm font-medium">45 minutes</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Layers to Plot</p> |
| <p id="layersToPlot" class="text-sm font-medium">3 layers</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Pen Used</p> |
| <p id="penUsed" class="text-sm font-medium">Sakura Pigma 0.5</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Real-time Statistics</h3> |
| |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>Current Speed</span> |
| <span id="currentSpeedValue">0 mm/s</span> |
| </div> |
| <div class="w-full bg-gray-100 rounded-full h-2"> |
| <div id="speedBar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>Pen Pressure</span> |
| <span id="penPressureValue">0 g</span> |
| </div> |
| <div class="w-full bg-gray-100 rounded-full h-2"> |
| <div id="pressureBar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4 pt-2"> |
| <div class="text-center p-2 bg-blue-50 rounded-lg"> |
| <p class="text-xs text-gray-500">Pen Up Speed</p> |
| <p id="penUpSpeedValue" class="text-lg font-semibold text-blue-600">20 mm/s</p> |
| </div> |
| <div class="text-center p-2 bg-blue-50 rounded-lg"> |
| <p class="text-xs text-gray-500">Pen Down Speed</p> |
| <p id="penDownSpeedValue" class="text-lg font-semibold text-blue-600">10 mm/s</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-3">Layer Controls</h3> |
| |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| <span class="text-sm">Outline Layer</span> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" checked class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-sm">Details Layer</span> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" checked class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> |
| <span class="text-sm">Annotations</span> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mt-4 pt-3 border-t border-gray-100"> |
| <button id="selectLayersBtn" class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition"> |
| <i class="fas fa-layer-group mr-2"></i> Select Layers to Plot |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-3">Quick Actions</h3> |
| |
| <div class="grid grid-cols-2 gap-2"> |
| <button id="testSquareBtn" class="py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-square mr-2"></i> Test Square |
| </button> |
| <button id="testCircleBtn" class="py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-circle mr-2"></i> Test Circle |
| </button> |
| <button id="testLineBtn" class="py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-slash mr-2"></i> Test Line |
| </button> |
| <button id="testTextBtn" class="py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-font mr-2"></i> Test Text |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="pen" class="tab-content"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Pen Configuration</h3> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div> |
| <label for="penPressureSlider" class="block text-sm font-medium text-gray-700 mb-2">Pen Pressure</label> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-weight-hanging text-gray-400"></i> |
| <input type="range" id="penPressureSlider" min="0.1" max="500" step="0.1" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> |
| <span id="penPressureDisplay" class="w-16 text-center px-2 py-1 bg-gray-100 rounded text-sm font-medium">50.0 g</span> |
| </div> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>Light</span> |
| <span>Heavy</span> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="penLiftHeight" class="block text-sm font-medium text-gray-700 mb-2">Pen Lift Height</label> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-arrows-alt-v text-gray-400"></i> |
| <input type="range" id="penLiftHeight" min="1" max="20" step="0.5" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> |
| <span id="penLiftHeightDisplay" class="w-16 text-center px-2 py-1 bg-gray-100 rounded text-sm font-medium">5.0 mm</span> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="penUpSpeed" class="block text-sm font-medium text-gray-700 mb-2">Pen Up Speed</label> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-tachometer-alt text-gray-400"></i> |
| <select id="penUpSpeed" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm"> |
| <option value="10">10 mm/s (Slow)</option> |
| <option value="20" selected>20 mm/s (Standard)</option> |
| <option value="30">30 mm/s (Fast)</option> |
| <option value="40">40 mm/s (Very Fast)</option> |
| <option value="custom">Custom...</option> |
| </select> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="penDownSpeed" class="block text-sm font-medium text-gray-700 mb-2">Pen Down Speed</label> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-tachometer-alt text-gray-400"></i> |
| <select id="penDownSpeed" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm"> |
| <option value="5">5 mm/s (Precise)</option> |
| <option value="10" selected>10 mm/s (Standard)</option> |
| <option value="15">15 mm/s (Fast)</option> |
| <option value="custom">Custom...</option> |
| </select> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="penOffsetX" class="block text-sm font-medium text-gray-700 mb-2">Pen Tip Offset</label> |
| <div class="grid grid-cols-2 gap-3"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-500">X:</span> |
| <input type="number" id="penOffsetX" step="0.1" value="0" class="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"> |
| <span class="text-xs text-gray-500">mm</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-500">Y:</span> |
| <input type="number" id="penOffsetY" step="0.1" value="0" class="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"> |
| <span class="text-xs text-gray-500">mm</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="penSelection" class="block text-sm font-medium text-gray-700 mb-2">Pen Type</label> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-pen text-gray-400"></i> |
| <select id="penSelection" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm"> |
| <option value="pigma05">Sakura Pigma 0.5</option> |
| <option value="pigma03" selected>Sakura Pigma 0.3</option> |
| <option value="pigma08">Sakura Pigma 0.8</option> |
| <option value="sharpie">Sharpie Fine Point</option> |
| <option value="custom">Custom Pen...</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-end mt-6"> |
| <button id="savePenSettings" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> |
| <i class="fas fa-save mr-2"></i> Save Pen Settings |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Pen Calibration</h3> |
| |
| <div class="mb-4"> |
| <p class="text-sm text-gray-600 mb-3">Calibrate the pen position for optimal performance. The calibration pattern will be drawn on your material.</p> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> |
| <button id="autoCalibrateBtn" class="py-2 px-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-robot mr-2"></i> Auto Calibrate |
| </button> |
| <button id="manualCalibrateBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-hand-paper mr-2"></i> Manual Calibrate |
| </button> |
| <button id="testCalibrationBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-check-circle mr-2"></i> Test Calibration |
| </button> |
| <button id="resetCalibrationBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-undo mr-2"></i> Reset Calibration |
| </button> |
| </div> |
| </div> |
| |
| <div id="manualCalibrationControls" class="hidden bg-gray-50 p-4 rounded-md mb-4"> |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Manual Calibration Controls</h4> |
| |
| <div class="grid grid-cols-2 gap-4 mb-3"> |
| <div> |
| <label class="block text-xs text-gray-500 mb-1">X-Axis Adjustment</label> |
| <div class="flex"> |
| <button class="px-2 py-1 bg-gray-200 rounded-l-md hover:bg-gray-300" onclick="adjustPenPosition('x', -0.1)"> |
| <i class="fas fa-minus"></i> 0.1 |
| </button> |
| <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('x', -1)"> |
| <i class="fas fa-minus"></i> 1 |
| </button> |
| <span id="xPosition" class="px-3 py-1 bg-white border-t border-b border-gray-300 text-center">0.0</span> |
| <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('x', 1)"> |
| <i class="fas fa-plus"></i> 1 |
| </button> |
| <button class="px-2 py-1 bg-gray-200 rounded-r-md hover:bg-gray-300" onclick="adjustPenPosition('x', 0.1)"> |
| <i class="fas fa-plus"></i> 0.1 |
| </button> |
| </div> |
| </div> |
| <div> |
| <label class="block text-xs text-gray-500 mb-1">Y-Axis Adjustment</label> |
| <div class="flex"> |
| <button class="px-2 py-1 bg-gray-200 rounded-l-md hover:bg-gray-300" onclick="adjustPenPosition('y', -0.1)"> |
| <i class="fas fa-minus"></i> 0.1 |
| </button> |
| <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('y', -1)"> |
| <i class="fas fa-minus"></i> 1 |
| </button> |
| <span id="yPosition" class="px-3 py-1 bg-white border-t border-b border-gray-300 text-center">0.0</span> |
| <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('y', 1)"> |
| <i class="fas fa-plus"></i> 1 |
| </button> |
| <button class="px-2 py-1 bg-gray-200 rounded-r-md hover:bg-gray-300" onclick="adjustPenPosition('y', 0.1)"> |
| <i class="fas fa-plus"></i> 0.1 |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button id="savePositionBtn" class="px-3 py-1 bg-green-500 text-white rounded-md text-sm hover:bg-green-600 flex items-center"> |
| <i class="fas fa-save mr-1"></i> Save Position |
| </button> |
| <button id="testPositionBtn" class="px-3 py-1 bg-blue-500 text-white rounded-md text-sm hover:bg-blue-600 flex items-center"> |
| <i class="fas fa-play mr-1"></i> Test Position |
| </button> |
| <button id="cancelCalibrationBtn" class="px-3 py-1 bg-gray-500 text-white rounded-md text-sm hover:bg-gray-600 flex items-center"> |
| <i class="fas fa-times mr-1"></i> Cancel |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-md"> |
| <div class="flex justify-between items-center mb-2"> |
| <h4 class="text-sm font-medium text-gray-700">Saved Positions</h4> |
| <button id="addPositionBtn" class="text-xs text-blue-600 hover:text-blue-800"> |
| <i class="fas fa-plus mr-1"></i> Add New |
| </button> |
| </div> |
| |
| <div id="savedPositionsList" class="space-y-2"> |
| <div class="flex justify-between items-center p-2 bg-white rounded border border-gray-200"> |
| <div> |
| <span class="text-sm font-medium">Default</span> |
| <span class="text-xs text-gray-500 ml-2">X: 0.0, Y: 0.0</span> |
| </div> |
| <div class="flex space-x-1"> |
| <button class="p-1 text-blue-500 hover:text-blue-700"> |
| <i class="fas fa-edit text-xs"></i> |
| </button> |
| <button class="p-1 text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash text-xs"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex justify-between items-center p-2 bg-white rounded border border-gray-200"> |
| <div> |
| <span class="text-sm font-medium">Thick Paper</span> |
| <span class="text-xs text-gray-500 ml-2">X: 0.2, Y: 0.3</span> |
| </div> |
| <div class="flex space-x-1"> |
| <button class="p-1 text-blue-500 hover:text-blue-700"> |
| <i class="fas fa-edit text-xs"></i> |
| </button> |
| <button class="p-1 text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Pen Visualization</h3> |
| |
| <div class="flex justify-center mb-4"> |
| <div class="relative w-48 h-48 machine-bed rounded-md border border-gray-300"> |
| |
| <div class="absolute w-8 h-8 bg-gray-300 rounded-full" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> |
| |
| <div id="penVisualization" class="absolute w-2 h-16 bg-gray-700 rounded-sm" style="bottom: 24px; left: 50%; transform: translateX(-50%) rotate(0deg); transform-origin: bottom center;"></div> |
| |
| <div class="absolute w-4 h-4 bg-red-500 rounded-full" style="bottom: 20px; left: 50%; transform: translateX(-50%);"></div> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <p class="text-sm text-gray-600 mb-2">Current Pen State: <span id="penState" class="font-medium text-blue-600">Up</span></p> |
| <p class="text-xs text-gray-500">Visual representation of the pen position and angle</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Pressure Test</h3> |
| |
| <div class="flex justify-center mb-4"> |
| <div class="w-full h-32 bg-gray-100 rounded-md border border-gray-300 flex items-center justify-center"> |
| <div id="pressureTestResult" class="text-center"> |
| <p class="text-sm text-gray-500">Test results will appear here</p> |
| </div> |
| </div> |
| </div> |
| |
| <button id="runPressureTestBtn" class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-tachometer-alt mr-2"></i> Run Pressure Test |
| </button> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-3">Pen Presets</h3> |
| |
| <div class="space-y-2"> |
| <button class="w-full py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-between"> |
| <span>Fine Liner - Light</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </button> |
| <button class="w-full py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-between"> |
| <span>Fine Liner - Medium</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </button> |
| <button class="w-full py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-between"> |
| <span>Brush Pen</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </button> |
| <button class="w-full py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-between"> |
| <span>Ballpoint</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </button> |
| </div> |
| |
| <div class="mt-3 pt-3 border-t border-gray-100"> |
| <button id="addPresetBtn" class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-plus mr-2"></i> Create New Preset |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="walkhome" class="tab-content"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Walk Home Configuration</h3> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Home Position</label> |
| <div class="grid grid-cols-2 gap-3"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-500">X:</span> |
| <input type="number" id="homeX" value="0" step="0.1" class="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"> |
| <span class="text-xs text-gray-500">mm</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-500">Y:</span> |
| <input type="number" id="homeY" value="0" step="0.1" class="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"> |
| <span class="text-xs text-gray-500">mm</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="walkHomeSpeed" class="block text-sm font-medium text-gray-700 mb-2">Walk Home Speed</label> |
| <select id="walkHomeSpeed" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm"> |
| <option value="10">10 mm/s (Slow)</option> |
| <option value="20" selected>20 mm/s (Standard)</option> |
| <option value="30">30 mm/s (Fast)</option> |
| <option value="40">40 mm/s (Very Fast)</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Pen Action</label> |
| <div class="space-y-2"> |
| <div class="flex items-center"> |
| <input type="radio" id="penUp" name="penAction" value="up" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
| <label for="penUp" class="ml-2 block text-sm text-gray-700">Lift pen before moving</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="radio" id="penDown" name="penAction" value="down" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
| <label for="penDown" class="ml-2 block text-sm text-gray-700">Keep pen down (for testing)</label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="safetyMargin" class="block text-sm font-medium text-gray-700 mb-2">Safety Margin</label> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-border-none text-gray-400"></i> |
| <input type="range" id="safetyMargin" min="0" max="20" step="1" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> |
| <span id="safetyMarginDisplay" class="w-12 text-center px-2 py-1 bg-gray-100 rounded text-sm font-medium">5 mm</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-end mt-6"> |
| <button id="saveWalkHomeSettings" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> |
| <i class="fas fa-save mr-2"></i> Save Settings |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Saved Home Positions</h3> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Speed</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Default</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">X: 0, Y: 0</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20 mm/s</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Use</button> |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Top Right</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">X: 210, Y: 0</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 mm/s</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Use</button> |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Center</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">X: 105, Y: 148.5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 mm/s</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Use</button> |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4"> |
| <button id="addHomePositionBtn" class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-plus mr-2"></i> Add New Home Position |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Walk Home Visualization</h3> |
| |
| <div class="flex justify-center mb-4"> |
| <div class="relative w-full h-64 machine-bed rounded-md border border-gray-300"> |
| |
| <svg width="100%" height="100%" viewBox="0 0 210 297" preserveAspectRatio="xMidYMid meet"> |
| |
| <rect x="0" y="0" width="210" height="297" fill="none" stroke="#d1d5db" stroke-width="1" /> |
| |
| |
| <g stroke="#e5e7eb" stroke-width="0.5"> |
| |
| <line x1="20" y1="0" x2="20" y2="297" /> |
| <line x1="40" y1="0" x2="40" y2="297" /> |
| <line x1="60" y1="0" x2="60" y2="297" /> |
| <line x1="80" y1="0" x2="80" y2="297" /> |
| <line x1="100" y1="0" x2="100" y2="297" /> |
| <line x1="120" y1="0" x2="120" y2="297" /> |
| <line x1="140" y1="0" x2="140" y2="297" /> |
| <line x1="160" y1="0" x2="160" y2="297" /> |
| <line x1="180" y1="0" x2="180" y2="297" /> |
| <line x1="200" y1="0" x2="200" y2="297" /> |
| |
| |
| <line x1="0" y1="20" x2="210" y2="20" /> |
| <line x1="0" y1="40" x2="210" y2="40" /> |
| <line x1="0" y1="60" x2="210" y2="60" /> |
| <line x1="0" y1="80" x2="210" y2="80" /> |
| <line x1="0" y1="100" x2="210" y2="100" /> |
| <line x1="0" y1="120" x2="210" y2="120" /> |
| <line x1="0" y1="140" x2="210" y2="140" /> |
| <line x1="0" y1="160" x2="210" y2="160" /> |
| <line x1="0" y1="180" x2="210" y2="180" /> |
| <line x1="0" y1="200" x2="210" y2="200" /> |
| <line x1="0" y1="220" x2="210" y2="220" /> |
| <line x1="0" y1="240" x2="210" y2="240" /> |
| <line x1="0" y1="260" x2="210" y2="260" /> |
| <line x1="0" y1="280" x2="210" y2="280" /> |
| </g> |
| |
| |
| <circle id="homePositionIndicator" cx="105" cy="148.5" r="5" fill="#0066ff" stroke="white" stroke-width="1.5" /> |
| |
| |
| <circle id="currentPositionIndicator" cx="50" cy="200" r="4" fill="#ff3333" stroke="white" stroke-width="1.5"> |
| <animateMotion id="walkHomeAnimation" path="" dur="5s" fill="freeze" /> |
| </circle> |
| |
| |
| <path id="walkHomePath" d="" fill="none" stroke="#0066ff" stroke-width="1.5" stroke-dasharray="5,5" /> |
| </svg> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <p class="text-sm text-gray-600 mb-1">Current Position: <span id="currentPositionText" class="font-medium">X: 50.0, Y: 200.0</span></p> |
| <p class="text-sm text-gray-600">Home Position: <span id="homePositionText" class="font-medium">X: 105.0, Y: 148.5</span></p> |
| <p class="text-xs text-gray-500 mt-2">Visualization shows the path the pen will take to return home</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Walk Home Controls</h3> |
| |
| <div class="grid grid-cols-2 gap-3 mb-4"> |
| <button id="walkHomeBtn" class="py-2 px-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-home mr-2"></i> Walk Home |
| </button> |
| <button id="previewWalkHomeBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-eye mr-2"></i> Preview Path |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-3 gap-2"> |
| <button id="nudgeLeftBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center"> |
| <i class="fas fa-arrow-left"></i> |
| </button> |
| <button id="nudgeUpBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
| <button id="nudgeRightBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center"> |
| <i class="fas fa-arrow-right"></i> |
| </button> |
| <button id="nudgeDownBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center"> |
| <i class="fas fa-arrow-down"></i> |
| </button> |
| <button id="centerPenBtn" class="col-span-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center"> |
| <i class="fas fa-crosshairs mr-2"></i> Center Pen |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5 border border-red-200 bg-red-50"> |
| <h3 class="font-medium text-red-800 mb-3">Emergency Controls</h3> |
| |
| <p class="text-xs text-red-600 mb-3">Use these controls in case of emergency or unexpected behavior</p> |
| |
| <div class="grid grid-cols-2 gap-3"> |
| <button id="emergencyStopBtn" class="py-2 px-3 bg-red-600 text-white rounded-md hover:bg-red-700 transition flex items-center justify-center"> |
| <i class="fas fa-skull-crossbones mr-2"></i> Emergency Stop |
| </button> |
| <button id="resetPlotterBtn" class="py-2 px-3 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition flex items-center justify-center"> |
| <i class="fas fa-sync-alt mr-2"></i> Reset Plotter |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="preview" class="tab-content"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-medium text-gray-800">Drawing Preview</h3> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-500">Zoom:</span> |
| <select id="previewZoom" class="border border-gray-300 rounded-md px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"> |
| <option value="0.5">50%</option> |
| <option value="0.75">75%</option> |
| <option value="1" selected>100%</option> |
| <option value="1.5">150%</option> |
| <option value="2">200%</option> |
| <option value="fit">Fit to View</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="flex justify-center mb-4"> |
| <div class="relative w-full h-96 machine-bed rounded-md border border-gray-300 overflow-hidden"> |
| |
| <svg id="previewSvg" width="100%" height="100%" viewBox="0 0 210 297" preserveAspectRatio="xMidYMid meet"> |
| |
| <rect x="0" y="0" width="210" height="297" fill="none" stroke="#d1d5db" stroke-width="1" /> |
| |
| |
| <g id="previewPaths"></g> |
| |
| |
| <circle id="previewPositionIndicator" cx="0" cy="0" r="3" fill="#ff3333" stroke="white" stroke-width="1" style="display: none;" /> |
| </svg> |
| |
| |
| <div id="previewLoading" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center hidden"> |
| <div class="text-center"> |
| <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2 mx-auto"></div> |
| <p class="text-sm text-gray-600">Generating preview...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-500">Show:</span> |
| <div class="flex space-x-1"> |
| <button class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">All</button> |
| <button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">Current Layer</button> |
| <button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">Pen Up</button> |
| <button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">Pen Down</button> |
| </div> |
| </div> |
| <button id="refreshPreviewBtn" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm transition flex items-center"> |
| <i class="fas fa-sync-alt mr-1"></i> Refresh |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Preview Controls</h3> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> |
| <button id="playPreviewBtn" class="py-2 px-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-play mr-2"></i> Play |
| </button> |
| <button id="pausePreviewBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-pause mr-2"></i> Pause |
| </button> |
| <button id="stopPreviewBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-stop mr-2"></i> Stop |
| </button> |
| <button id="exportPreviewBtn" class="py-2 px-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center"> |
| <i class="fas fa-file-export mr-2"></i> Export |
| </button> |
| </div> |
| |
| <div class="mt-4"> |
| <div class="flex items-center justify-between mb-1"> |
| <span class="text-sm text-gray-700">Preview Speed</span> |
| <span id="previewSpeedValue" class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">1×</span> |
| </div> |
| <input type="range" id="previewSpeed" min="0.1" max="5" step="0.1" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>Slow</span> |
| <span>Fast</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-4">Preview Information</h3> |
| |
| <div class="space-y-3"> |
| <div class="flex justify-between"> |
| <span class="text-sm text-gray-600">Total Paths:</span> |
| <span id="totalPaths" class="text-sm font-medium">124</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-sm text-gray-600">Pen Down Paths:</span> |
| <span id="penDownPaths" class="text-sm font-medium">87</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-sm text-gray-600">Pen Up Travel:</span> |
| <span id="penUpTravel" class="text-sm font-medium">4.2 m</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-sm text-gray-600">Estimated Time:</span> |
| <span id="previewTime" class="text-sm font-medium">45 min</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-sm text-gray-600">Ink Coverage:</span> |
| <span id="inkCoverage" class="text-sm font-medium">Medium</span> |
| </div> |
| </div> |
| |
| <div class="mt-4 pt-3 border-t border-gray-100"> |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Potential Issues</h4> |
| <div id="previewIssues" class="space-y-2"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-5 w-5 text-yellow-500"> |
| <i class="fas fa-exclamation-triangle"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-xs text-gray-600">3 paths exceed recommended speed</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-5 w-5 text-blue-500"> |
| <i class="fas fa-info-circle"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-xs text-gray-600">Long pen-up move: 120mm</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-3">Layer Preview</h3> |
| |
| <div class="space-y-2 max-h-60 overflow-y-auto"> |
| <div class="flex items-center p-2 bg-blue-50 rounded border border-blue-100"> |
| <div class="flex-shrink-0 h-3 w-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 truncate">Outline Layer</p> |
| <p class="text-xs text-gray-500">42 paths, 1.2m</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">Visible</span> |
| </div> |
| </div> |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded"> |
| <div class="flex-shrink-0 h-3 w-3 rounded-full bg-green-500 mr-2"></div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 truncate">Details Layer</p> |
| <p class="text-xs text-gray-500">35 paths, 0.8m</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">Visible</span> |
| </div> |
| </div> |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded"> |
| <div class="flex-shrink-0 h-3 w-3 rounded-full bg-blue-500 mr-2"></div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 truncate">Annotations</p> |
| <p class="text-xs text-gray-500">10 paths, 0.3m</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded">Hidden</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-3 pt-3 border-t border-gray-100"> |
| <button id="toggleAllLayersBtn" class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center"> |
| <i class="fas fa-eye mr-2"></i> Toggle All Layers |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <h3 class="font-medium text-gray-800 mb-3">Preview Options</h3> |
| |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between"> |
| <span class="text-sm text-gray-700">Show Pen Up Moves</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" checked class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <span class="text-sm text-gray-700">Show Pen Position</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <span class="text-sm text-gray-700">Color by Speed</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <span class="text-sm text-gray-700">Show Original Colors</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="stats" class="tab-content"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-5"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-medium text-gray-800">Time Statistics</h3> |
| <select id="statsTimeRange" class="border border-gray-300 rounded-md px-3 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"> |
| <option value="7days">Last 7 Days</option> |
| <option value="30days" selected>Last 30 Days</option> |
| <option value="90days">Last 90 Days</option> |
| <option value="all">All Time</option> |
| </select> |
| </div> |
| |
| <div class="h-64 bg |
| </html> |
