Hugging Face's logo

Spaces:
MedBoussouni
/
bantam-nextdraw-illustrator-control-panel
Running

App Files Community
MedBoussouni commited on
Commit
8956c67
·
verified ·
1 Parent(s): d671020

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +444 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bantam Nextdraw Illustrator Control Panel
3
- emoji: 🐢
4
- colorFrom: blue
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: bantam-nextdraw-illustrator-control-panel
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,444 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NextDraw Control Panel</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
+ @keyframes pulse {
11
+ 0% { opacity: 0.6; }
12
+ 50% { opacity: 1; }
13
+ 100% { opacity: 0.6; }
14
+ }
15
+
16
+ .pulse-animation {
17
+ animation: pulse 1.5s infinite;
18
+ }
19
+
20
+ .custom-scrollbar::-webkit-scrollbar {
21
+ width: 6px;
22
+ height: 6px;
23
+ }
24
+
25
+ .custom-scrollbar::-webkit-scrollbar-track {
26
+ background: #f1f1f1;
27
+ border-radius: 10px;
28
+ }
29
+
30
+ .custom-scrollbar::-webkit-scrollbar-thumb {
31
+ background: #888;
32
+ border-radius: 10px;
33
+ }
34
+
35
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
36
+ background: #555;
37
+ }
38
+
39
+ .tab-active {
40
+ border-bottom: 3px solid #4f46e5;
41
+ color: #4f46e5;
42
+ font-weight: 600;
43
+ }
44
+
45
+ .slider-thumb::-webkit-slider-thumb {
46
+ -webkit-appearance: none;
47
+ appearance: none;
48
+ width: 18px;
49
+ height: 18px;
50
+ border-radius: 50%;
51
+ background: #4f46e5;
52
+ cursor: pointer;
53
+ }
54
+
55
+ .slider-thumb::-moz-range-thumb {
56
+ width: 18px;
57
+ height: 18px;
58
+ border-radius: 50%;
59
+ background: #4f46e5;
60
+ cursor: pointer;
61
+ }
62
+
63
+ .bg-bantam-dark {
64
+ background-color: #1e1b4b;
65
+ }
66
+
67
+ .bg-bantam-light {
68
+ background-color: #4f46e5;
69
+ }
70
+
71
+ .text-bantam {
72
+ color: #4f46e5;
73
+ }
74
+
75
+ .border-bantam {
76
+ border-color: #4f46e5;
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="bg-gray-100 font-sans text-gray-800">
81
+ <div class="container mx-auto p-4 max-w-4xl">
82
+ <!-- Header with Bantam branding -->
83
+ <div class="flex items-center justify-between mb-6">
84
+ <div class="flex items-center">
85
+ <div class="bg-bantam-light text-white p-3 rounded-lg mr-3">
86
+ <i class="fas fa-drafting-compass text-2xl"></i>
87
+ </div>
88
+ <div>
89
+ <h1 class="text-2xl font-bold">NextDraw Control Panel</h1>
90
+ <p class="text-sm text-gray-600">For Adobe Illustrator | Version 2.1.0</p>
91
+ </div>
92
+ </div>
93
+ <div class="flex space-x-2">
94
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded-lg text-sm">
95
+ <i class="fas fa-question-circle mr-1"></i> Docs
96
+ </button>
97
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded-lg text-sm">
98
+ <i class="fas fa-cog mr-1"></i> Preferences
99
+ </button>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Connection Status -->
104
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6">
105
+ <div class="flex items-center justify-between">
106
+ <div class="flex items-center">
107
+ <div id="connection-status" class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
108
+ <span id="connection-text" class="font-medium">Machine Offline</span>
109
+ </div>
110
+ <button id="connect-btn" class="bg-bantam-light hover:bg-bantam-dark text-white px-4 py-2 rounded-lg">
111
+ <i class="fas fa-plug mr-2"></i> Connect
112
+ </button>
113
+ </div>
114
+
115
+ <div id="device-info" class="mt-4 hidden">
116
+ <div class="grid grid-cols-3 gap-4">
117
+ <div class="bg-gray-50 p-3 rounded-lg">
118
+ <p class="text-xs text-gray-500">Machine</p>
119
+ <p class="font-medium">Bantam NextDraw</p>
120
+ </div>
121
+ <div class="bg-gray-50 p-3 rounded-lg">
122
+ <p class="text-xs text-gray-500">Firmware</p>
123
+ <p class="font-medium">2.2.1</p>
124
+ </div>
125
+ <div class="bg-gray-50 p-3 rounded-lg">
126
+ <p class="text-xs text-gray-500">Connection</p>
127
+ <p class="font-medium">USB</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Main Content -->
134
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
135
+ <!-- Tabs -->
136
+ <div class="flex border-b">
137
+ <button class="tab-btn px-4 py-3 text-sm tab-active" data-tab="plotting">Plotting</button>
138
+ <button class="tab-btn px-4 py-3 text-sm" data-tab="machine-control">Machine Control</button>
139
+ <button class="tab-btn px-4 py-3 text-sm" data-tab="material-settings">Material Settings</button>
140
+ <button class="tab-btn px-4 py-3 text-sm" data-tab="preview">Preview</button>
141
+ </div>
142
+
143
+ <!-- Tab Content -->
144
+ <div class="p-4">
145
+ <!-- Plotting Tab -->
146
+ <div id="plotting" class="tab-content">
147
+ <div class="mb-6">
148
+ <h3 class="font-medium mb-2">Document Settings</h3>
149
+ <div class="grid grid-cols-2 gap-4">
150
+ <div>
151
+ <label class="block text-sm text-gray-600 mb-1">Artwork Selection</label>
152
+ <select class="w-full border rounded-lg px-3 py-2">
153
+ <option>All Artboards</option>
154
+ <option selected>Current Artboard</option>
155
+ <option>Selected Paths Only</option>
156
+ </select>
157
+ </div>
158
+ <div>
159
+ <label class="block text-sm text-gray-600 mb-1">Work Area</label>
160
+ <select class="w-full border rounded-lg px-3 py-2">
161
+ <option selected>Full Bed (8" x 6")</option>
162
+ <option>Custom Area</option>
163
+ <option>Material Size</option>
164
+ </select>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="mb-6">
170
+ <h3 class="font-medium mb-2">Plotting Mode</h3>
171
+ <div class="grid grid-cols-3 gap-4">
172
+ <button class="mode-btn border rounded-lg p-3 hover:bg-indigo-50 hover:border-indigo-300">
173
+ <i class="fas fa-pen-nib text-bantam text-xl mb-2"></i>
174
+ <p class="font-medium">Standard</p>
175
+ <p class="text-xs text-gray-500">Normal plotting</p>
176
+ </button>
177
+ <button class="mode-btn border rounded-lg p-3 hover:bg-indigo-50 hover:border-indigo-300">
178
+ <i class="fas fa-pen text-bantam text-xl mb-2"></i>
179
+ <p class="font-medium">Pressure</p>
180
+ <p class="text-xs text-gray-500">Variable pressure</p>
181
+ </button>
182
+ <button class="mode-btn border rounded-lg p-3 hover:bg-indigo-50 hover:border-indigo-300">
183
+ <i class="fas fa-redo-alt text-bantam text-xl mb-2"></i>
184
+ <p class="font-medium">Multi-pass</p>
185
+ <p class="text-xs text-gray-500">Layered drawing</p>
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="flex justify-between items-center">
191
+ <div>
192
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg mr-2">
193
+ <i class="fas fa-home mr-2"></i> Home Machine
194
+ </button>
195
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg">
196
+ <i class="fas fa-bullseye mr-2"></i> Test Plot
197
+ </button>
198
+ </div>
199
+ <button id="plot-btn" class="bg-bantam-light hover:bg-bantam-dark text-white px-6 py-2 rounded-lg font-medium">
200
+ <i class="fas fa-play mr-2"></i> Start Drawing
201
+ </button>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Machine Control Tab -->
206
+ <div id="machine-control" class="tab-content hidden">
207
+ <div class="mb-6">
208
+ <h3 class="font-medium mb-4">Pen/Tool Settings</h3>
209
+ <div class="space-y-4">
210
+ <div>
211
+ <label class="block text-sm text-gray-600 mb-1">Pen Pressure (0-100%)</label>
212
+ <input type="range" min="0" max="100" value="60" class="w-full slider-thumb">
213
+ <div class="flex justify-between text-xs text-gray-500">
214
+ <span>0%</span>
215
+ <span>25%</span>
216
+ <span>50%</span>
217
+ <span>75%</span>
218
+ <span>100%</span>
219
+ </div>
220
+ </div>
221
+ <div>
222
+ <label class="block text-sm text-gray-600 mb-1">Drawing Speed (mm/s)</label>
223
+ <input type="range" min="1" max="200" value="120" class="w-full slider-thumb">
224
+ <div class="flex justify-between text-xs text-gray-500">
225
+ <span>1</span>
226
+ <span>50</span>
227
+ <span>100</span>
228
+ <span>150</span>
229
+ <span>200</span>
230
+ </div>
231
+ </div>
232
+ <div>
233
+ <label class="block text-sm text-gray-600 mb-1">Z-axis Travel Speed</label>
234
+ <input type="range" min="1" max="100" value="50" class="w-full slider-thumb">
235
+ <div class="flex justify-between text-xs text-gray-500">
236
+ <span>Slow</span>
237
+ <span>Medium</span>
238
+ <span>Fast</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="mb-6">
245
+ <h3 class="font-medium mb-2">Machine Actions</h3>
246
+ <div class="grid grid-cols-3 gap-4">
247
+ <button class="border rounded-lg p-3 hover:bg-indigo-50 hover:border-indigo-300">
248
+ <i class="fas fa-arrow-up text-bantam text-xl mb-2"></i>
249
+ <p class="font-medium">Pen Up</p>
250
+ </button>
251
+ <button class="border rounded-lg p-3 hover:bg-indigo-50 hover:border-indigo-300">
252
+ <i class="fas fa-arrow-down text-bantam text-xl mb-2"></i>
253
+ <p class="font-medium">Pen Down</p>
254
+ </button>
255
+ <button class="border rounded-lg p-3 hover:bg-indigo-50 hover:border-indigo-300">
256
+ <i class="fas fa-ruler text-bantam text-xl mb-2"></i>
257
+ <p class="font-medium">Measure</p>
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Material Settings Tab -->
264
+ <div id="material-settings" class="tab-content hidden">
265
+ <div class="mb-6">
266
+ <h3 class="font-medium mb-4">Material Setup</h3>
267
+ <div class="grid grid-cols-2 gap-4 mb-4">
268
+ <div>
269
+ <label class="block text-sm text-gray-600 mb-1">Material Thickness (mm)</label>
270
+ <input type="number" value="3.0" step="0.1" class="w-full border rounded-lg px-3 py-2">
271
+ </div>
272
+ <div>
273
+ <label class="block text-sm text-gray-600 mb-1">Surface Type</label>
274
+ <select class="w-full border rounded-lg px-3 py-2">
275
+ <option>Standard</option>
276
+ <option selected>Soft Surface</option>
277
+ <option>Hard Surface</option>
278
+ <option>Custom</option>
279
+ </select>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="space-y-3">
284
+ <label class="flex items-center">
285
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-bantam" checked>
286
+ <span class="ml-2 text-sm">Auto-detect material height</span>
287
+ </label>
288
+ <label class="flex items-center">
289
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-bantam">
290
+ <span class="ml-2 text-sm">Use vacuum bed</span>
291
+ </label>
292
+ <label class="flex items-center">
293
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-bantam" checked>
294
+ <span class="ml-2 text-sm">Optimize path order</span>
295
+ </label>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="mb-6">
300
+ <h3 class="font-medium mb-4">Advanced Settings</h3>
301
+ <div class="grid grid-cols-2 gap-4">
302
+ <div>
303
+ <label class="block text-sm text-gray-600 mb-1">Acceleration (%)</label>
304
+ <input type="number" value="80" class="w-full border rounded-lg px-3 py-2">
305
+ </div>
306
+ <div>
307
+ <label class="block text-sm text-gray-600 mb-1">Jerk Control</label>
308
+ <input type="number" value="30" class="w-full border rounded-lg px-3 py-2">
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Preview Tab -->
315
+ <div id="preview" class="tab-content hidden">
316
+ <div class="mb-4">
317
+ <h3 class="font-medium mb-2">Drawing Preview</h3>
318
+ <p class="text-sm text-gray-600 mb-3">Estimated drawing time: <span class="font-medium">8 minutes 22 seconds</span> | Toolpaths: <span class="font-medium">147</span></p>
319
+ <div class="border rounded-lg p-3 bg-gray-50 h-64 overflow-auto custom-scrollbar">
320
+ <div class="bg-white p-4 shadow-sm" style="width: 600px; height: 450px; margin: 0 auto; position: relative;">
321
+ <!-- Machine bed representation -->
322
+ <div class="absolute border-2 border-gray-300" style="width: 100%; height: 75%; top: 12.5%;"></div>
323
+ <!-- This would be replaced with actual preview rendering -->
324
+ <div class="flex items-center justify-center h-full text-gray-400">
325
+ <div class="text-center">
326
+ <i class="fas fa-drafting-compass text-4xl mb-3"></i>
327
+ <p>Drawing preview will appear here</p>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="flex justify-between items-center">
335
+ <div>
336
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg">
337
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate Preview
338
+ </button>
339
+ </div>
340
+ <div class="flex space-x-2">
341
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg">
342
+ <i class="fas fa-file-export mr-2"></i> Export G-code
343
+ </button>
344
+ <button class="bg-bantam-light hover:bg-bantam-dark text-white px-4 py-2 rounded-lg">
345
+ <i class="fas fa-play mr-2"></i> Start Drawing
346
+ </button>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Status Bar -->
354
+ <div class="mt-4 bg-white rounded-xl shadow-md p-3 text-sm flex justify-between items-center">
355
+ <div class="flex items-center">
356
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
357
+ <span>Ready to draw</span>
358
+ </div>
359
+ <div class="text-gray-500">
360
+ <i class="fas fa-info-circle mr-1"></i> Select artwork to begin
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <script>
366
+ // Tab switching
367
+ document.querySelectorAll('.tab-btn').forEach(btn => {
368
+ btn.addEventListener('click', () => {
369
+ // Remove active class from all tabs
370
+ document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('tab-active'));
371
+ // Add active class to clicked tab
372
+ btn.classList.add('tab-active');
373
+
374
+ // Hide all tab contents
375
+ document.querySelectorAll('.tab-content').forEach(content => {
376
+ content.classList.add('hidden');
377
+ });
378
+
379
+ // Show selected tab content
380
+ const tabId = btn.getAttribute('data-tab');
381
+ document.getElementById(tabId).classList.remove('hidden');
382
+ });
383
+ });
384
+
385
+ // Connection simulation
386
+ const connectBtn = document.getElementById('connect-btn');
387
+ const connectionStatus = document.getElementById('connection-status');
388
+ const connectionText = document.getElementById('connection-text');
389
+ const deviceInfo = document.getElementById('device-info');
390
+
391
+ connectBtn.addEventListener('click', () => {
392
+ if (connectionStatus.classList.contains('bg-red-500')) {
393
+ // Simulate connecting
394
+ connectBtn.disabled = true;
395
+ connectBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
396
+
397
+ setTimeout(() => {
398
+ connectionStatus.classList.remove('bg-red-500');
399
+ connectionStatus.classList.add('bg-green-500');
400
+ connectionText.textContent = 'Machine Online';
401
+ connectBtn.innerHTML = '<i class="fas fa-plug mr-2"></i> Disconnect';
402
+ connectBtn.disabled = false;
403
+ deviceInfo.classList.remove('hidden');
404
+ }, 1500);
405
+ } else {
406
+ // Simulate disconnecting
407
+ connectionStatus.classList.remove('bg-green-500');
408
+ connectionStatus.classList.add('bg-red-500');
409
+ connectionText.textContent = 'Machine Offline';
410
+ connectBtn.innerHTML = '<i class="fas fa-plug mr-2"></i> Connect';
411
+ deviceInfo.classList.add('hidden');
412
+ }
413
+ });
414
+
415
+ // Plot button animation
416
+ const plotBtn = document.getElementById('plot-btn');
417
+ plotBtn.addEventListener('click', () => {
418
+ plotBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Drawing...';
419
+ plotBtn.classList.add('pulse-animation');
420
+
421
+ // Simulate plotting completion after 5 seconds
422
+ setTimeout(() => {
423
+ plotBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Drawing Complete';
424
+ plotBtn.classList.remove('pulse-animation');
425
+
426
+ // Reset after 3 seconds
427
+ setTimeout(() => {
428
+ plotBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Drawing';
429
+ }, 3000);
430
+ }, 5000);
431
+ });
432
+
433
+ // Mode buttons
434
+ document.querySelectorAll('.mode-btn').forEach(btn => {
435
+ btn.addEventListener('click', () => {
436
+ document.querySelectorAll('.mode-btn').forEach(b => {
437
+ b.classList.remove('border-indigo-300', 'bg-indigo-50');
438
+ });
439
+ btn.classList.add('border-indigo-300', 'bg-indigo-50');
440
+ });
441
+ });
442
+ </script>
443
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MedBoussouni/bantam-nextdraw-illustrator-control-panel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
444
+ </html>