Skip to content

Conversation

@hemanth5055
Copy link
Contributor

📌 Description

This PR fixes the knob background color logic for parameters with ranges that span negative to positive values (e.g., -100 to 100).

  • Previously, the knob background worked only for 0 → 100 ranges (green → red).

  • For bipolar ranges like -100 → 100, the midpoint (0) should represent balance and display as green, while extremes (-100 and 100) should display as red.

  • Added a gradient mapping for negative, zero, and positive values:

    • -100 → red
    • -75 → orange
    • 0 → green
    • +75 → orange
    • +100 → red

✅ Related Issue

Closes #60


📷 Screenshots

Before

Knob background incorrectly mapped 0 → green and 100 → red, but did not account for -100 → 100 ranges.

After

Knob background now correctly displays red at extremes, green at center, orange in between for bipolar ranges.

Screen.Recording.2025-10-01.at.5.48.09.PM.mov

⚠️ Breaking Changes

  • None. The fix only updates knob UI behavior for parameters with bipolar ranges.

🔍 Testing Done

  • Verified knob color behavior with 0 → 100 ranges (unchanged).
  • Verified knob color behavior with -100 → 100 ranges (now correct).
  • Manually tested with parameters like panning.

ℹ️ Additional Notes

  • Improves UI intuitiveness and clarity for parameters with bipolar ranges.
  • Small but impactful UX improvement.

: Array(4).fill(undefined);

const value = param ? paramState[param] : 0;
const isBipolar = param?.endsWith("Panning");
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we detect this dynamically instead of hardcoding to panning params? I think we can use paramRange from params.ts

};

const green: [number, number, number] = [170, 255, 170];
const orange: [number, number, number] = [255, 200, 0];
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need orange as a specified colour, we can just rely on the blending between green and red. (I can see how that was confusing in the issue description, sorry about that!)

@lilyvanoekel
Copy link
Owner

@hemanth5055 thanks for this PR! I had a few small comments.

I also have a question about the video. It seems like the velocity knob also changes background colour?

@hemanth5055
Copy link
Contributor Author

@hemanth5055 thanks for this PR! I had a few small comments.

I also have a question about the video. It seems like the velocity knob also changes background colour?

Hey @lilyvanoekel, thanks for the review .Yes, I noticed that the velocity knob background changes. I will investigate the cause and work on the issues you mentioned above.

@hemanth5055
Copy link
Contributor Author

Hey @lilyvanoekel, I’ve updated the code according to your review and also fixed the issue where the velocity knob’s background was changing when adjusting the panning knob.

Screen.Recording.2025-10-01.at.10.46.59.PM.mov

@lilyvanoekel lilyvanoekel merged commit 4bf392c into lilyvanoekel:main Oct 1, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix knob background light for parameters that have a range like -100 to 100 (as opposed to 0 to 100).

2 participants