added spark handle image (#101)

* added spark handle image

* small fix

* small fixes to images

* led positions for spark handle, need to be updated

* fixed image and led positioning

js/LedSelectPanel.js

@@ -114,8 +114,7 @@ export default class LedSelectPanel extends Panel {
     const swapDeviceButton = document.createElement('button');
     swapDeviceButton.id = 'swapDeviceImage';
     swapDeviceButton.title = 'Swap Device';
-    // TODO: show this button to swap between spark devices
-    swapDeviceButton.style.display = 'none'; // (this.selectedDevice === 'Spark') ? 'block' : 'none';
+    swapDeviceButton.style.display = (this.selectedDevice === 'Spark') ? 'block' : 'none';
     swapDeviceButton.innerHTML = '<i class="fa-solid fa-right-left"></i>'
     swapDeviceButton.addEventListener('click', () => this.toggleAltImage());
     deviceImageContainer.appendChild(swapDeviceButton);

js/VortexEditor.js

@@ -135,7 +135,7 @@ export default class VortexEditor {
         label: 'Spark',
         ledCount: 6,
         // alternate spark image/icon/label for handle
-        altImage: 'public/images/orbit.png',
+        altImage: 'public/images/spark-handle.png',
         altIcon: 'public/images/spark-handle-logo-square-64.png',
         altLabel: 'SparkHandle',
       },

public/data/sparkhandle-led-positions.json

@@ -0,0 +1,13 @@
+{
+    "device_name": "Sparkhandle",
+    "original_width": 500,
+    "original_height": 250,
+    "points": [
+        {"x": 300, "y": 222, "name": "Bottom Right" },
+        {"x": 200, "y": 222, "name": "Bottom Left" },
+        {"x": 200, "y": 130, "name": "Middle Left" },
+        {"x": 200, "y": 40, "name": "Top Left" },
+        {"x": 300, "y": 40, "name": "Top Right" },
+        {"x": 300, "y": 130, "name": "Middle Right" }
+    ]
+}