From f4e63b0f771c1e33fb2c1d85ccdc3b4e5405fc85 Mon Sep 17 00:00:00 2001 From: olzzon Date: Tue, 27 Oct 2020 10:51:48 +0100 Subject: [PATCH] feat: full ch-strip - logarithmic Freq on graph eq, adding Q --- client/assets/css/ChanStripFull.css | 43 +++++++-- client/components/ChanStripFull.tsx | 144 ++++++++++++++++++++++------ 2 files changed, 151 insertions(+), 36 deletions(-) diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index cf9b69ec..efdb0bf0 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -60,7 +60,6 @@ height: 50px; } -.parameters > .eq-window, .eq-full > .eq-window { top: 5px; left: 2px; @@ -76,17 +75,18 @@ border-color: rgb(128, 128, 128); border-width: 4px; } -.parameters > .eq-text, -.content > .eq-text { +.eq-full > .eq-text { + display: flex; + justify-content: space-evenly; top: 5px; left: 2px; - height: 400px; + height: 200px; width: 1500px; margin-left: 150px; margin-top: 10px; overflow: auto; text-align: center; - font-size: 14px; + font-size: 20px; color: #fff; border-style: solid; border-color: rgb(128, 128, 128); @@ -244,7 +244,6 @@ border-radius: 8px; background-color: rgb(17, 17, 17); } - .chan-strip-thumb { margin-left: -20px; color: #3a3a3a; @@ -265,3 +264,35 @@ #3a3a3a 100% ); } + +.chan-strip-q { + width: 100px; + height: 10px; + margin-left: 35px; + margin-right: 30px; + margin-top: 10px; + border-width: 0px; + border-style: solid; + border-radius: 8px; + background-color: rgb(17, 17, 17); +} +.chan-strip-q-thumb { + margin-left: -20px; + color: #3a3a3a; + font-size: 90%; + line-height: 50px; + width: 45px; + height: 49px; + 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/components/ChanStripFull.tsx b/client/components/ChanStripFull.tsx index c620ceb6..59f323d1 100644 --- a/client/components/ChanStripFull.tsx +++ b/client/components/ChanStripFull.tsx @@ -1,6 +1,6 @@ import React from 'react' import ReactSlider from 'react-slider' -import Draggable, { DraggableEvent } from 'react-draggable' +import Draggable from 'react-draggable' import '../assets/css/ChanStripFull.css' import { Store } from 'redux' @@ -10,7 +10,7 @@ import { storeShowMonitorOptions, storeShowChanStripFull, } from '../../server/reducers/settingsActions' -import { IFader } from '../../server/reducers/fadersReducer' +import { IFader, IFxParam } from '../../server/reducers/fadersReducer' import { SOCKET_SET_THRESHOLD, SOCKET_SET_RATIO, @@ -27,13 +27,15 @@ import { fxParamsList, IFxProtocol, } from '../../server/constants/MixerProtocolInterface' +import { IChannel } from '../../server/reducers/channelsReducer' interface IChanStripFullInjectProps { label: string selectedProtocol: string numberOfChannelsInType: Array - channel: Array - fader: Array + channel: IChannel[] + fader: IFader[] + fxParam: IFxParam[] auxSendIndex: number offtubeMode: boolean } @@ -49,6 +51,15 @@ enum EqColors { 'red', } +// Constant for calculation Eq dot positions: +const MIN_HZ = 20 +const MAX_HZ = 20000 +const EQ_X_SIZE = 140 +const EQ_WIN_X = 450 +const EQ_X_OFFSET = 350 +const EQ_Y_SIZE = 330 +const EQ_Y_OFFSET = 840 + class ChanStripFull extends React.PureComponent< IChanStripFullProps & IChanStripFullInjectProps & Store > { @@ -140,14 +151,30 @@ class ChanStripFull extends React.PureComponent< }) } - handleDragCaptureEq(key: number, event: MouseEvent) { - console.log('Realtime capture Gain :', String(fxParamsList[key]), 'X :',event.clientX, ' Y :',event.clientY) - let eqFreqKey: keyof typeof fxParamsList = String(fxParamsList[key]).replace('EqGain','EqFreq') as keyof typeof fxParamsList + let eqFreqKey = fxParamsList[String( + fxParamsList[key] + ).replace('EqGain', 'EqFreq') as keyof typeof fxParamsList] - this.handleFx(fxParamsList[eqFreqKey], Math.round(100*(event.clientX-360) / 1500)/100) - this.handleFx(key, Math.round(100*(880 - event.clientY) / 440)/100) + this.handleFx( + eqFreqKey, this.freqPositionToValue(event.clientX) + ) + this.handleFx( + key, + Math.round(100 * (EQ_Y_OFFSET- event.clientY)/ EQ_Y_SIZE) / 100 + ) } + + valueToFreqPosition(value: number) { + return ( + EQ_X_SIZE * (Math.log2(value * (MAX_HZ - MIN_HZ) + MIN_HZ) - 1) - EQ_WIN_X + ) + } + freqPositionToValue(position: number) { + let newFreq = Math.pow(2, (position + EQ_WIN_X - EQ_X_OFFSET) / EQ_X_SIZE + 1) + return ((newFreq - MIN_HZ) / (MAX_HZ - MIN_HZ)) + } + eq() { return (
@@ -156,19 +183,30 @@ class ChanStripFull extends React.PureComponent< {window.mixerProtocol.channelTypes[0].fromMixer.FX_PARAMS?.filter( (param) => { return ( - fxParamsList[param.key].includes('Eq') && - fxParamsList[param.key].includes('Gain') + fxParamsList[param.key].includes('EqGain') ) } ).map((param: IFxProtocol) => { - let eqFreqKey: keyof typeof fxParamsList = String(fxParamsList[param.key]).replace('EqGain','EqFreq') as keyof typeof fxParamsList + let eqFreqKey = + fxParamsList[ + String(fxParamsList[param.key]).replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] return ( this.handleDragCaptureEq( param.key, @@ -192,26 +230,36 @@ class ChanStripFull extends React.PureComponent< {window.mixerProtocol.channelTypes[0].fromMixer.FX_PARAMS?.filter( (param) => { return ( - fxParamsList[param.key].includes('Eq') && - fxParamsList[param.key].includes('Gain') + fxParamsList[param.key].includes('EqGain') ) } ).map((param: IFxProtocol) => { - let eqFreqKey: keyof typeof fxParamsList = String(fxParamsList[param.key]).replace('EqGain','EqFreq') as keyof typeof fxParamsList + let eqFreqKey = fxParamsList[String( + fxParamsList[param.key] + ).replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList] + let eqQKey = fxParamsList[String( + fxParamsList[param.key] + ).replace( + 'EqGain', + 'EqQ' + ) as keyof typeof fxParamsList] return ( -
+
+
{param.params[0].label} {' Gain : '} { - this.props.fader[this.props.faderIndex] - .fxParam[param.key].value + Math.round(100*this.props.fxParam[param.key].value)/100 } {' Freq :'} - { - this.props.fader[this.props.faderIndex] - .fxParam[fxParamsList[eqFreqKey]].value + Math.round(100*this.props.fxParam[eqFreqKey].value)/100 } + + {this.qFader(eqQKey)}
) })} @@ -484,6 +532,43 @@ class ChanStripFull extends React.PureComponent< ) } + qFader(fxParam: fxParamsList) { + let maxLabel: number = + window.mixerProtocol.channelTypes[0].fromMixer.FX_PARAMS?.[fxParam] + .params[0].maxLabel ?? 1 + let minLabel = + window.mixerProtocol.channelTypes[0].fromMixer.FX_PARAMS?.[fxParam] + .params[0].minLabel ?? 0 + return ( +
+
+ Q :{this.props.fxParam[fxParam].value} +
+ ( +
+ {Math.round( + (maxLabel - minLabel) * + parseFloat(state.valueNow) + + minLabel + )} + Q +
+ )} + onChange={(event: any) => { + this.handleFx(fxParam, event) + }} + /> +
+ ) + } fxFader(fxParam: fxParamsList) { let maxLabel: number = @@ -508,10 +593,7 @@ class ChanStripFull extends React.PureComponent< min={0} max={1} step={0.01} - value={ - this.props.fader[this.props.faderIndex].fxParam[fxParam] - .value - } + value={this.props.fxParam[fxParam].value} renderThumb={(props: any, state: any) => (
{Math.round( @@ -734,6 +816,7 @@ const mapStateToProps = (state: any, props: any): IChanStripFullInjectProps => { channel: state.channels[0].chConnection[0].channel, fader: state.faders[0].fader, auxSendIndex: -1, + fxParam: [], offtubeMode: state.settings[0].offtubeMode, } if (props.faderIndex >= 0) { @@ -744,6 +827,7 @@ const mapStateToProps = (state: any, props: any): IChanStripFullInjectProps => { state.settings[0].mixers[0].numberOfChannelsInType, channel: state.channels[0].chConnection[0].channel, fader: state.faders[0].fader, + fxParam: state.faders[0].fader[props.faderIndex].fxParam, auxSendIndex: state.faders[0].fader[props.faderIndex].monitor - 1, offtubeMode: state.settings[0].offtubeMode, }