Hugging Face's logo

Spaces:
MedBoussouni
/
nextdraw-control-panel-2
Running

App Files Community
MedBoussouni commited on
Commit
d709f86
·
verified ·
1 Parent(s): 74c112b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1158 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nextdraw Control Panel 2
3
- emoji: 👁
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: nextdraw-control-panel-2
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1158 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bantam Tools NextDraw - Adobe Illustrator Extension</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --bantam-blue: #0066ff;
12
+ --bantam-dark: #2d3748;
13
+ --bantam-light: #f7fafc;
14
+ }
15
+
16
+ @keyframes pulse {
17
+ 0%, 100% { opacity: 1; }
18
+ 50% { opacity: 0.7; }
19
+ }
20
+
21
+ .pulse-animation {
22
+ animation: pulse 1.5s ease-in-out infinite;
23
+ }
24
+
25
+ .progress-gradient {
26
+ background: linear-gradient(90deg, var(--bantam-blue) 0%, #00ccff 100%);
27
+ }
28
+
29
+ .tooltip {
30
+ position: relative;
31
+ }
32
+
33
+ .tooltip:hover .tooltip-content {
34
+ visibility: visible;
35
+ opacity: 1;
36
+ transform: translateY(0);
37
+ }
38
+
39
+ .tooltip-content {
40
+ visibility: hidden;
41
+ position: absolute;
42
+ z-index: 50;
43
+ bottom: 100%;
44
+ left: 50%;
45
+ transform: translateY(5px) translateX(-50%);
46
+ background-color: var(--bantam-dark);
47
+ color: white;
48
+ padding: 6px 10px;
49
+ border-radius: 4px;
50
+ font-size: 12px;
51
+ white-space: nowrap;
52
+ opacity: 0;
53
+ transition: all 0.2s ease;
54
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
55
+ }
56
+
57
+ .slider-thumb::-webkit-slider-thumb {
58
+ -webkit-appearance: none;
59
+ appearance: none;
60
+ width: 18px;
61
+ height: 18px;
62
+ border-radius: 50%;
63
+ background: var(--bantam-blue);
64
+ cursor: pointer;
65
+ border: 2px solid white;
66
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
67
+ }
68
+
69
+ .tab-content {
70
+ display: none;
71
+ animation: fadeIn 0.3s ease-out;
72
+ }
73
+
74
+ .tab-content.active {
75
+ display: block;
76
+ }
77
+
78
+ @keyframes fadeIn {
79
+ from { opacity: 0; transform: translateY(5px); }
80
+ to { opacity: 1; transform: translateY(0); }
81
+ }
82
+
83
+ .machine-bed {
84
+ background-image:
85
+ linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
86
+ linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
87
+ background-size: 20px 20px;
88
+ }
89
+
90
+ .pen-path {
91
+ stroke: var(--bantam-blue);
92
+ stroke-width: 2;
93
+ fill: none;
94
+ stroke-linecap: round;
95
+ stroke-linejoin: round;
96
+ }
97
+ </style>
98
+ </head>
99
+ <body class="bg-gray-50 font-sans text-gray-800">
100
+ <div class="container mx-auto p-4 max-w-6xl">
101
+ <!-- Header with connection status -->
102
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
103
+ <div class="flex items-center">
104
+ <img src="https://bantamtools.com/wp-content/uploads/2019/12/bantam-logo.svg" alt="Bantam Tools" class="h-10 mr-3">
105
+ <div>
106
+ <h1 class="text-2xl font-bold text-gray-800">NextDraw Control Panel</h1>
107
+ <p class="text-sm text-gray-500">Adobe Illustrator Extension</p>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="flex items-center space-x-4">
112
+ <div id="connectionStatus" class="flex items-center px-4 py-2 rounded-lg bg-green-50 border border-green-200">
113
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
114
+ <span class="text-sm font-medium text-gray-700">Connected to Bantam Tools NextDraw</span>
115
+ <span class="ml-2 text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">v2.1.4</span>
116
+ </div>
117
+
118
+ <div class="flex space-x-2">
119
+ <button id="settingsBtn" class="p-2 rounded-full hover:bg-gray-200 transition tooltip">
120
+ <i class="fas fa-cog text-gray-600"></i>
121
+ <span class="tooltip-content">Settings</span>
122
+ </button>
123
+ <button id="helpBtn" class="p-2 rounded-full hover:bg-gray-200 transition tooltip">
124
+ <i class="fas fa-question-circle text-gray-600"></i>
125
+ <span class="tooltip-content">Help & Documentation</span>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Main Tabs Navigation -->
132
+ <div class="flex overflow-x-auto border-b border-gray-200 mb-6 scrollbar-hide">
133
+ <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">
134
+ <i class="fas fa-sliders-h mr-2"></i> Control
135
+ </button>
136
+ <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="pen">
137
+ <i class="fas fa-pen-nib mr-2"></i> Pen Settings
138
+ </button>
139
+ <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="walkhome">
140
+ <i class="fas fa-home mr-2"></i> Walk Home
141
+ </button>
142
+ <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="preview">
143
+ <i class="fas fa-eye mr-2"></i> Preview
144
+ </button>
145
+ <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="stats">
146
+ <i class="fas fa-chart-bar mr-2"></i> Statistics
147
+ </button>
148
+ <button class="tab-btn flex-shrink-0 py-2 px-4 font-medium text-gray-500 hover:text-gray-700" data-tab="advanced">
149
+ <i class="fas fa-cogs mr-2"></i> Advanced
150
+ </button>
151
+ </div>
152
+
153
+ <!-- Control Tab Content -->
154
+ <div id="control" class="tab-content active">
155
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
156
+ <!-- Left Column -->
157
+ <div class="lg:col-span-2 space-y-6">
158
+ <!-- Progress Section -->
159
+ <div class="bg-white rounded-xl shadow-sm p-5">
160
+ <div class="flex justify-between items-center mb-3">
161
+ <h3 class="font-medium text-gray-800">Job Progress</h3>
162
+ <div class="flex items-center">
163
+ <span id="progressPercent" class="text-sm font-medium text-blue-600 mr-2">0%</span>
164
+ <span id="timeRemaining" class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded">--:--:-- remaining</span>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="w-full bg-gray-100 rounded-full h-3 mb-2">
169
+ <div id="progressBar" class="progress-gradient h-3 rounded-full" style="width: 0%"></div>
170
+ </div>
171
+
172
+ <div class="grid grid-cols-3 gap-4 text-center mt-4">
173
+ <div>
174
+ <p class="text-xs text-gray-500 mb-1">Time Elapsed</p>
175
+ <p id="timeElapsed" class="text-lg font-semibold">00:00:00</p>
176
+ </div>
177
+ <div>
178
+ <p class="text-xs text-gray-500 mb-1">Distance Done</p>
179
+ <p id="distanceDone" class="text-lg font-semibold">0.0 m</p>
180
+ </div>
181
+ <div>
182
+ <p class="text-xs text-gray-500 mb-1">Distance Left</p>
183
+ <p id="distanceLeft" class="text-lg font-semibold">12.5 m</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Control Buttons -->
189
+ <div class="bg-white rounded-xl shadow-sm p-5">
190
+ <h3 class="font-medium text-gray-800 mb-4">Plotter Controls</h3>
191
+
192
+ <div class="flex flex-wrap justify-center gap-4">
193
+ <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">
194
+ <i class="fas fa-play text-2xl mb-1"></i>
195
+ <span class="text-xs">Start</span>
196
+ <span class="tooltip-content">Start plotting (Ctrl+P)</span>
197
+ </button>
198
+
199
+ <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">
200
+ <i class="fas fa-pause text-2xl mb-1"></i>
201
+ <span class="text-xs">Pause</span>
202
+ <span class="tooltip-content">Pause plotting (Space)</span>
203
+ </button>
204
+
205
+ <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">
206
+ <i class="fas fa-stop text-2xl mb-1"></i>
207
+ <span class="text-xs">Stop</span>
208
+ <span class="tooltip-content">Stop plotting (Esc)</span>
209
+ </button>
210
+
211
+ <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">
212
+ <i class="fas fa-hand-paper text-2xl mb-1"></i>
213
+ <span class="text-xs">Safe Pause</span>
214
+ <span class="tooltip-content">Lift pen and pause (Shift+Space)</span>
215
+ </button>
216
+
217
+ <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">
218
+ <i class="fas fa-arrow-up text-2xl mb-1"></i>
219
+ <span class="text-xs">Pen Up</span>
220
+ <span class="tooltip-content">Lift pen (U)</span>
221
+ </button>
222
+
223
+ <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">
224
+ <i class="fas fa-arrow-down text-2xl mb-1"></i>
225
+ <span class="text-xs">Pen Down</span>
226
+ <span class="tooltip-content">Lower pen (D)</span>
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Job Information -->
232
+ <div class="bg-white rounded-xl shadow-sm p-5">
233
+ <h3 class="font-medium text-gray-800 mb-4">Job Information</h3>
234
+
235
+ <div class="grid grid-cols-2 gap-4">
236
+ <div>
237
+ <p class="text-xs text-gray-500 mb-1">File Name</p>
238
+ <p id="fileName" class="text-sm font-medium truncate">Current_Design.ai</p>
239
+ </div>
240
+ <div>
241
+ <p class="text-xs text-gray-500 mb-1">Document Size</p>
242
+ <p id="fileDimensions" class="text-sm font-medium">210 × 297 mm (A4)</p>
243
+ </div>
244
+ <div>
245
+ <p class="text-xs text-gray-500 mb-1">Total Distance</p>
246
+ <p id="totalDistance" class="text-sm font-medium">12.5 meters</p>
247
+ </div>
248
+ <div>
249
+ <p class="text-xs text-gray-500 mb-1">Estimated Time</p>
250
+ <p id="estimatedTime" class="text-sm font-medium">45 minutes</p>
251
+ </div>
252
+ <div>
253
+ <p class="text-xs text-gray-500 mb-1">Layers to Plot</p>
254
+ <p id="layersToPlot" class="text-sm font-medium">3 layers</p>
255
+ </div>
256
+ <div>
257
+ <p class="text-xs text-gray-500 mb-1">Pen Used</p>
258
+ <p id="penUsed" class="text-sm font-medium">Sakura Pigma 0.5</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Right Column -->
265
+ <div class="space-y-6">
266
+ <!-- Real-time Stats -->
267
+ <div class="bg-white rounded-xl shadow-sm p-5">
268
+ <h3 class="font-medium text-gray-800 mb-4">Real-time Statistics</h3>
269
+
270
+ <div class="space-y-4">
271
+ <div>
272
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
273
+ <span>Current Speed</span>
274
+ <span id="currentSpeedValue">0 mm/s</span>
275
+ </div>
276
+ <div class="w-full bg-gray-100 rounded-full h-2">
277
+ <div id="speedBar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
278
+ </div>
279
+ </div>
280
+
281
+ <div>
282
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
283
+ <span>Pen Pressure</span>
284
+ <span id="penPressureValue">0 g</span>
285
+ </div>
286
+ <div class="w-full bg-gray-100 rounded-full h-2">
287
+ <div id="pressureBar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="grid grid-cols-2 gap-4 pt-2">
292
+ <div class="text-center p-2 bg-blue-50 rounded-lg">
293
+ <p class="text-xs text-gray-500">Pen Up Speed</p>
294
+ <p id="penUpSpeedValue" class="text-lg font-semibold text-blue-600">20 mm/s</p>
295
+ </div>
296
+ <div class="text-center p-2 bg-blue-50 rounded-lg">
297
+ <p class="text-xs text-gray-500">Pen Down Speed</p>
298
+ <p id="penDownSpeedValue" class="text-lg font-semibold text-blue-600">10 mm/s</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Layer Controls -->
305
+ <div class="bg-white rounded-xl shadow-sm p-5">
306
+ <h3 class="font-medium text-gray-800 mb-3">Layer Controls</h3>
307
+
308
+ <div class="space-y-3">
309
+ <div class="flex items-center justify-between">
310
+ <div class="flex items-center">
311
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
312
+ <span class="text-sm">Outline Layer</span>
313
+ </div>
314
+ <label class="relative inline-flex items-center cursor-pointer">
315
+ <input type="checkbox" checked class="sr-only peer">
316
+ <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>
317
+ </label>
318
+ </div>
319
+
320
+ <div class="flex items-center justify-between">
321
+ <div class="flex items-center">
322
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
323
+ <span class="text-sm">Details Layer</span>
324
+ </div>
325
+ <label class="relative inline-flex items-center cursor-pointer">
326
+ <input type="checkbox" checked class="sr-only peer">
327
+ <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>
328
+ </label>
329
+ </div>
330
+
331
+ <div class="flex items-center justify-between">
332
+ <div class="flex items-center">
333
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
334
+ <span class="text-sm">Annotations</span>
335
+ </div>
336
+ <label class="relative inline-flex items-center cursor-pointer">
337
+ <input type="checkbox" class="sr-only peer">
338
+ <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>
339
+ </label>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="mt-4 pt-3 border-t border-gray-100">
344
+ <button id="selectLayersBtn" class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium transition">
345
+ <i class="fas fa-layer-group mr-2"></i> Select Layers to Plot
346
+ </button>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Quick Actions -->
351
+ <div class="bg-white rounded-xl shadow-sm p-5">
352
+ <h3 class="font-medium text-gray-800 mb-3">Quick Actions</h3>
353
+
354
+ <div class="grid grid-cols-2 gap-2">
355
+ <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">
356
+ <i class="fas fa-square mr-2"></i> Test Square
357
+ </button>
358
+ <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">
359
+ <i class="fas fa-circle mr-2"></i> Test Circle
360
+ </button>
361
+ <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">
362
+ <i class="fas fa-slash mr-2"></i> Test Line
363
+ </button>
364
+ <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">
365
+ <i class="fas fa-font mr-2"></i> Test Text
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Pen Settings Tab Content -->
374
+ <div id="pen" class="tab-content">
375
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
376
+ <!-- Left Column -->
377
+ <div class="lg:col-span-2 space-y-6">
378
+ <!-- Pen Configuration -->
379
+ <div class="bg-white rounded-xl shadow-sm p-5">
380
+ <h3 class="font-medium text-gray-800 mb-4">Pen Configuration</h3>
381
+
382
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
383
+ <!-- Pressure Settings -->
384
+ <div>
385
+ <label for="penPressureSlider" class="block text-sm font-medium text-gray-700 mb-2">Pen Pressure</label>
386
+ <div class="flex items-center space-x-3">
387
+ <i class="fas fa-weight-hanging text-gray-400"></i>
388
+ <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">
389
+ <span id="penPressureDisplay" class="w-16 text-center px-2 py-1 bg-gray-100 rounded text-sm font-medium">50.0 g</span>
390
+ </div>
391
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
392
+ <span>Light</span>
393
+ <span>Heavy</span>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Lift Height -->
398
+ <div>
399
+ <label for="penLiftHeight" class="block text-sm font-medium text-gray-700 mb-2">Pen Lift Height</label>
400
+ <div class="flex items-center space-x-3">
401
+ <i class="fas fa-arrows-alt-v text-gray-400"></i>
402
+ <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">
403
+ <span id="penLiftHeightDisplay" class="w-16 text-center px-2 py-1 bg-gray-100 rounded text-sm font-medium">5.0 mm</span>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Up Speed -->
408
+ <div>
409
+ <label for="penUpSpeed" class="block text-sm font-medium text-gray-700 mb-2">Pen Up Speed</label>
410
+ <div class="flex items-center space-x-3">
411
+ <i class="fas fa-tachometer-alt text-gray-400"></i>
412
+ <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">
413
+ <option value="10">10 mm/s (Slow)</option>
414
+ <option value="20" selected>20 mm/s (Standard)</option>
415
+ <option value="30">30 mm/s (Fast)</option>
416
+ <option value="40">40 mm/s (Very Fast)</option>
417
+ <option value="custom">Custom...</option>
418
+ </select>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Down Speed -->
423
+ <div>
424
+ <label for="penDownSpeed" class="block text-sm font-medium text-gray-700 mb-2">Pen Down Speed</label>
425
+ <div class="flex items-center space-x-3">
426
+ <i class="fas fa-tachometer-alt text-gray-400"></i>
427
+ <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">
428
+ <option value="5">5 mm/s (Precise)</option>
429
+ <option value="10" selected>10 mm/s (Standard)</option>
430
+ <option value="15">15 mm/s (Fast)</option>
431
+ <option value="custom">Custom...</option>
432
+ </select>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Pen Offset -->
437
+ <div>
438
+ <label for="penOffsetX" class="block text-sm font-medium text-gray-700 mb-2">Pen Tip Offset</label>
439
+ <div class="grid grid-cols-2 gap-3">
440
+ <div class="flex items-center space-x-2">
441
+ <span class="text-xs text-gray-500">X:</span>
442
+ <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">
443
+ <span class="text-xs text-gray-500">mm</span>
444
+ </div>
445
+ <div class="flex items-center space-x-2">
446
+ <span class="text-xs text-gray-500">Y:</span>
447
+ <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">
448
+ <span class="text-xs text-gray-500">mm</span>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Pen Selection -->
454
+ <div>
455
+ <label for="penSelection" class="block text-sm font-medium text-gray-700 mb-2">Pen Type</label>
456
+ <div class="flex items-center space-x-3">
457
+ <i class="fas fa-pen text-gray-400"></i>
458
+ <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">
459
+ <option value="pigma05">Sakura Pigma 0.5</option>
460
+ <option value="pigma03" selected>Sakura Pigma 0.3</option>
461
+ <option value="pigma08">Sakura Pigma 0.8</option>
462
+ <option value="sharpie">Sharpie Fine Point</option>
463
+ <option value="custom">Custom Pen...</option>
464
+ </select>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="flex justify-end mt-6">
470
+ <button id="savePenSettings" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
471
+ <i class="fas fa-save mr-2"></i> Save Pen Settings
472
+ </button>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Pen Calibration -->
477
+ <div class="bg-white rounded-xl shadow-sm p-5">
478
+ <h3 class="font-medium text-gray-800 mb-4">Pen Calibration</h3>
479
+
480
+ <div class="mb-4">
481
+ <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>
482
+
483
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
484
+ <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">
485
+ <i class="fas fa-robot mr-2"></i> Auto Calibrate
486
+ </button>
487
+ <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">
488
+ <i class="fas fa-hand-paper mr-2"></i> Manual Calibrate
489
+ </button>
490
+ <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">
491
+ <i class="fas fa-check-circle mr-2"></i> Test Calibration
492
+ </button>
493
+ <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">
494
+ <i class="fas fa-undo mr-2"></i> Reset Calibration
495
+ </button>
496
+ </div>
497
+ </div>
498
+
499
+ <div id="manualCalibrationControls" class="hidden bg-gray-50 p-4 rounded-md mb-4">
500
+ <h4 class="text-sm font-medium text-gray-700 mb-3">Manual Calibration Controls</h4>
501
+
502
+ <div class="grid grid-cols-2 gap-4 mb-3">
503
+ <div>
504
+ <label class="block text-xs text-gray-500 mb-1">X-Axis Adjustment</label>
505
+ <div class="flex">
506
+ <button class="px-2 py-1 bg-gray-200 rounded-l-md hover:bg-gray-300" onclick="adjustPenPosition('x', -0.1)">
507
+ <i class="fas fa-minus"></i> 0.1
508
+ </button>
509
+ <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('x', -1)">
510
+ <i class="fas fa-minus"></i> 1
511
+ </button>
512
+ <span id="xPosition" class="px-3 py-1 bg-white border-t border-b border-gray-300 text-center">0.0</span>
513
+ <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('x', 1)">
514
+ <i class="fas fa-plus"></i> 1
515
+ </button>
516
+ <button class="px-2 py-1 bg-gray-200 rounded-r-md hover:bg-gray-300" onclick="adjustPenPosition('x', 0.1)">
517
+ <i class="fas fa-plus"></i> 0.1
518
+ </button>
519
+ </div>
520
+ </div>
521
+ <div>
522
+ <label class="block text-xs text-gray-500 mb-1">Y-Axis Adjustment</label>
523
+ <div class="flex">
524
+ <button class="px-2 py-1 bg-gray-200 rounded-l-md hover:bg-gray-300" onclick="adjustPenPosition('y', -0.1)">
525
+ <i class="fas fa-minus"></i> 0.1
526
+ </button>
527
+ <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('y', -1)">
528
+ <i class="fas fa-minus"></i> 1
529
+ </button>
530
+ <span id="yPosition" class="px-3 py-1 bg-white border-t border-b border-gray-300 text-center">0.0</span>
531
+ <button class="px-2 py-1 bg-gray-200 border-l border-r border-gray-300 hover:bg-gray-300" onclick="adjustPenPosition('y', 1)">
532
+ <i class="fas fa-plus"></i> 1
533
+ </button>
534
+ <button class="px-2 py-1 bg-gray-200 rounded-r-md hover:bg-gray-300" onclick="adjustPenPosition('y', 0.1)">
535
+ <i class="fas fa-plus"></i> 0.1
536
+ </button>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="flex justify-between">
542
+ <button id="savePositionBtn" class="px-3 py-1 bg-green-500 text-white rounded-md text-sm hover:bg-green-600 flex items-center">
543
+ <i class="fas fa-save mr-1"></i> Save Position
544
+ </button>
545
+ <button id="testPositionBtn" class="px-3 py-1 bg-blue-500 text-white rounded-md text-sm hover:bg-blue-600 flex items-center">
546
+ <i class="fas fa-play mr-1"></i> Test Position
547
+ </button>
548
+ <button id="cancelCalibrationBtn" class="px-3 py-1 bg-gray-500 text-white rounded-md text-sm hover:bg-gray-600 flex items-center">
549
+ <i class="fas fa-times mr-1"></i> Cancel
550
+ </button>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="bg-gray-50 p-4 rounded-md">
555
+ <div class="flex justify-between items-center mb-2">
556
+ <h4 class="text-sm font-medium text-gray-700">Saved Positions</h4>
557
+ <button id="addPositionBtn" class="text-xs text-blue-600 hover:text-blue-800">
558
+ <i class="fas fa-plus mr-1"></i> Add New
559
+ </button>
560
+ </div>
561
+
562
+ <div id="savedPositionsList" class="space-y-2">
563
+ <div class="flex justify-between items-center p-2 bg-white rounded border border-gray-200">
564
+ <div>
565
+ <span class="text-sm font-medium">Default</span>
566
+ <span class="text-xs text-gray-500 ml-2">X: 0.0, Y: 0.0</span>
567
+ </div>
568
+ <div class="flex space-x-1">
569
+ <button class="p-1 text-blue-500 hover:text-blue-700">
570
+ <i class="fas fa-edit text-xs"></i>
571
+ </button>
572
+ <button class="p-1 text-red-500 hover:text-red-700">
573
+ <i class="fas fa-trash text-xs"></i>
574
+ </button>
575
+ </div>
576
+ </div>
577
+ <div class="flex justify-between items-center p-2 bg-white rounded border border-gray-200">
578
+ <div>
579
+ <span class="text-sm font-medium">Thick Paper</span>
580
+ <span class="text-xs text-gray-500 ml-2">X: 0.2, Y: 0.3</span>
581
+ </div>
582
+ <div class="flex space-x-1">
583
+ <button class="p-1 text-blue-500 hover:text-blue-700">
584
+ <i class="fas fa-edit text-xs"></i>
585
+ </button>
586
+ <button class="p-1 text-red-500 hover:text-red-700">
587
+ <i class="fas fa-trash text-xs"></i>
588
+ </button>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <!-- Right Column -->
597
+ <div class="space-y-6">
598
+ <!-- Pen Visualization -->
599
+ <div class="bg-white rounded-xl shadow-sm p-5">
600
+ <h3 class="font-medium text-gray-800 mb-4">Pen Visualization</h3>
601
+
602
+ <div class="flex justify-center mb-4">
603
+ <div class="relative w-48 h-48 machine-bed rounded-md border border-gray-300">
604
+ <!-- Pen holder visualization -->
605
+ <div class="absolute w-8 h-8 bg-gray-300 rounded-full" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
606
+ <!-- Pen visualization -->
607
+ <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>
608
+ <!-- Pen tip visualization -->
609
+ <div class="absolute w-4 h-4 bg-red-500 rounded-full" style="bottom: 20px; left: 50%; transform: translateX(-50%);"></div>
610
+ </div>
611
+ </div>
612
+
613
+ <div class="text-center">
614
+ <p class="text-sm text-gray-600 mb-2">Current Pen State: <span id="penState" class="font-medium text-blue-600">Up</span></p>
615
+ <p class="text-xs text-gray-500">Visual representation of the pen position and angle</p>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Pen Pressure Test -->
620
+ <div class="bg-white rounded-xl shadow-sm p-5">
621
+ <h3 class="font-medium text-gray-800 mb-4">Pressure Test</h3>
622
+
623
+ <div class="flex justify-center mb-4">
624
+ <div class="w-full h-32 bg-gray-100 rounded-md border border-gray-300 flex items-center justify-center">
625
+ <div id="pressureTestResult" class="text-center">
626
+ <p class="text-sm text-gray-500">Test results will appear here</p>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <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">
632
+ <i class="fas fa-tachometer-alt mr-2"></i> Run Pressure Test
633
+ </button>
634
+ </div>
635
+
636
+ <!-- Pen Presets -->
637
+ <div class="bg-white rounded-xl shadow-sm p-5">
638
+ <h3 class="font-medium text-gray-800 mb-3">Pen Presets</h3>
639
+
640
+ <div class="space-y-2">
641
+ <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">
642
+ <span>Fine Liner - Light</span>
643
+ <i class="fas fa-chevron-right text-gray-400"></i>
644
+ </button>
645
+ <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">
646
+ <span>Fine Liner - Medium</span>
647
+ <i class="fas fa-chevron-right text-gray-400"></i>
648
+ </button>
649
+ <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">
650
+ <span>Brush Pen</span>
651
+ <i class="fas fa-chevron-right text-gray-400"></i>
652
+ </button>
653
+ <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">
654
+ <span>Ballpoint</span>
655
+ <i class="fas fa-chevron-right text-gray-400"></i>
656
+ </button>
657
+ </div>
658
+
659
+ <div class="mt-3 pt-3 border-t border-gray-100">
660
+ <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">
661
+ <i class="fas fa-plus mr-2"></i> Create New Preset
662
+ </button>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+
669
+ <!-- Walk Home Tab Content -->
670
+ <div id="walkhome" class="tab-content">
671
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
672
+ <!-- Left Column -->
673
+ <div class="lg:col-span-2 space-y-6">
674
+ <!-- Walk Home Configuration -->
675
+ <div class="bg-white rounded-xl shadow-sm p-5">
676
+ <h3 class="font-medium text-gray-800 mb-4">Walk Home Configuration</h3>
677
+
678
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
679
+ <!-- Home Position -->
680
+ <div>
681
+ <label class="block text-sm font-medium text-gray-700 mb-2">Home Position</label>
682
+ <div class="grid grid-cols-2 gap-3">
683
+ <div class="flex items-center space-x-2">
684
+ <span class="text-xs text-gray-500">X:</span>
685
+ <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">
686
+ <span class="text-xs text-gray-500">mm</span>
687
+ </div>
688
+ <div class="flex items-center space-x-2">
689
+ <span class="text-xs text-gray-500">Y:</span>
690
+ <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">
691
+ <span class="text-xs text-gray-500">mm</span>
692
+ </div>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- Walk Home Speed -->
697
+ <div>
698
+ <label for="walkHomeSpeed" class="block text-sm font-medium text-gray-700 mb-2">Walk Home Speed</label>
699
+ <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">
700
+ <option value="10">10 mm/s (Slow)</option>
701
+ <option value="20" selected>20 mm/s (Standard)</option>
702
+ <option value="30">30 mm/s (Fast)</option>
703
+ <option value="40">40 mm/s (Very Fast)</option>
704
+ </select>
705
+ </div>
706
+
707
+ <!-- Pen Action -->
708
+ <div>
709
+ <label class="block text-sm font-medium text-gray-700 mb-2">Pen Action</label>
710
+ <div class="space-y-2">
711
+ <div class="flex items-center">
712
+ <input type="radio" id="penUp" name="penAction" value="up" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
713
+ <label for="penUp" class="ml-2 block text-sm text-gray-700">Lift pen before moving</label>
714
+ </div>
715
+ <div class="flex items-center">
716
+ <input type="radio" id="penDown" name="penAction" value="down" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
717
+ <label for="penDown" class="ml-2 block text-sm text-gray-700">Keep pen down (for testing)</label>
718
+ </div>
719
+ </div>
720
+ </div>
721
+
722
+ <!-- Safety Margin -->
723
+ <div>
724
+ <label for="safetyMargin" class="block text-sm font-medium text-gray-700 mb-2">Safety Margin</label>
725
+ <div class="flex items-center space-x-3">
726
+ <i class="fas fa-border-none text-gray-400"></i>
727
+ <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">
728
+ <span id="safetyMarginDisplay" class="w-12 text-center px-2 py-1 bg-gray-100 rounded text-sm font-medium">5 mm</span>
729
+ </div>
730
+ </div>
731
+ </div>
732
+
733
+ <div class="flex justify-end mt-6">
734
+ <button id="saveWalkHomeSettings" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
735
+ <i class="fas fa-save mr-2"></i> Save Settings
736
+ </button>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- Saved Home Positions -->
741
+ <div class="bg-white rounded-xl shadow-sm p-5">
742
+ <h3 class="font-medium text-gray-800 mb-4">Saved Home Positions</h3>
743
+
744
+ <div class="overflow-x-auto">
745
+ <table class="min-w-full divide-y divide-gray-200">
746
+ <thead class="bg-gray-50">
747
+ <tr>
748
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
749
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
750
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Speed</th>
751
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
752
+ </tr>
753
+ </thead>
754
+ <tbody class="bg-white divide-y divide-gray-200">
755
+ <tr>
756
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Default</td>
757
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">X: 0, Y: 0</td>
758
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20 mm/s</td>
759
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
760
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Use</button>
761
+ <button class="text-gray-600 hover:text-gray-900">Edit</button>
762
+ </td>
763
+ </tr>
764
+ <tr>
765
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Top Right</td>
766
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">X: 210, Y: 0</td>
767
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 mm/s</td>
768
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
769
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Use</button>
770
+ <button class="text-gray-600 hover:text-gray-900">Edit</button>
771
+ </td>
772
+ </tr>
773
+ <tr>
774
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Center</td>
775
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">X: 105, Y: 148.5</td>
776
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 mm/s</td>
777
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
778
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Use</button>
779
+ <button class="text-gray-600 hover:text-gray-900">Edit</button>
780
+ </td>
781
+ </tr>
782
+ </tbody>
783
+ </table>
784
+ </div>
785
+
786
+ <div class="mt-4">
787
+ <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">
788
+ <i class="fas fa-plus mr-2"></i> Add New Home Position
789
+ </button>
790
+ </div>
791
+ </div>
792
+ </div>
793
+
794
+ <!-- Right Column -->
795
+ <div class="space-y-6">
796
+ <!-- Walk Home Visualization -->
797
+ <div class="bg-white rounded-xl shadow-sm p-5">
798
+ <h3 class="font-medium text-gray-800 mb-4">Walk Home Visualization</h3>
799
+
800
+ <div class="flex justify-center mb-4">
801
+ <div class="relative w-full h-64 machine-bed rounded-md border border-gray-300">
802
+ <!-- Machine bed outline -->
803
+ <svg width="100%" height="100%" viewBox="0 0 210 297" preserveAspectRatio="xMidYMid meet">
804
+ <!-- Machine bed outline -->
805
+ <rect x="0" y="0" width="210" height="297" fill="none" stroke="#d1d5db" stroke-width="1" />
806
+
807
+ <!-- Grid lines -->
808
+ <g stroke="#e5e7eb" stroke-width="0.5">
809
+ <!-- Vertical lines -->
810
+ <line x1="20" y1="0" x2="20" y2="297" />
811
+ <line x1="40" y1="0" x2="40" y2="297" />
812
+ <line x1="60" y1="0" x2="60" y2="297" />
813
+ <line x1="80" y1="0" x2="80" y2="297" />
814
+ <line x1="100" y1="0" x2="100" y2="297" />
815
+ <line x1="120" y1="0" x2="120" y2="297" />
816
+ <line x1="140" y1="0" x2="140" y2="297" />
817
+ <line x1="160" y1="0" x2="160" y2="297" />
818
+ <line x1="180" y1="0" x2="180" y2="297" />
819
+ <line x1="200" y1="0" x2="200" y2="297" />
820
+
821
+ <!-- Horizontal lines -->
822
+ <line x1="0" y1="20" x2="210" y2="20" />
823
+ <line x1="0" y1="40" x2="210" y2="40" />
824
+ <line x1="0" y1="60" x2="210" y2="60" />
825
+ <line x1="0" y1="80" x2="210" y2="80" />
826
+ <line x1="0" y1="100" x2="210" y2="100" />
827
+ <line x1="0" y1="120" x2="210" y2="120" />
828
+ <line x1="0" y1="140" x2="210" y2="140" />
829
+ <line x1="0" y1="160" x2="210" y2="160" />
830
+ <line x1="0" y1="180" x2="210" y2="180" />
831
+ <line x1="0" y1="200" x2="210" y2="200" />
832
+ <line x1="0" y1="220" x2="210" y2="220" />
833
+ <line x1="0" y1="240" x2="210" y2="240" />
834
+ <line x1="0" y1="260" x2="210" y2="260" />
835
+ <line x1="0" y1="280" x2="210" y2="280" />
836
+ </g>
837
+
838
+ <!-- Home position indicator -->
839
+ <circle id="homePositionIndicator" cx="105" cy="148.5" r="5" fill="#0066ff" stroke="white" stroke-width="1.5" />
840
+
841
+ <!-- Current position indicator -->
842
+ <circle id="currentPositionIndicator" cx="50" cy="200" r="4" fill="#ff3333" stroke="white" stroke-width="1.5">
843
+ <animateMotion id="walkHomeAnimation" path="" dur="5s" fill="freeze" />
844
+ </circle>
845
+
846
+ <!-- Path to home -->
847
+ <path id="walkHomePath" d="" fill="none" stroke="#0066ff" stroke-width="1.5" stroke-dasharray="5,5" />
848
+ </svg>
849
+ </div>
850
+ </div>
851
+
852
+ <div class="text-center">
853
+ <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>
854
+ <p class="text-sm text-gray-600">Home Position: <span id="homePositionText" class="font-medium">X: 105.0, Y: 148.5</span></p>
855
+ <p class="text-xs text-gray-500 mt-2">Visualization shows the path the pen will take to return home</p>
856
+ </div>
857
+ </div>
858
+
859
+ <!-- Walk Home Controls -->
860
+ <div class="bg-white rounded-xl shadow-sm p-5">
861
+ <h3 class="font-medium text-gray-800 mb-4">Walk Home Controls</h3>
862
+
863
+ <div class="grid grid-cols-2 gap-3 mb-4">
864
+ <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">
865
+ <i class="fas fa-home mr-2"></i> Walk Home
866
+ </button>
867
+ <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">
868
+ <i class="fas fa-eye mr-2"></i> Preview Path
869
+ </button>
870
+ </div>
871
+
872
+ <div class="grid grid-cols-3 gap-2">
873
+ <button id="nudgeLeftBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center">
874
+ <i class="fas fa-arrow-left"></i>
875
+ </button>
876
+ <button id="nudgeUpBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center">
877
+ <i class="fas fa-arrow-up"></i>
878
+ </button>
879
+ <button id="nudgeRightBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center">
880
+ <i class="fas fa-arrow-right"></i>
881
+ </button>
882
+ <button id="nudgeDownBtn" class="py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center">
883
+ <i class="fas fa-arrow-down"></i>
884
+ </button>
885
+ <button id="centerPenBtn" class="col-span-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition flex items-center justify-center">
886
+ <i class="fas fa-crosshairs mr-2"></i> Center Pen
887
+ </button>
888
+ </div>
889
+ </div>
890
+
891
+ <!-- Emergency Controls -->
892
+ <div class="bg-white rounded-xl shadow-sm p-5 border border-red-200 bg-red-50">
893
+ <h3 class="font-medium text-red-800 mb-3">Emergency Controls</h3>
894
+
895
+ <p class="text-xs text-red-600 mb-3">Use these controls in case of emergency or unexpected behavior</p>
896
+
897
+ <div class="grid grid-cols-2 gap-3">
898
+ <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">
899
+ <i class="fas fa-skull-crossbones mr-2"></i> Emergency Stop
900
+ </button>
901
+ <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">
902
+ <i class="fas fa-sync-alt mr-2"></i> Reset Plotter
903
+ </button>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ </div>
909
+
910
+ <!-- Preview Tab Content -->
911
+ <div id="preview" class="tab-content">
912
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
913
+ <!-- Left Column -->
914
+ <div class="lg:col-span-2 space-y-6">
915
+ <!-- Preview Visualization -->
916
+ <div class="bg-white rounded-xl shadow-sm p-5">
917
+ <div class="flex justify-between items-center mb-4">
918
+ <h3 class="font-medium text-gray-800">Drawing Preview</h3>
919
+ <div class="flex items-center space-x-2">
920
+ <span class="text-xs text-gray-500">Zoom:</span>
921
+ <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">
922
+ <option value="0.5">50%</option>
923
+ <option value="0.75">75%</option>
924
+ <option value="1" selected>100%</option>
925
+ <option value="1.5">150%</option>
926
+ <option value="2">200%</option>
927
+ <option value="fit">Fit to View</option>
928
+ </select>
929
+ </div>
930
+ </div>
931
+
932
+ <div class="flex justify-center mb-4">
933
+ <div class="relative w-full h-96 machine-bed rounded-md border border-gray-300 overflow-hidden">
934
+ <!-- Preview SVG container -->
935
+ <svg id="previewSvg" width="100%" height="100%" viewBox="0 0 210 297" preserveAspectRatio="xMidYMid meet">
936
+ <!-- Document outline -->
937
+ <rect x="0" y="0" width="210" height="297" fill="none" stroke="#d1d5db" stroke-width="1" />
938
+
939
+ <!-- Drawing preview will be inserted here by JavaScript -->
940
+ <g id="previewPaths"></g>
941
+
942
+ <!-- Current position indicator -->
943
+ <circle id="previewPositionIndicator" cx="0" cy="0" r="3" fill="#ff3333" stroke="white" stroke-width="1" style="display: none;" />
944
+ </svg>
945
+
946
+ <!-- Loading overlay -->
947
+ <div id="previewLoading" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center hidden">
948
+ <div class="text-center">
949
+ <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2 mx-auto"></div>
950
+ <p class="text-sm text-gray-600">Generating preview...</p>
951
+ </div>
952
+ </div>
953
+ </div>
954
+ </div>
955
+
956
+ <div class="flex justify-between items-center">
957
+ <div class="flex items-center space-x-2">
958
+ <span class="text-xs text-gray-500">Show:</span>
959
+ <div class="flex space-x-1">
960
+ <button class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">All</button>
961
+ <button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">Current Layer</button>
962
+ <button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">Pen Up</button>
963
+ <button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">Pen Down</button>
964
+ </div>
965
+ </div>
966
+ <button id="refreshPreviewBtn" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm transition flex items-center">
967
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
968
+ </button>
969
+ </div>
970
+ </div>
971
+
972
+ <!-- Preview Controls -->
973
+ <div class="bg-white rounded-xl shadow-sm p-5">
974
+ <h3 class="font-medium text-gray-800 mb-4">Preview Controls</h3>
975
+
976
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
977
+ <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">
978
+ <i class="fas fa-play mr-2"></i> Play
979
+ </button>
980
+ <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">
981
+ <i class="fas fa-pause mr-2"></i> Pause
982
+ </button>
983
+ <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">
984
+ <i class="fas fa-stop mr-2"></i> Stop
985
+ </button>
986
+ <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">
987
+ <i class="fas fa-file-export mr-2"></i> Export
988
+ </button>
989
+ </div>
990
+
991
+ <div class="mt-4">
992
+ <div class="flex items-center justify-between mb-1">
993
+ <span class="text-sm text-gray-700">Preview Speed</span>
994
+ <span id="previewSpeedValue" class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">1×</span>
995
+ </div>
996
+ <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">
997
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
998
+ <span>Slow</span>
999
+ <span>Fast</span>
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <!-- Right Column -->
1006
+ <div class="space-y-6">
1007
+ <!-- Preview Information -->
1008
+ <div class="bg-white rounded-xl shadow-sm p-5">
1009
+ <h3 class="font-medium text-gray-800 mb-4">Preview Information</h3>
1010
+
1011
+ <div class="space-y-3">
1012
+ <div class="flex justify-between">
1013
+ <span class="text-sm text-gray-600">Total Paths:</span>
1014
+ <span id="totalPaths" class="text-sm font-medium">124</span>
1015
+ </div>
1016
+ <div class="flex justify-between">
1017
+ <span class="text-sm text-gray-600">Pen Down Paths:</span>
1018
+ <span id="penDownPaths" class="text-sm font-medium">87</span>
1019
+ </div>
1020
+ <div class="flex justify-between">
1021
+ <span class="text-sm text-gray-600">Pen Up Travel:</span>
1022
+ <span id="penUpTravel" class="text-sm font-medium">4.2 m</span>
1023
+ </div>
1024
+ <div class="flex justify-between">
1025
+ <span class="text-sm text-gray-600">Estimated Time:</span>
1026
+ <span id="previewTime" class="text-sm font-medium">45 min</span>
1027
+ </div>
1028
+ <div class="flex justify-between">
1029
+ <span class="text-sm text-gray-600">Ink Coverage:</span>
1030
+ <span id="inkCoverage" class="text-sm font-medium">Medium</span>
1031
+ </div>
1032
+ </div>
1033
+
1034
+ <div class="mt-4 pt-3 border-t border-gray-100">
1035
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Potential Issues</h4>
1036
+ <div id="previewIssues" class="space-y-2">
1037
+ <div class="flex items-start">
1038
+ <div class="flex-shrink-0 h-5 w-5 text-yellow-500">
1039
+ <i class="fas fa-exclamation-triangle"></i>
1040
+ </div>
1041
+ <div class="ml-2">
1042
+ <p class="text-xs text-gray-600">3 paths exceed recommended speed</p>
1043
+ </div>
1044
+ </div>
1045
+ <div class="flex items-start">
1046
+ <div class="flex-shrink-0 h-5 w-5 text-blue-500">
1047
+ <i class="fas fa-info-circle"></i>
1048
+ </div>
1049
+ <div class="ml-2">
1050
+ <p class="text-xs text-gray-600">Long pen-up move: 120mm</p>
1051
+ </div>
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+ </div>
1056
+
1057
+ <!-- Layer Preview -->
1058
+ <div class="bg-white rounded-xl shadow-sm p-5">
1059
+ <h3 class="font-medium text-gray-800 mb-3">Layer Preview</h3>
1060
+
1061
+ <div class="space-y-2 max-h-60 overflow-y-auto">
1062
+ <div class="flex items-center p-2 bg-blue-50 rounded border border-blue-100">
1063
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-red-500 mr-2"></div>
1064
+ <div class="flex-1 min-w-0">
1065
+ <p class="text-sm font-medium text-gray-900 truncate">Outline Layer</p>
1066
+ <p class="text-xs text-gray-500">42 paths, 1.2m</p>
1067
+ </div>
1068
+ <div class="flex items-center">
1069
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">Visible</span>
1070
+ </div>
1071
+ </div>
1072
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded">
1073
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-green-500 mr-2"></div>
1074
+ <div class="flex-1 min-w-0">
1075
+ <p class="text-sm font-medium text-gray-900 truncate">Details Layer</p>
1076
+ <p class="text-xs text-gray-500">35 paths, 0.8m</p>
1077
+ </div>
1078
+ <div class="flex items-center">
1079
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">Visible</span>
1080
+ </div>
1081
+ </div>
1082
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded">
1083
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-blue-500 mr-2"></div>
1084
+ <div class="flex-1 min-w-0">
1085
+ <p class="text-sm font-medium text-gray-900 truncate">Annotations</p>
1086
+ <p class="text-xs text-gray-500">10 paths, 0.3m</p>
1087
+ </div>
1088
+ <div class="flex items-center">
1089
+ <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded">Hidden</span>
1090
+ </div>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <div class="mt-3 pt-3 border-t border-gray-100">
1095
+ <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">
1096
+ <i class="fas fa-eye mr-2"></i> Toggle All Layers
1097
+ </button>
1098
+ </div>
1099
+ </div>
1100
+
1101
+ <!-- Preview Options -->
1102
+ <div class="bg-white rounded-xl shadow-sm p-5">
1103
+ <h3 class="font-medium text-gray-800 mb-3">Preview Options</h3>
1104
+
1105
+ <div class="space-y-3">
1106
+ <div class="flex items-center justify-between">
1107
+ <span class="text-sm text-gray-700">Show Pen Up Moves</span>
1108
+ <label class="relative inline-flex items-center cursor-pointer">
1109
+ <input type="checkbox" checked class="sr-only peer">
1110
+ <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>
1111
+ </label>
1112
+ </div>
1113
+ <div class="flex items-center justify-between">
1114
+ <span class="text-sm text-gray-700">Show Pen Position</span>
1115
+ <label class="relative inline-flex items-center cursor-pointer">
1116
+ <input type="checkbox" class="sr-only peer">
1117
+ <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>
1118
+ </label>
1119
+ </div>
1120
+ <div class="flex items-center justify-between">
1121
+ <span class="text-sm text-gray-700">Color by Speed</span>
1122
+ <label class="relative inline-flex items-center cursor-pointer">
1123
+ <input type="checkbox" class="sr-only peer">
1124
+ <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>
1125
+ </label>
1126
+ </div>
1127
+ <div class="flex items-center justify-between">
1128
+ <span class="text-sm text-gray-700">Show Original Colors</span>
1129
+ <label class="relative inline-flex items-center cursor-pointer">
1130
+ <input type="checkbox" class="sr-only peer">
1131
+ <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>
1132
+ </label>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+ </div>
1138
+ </div>
1139
+
1140
+ <!-- Statistics Tab Content -->
1141
+ <div id="stats" class="tab-content">
1142
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
1143
+ <!-- Left Column -->
1144
+ <div class="lg:col-span-2 space-y-6">
1145
+ <!-- Time Statistics -->
1146
+ <div class="bg-white rounded-xl shadow-sm p-5">
1147
+ <div class="flex justify-between items-center mb-4">
1148
+ <h3 class="font-medium text-gray-800">Time Statistics</h3>
1149
+ <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">
1150
+ <option value="7days">Last 7 Days</option>
1151
+ <option value="30days" selected>Last 30 Days</option>
1152
+ <option value="90days">Last 90 Days</option>
1153
+ <option value="all">All Time</option>
1154
+ </select>
1155
+ </div>
1156
+
1157
+ <div class="h-64 bg
1158
+ </html>