diff --git a/web/chaos-game-3d.html b/web/chaos-game-3d.html
index 13971a2..b591ef2 100644
--- a/web/chaos-game-3d.html
+++ b/web/chaos-game-3d.html
@@ -167,6 +167,9 @@
Examples:
+
+
+
diff --git a/web/chaos-game.html b/web/chaos-game.html
index 885fb43..c773031 100644
--- a/web/chaos-game.html
+++ b/web/chaos-game.html
@@ -192,6 +192,9 @@
Examples:
+
+
+
diff --git a/web/static/chaos-game-3d.js b/web/static/chaos-game-3d.js
index 86568f8..80ada8e 100644
--- a/web/static/chaos-game-3d.js
+++ b/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 = '' + defaultValue.toFixed(2) + '';
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++;
diff --git a/web/static/chaos-game.css b/web/static/chaos-game.css
index 672f7b4..67456cf 100644
--- a/web/static/chaos-game.css
+++ b/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;
}
diff --git a/web/static/chaos-game.js b/web/static/chaos-game.js
index 3da373d..3e8c576 100644
--- a/web/static/chaos-game.js
+++ b/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 = '' + defaultValue.toFixed(2) + '';
@@ -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++;