Dreamodus/DreamKnob
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions

Gauge: short rim pointer so the needle never covers the center readout

Browse source 
The full center-to-rim needle crossed the digital readout at low/mid
values. Draw it as a short marker riding just inside the arc (with a dark
outline for contrast) and recenter the readout.
This commit is contained in:
Dreamodus 2026-07-13 19:36:28 -07:00
parent 5b97091902
commit 89c7a7f603
1 changed files with 19 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

26
packages/dreamknob/src/skins/Gauge.tsx
View file

@ -91,8 +91,10 @@ export const Gauge: React.FC<GaugeProps> = ({
const valueAngle = angleFromNormalized(n, angleOffset, angleRange);
const trackPath = describeArc(c, c, r, angleOffset, angleOffset + angleRange);
const valuePath = n > 0.001 ? describeArc(c, c, r, angleOffset, valueAngle) : '';
const tip = polarToCartesian(c, c, r - t * 0.1, valueAngle);
const tail = polarToCartesian(c, c, t * 0.4, valueAngle);
// A short pointer riding the rim — it never crosses the center, so it can't
// cover the digital readout that sits there.
const tip = polarToCartesian(c, c, r + t * 0.15, valueAngle);
const tail = polarToCartesian(c, c, r - t * 1.2, valueAngle);
return (
<div
@ -117,18 +119,28 @@ export const Gauge: React.FC<GaugeProps> = ({
{valuePath && (
<path d={valuePath} fill="none" stroke={litColor} strokeWidth={t} strokeLinecap="round" />
)}
{needle && (
{needle && n > 0.001 && (
<line
x1={tail.x}
y1={tail.y}
x2={tip.x}
y2={tip.y}
stroke={litColor}
strokeWidth={Math.max(2, size * 0.022)}
stroke="#0b0d0e"
strokeWidth={Math.max(3, size * 0.05)}
strokeLinecap="round"
/>
)}
{needle && n > 0.001 && (
<line
x1={tail.x}
y1={tail.y}
x2={tip.x}
y2={tip.y}
stroke="#fff"
strokeWidth={Math.max(1.5, size * 0.022)}
strokeLinecap="round"
/>
)}
{needle && <circle cx={c} cy={c} r={Math.max(2.5, size * 0.04)} fill={litColor} />}
</svg>
{showValue && (
<div
@ -136,7 +148,7 @@ export const Gauge: React.FC<GaugeProps> = ({
position: 'absolute',
left: 0,
right: 0,
top: needle ? '58%' : '50%',
top: '50%',
transform: 'translateY(-50%)',
display: 'flex',
flexDirection: 'column',