improved lightshow

docs/assets/js/Lightshow.js

@@ -245,12 +245,12 @@ export default class Lightshow {
     }
   }
 
-  pressButton() {
-    this.vortex.pressButton(0);
+  shortClick() {
+    this.vortex.shortClick(0);
   }
 
-  releaseButton() {
-    this.vortex.releaseButton(0);
+  longClick() {
+    this.vortex.longClick(0);
   }
 }
 

docs/assets/js/initLightshow.js

@@ -5,31 +5,21 @@ document.addEventListener('DOMContentLoaded', function() {
   const canvasId = 'vortex-canvas';
   const options = { type: 'scrolling', sectionCount: 20 };
 
-  // Initialize the Vortex Engine WebAssembly module
   VortexLib().then(function(vortexLib) {
     const lightshow = new Lightshow(vortexLib, canvasId, options);
-    lightshow.start(); // Start the animation
+    lightshow.start();
 
-    const canvas = document.getElementById(canvasId);
+    const cycleButton = document.getElementById('cycle-button');
+    const selectButton = document.getElementById('select-button');
 
-    // Handle mouse/touch press on the canvas
-    canvas.addEventListener('mousedown', function() {
-      lightshow.pressButton(); // Call pressButton on canvas mousedown
+    // Handle Cycle button click
+    cycleButton.addEventListener('click', function() {
+      lightshow.vortex.shortClick(0); // Example: cycle through modes
     });
 
-    // Handle mouse/touch release on the canvas
-    canvas.addEventListener('mouseup', function() {
-      lightshow.releaseButton(); // Call releaseButton on canvas mouseup
-    });
-
-    // Handle touch events for mobile
-    canvas.addEventListener('touchstart', function() {
-      lightshow.pressButton(); // Call pressButton on touchstart
-    });
-
-    canvas.addEventListener('touchend', function() {
-      lightshow.releaseButton(); // Call releaseButton on touchend
+    // Handle Select button click
+    selectButton.addEventListener('click', function() {
+      lightshow.vortex.longClick(0); // Example: select the current mode or pattern
     });
   });
 });
-

docs/led_selection.md

@@ -19,3 +19,8 @@ The led selection is always the first step after entering one of these menus.
 <div id="lightshow-container" style="width: 100%; height: 400px;">
   <canvas id="vortex-canvas"></canvas>
 </div>
+
+<div id="controls">
+  <button id="cycle-button" class="lightshow-button">Cycle</button>
+  <button id="select-button" class="lightshow-button">Select</button>
+</div>