Add reset button to restore all sliders to their original default values

web/chaos-game-3d.html

@@ -167,6 +167,9 @@ <h4>Examples:</h4>
 </div>
 
 <div id="sliders"></div>
+<div id="reset-sliders-container">
+  <button id="resetSlidersBtn">Reset ⟲</button>
+</div>
 <div id="progress-indicator"></div>
 
 <div id="threejs-container">

web/chaos-game.html

@@ -192,6 +192,9 @@ <h4>Examples:</h4>
     <span id="pointsInView"></span>
 </div>
 <div id="sliders"></div>
+<div id="reset-sliders-container">
+  <button id="resetSlidersBtn">Reset ⟲</button>
+</div>
 <div id="progress-indicator"></div>
 <canvas id="myCanvas" width="1000" height="1000"></canvas>
 <script type="module" src="static/chaos-game.js?v=a82c764f0033"></script>

web/static/chaos-game-3d.js

@@ -23,6 +23,7 @@ let draggedVertexIndex = -1;
 
 // Store user control values
 const slidersValuesCache = new Map();
+const sliderDefaults = new Map();
 
 function getRandomVisiblePoint() {
     const x = (Math.random() - 0.5) * SPHERE_RADIUS;
@@ -110,6 +111,8 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
   const slider = document.createElement('div');
   container.appendChild(slider);
 
+  sliderDefaults.set(label, defaultValue);
+
   noUiSlider.create(slider, {
     start: defaultValue,
     connect: true,
@@ -119,11 +122,10 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
 
   // Check for value from Share link and update if exists
   if (window.sharedSliderValues && window.sharedSliderValues[label] !== undefined) {
-    defaultValue = window.sharedSliderValues[label];
-    slider.noUiSlider.set(defaultValue);
+    slider.noUiSlider.set(window.sharedSliderValues[label]);
   }
 
-  slidersValuesCache.set(label, defaultValue);
+  slidersValuesCache.set(label, slider.noUiSlider.get());
   valueDisplay.innerHTML = '<big>' + defaultValue.toFixed(2) + '</big>';
 
   slider.noUiSlider.on('update', function(values) {
@@ -146,6 +148,24 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
   return container;
 }
 
+function resetAllSliders() {
+    for (const [label, defaultValue] of sliderDefaults.entries()) {
+        const sliderElements = document.querySelectorAll('.slider');
+        for (const sliderContainer of sliderElements) {
+            const labelElem = sliderContainer.querySelector('label');
+            if (labelElem && labelElem.textContent.startsWith(label + ':')) {
+                const divs = sliderContainer.querySelectorAll('div');
+                for (const div of divs) {
+                    if (div.noUiSlider) {
+                        div.noUiSlider.set(defaultValue);
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+}
 
 function handleMathJSExpressionsError(error) {
   const errorDiv = document.getElementById('errorMessage');
@@ -773,6 +793,10 @@ document.getElementById('generateAddBtn').addEventListener('click', function() {
   generateAndDraw(false);
 });
 
+document.getElementById('resetSlidersBtn').addEventListener('click', function() {
+  resetAllSliders();
+});
+
 document.getElementById('stopBtn').addEventListener('click', function() {
   // Stop generation by incrementing the generation ID
   currentGenerationId++;

web/static/chaos-game.css

@@ -119,13 +119,35 @@ label[for="initializationMathJSCode"] {
 }
 
 #sliders {
-  width: 100%;
-  max-width: 1000px;  /* Match canvas width */
+  display: inline-block;
+  vertical-align: bottom;
+  max-width: calc(1000px - 100px);  /* Leave space for reset button */
   margin-top: 5px;
   padding: 5px;
   box-sizing: border-box;
 }
 
+#reset-sliders-container {
+  display: inline-block;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+
+#resetSlidersBtn {
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+#resetSlidersBtn:hover {
+  background: #f5f5f5;
+  border-color: #4285F4;
+}
+
 .slider {
   margin: 10px 0;
 }

web/static/chaos-game.js

@@ -13,6 +13,7 @@ let draggedVertexIndex = -1;
 
 // Store user control values
 const slidersValuesCache = new Map();
+const sliderDefaults = new Map();
 
 // Canvas setup with transformed context
 const canvas = document.getElementById('myCanvas');
@@ -47,6 +48,8 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
     const slider = document.createElement('div');
     container.appendChild(slider);
 
+    sliderDefaults.set(label, defaultValue);
+
     noUiSlider.create(slider, {
         start: defaultValue,
         connect: true,
@@ -56,11 +59,10 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
 
     // Check for value from Share link and update if exists
     if (window.sharedSliderValues && window.sharedSliderValues[label] !== undefined) {
-        defaultValue = window.sharedSliderValues[label];
-        slider.noUiSlider.set(defaultValue);
+        slider.noUiSlider.set(window.sharedSliderValues[label]);
     }
 
-    slidersValuesCache.set(label, defaultValue);
+    slidersValuesCache.set(label, slider.noUiSlider.get());
 
     valueDisplay.innerHTML = '<big>' + defaultValue.toFixed(2) + '</big>';
 
@@ -86,6 +88,25 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
     return container;
 }
 
+function resetAllSliders() {
+    for (const [label, defaultValue] of sliderDefaults.entries()) {
+        const sliderElements = document.querySelectorAll('.slider');
+        for (const sliderContainer of sliderElements) {
+            const labelElem = sliderContainer.querySelector('label');
+            if (labelElem && labelElem.textContent.startsWith(label + ':')) {
+                const divs = sliderContainer.querySelectorAll('div');
+                for (const div of divs) {
+                    if (div.noUiSlider) {
+                        div.noUiSlider.set(defaultValue);
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+}
+
 function getCircleCoord(theta) {
   const x = CIRCLE_RADIUS * Math.cos(theta);
   const y = CIRCLE_RADIUS * Math.sin(theta);
@@ -743,6 +764,10 @@ document.getElementById('generateAddBtn').addEventListener('click', function() {
   generateAndDraw(false);
 });
 
+document.getElementById('resetSlidersBtn').addEventListener('click', function() {
+  resetAllSliders();
+});
+
 document.getElementById('stopBtn').addEventListener('click', function() {
   // Stop generation by incrementing the generation ID
   currentGenerationId++;