From 8ade6da02ddae688a2b9d748b9ffc8a1dcd156a7 Mon Sep 17 00:00:00 2001 From: olzzon Date: Sat, 4 Dec 2021 10:20:29 +0100 Subject: [PATCH] feat: Graphical Eq scaleable - prepared Reduction meter --- client/assets/css/ChanStrip.css | 17 ---- client/assets/css/ChanStripEq.css | 47 +++++++++++ client/assets/css/ChanStripFull.css | 119 ++++++++------------------- client/assets/css/ReductionMeter.css | 33 ++++++-- client/components/ChanStrip.tsx | 2 - client/components/ChanStripEq.tsx | 88 +++++++++++--------- client/components/ChanStripFull.tsx | 37 ++++----- client/components/ReductionMeter.tsx | 15 ++-- 8 files changed, 176 insertions(+), 182 deletions(-) diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css index d3135a3f..8bab0bf9 100644 --- a/client/assets/css/ChanStrip.css +++ b/client/assets/css/ChanStrip.css @@ -98,23 +98,6 @@ margin-top: 81px; } -.reduction-6db { - color: #445f4a; - width: 63px; - height: 2px; - margin-left: -58px; - margin-right: 30px; - margin-top: 108px; -} -.reduction-12db { - color: #5c3939; - width: 63px; - height: 2px; - margin-left: -88px; - margin-right: 30px; - margin-top: 152px; -} - .zero-monitor { width: 2px; height: 20px; diff --git a/client/assets/css/ChanStripEq.css b/client/assets/css/ChanStripEq.css index 7572329d..3dd419f3 100644 --- a/client/assets/css/ChanStripEq.css +++ b/client/assets/css/ChanStripEq.css @@ -1,3 +1,18 @@ +.eq-full { + justify-content: space-evenly; +} + +.eq-full > .eq-text { + display: flex; + justify-content: space-evenly; + top: 2vh; + left: 2vw; + width: 85vw; + height: 10vh; + margin-left: 2vw; + margin-top: 2vh; +} + .eq-full > .eq-window { top: 2vh; left: 2vw; @@ -20,3 +35,35 @@ font-size: 5vh; height: 10vh; } + +.chstrip-q { + width: 15vw; + height: 0.5vh; + margin-left: 5vw; + margin-right: 5vw; + margin-top: 1vh; + border-width: 0px; + border-style: solid; + border-radius: 8px; + background-color: rgb(17, 17, 17); +} +.chstrip-q-thumb { + margin-top: -2vh; + color: #3a3a3a; + font-size: 0.8vh; + width: 3vw; + height: 4vh; + line-height: 4vh; + border: 1px solid #c5c2c2; + border-radius: 8px; + background: linear-gradient( + to right, + #3a3a3a 0%, + #c2c2c2 20%, + hsl(0, 0%, 57%) 50%, + #00a 1px, + #919191 52%, + #c2c2c2 80%, + #3a3a3a 100% + ); +} diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index f8dc6d1c..976c10f1 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -1,4 +1,5 @@ .chstrip-full-body { + justify-content: space-evenly; position: fixed; top: 5vh; left: 5vw; @@ -15,7 +16,7 @@ color: #fff; } -.chstrip-full-body > .ch-strip-full-header { +.ch-strip-full-header { margin-left: 5vw; margin-top: 1vh; margin-right: 10vw; @@ -24,63 +25,55 @@ white-space: nowrap; } -.chstrip-full-body > .chstrip-full-parameters { +.chstrip-full-parameters { + display: flex; + justify-content: space-evenly; top: 2vh; left: 2vw; - height: 100vh; + height: 30vh; overflow: auto; font-size: 1.5vh; text-align: center; } -.chstrip-full-body .chstrip-full-parameters .horizontal { +.chstrip-full-eq-window { display: flex; justify-content: space-evenly; + font-size: 1.5vh; + text-align: center; } -.chstrip-full-content { - display: flex; +.chstrip-full-parameter-text { + list-style-type: none; + text-align: center; + margin-top: 2vh; + font-size: 1.5vh; } -.chstrip-full-parameters > .inp-comp-del-group { +.chstrip-full-content-group { display: flex; - top: 2vh; - left: 2vw; - margin-left: 2vw; -} - -.eq-full > .eq-window { - top: 2vh; - left: 2vw; - margin-top: 3vh; - margin-left: 10vw; - height: 30vh; - width: 0vw; + flex-direction: column; } -.eq-full > .eq-canvas { - position: absolute; - margin-left: -36.5vw; - margin-top: 5vh; - height: 30vh; - width: 72vw; +.chstrip-full-content { + display: flex; + flex-direction: row; } -.eq-full > .eq-text { - display: flex; - justify-content: space-evenly; - top: 2vh; - left: 2vw; - width: 85vw; - height: 10vh; - margin-left: 2vw; +.chstrip-full-parameter-reduction { + list-style-type: none; + text-align: center; margin-top: 2vh; + font-size: 1.5vh; + margin-left: 3vw; } -.eq-window > .dot { - position: absolute; - font-size: 5vh; - height: 10vh; +.chstrip-full-mini-text { + list-style-type: none; + text-align: center; + max-width: 9vw; + margin-top: 1vh; + font-size: 0.8vh; } .chstrip-full-zero-comp { @@ -98,20 +91,14 @@ margin-top: -12vh; } -.chstrip-full-parameter-text { - list-style-type: none; - text-align: center; - margin-top: 2vh; - font-size: 1.5vh; -} - -.parameter-button-text { +.chstrip-full-parameter-text > .parameter-button-text { list-style-type: none; text-align: center; margin-top: 2vh; font-size: 1.2vh; } -.parameter-button { + +.chstrip-full-parameter-text > .parameter-button { margin-left: -8vw; margin-top: 2vh; outline: none; @@ -127,14 +114,6 @@ border-color: rgb(99, 99, 99); } -.chstrip-full-mini-text { - list-style-type: none; - text-align: center; - max-width: 9vw; - margin-top: 1vh; - font-size: 0.8vh; -} - .chstrip-full-delay-buttons { margin-top: 3vh; margin-left: 1vw; @@ -245,35 +224,3 @@ #3a3a3a 100% ); } - -.chstrip-q { - width: 15vw; - height: 0.5vh; - margin-left: 5vw; - margin-right: 5vw; - margin-top: 1vh; - border-width: 0px; - border-style: solid; - border-radius: 8px; - background-color: rgb(17, 17, 17); -} -.chstrip-q-thumb { - margin-top: -2vh; - color: #3a3a3a; - font-size: 0.8vh; - width: 3vw; - height: 4vh; - line-height: 4vh; - border: 1px solid #c5c2c2; - border-radius: 8px; - background: linear-gradient( - to right, - #3a3a3a 0%, - #c2c2c2 20%, - hsl(0, 0%, 57%) 50%, - #00a 1px, - #919191 52%, - #c2c2c2 80%, - #3a3a3a 100% - ); -} diff --git a/client/assets/css/ReductionMeter.css b/client/assets/css/ReductionMeter.css index c37ecd7c..62a1abca 100644 --- a/client/assets/css/ReductionMeter.css +++ b/client/assets/css/ReductionMeter.css @@ -1,17 +1,17 @@ .reductionmeter-body { - top: 2px; - width: 24px; - margin-top: 15px; - margin-left: 5px; + top: 0.8vh; + width: 2vw; + margin-top: 3vh; + margin-left: 3vw; background-color: black; border-radius: 7px; } .reductionmeter-canvas { - width: 10px; - margin-left: -5px; - bottom: 0; - height: 100%; + width: 2vw; + margin-left: -2vw; + bottom: 0px; + height: 100vh; } .reductionmeter-lower-part { @@ -29,3 +29,20 @@ margin-left: 10px; background-color: rgb(206, 0, 0); } + +.reduction-6db { + color: #445f4a; + width: 63px; + height: 2px; + margin-left: -58px; + margin-right: 30px; + margin-top: 108px; +} +.reduction-12db { + color: #5c3939; + width: 63px; + height: 2px; + margin-left: -88px; + margin-right: 30px; + margin-top: 152px; +} diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx index 5aa5bdf2..d73352bf 100644 --- a/client/components/ChanStrip.tsx +++ b/client/components/ChanStrip.tsx @@ -396,8 +396,6 @@ class ChanStrip extends React.PureComponent< )}

______

{this.gainReduction()} -

___6dB

-

___12dB

diff --git a/client/components/ChanStripEq.tsx b/client/components/ChanStripEq.tsx index c29491d3..85f02fb9 100644 --- a/client/components/ChanStripEq.tsx +++ b/client/components/ChanStripEq.tsx @@ -39,7 +39,7 @@ interface IFreqLabels { const EQ_FREQ_LABELS: IFreqLabels[] = [ { label: '50', - posY: 400, + posY: 340, }, { label: '100', @@ -47,41 +47,41 @@ const EQ_FREQ_LABELS: IFreqLabels[] = [ }, { label: '250', - posY: 700, + posY: 780, }, { label: '500', - posY: 850, + posY: 950, }, { label: '1k', - posY: 1025, + posY: 1135, }, { label: '2k', - posY: 1160, + posY: 1350, }, { label: '5k', - posY: 1350, + posY: 1575, }, { label: '10k', - posY: 1490, + posY: 1755, + }, + { + label: '20k', + posY: 1950, }, ] // Constant for calculation Eq dot positions: const EQ_MIN_HZ = 20 const EQ_MAX_HZ = 20000 -const EQ_X_SIZE = 1150 -const EQ_WIN_X = 450 -const EQ_Y_SIZE = 250 -const EQ_X_OFFSET = 315 -const EQ_Y_OFFSET = 740 - -// Constants for Delay buttons: -const DEL_VALUES = [10, 1, -1, -10] +const EQ_X_SIZE = 0.66 +const EQ_X_OFFSET = 0.18 +const EQ_Y_SIZE = 0.25 +const EQ_Y_OFFSET = 0.55 class ChanStripEq extends React.PureComponent< IChanStripFullProps & IChanStripFullInjectProps & Store @@ -117,7 +117,7 @@ class ChanStripEq extends React.PureComponent< }) } - handleDragCaptureEq(key: number, event: any) { + handleDragCaptureEq(key: number, totalWidth: number, totalHeight: number, event: any) { let eqFreqKey = fxParamsList[ String(fxParamsList[key]).replace( @@ -127,18 +127,24 @@ class ChanStripEq extends React.PureComponent< ] let eventX = event.clientX ?? event.touches[0].clientX let eventY = event.clientY ?? event.touches[0].clientY - this.handleFx(eqFreqKey, this.freqPositionToValue(eventX)) - this.handleFx( - key, - Math.round((100 * (EQ_Y_OFFSET - eventY)) / EQ_Y_SIZE) / 100 - ) + this.handleFx(eqFreqKey, this.freqPositionToValue(eventX, totalWidth)) + this.handleFx(key, this.gainPositionToValue(eventY, totalHeight)) } - valueToFreqPosition(value: number) { - return EQ_X_SIZE * value + valueToFreqPosition(value: number, totalWidth: number) { + return value * totalWidth * EQ_X_SIZE } - freqPositionToValue(position: number) { - return (position - EQ_X_OFFSET) / EQ_X_SIZE + freqPositionToValue(position: number, totalWidth: number) { + return (position - totalWidth * EQ_X_OFFSET) / (totalWidth * EQ_X_SIZE) + } + + valueToGainPosition(value: number, totalHeight: number) { + return totalHeight * EQ_Y_SIZE - value * (totalHeight * EQ_Y_SIZE) + } + gainPositionToValue(position: number, totalHeight: number) { + return ( + (totalHeight * EQ_Y_SIZE - (position - totalHeight * EQ_Y_OFFSET)) / (totalHeight * EQ_Y_SIZE) + ) } logOscToLinFreq(value: number) { @@ -160,8 +166,8 @@ class ChanStripEq extends React.PureComponent< if (!this.canvas) { return } - this.canvas.width = this.canvas.clientWidth - this.canvas.height = this.canvas.clientHeight + this.canvas.width = 2000 + this.canvas.height = 600 const context = this.canvas.getContext('2d', { antialias: false, stencil: false, @@ -172,30 +178,30 @@ class ChanStripEq extends React.PureComponent< // Fill background color: - context.rect(55, 0, this.canvas.width, this.canvas.height) + context.rect(70, 0, this.canvas.width, this.canvas.height) context.fillStyle = '#2a42274d' context.fill() // Draw X-Y axis: context.beginPath() context.strokeStyle = 'white' - context.moveTo(55, 0) - context.lineTo(55, this.canvas.height) + context.moveTo(70, 0) + context.lineTo(70, this.canvas.height) context.stroke() // Draw zero gain line: context.beginPath() context.strokeStyle = 'rgba(128, 128, 128, 0.244) 10px' - context.moveTo(55, this.canvas.height / 2) + context.moveTo(70, this.canvas.height / 2) context.lineTo(this.canvas.width, this.canvas.height / 2) context.stroke() // Freq on zero gain line: context.beginPath() EQ_FREQ_LABELS.forEach((freq: IFreqLabels) => { - context.font = String(this.canvas.height / 20) + 'px Ariel' + context.font = '30px Ariel' context.strokeStyle = 'white' context.strokeText( freq.label, freq.posY, - this.canvas.height / 2 + 20 + this.canvas.height / 2 + 30 ) }) // Freq on zero gain line: @@ -243,20 +249,23 @@ class ChanStripEq extends React.PureComponent< x: this.valueToFreqPosition( this.props.fader[this.props.faderIndex][ eqFreqKey - ]?.[0] + ]?.[0], + window.innerWidth ), - y: - EQ_Y_SIZE - + y: this.valueToGainPosition( this.props.fader[this.props.faderIndex][ fxParamsList[fxKey] - ]?.[0] * - EQ_Y_SIZE, + ]?.[0], + window.innerHeight + ), }} grid={[20, 20]} scale={100} onDrag={(event) => this.handleDragCaptureEq( fxParamsList[fxKey], + window.innerWidth, + window.innerHeight, event ) } @@ -285,7 +294,7 @@ class ChanStripEq extends React.PureComponent< .filter((fxKey: number | string) => { return String(fxKey).includes('EqGain') }) - .map((keyName: string) => { + .map((keyName: string, index: number) => { let fxKey = keyName as keyof typeof fxParamsList let eqFreqKey = fxParamsList[ @@ -312,6 +321,7 @@ class ChanStripEq extends React.PureComponent< return (
+
Redution
@@ -375,7 +375,6 @@ class ChanStripFull extends React.PureComponent< .CHANNEL_INPUT_SELECTOR return (
-
{hasInput && (
@@ -420,10 +419,6 @@ class ChanStripFull extends React.PureComponent< ______

{this.gainReduction()} -

___6dB

-

- ___12dB -

{this.fxParamFader( fxParamsList.CompMakeUp )} @@ -454,7 +449,7 @@ class ChanStripFull extends React.PureComponent< )} {this.doesParamExists(fxParamsList.DelayTime) ? ( -
+
DELAY
{this.delay()} @@ -486,25 +481,25 @@ class ChanStripFull extends React.PureComponent<
- -
- {this.doesParamExists(fxParamsList.EqGain01) ? ( -
- -
- ) : ( - - )} - -
) } else { return null } } + eq() { + return ( + + {this.doesParamExists(fxParamsList.EqGain01) ? ( +
+ +
+ ) : ( + + )} + + ) + } render() { if (this.props.faderIndex >= 0) { return ( @@ -536,6 +531,8 @@ class ChanStripFull extends React.PureComponent<
{this.parameters()} +
+ {this.eq()}
) } else { diff --git a/client/components/ReductionMeter.tsx b/client/components/ReductionMeter.tsx index 02492ee9..eba80e57 100644 --- a/client/components/ReductionMeter.tsx +++ b/client/components/ReductionMeter.tsx @@ -13,9 +13,7 @@ interface IVuMeterProps { faderIndex: number } -export class ReductionMeter extends React.Component< - IReductionMeterInjectedProps -> { +export class ReductionMeter extends React.Component { canvas: HTMLCanvasElement | undefined totalPeak: number = 0 @@ -40,10 +38,7 @@ export class ReductionMeter extends React.Component< } totalHeight = () => { - return ( - 170 / - (this.meterMax - this.meterMin) - ) + return 170 / (this.meterMax - this.meterMin) } getTotalPeak = () => { @@ -77,9 +72,7 @@ export class ReductionMeter extends React.Component< if (val < this.meterTest) { val = 0 } else if (val >= this.meterZero) { - val = - this.meterZero - - this.meterTest + val = this.meterZero - this.meterTest } else { val = this.props.reductionVal - this.meterTest } @@ -180,6 +173,8 @@ export class ReductionMeter extends React.Component< width={10} ref={this.setRef} > + ___6dB + ___12dB
) }