From b4c67e598f265f4c8c0cb9a09626b5946f7f9906 Mon Sep 17 00:00:00 2001
From: Dan <UnrealDanMail@gmail.com>
Date: Wed, 14 Aug 2024 23:59:00 -0700
Subject: [PATCH] improved lightshow

---
 docs/assets/js/Lightshow.js     |  8 ++++----
 docs/assets/js/initLightshow.js | 28 +++++++++-------------------
 docs/led_selection.md           |  5 +++++
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/docs/assets/js/Lightshow.js b/docs/assets/js/Lightshow.js
index e970983f9e..d059cc6a2e 100644
--- a/docs/assets/js/Lightshow.js
+++ b/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);
   }
 }
 
diff --git a/docs/assets/js/initLightshow.js b/docs/assets/js/initLightshow.js
index 7686316a0d..812f3461a4 100644
--- a/docs/assets/js/initLightshow.js
+++ b/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
     });
   });
 });
-
diff --git a/docs/led_selection.md b/docs/led_selection.md
index c3d25a3b41..7b4d3adb76 100644
--- a/docs/led_selection.md
+++ b/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>
\ No newline at end of file