Skip to content

Reset sliders to defaults button #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
herdrick wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Reset sliders to defaults button #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c0c60c7
Add reset button to restore all sliders to their original default values
herdrick Oct 27, 2025
342b69e
Position Reset button inline to the right of the last slider
herdrick Oct 27, 2025
5077dec
Move inline styles to CSS classes for reset button
herdrick Oct 27, 2025
5ffa405
Remove unnecessary reset button removal check
herdrick Oct 27, 2025
7622aee
3D and 2D html: comments
herdrick Oct 28, 2025
4aa4a20
Remove unused #reset-sliders-container CSS rule
herdrick Oct 28, 2025
539ac49
reset button content
herdrick Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 52 additions & 3 deletions web/static/chaos-game-3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ let draggedVertexIndex = -1;

// Store user control values
const slidersValuesCache = new Map();
const sliderDefaults = new Map(); // this holds the original (lexical) default numeric values of each slider -- not any values which may be from a share link

function getRandomVisiblePoint() {
const x = (Math.random() - 0.5) * SPHERE_RADIUS;
Expand Down Expand Up @@ -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,
Expand All @@ -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) {
Expand All @@ -146,6 +148,43 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
return container;
}

function addResetButtonToLastSlider() {
// Add reset button to the last slider container (to the right of slider bar)
const sliders = document.getElementById('sliders');
const sliderElements = sliders.querySelectorAll('.slider');
if (sliderElements.length > 0) {
const lastSlider = sliderElements[sliderElements.length - 1];

// Add class to slider for inline layout
lastSlider.classList.add('with-reset-button');

// Add button
const resetBtn = document.createElement('button');
resetBtn.id = 'resetSlidersBtn';
resetBtn.className = 'reset-button-inline';
resetBtn.textContent = 'Reset sliders ⟲';
lastSlider.appendChild(resetBtn);
}
}

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');
Expand Down Expand Up @@ -371,6 +410,9 @@ function generatePoints(debugMode, consumePoints) {
}
}

// Add reset button to the last slider after all sliders are created
addResetButtonToLastSlider();

const steps = parseInt(document.getElementById('steps').value);
const alphaValue = parseFloat(document.getElementById('alpha').value);

Expand Down Expand Up @@ -773,6 +815,13 @@ document.getElementById('generateAddBtn').addEventListener('click', function() {
generateAndDraw(false);
});

// Use event delegation for dynamically created reset button
document.addEventListener('click', function(e) {
if (e.target && e.target.id === 'resetSlidersBtn') {
resetAllSliders();
}
});

document.getElementById('stopBtn').addEventListener('click', function() {
// Stop generation by incrementing the generation ID
currentGenerationId++;
Expand Down
39 changes: 39 additions & 0 deletions web/static/chaos-game.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,49 @@ label[for="initializationMathJSCode"] {
box-sizing: border-box;
}

#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;
}

.slider.with-reset-button .noUi-target {
display: inline-block;
width: calc(100% - 100px);
vertical-align: middle;
}

.reset-button-inline {
display: inline-block;
margin-left: 10px;
vertical-align: middle;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}

.reset-button-inline:hover {
background: #f5f5f5;
border-color: #4285F4;
}

.label-container {
display: flex;
align-items: baseline;
Expand Down
55 changes: 52 additions & 3 deletions web/static/chaos-game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ let draggedVertexIndex = -1;

// Store user control values
const slidersValuesCache = new Map();
const sliderDefaults = new Map(); // this holds the original (lexical) default numeric values of each slider -- not any values which may be from a share link

// Canvas setup with transformed context
const canvas = document.getElementById('myCanvas');
Expand Down Expand Up @@ -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,
Expand All @@ -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>';

Expand All @@ -86,6 +88,44 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged
return container;
}

function addResetButtonToLastSlider() {
// Add reset button to the last slider container (to the right of slider bar)
const sliders = document.getElementById('sliders');
const sliderElements = sliders.querySelectorAll('.slider');
if (sliderElements.length > 0) {
const lastSlider = sliderElements[sliderElements.length - 1];

// Add class to slider for inline layout
lastSlider.classList.add('with-reset-button');

// Add button
const resetBtn = document.createElement('button');
resetBtn.id = 'resetSlidersBtn';
resetBtn.className = 'reset-button-inline';
resetBtn.textContent = 'Reset sliders ⟲';
lastSlider.appendChild(resetBtn);
}
}

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);
Expand Down Expand Up @@ -393,6 +433,8 @@ function generatePoints(debugMode, consumePoints) {
}
}

// Add reset button to the last slider after all sliders are created
addResetButtonToLastSlider();

const vertices = parseInt(document.getElementById('vertices').value, 10);
const steps = parseInt(document.getElementById('steps').value, 10);
Expand Down Expand Up @@ -743,6 +785,13 @@ document.getElementById('generateAddBtn').addEventListener('click', function() {
generateAndDraw(false);
});

// Use event delegation for dynamically created reset button
document.addEventListener('click', function(e) {
if (e.target && e.target.id === 'resetSlidersBtn') {
resetAllSliders();
}
});

document.getElementById('stopBtn').addEventListener('click', function() {
// Stop generation by incrementing the generation ID
currentGenerationId++;
Expand Down