From 4d49bcc0345808dcf6c2d409f1b2dfeccb34a2fb Mon Sep 17 00:00:00 2001 From: olzzon Date: Mon, 29 Nov 2021 20:28:19 +0100 Subject: [PATCH 1/6] feat: Full channelstrip GUI scaling - initial changes --- client/assets/css/ChanStripFull.css | 185 +++++++++++++--------------- client/components/ChanStripFull.tsx | 25 ++-- 2 files changed, 97 insertions(+), 113 deletions(-) diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index 68ae5818..4d514894 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -1,9 +1,9 @@ .chan-strip-full-body { position: fixed; - top: 50px; - left: 150px; - width: 1700px; - height: 1000px; + top: 5vh; + left: 5vw; + width: 90vw; + height: 90vh; overflow: auto; background-color: rgb(36, 36, 36); border-color: rgb(149, 149, 149); @@ -17,20 +17,21 @@ } .chan-strip-full-body > .ch-strip-full-header { - margin-left: 40px; - margin-top: 10px; - margin-right: 80px; + margin-left: 5vw; + margin-top: 1vh; + margin-right: 10vw; /* width: 420px; */ - font-size: 240%; + font-size: 3vh; color: #fff; white-space: nowrap; } .chan-strip-full-body > .parameters { - top: 5px; - left: 2px; - height: 900px; + top: 2vh; + left: 2vw; + height: 100vh; overflow: auto; + font-size: 1.5vh; text-align: center; color: #fff; } @@ -39,37 +40,32 @@ display: flex; justify-content: space-evenly; } -.chan-strip-full-body .parameters .horizontal .item { -} + .chan-strip-full-body .parameters .horizontal .item .content { display: flex; } .parameters > .inp-comp-del-group { display: flex; - top: 5px; - left: 2px; - margin-left: 5px; + top: 2vh; + left: 2vw; + margin-left: 2vw; overflow: auto; + font-size: 1.5vh; text-align: center; color: #fff; } -.inp-comp-del-group > .horizontal-space { - width: 40px; - height: 50px; -} - .eq-full > .eq-window { - top: 5px; - left: 2px; - height: 400px; - width: 1500px; - margin-left: 150px; - margin-top: 10px; + top: 2vh; + left: 2vw; + margin-top: 3vh; + margin-left: 14vw; + height: 30vh; + width: 70vw; overflow: auto; text-align: left; - font-size: 14px; + font-size: 1.5vh; color: #fff; background-color: #2a42274d; border-style: solid; @@ -78,47 +74,42 @@ } .eq-full > .eq-canvas { position: absolute; - margin-left: -850px; - margin-top: 30px; - height: 410px; - width: 1675px; + margin-left: -36.5vw; + margin-top: 5vh; + height: 30vh; + width: 72vw; } .eq-full > .eq-text { display: flex; justify-content: space-evenly; - top: 5px; - left: 2px; - height: 150px; - width: 1500px; - margin-left: 150px; - margin-top: 10px; + top: 2vh; + left: 2vw; + width: 80vw; + height: 10vh; + margin-left: 1vw; + margin-top: 2vh; overflow: auto; text-align: center; - font-size: 20px; + font-size: 1.5vh; color: #fff; border-style: solid; border-color: rgb(128, 128, 128); border-width: 4px; } -.eq-window > .horizontal-space { - width: 150px; - height: 50px; -} - .eq-window > .dot { position: absolute; - font-size: 60px; - height: 60px; + font-size: 5vh; + height: 10vh; } .zero-comp { - width: 63px; - height: 2px; - margin-left: -68px; - margin-right: 30px; - margin-top: 81px; + width: 1vw; + height: 0.2vh; + margin-left: -6.5vw; + margin-top: 15vh; + font-size: 0.8vw; } .zero-monitor { @@ -132,30 +123,27 @@ .content > .parameter-text { list-style-type: none; text-align: center; - margin-top: 15px; - line-height: 10px; - font-size: 14px; + margin-top: 2vh; + font-size: 1.5vh; } .parameter-button-text { list-style-type: none; text-align: center; - margin-top: 70px; - line-height: 10px; - font-size: 14px; + margin-top: 2vh; + font-size: 1.2vh; } .parameter-button { - margin-left: -68px; - margin-top: 60px; + margin-left: -8vw; + margin-top: 2vh; outline: none; -moz-outline: none; margin-left: 3px; margin-right: 3px; - margin-top: 3px; color: white; - height: 50px; - width: 60px; - font-size: 105%; + height: 4vh; + width: 4vw; + font-size: 1.2vh; background-color: rgb(80, 80, 80); border-radius: 7px; border-color: rgb(99, 99, 99); @@ -165,15 +153,15 @@ .content > .parameter-mini-text { list-style-type: none; text-align: center; - margin-top: 5px; - line-height: 10px; - font-size: 80%; + max-width: 9vw; + margin-top: 1vh; + font-size: 0.8vh; } .inp-comp-del-group > .delayButtons { - width: 30px; - margin-top: 24px; - margin-left: 50px; + width: 5vw; + margin-top: 3vh; + margin-left: 3vw; } .content > .delayButtons { width: 30px; @@ -190,8 +178,8 @@ outline: none; -moz-outline: none; color: white; - height: 45px; - width: 70px; + height: 5vh; + width: 5vw; border-color: rgb(71, 71, 71); background-color: rgb(53, 53, 53); margin-left: -50px; @@ -251,11 +239,11 @@ background-color: rgb(27, 27, 27); border-radius: 20px; color: #fff; - width: 50px; - height: 50px; - font-size: 30px; + width: 5vh; + height: 5vh; + font-size: 2vw; /* margin-top: 5px; */ - right: 10px; + right: 3vw; } .ch-strip-full-header > .button { @@ -264,33 +252,31 @@ background-color: rgb(27, 27, 27); border-radius: 7px; margin-left: 10px; - width: 160px; - height: 50px; - font-size: 12px; - line-height: 30px; + width: 10vw; + height: 4vh; + font-size: 0.8vw; color: #fff; } .chan-strip-full-fader { - width: 10px; - height: 190px; - margin-left: 35px; - margin-right: 30px; - margin-top: 10px; + width: 0.5vw; + height: 15vh; + margin-left: 5vw; + margin-right: 5vw; + margin-top: 3vh; border-width: 0px; border-style: solid; border-radius: 8px; background-color: rgb(17, 17, 17); } .chan-strip-full-thumb { - margin-left: -20px; + margin-left: -0.5vw; color: #3a3a3a; - font-size: 90%; - line-height: 50px; - width: 45px; - height: 49px; + font-size: 1vh; + width: 3vw; + height: 4vh; border: 1px solid #c5c2c2; - border-radius: 8px; + border-radius: 0.4vw; background: linear-gradient( to top, #3a3a3a 0%, @@ -304,23 +290,22 @@ } .chan-strip-q { - width: 300px; - height: 10px; - margin-left: 35px; - margin-right: 30px; - margin-top: 30px; + 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); } .chan-strip-q-thumb { - margin-top: -20px; + margin-top: -1vh; color: #3a3a3a; - font-size: 90%; - line-height: 50px; - width: 45px; - height: 49px; + font-size: 0.8vh; + width: 3vw; + height: 4vh; border: 1px solid #c5c2c2; border-radius: 8px; background: linear-gradient( diff --git a/client/components/ChanStripFull.tsx b/client/components/ChanStripFull.tsx index df82f518..bd3e7375 100644 --- a/client/components/ChanStripFull.tsx +++ b/client/components/ChanStripFull.tsx @@ -227,22 +227,21 @@ class ChanStripFull extends React.PureComponent< // Draw X-Y axis: context.beginPath() context.strokeStyle = 'white' - context.moveTo(175, 0) - context.lineTo(175, 405) - context.lineTo(1700, 405) + context.moveTo(55, 0) + context.lineTo(55, this.canvas.height) context.stroke() // Draw zero gain line: context.beginPath() context.strokeStyle = 'rgba(128, 128, 128, 0.244) 10px' - context.moveTo(175, 200) - context.lineTo(1700, 200) + context.moveTo(55, 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 = '20px Ariel' + context.font = String(this.canvas.height/ 20) + 'px Ariel' context.strokeStyle = 'white' - context.strokeText(freq.label, freq.posY, 220) + context.strokeText(freq.label, freq.posY, this.canvas.height/2 + 20) }) // Freq on zero gain line: context.strokeText( @@ -251,18 +250,18 @@ class ChanStripFull extends React.PureComponent< fxParamsList.EqGain01 ]?.[0].maxLabel ) + ' dB', - 120, + 1, 20 ) - context.strokeText('0 dB', 120, 210) + context.strokeText('0 dB', 1, this.canvas.height/2 + 20) context.strokeText( String( window.mixerProtocol.channelTypes[0].fromMixer[ fxParamsList.EqGain01 ]?.[0].maxLabel ) + ' dB', - 120, - 400 + 1, + this.canvas.height ) context.stroke() } @@ -602,8 +601,8 @@ class ChanStripFull extends React.PureComponent< : valueAsLabels[valueAsLabels.length - 1] + valueLabel} Date: Wed, 1 Dec 2021 14:21:31 +0100 Subject: [PATCH 2/6] feat: fullch strip GUI - split Eq part to own component. --- client/assets/css/ChanStripEq.css | 22 ++ client/assets/css/ChanStripFull.css | 120 +++----- client/components/ChanStripEq.tsx | 445 ++++++++++++++++++++++++++++ client/components/ChanStripFull.tsx | 433 ++++----------------------- 4 files changed, 561 insertions(+), 459 deletions(-) create mode 100644 client/assets/css/ChanStripEq.css create mode 100644 client/components/ChanStripEq.tsx diff --git a/client/assets/css/ChanStripEq.css b/client/assets/css/ChanStripEq.css new file mode 100644 index 00000000..7572329d --- /dev/null +++ b/client/assets/css/ChanStripEq.css @@ -0,0 +1,22 @@ +.eq-full > .eq-window { + top: 2vh; + left: 2vw; + margin-top: 3vh; + margin-left: 10vw; + height: 30vh; + width: 0vw; +} + +.eq-full > .eq-canvas { + position: absolute; + margin-left: -36.5vw; + margin-top: 5vh; + height: 30vh; + width: 72vw; +} + +.eq-window > .dot { + position: absolute; + font-size: 5vh; + height: 10vh; +} diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index 4d514894..f8dc6d1c 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -1,4 +1,4 @@ -.chan-strip-full-body { +.chstrip-full-body { position: fixed; top: 5vh; left: 5vw; @@ -12,66 +12,52 @@ border-radius: 8px; text-align: left; z-index: 2; - color: #fff; } -.chan-strip-full-body > .ch-strip-full-header { +.chstrip-full-body > .ch-strip-full-header { margin-left: 5vw; margin-top: 1vh; margin-right: 10vw; /* width: 420px; */ font-size: 3vh; - color: #fff; white-space: nowrap; } -.chan-strip-full-body > .parameters { +.chstrip-full-body > .chstrip-full-parameters { top: 2vh; left: 2vw; height: 100vh; overflow: auto; font-size: 1.5vh; text-align: center; - color: #fff; } -.chan-strip-full-body .parameters .horizontal { +.chstrip-full-body .chstrip-full-parameters .horizontal { display: flex; justify-content: space-evenly; } -.chan-strip-full-body .parameters .horizontal .item .content { +.chstrip-full-content { display: flex; } -.parameters > .inp-comp-del-group { +.chstrip-full-parameters > .inp-comp-del-group { display: flex; top: 2vh; left: 2vw; margin-left: 2vw; - overflow: auto; - font-size: 1.5vh; - text-align: center; - color: #fff; } .eq-full > .eq-window { top: 2vh; left: 2vw; margin-top: 3vh; - margin-left: 14vw; + margin-left: 10vw; height: 30vh; - width: 70vw; - overflow: auto; - text-align: left; - font-size: 1.5vh; - color: #fff; - background-color: #2a42274d; - border-style: solid; - border-color: rgba(128, 128, 128, 0.144); - border-width: 4px; + width: 0vw; } + .eq-full > .eq-canvas { position: absolute; margin-left: -36.5vw; @@ -85,17 +71,10 @@ justify-content: space-evenly; top: 2vh; left: 2vw; - width: 80vw; + width: 85vw; height: 10vh; - margin-left: 1vw; + margin-left: 2vw; margin-top: 2vh; - overflow: auto; - text-align: center; - font-size: 1.5vh; - color: #fff; - border-style: solid; - border-color: rgb(128, 128, 128); - border-width: 4px; } .eq-window > .dot { @@ -104,7 +83,7 @@ height: 10vh; } -.zero-comp { +.chstrip-full-zero-comp { width: 1vw; height: 0.2vh; margin-left: -6.5vw; @@ -112,15 +91,14 @@ font-size: 0.8vw; } -.zero-monitor { - width: 2px; - height: 20px; - margin-left: 10px; - margin-top: -150px; +.chstrip-full-zero-monitor { + width: 1vw; + height: 0.2vh; + margin-left: 3.5vw; + margin-top: -12vh; } -.parameters > .parameter-text, -.content > .parameter-text { +.chstrip-full-parameter-text { list-style-type: none; text-align: center; margin-top: 2vh; @@ -149,8 +127,7 @@ border-color: rgb(99, 99, 99); } -.parameter-text > .parameter-mini-text, -.content > .parameter-mini-text { +.chstrip-full-mini-text { list-style-type: none; text-align: center; max-width: 9vw; @@ -158,49 +135,34 @@ font-size: 0.8vh; } -.inp-comp-del-group > .delayButtons { - width: 5vw; +.chstrip-full-delay-buttons { margin-top: 3vh; - margin-left: 3vw; -} -.content > .delayButtons { - width: 30px; - min-height: 220px; - margin-top: 24px; - margin-left: 50px; + margin-left: 1vw; } .noDelayButtons { margin-top: 24px; min-height: 220px; } -.delayButtons > .delayTime { +.chstrip-full-delay-buttons > .delayTime { outline: none; -moz-outline: none; color: white; height: 5vh; - width: 5vw; + width: 4vw; border-color: rgb(71, 71, 71); background-color: rgb(53, 53, 53); - margin-left: -50px; - margin-top: 5px; + margin-left: 0vw; + margin-top: 1vh; border-radius: 7px; } -.inp-comp-del-group > .input-buttons { +.chstrip-full-content > .input-buttons { width: 30px; margin-top: 24px; margin-left: 50px; } -.inp-comp-del-group .input-buttons.disabled { - visibility: hidden; -} -.content > .input-buttons { - width: 30px; - margin-top: 24px; - margin-left: 50px; -} -.content > .input-buttons.disabled { +.chstrip-full-content > .input-buttons.disabled { visibility: hidden; } @@ -220,16 +182,12 @@ background-color: #2f475b; } -.parameters > .monitor-sends, -.content > .monitor-sends { +.chstrip-full-monitor-sends { list-style-type: none; display: flex; text-align: center; - margin-top: 15px; - margin-left: 1px; - padding: 0px; - line-height: 10px; - font-size: 95%; + margin-top: 2vh; + margin-left: 1vw; } .ch-strip-full-header > .close { @@ -242,7 +200,6 @@ width: 5vh; height: 5vh; font-size: 2vw; - /* margin-top: 5px; */ right: 3vw; } @@ -251,14 +208,13 @@ border-color: rgb(99, 99, 99); background-color: rgb(27, 27, 27); border-radius: 7px; - margin-left: 10px; + margin-left: 3vw; width: 10vw; height: 4vh; font-size: 0.8vw; - color: #fff; } -.chan-strip-full-fader { +.chstrip-full-fader { width: 0.5vw; height: 15vh; margin-left: 5vw; @@ -269,10 +225,11 @@ border-radius: 8px; background-color: rgb(17, 17, 17); } -.chan-strip-full-thumb { - margin-left: -0.5vw; +.chstrip-full-thumb { + margin-left: -1.2vw; color: #3a3a3a; font-size: 1vh; + line-height: 4vh; width: 3vw; height: 4vh; border: 1px solid #c5c2c2; @@ -289,7 +246,7 @@ ); } -.chan-strip-q { +.chstrip-q { width: 15vw; height: 0.5vh; margin-left: 5vw; @@ -300,12 +257,13 @@ border-radius: 8px; background-color: rgb(17, 17, 17); } -.chan-strip-q-thumb { - margin-top: -1vh; +.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( diff --git a/client/components/ChanStripEq.tsx b/client/components/ChanStripEq.tsx new file mode 100644 index 00000000..c29491d3 --- /dev/null +++ b/client/components/ChanStripEq.tsx @@ -0,0 +1,445 @@ +import React from 'react' +import Draggable from 'react-draggable' +import ReactSlider from 'react-slider' + +import '../assets/css/ChanStripEq.css' +import { Store } from 'redux' +import { connect } from 'react-redux' +import { IFader } from '../../server/reducers/fadersReducer' +import { SOCKET_SET_FX } from '../../server/constants/SOCKET_IO_DISPATCHERS' +import { fxParamsList } from '../../server/constants/MixerProtocolInterface' +import { IChannel } from '../../server/reducers/channelsReducer' +import { getFaderLabel } from '../utils/labels' + +interface IChanStripFullInjectProps { + label: string + selectedProtocol: string + numberOfChannelsInType: Array + channel: IChannel[] + fader: IFader[] + auxSendIndex: number + offtubeMode: boolean +} + +interface IChanStripFullProps { + faderIndex: number +} + +enum EqColors { + 'rgb(93, 184, 180)', + 'rgb(53, 112, 127)', + 'rgb(217, 21, 133)', + 'rgb(229, 159, 34)', +} + +interface IFreqLabels { + label: string + posY: number +} +const EQ_FREQ_LABELS: IFreqLabels[] = [ + { + label: '50', + posY: 400, + }, + { + label: '100', + posY: 525, + }, + { + label: '250', + posY: 700, + }, + { + label: '500', + posY: 850, + }, + { + label: '1k', + posY: 1025, + }, + { + label: '2k', + posY: 1160, + }, + { + label: '5k', + posY: 1350, + }, + { + label: '10k', + posY: 1490, + }, +] + +// 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] + +class ChanStripEq extends React.PureComponent< + IChanStripFullProps & IChanStripFullInjectProps & Store +> { + canvas: HTMLCanvasElement | undefined + + constructor(props: any) { + super(props) + } + + shouldComponentUpdate( + nextProps: IChanStripFullInjectProps & IChanStripFullProps + ) { + if (nextProps.faderIndex > -1) { + return true + } else { + return false + } + } + + handleFx(fxParam: fxParamsList, level: any) { + if (level < 0) { + level = 0 + } + if (level > 1) { + level = 1 + } + // window.storeRedux.dispatch(storeFaderFx(fxParam, this.props.faderIndex, parseFloat(level))) + window.socketIoClient.emit(SOCKET_SET_FX, { + fxParam: fxParam, + channel: this.props.faderIndex, + level: parseFloat(level), + }) + } + + handleDragCaptureEq(key: number, event: any) { + let eqFreqKey = + fxParamsList[ + String(fxParamsList[key]).replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] + 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 + ) + } + + valueToFreqPosition(value: number) { + return EQ_X_SIZE * value + } + freqPositionToValue(position: number) { + return (position - EQ_X_OFFSET) / EQ_X_SIZE + } + + logOscToLinFreq(value: number) { + return Math.round( + Math.pow( + 10, + value * (Math.log10(EQ_MAX_HZ) - Math.log10(EQ_MIN_HZ)) + + Math.log10(EQ_MIN_HZ) + ) + ) + } + + setRef = (el: HTMLCanvasElement) => { + this.canvas = el + this.paintEqBackground() + } + + paintEqBackground() { + if (!this.canvas) { + return + } + this.canvas.width = this.canvas.clientWidth + this.canvas.height = this.canvas.clientHeight + const context = this.canvas.getContext('2d', { + antialias: false, + stencil: false, + preserveDrawingBuffer: true, + }) as CanvasRenderingContext2D + + if (!context) return + + // Fill background color: + + context.rect(55, 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.stroke() + // Draw zero gain line: + context.beginPath() + context.strokeStyle = 'rgba(128, 128, 128, 0.244) 10px' + context.moveTo(55, 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.strokeStyle = 'white' + context.strokeText( + freq.label, + freq.posY, + this.canvas.height / 2 + 20 + ) + }) + // Freq on zero gain line: + context.strokeText( + String( + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList.EqGain01 + ]?.[0].maxLabel + ) + ' dB', + 1, + 20 + ) + context.strokeText('0 dB', 1, this.canvas.height / 2 + 20) + context.strokeText( + String( + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList.EqGain01 + ]?.[0].maxLabel + ) + ' dB', + 1, + this.canvas.height + ) + context.stroke() + } + + eqGraphics() { + return ( +
+ {Object.keys(fxParamsList) + .filter((fxKey: number | string) => { + return String(fxKey).includes('EqGain') + }) + .map((keyName: string) => { + let fxKey = keyName as keyof typeof fxParamsList + let eqFreqKey = + fxParamsList[ + fxKey.replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] + return ( + + this.handleDragCaptureEq( + fxParamsList[fxKey], + event + ) + } + > +
+ O +
+ + ) + })} +
+ ) + } + + eqText() { + return ( +
+ {Object.keys(fxParamsList) + .filter((fxKey: number | string) => { + return String(fxKey).includes('EqGain') + }) + .map((keyName: string) => { + let fxKey = keyName as keyof typeof fxParamsList + let eqFreqKey = + fxParamsList[ + fxKey.replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] + let eqQKey = + fxParamsList[ + fxKey.replace( + 'EqGain', + 'EqQ' + ) as keyof typeof fxParamsList + ] + let maxGain: number = + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList[fxKey] + ]?.[0].maxLabel ?? 1 + let minGain = + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList[fxKey] + ]?.[0].minLabel ?? 0 + + return ( +
+
+ {' Gain : '} + {Math.round( + 10 * + ((maxGain - minGain) * + (this.props.fader[ + this.props.faderIndex + ][fxParamsList[fxKey]]?.[0] ?? 0) + + minGain) + ) / 10} + {' Freq :'} + {this.logOscToLinFreq( + this.props.fader[this.props.faderIndex][ + eqFreqKey + ]?.[0] ?? 0 + )} + {this.qFader(eqQKey)} +
+ ) + })} +
+ ) + } + + qFader(fxParam: fxParamsList) { + let maxLabel: number = + window.mixerProtocol.channelTypes[0].fromMixer[fxParam]?.[0] + .maxLabel ?? 1 + let minLabel = + window.mixerProtocol.channelTypes[0].fromMixer[fxParam]?.[0] + .minLabel ?? 0 + let valueLabel = + window.mixerProtocol.channelTypes[0].fromMixer[fxParam]?.[0] + .valueLabel ?? '' + return ( +
+
+ {Math.round( + ((maxLabel - minLabel) * + (1 - + Math.pow( + 1 - + this.props.fader[this.props.faderIndex][ + fxParam + ]?.[0], + 3 + )) + + minLabel) * + 10 + ) / 10} + {valueLabel} +
+ ( +
+ {Math.round( + ((maxLabel - minLabel) * + (1 - + Math.pow( + 1 - parseFloat(state.valueNow), + 3 + )) + + minLabel) * + 10 + ) / 10} + {valueLabel} +
+ )} + onChange={(event: any) => { + this.handleFx(fxParam, event) + }} + /> +
+ ) + } + + render() { + return ( +
+ +
EQUALIZER
+ {this.eqGraphics()} + {this.eqText()} +
+ ) + } +} + +const mapStateToProps = (state: any, props: any): IChanStripFullInjectProps => { + let inject: IChanStripFullInjectProps = { + label: '', + selectedProtocol: state.settings[0].mixers[0].mixerProtocol, + numberOfChannelsInType: + state.settings[0].mixers[0].numberOfChannelsInType, + channel: state.channels[0].chMixerConnection[0].channel, + fader: state.faders[0].fader, + auxSendIndex: -1, + offtubeMode: state.settings[0].offtubeMode, + } + if (props.faderIndex >= 0) { + inject = { + label: getFaderLabel(props.faderIndex, 'FADER'), + selectedProtocol: state.settings[0].mixers[0].mixerProtocol, + numberOfChannelsInType: + state.settings[0].mixers[0].numberOfChannelsInType, + channel: state.channels[0].chMixerConnection[0].channel, + fader: state.faders[0].fader, + auxSendIndex: state.faders[0].fader[props.faderIndex].monitor - 1, + offtubeMode: state.settings[0].offtubeMode, + } + } + return inject +} + +export default connect(mapStateToProps)( + ChanStripEq +) as any diff --git a/client/components/ChanStripFull.tsx b/client/components/ChanStripFull.tsx index bd3e7375..eecdf90a 100644 --- a/client/components/ChanStripFull.tsx +++ b/client/components/ChanStripFull.tsx @@ -1,6 +1,5 @@ import React from 'react' import ReactSlider from 'react-slider' -import Draggable from 'react-draggable' import '../assets/css/ChanStripFull.css' import { Store } from 'redux' @@ -22,6 +21,7 @@ import ClassNames from 'classnames' import { fxParamsList } from '../../server/constants/MixerProtocolInterface' import { IChannel } from '../../server/reducers/channelsReducer' import { getFaderLabel } from '../utils/labels' +import ChanStripEq from './ChanStripEq' interface IChanStripFullInjectProps { label: string @@ -37,61 +37,6 @@ interface IChanStripFullProps { faderIndex: number } -enum EqColors { - 'rgb(93, 184, 180)', - 'rgb(53, 112, 127)', - 'rgb(217, 21, 133)', - 'rgb(229, 159, 34)', -} - -interface IFreqLabels { - label: string - posY: number -} -const EQ_FREQ_LABELS: IFreqLabels[] = [ - { - label: '50', - posY: 400, - }, - { - label: '100', - posY: 525, - }, - { - label: '250', - posY: 700, - }, - { - label: '500', - posY: 850, - }, - { - label: '1k', - posY: 1025, - }, - { - label: '2k', - posY: 1160, - }, - { - label: '5k', - posY: 1350, - }, - { - label: '10k', - posY: 1490, - }, -] - -// Constant for calculation Eq dot positions: -const EQ_MIN_HZ = 20 -const EQ_MAX_HZ = 20000 -const EQ_X_SIZE = 1450 -const EQ_WIN_X = 450 -const EQ_X_OFFSET = 350 -const EQ_Y_SIZE = 330 -const EQ_Y_OFFSET = 840 - // Constants for Delay buttons: const DEL_VALUES = [10, 1, -1, -10] @@ -171,230 +116,6 @@ class ChanStripFull extends React.PureComponent< }) } - handleDragCaptureEq(key: number, event: any) { - let eqFreqKey = - fxParamsList[ - String(fxParamsList[key]).replace( - 'EqGain', - 'EqFreq' - ) as keyof typeof fxParamsList - ] - 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 - ) - } - - valueToFreqPosition(value: number) { - return EQ_X_SIZE * value - } - freqPositionToValue(position: number) { - return (position - EQ_X_OFFSET) / EQ_X_SIZE - } - - logOscToLinFreq(value: number) { - return Math.round( - Math.pow( - 10, - value * (Math.log10(EQ_MAX_HZ) - Math.log10(EQ_MIN_HZ)) + - Math.log10(EQ_MIN_HZ) - ) - ) - } - - setRef = (el: HTMLCanvasElement) => { - this.canvas = el - this.paintEqBackground() - } - - paintEqBackground() { - if (!this.canvas) { - return - } - this.canvas.width = this.canvas.clientWidth - this.canvas.height = this.canvas.clientHeight - const context = this.canvas.getContext('2d', { - antialias: false, - stencil: false, - preserveDrawingBuffer: true, - }) as CanvasRenderingContext2D - - if (!context) return - - // Draw X-Y axis: - context.beginPath() - context.strokeStyle = 'white' - context.moveTo(55, 0) - context.lineTo(55, 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.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.strokeStyle = 'white' - context.strokeText(freq.label, freq.posY, this.canvas.height/2 + 20) - }) - // Freq on zero gain line: - context.strokeText( - String( - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList.EqGain01 - ]?.[0].maxLabel - ) + ' dB', - 1, - 20 - ) - context.strokeText('0 dB', 1, this.canvas.height/2 + 20) - context.strokeText( - String( - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList.EqGain01 - ]?.[0].maxLabel - ) + ' dB', - 1, - this.canvas.height - ) - context.stroke() - } - - eq() { - return ( -
- -
EQUALIZER
- {this.eqGraphics()} - {this.eqText()} -
- ) - } - eqGraphics() { - return ( -
- {Object.keys(fxParamsList) - .filter((fxKey: number | string) => { - return String(fxKey).includes('EqGain') - }) - .map((keyName: string) => { - let fxKey = keyName as keyof typeof fxParamsList - let eqFreqKey = - fxParamsList[ - fxKey.replace( - 'EqGain', - 'EqFreq' - ) as keyof typeof fxParamsList - ] - return ( - - this.handleDragCaptureEq( - fxParamsList[fxKey], - event - ) - } - > -
- O -
- - ) - })} -
- ) - } - - eqText() { - return ( -
- {Object.keys(fxParamsList) - .filter((fxKey: number | string) => { - return String(fxKey).includes('EqGain') - }) - .map((keyName: string) => { - let fxKey = keyName as keyof typeof fxParamsList - let eqFreqKey = - fxParamsList[ - fxKey.replace( - 'EqGain', - 'EqFreq' - ) as keyof typeof fxParamsList - ] - let eqQKey = - fxParamsList[ - fxKey.replace( - 'EqGain', - 'EqQ' - ) as keyof typeof fxParamsList - ] - let maxGain: number = - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList[fxKey] - ]?.[0].maxLabel ?? 1 - let minGain = - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList[fxKey] - ]?.[0].minLabel ?? 0 - - return ( -
-
- {' Gain : '} - {Math.round( - 10 * - ((maxGain - minGain) * - (this.props.fader[ - this.props.faderIndex - ][fxParamsList[fxKey]]?.[0] ?? 0) + - minGain) - ) / 10} - {' Freq :'} - {this.logOscToLinFreq( - this.props.fader[this.props.faderIndex][ - eqFreqKey - ]?.[0] ?? 0 - )} - {this.qFader(eqQKey)} -
- ) - })} -
- ) - } - inputSelectorButton(index: number) { const isActive = this.props.fader[this.props.faderIndex].inputSelector === index + 1 @@ -449,15 +170,15 @@ class ChanStripFull extends React.PureComponent< window.mixerProtocol.channelTypes[0].fromMixer .CHANNEL_INPUT_GAIN?.[0].minLabel ?? 0 return ( -
+
Gain -
{maxLabel + ' dB'}
+
{maxLabel + ' dB'}
{window.mixerProtocol.channelTypes[0].toMixer .CHANNEL_INPUT_GAIN ? ( ) : null} -
{minLabel + ' dB'}
+
{minLabel + ' dB'}
) } gainReduction() { return ( -
+
Redution
@@ -490,7 +211,7 @@ class ChanStripFull extends React.PureComponent< return ( {this.fxParamFader(fxParamsList.DelayTime)} -
+
{DEL_VALUES.map((value: number) => { return (
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
) } From 1401a551011da5bdaf2a20e0c9be1e75fcf02b30 Mon Sep 17 00:00:00 2001 From: olzzon Date: Sat, 4 Dec 2021 11:26:49 +0100 Subject: [PATCH 4/6] feat: Full Ch Strip overall is scaling correct now --- client/assets/css/ChanStripEq.css | 10 +- client/assets/css/ChanStripFull.css | 13 +- client/components/ChanStripEq.tsx | 1 + client/components/ChanStripFull.tsx | 180 +++++++++++++--------------- 4 files changed, 102 insertions(+), 102 deletions(-) diff --git a/client/assets/css/ChanStripEq.css b/client/assets/css/ChanStripEq.css index 3dd419f3..8d258a7b 100644 --- a/client/assets/css/ChanStripEq.css +++ b/client/assets/css/ChanStripEq.css @@ -7,17 +7,21 @@ justify-content: space-evenly; top: 2vh; left: 2vw; - width: 85vw; + width: 75vw; height: 10vh; - margin-left: 2vw; + margin-left: 1vw; margin-top: 2vh; } +.eq-text-parameters { + max-width: 22vw; +} + .eq-full > .eq-window { top: 2vh; left: 2vw; margin-top: 3vh; - margin-left: 10vw; + margin-left: 4vw; height: 30vh; width: 0vw; } diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index 976c10f1..20e422d9 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -27,7 +27,7 @@ .chstrip-full-parameters { display: flex; - justify-content: space-evenly; + justify-content: left; top: 2vh; left: 2vw; height: 30vh; @@ -53,6 +53,7 @@ .chstrip-full-content-group { display: flex; flex-direction: column; + margin-right: 2vw; } .chstrip-full-content { @@ -166,7 +167,15 @@ display: flex; text-align: center; margin-top: 2vh; - margin-left: 1vw; + min-width: 20vw; +} + +.chstrip-full-monitor-text { + list-style-type: none; + text-align: center; + margin-top: 2vh; + font-size: 1.5vh; + margin-left: -5vw; } .ch-strip-full-header > .close { diff --git a/client/components/ChanStripEq.tsx b/client/components/ChanStripEq.tsx index 85f02fb9..4060d9a4 100644 --- a/client/components/ChanStripEq.tsx +++ b/client/components/ChanStripEq.tsx @@ -321,6 +321,7 @@ class ChanStripEq extends React.PureComponent< return (
+
  • {monitorName}
     
    - {hasInput && ( - + {hasInput && ( + +
    +
    INPUT
    -
    INPUT
    -
    - {this.inputSelector()} - {this.inputGain()} -
    + {this.inputSelector()} + {this.inputGain()}
    - - )} - - {this.doesParamExists(fxParamsList.GainTrim) ? ( +
    +     + )} + + {this.doesParamExists(fxParamsList.GainTrim) ? ( +
    +
    INPUT
    -
    INPUT
    -
    - {this.fxParamFader( - fxParamsList.GainTrim - )} -
    + {this.fxParamFader(fxParamsList.GainTrim)}
    - ) : ( - - )} - {this.doesParamExists(fxParamsList.CompThrs) ? ( +
    + ) : ( + + )} + {this.doesParamExists(fxParamsList.CompThrs) ? ( +
    +
    COMPRESSOR
    -
    COMPRESSOR
    -
    - {this.fxParamButton( - fxParamsList.CompOnOff - )} - {this.fxParamFader( - fxParamsList.CompThrs - )} -

    - ______ -

    - {this.fxParamFader( - fxParamsList.CompRatio - )} -

    - ______ -

    - {this.gainReduction()} - {this.fxParamFader( - fxParamsList.CompMakeUp - )} -

    - ______ -

    - {this.fxParamFader( - fxParamsList.CompAttack - )} -

    - ______ -

    - {this.fxParamFader( - fxParamsList.CompHold - )} -

    - ______ -

    - {this.fxParamFader( - fxParamsList.CompRelease - )} -

    - ______ -

    -
    + {this.fxParamButton(fxParamsList.CompOnOff)} + {this.fxParamFader(fxParamsList.CompThrs)} +

    + ______ +

    + {this.fxParamFader(fxParamsList.CompRatio)} +

    + ______ +

    + {this.gainReduction()} + {this.fxParamFader(fxParamsList.CompMakeUp)} +

    + ______ +

    + {this.fxParamFader(fxParamsList.CompAttack)} +

    + ______ +

    + {this.fxParamFader(fxParamsList.CompHold)} +

    + ______ +

    + {this.fxParamFader( + fxParamsList.CompRelease + )} +

    + ______ +

    - ) : ( - - )} - {this.doesParamExists(fxParamsList.DelayTime) ? ( -
    -
    DELAY
    -
    - {this.delay()} -
    +
    + ) : ( + + )} + {this.doesParamExists(fxParamsList.DelayTime) ? ( +
    +
    DELAY
    +
    + {this.delay()}
    - ) : ( -
    - )} +
    + ) : ( +
    + )} +
    +
    + {this.props.label} + {' - MONITOR MIX MINUS'} +
    -
    - {this.props.label} - {' - MONITOR MIX MINUS'} -
    -
    -
      - {this.props.channel.map( - (ch: any, index: number) => { - if ( - ch.auxLevel[ - this.props.auxSendIndex - ] >= 0 - ) { - return this.monitor(index) - } +
        + {this.props.channel.map( + (ch: any, index: number) => { + if ( + ch.auxLevel[ + this.props.auxSendIndex + ] >= 0 + ) { + return this.monitor(index) } - )} -
      -
    + } + )} +
    - -
    +
    +     +
    • ) } else { return null From 901df875b0e2dc442bd515018314621c5e127dba Mon Sep 17 00:00:00 2001 From: olzzon Date: Sat, 4 Dec 2021 14:44:52 +0100 Subject: [PATCH 5/6] fix: don't scale reduction meters for now --- client/assets/css/ReductionMeter.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/assets/css/ReductionMeter.css b/client/assets/css/ReductionMeter.css index 62a1abca..dae757ee 100644 --- a/client/assets/css/ReductionMeter.css +++ b/client/assets/css/ReductionMeter.css @@ -1,17 +1,17 @@ .reductionmeter-body { top: 0.8vh; width: 2vw; - margin-top: 3vh; - margin-left: 3vw; + margin-top: 15px; + margin-left: 5px; background-color: black; border-radius: 7px; } .reductionmeter-canvas { - width: 2vw; - margin-left: -2vw; + width: 10px; + margin-left: -5px; bottom: 0px; - height: 100vh; + height: 100%; } .reductionmeter-lower-part { From 87d9f3303ffb34d77789505dc4c2513ef3966350 Mon Sep 17 00:00:00 2001 From: olzzon Date: Sat, 4 Dec 2021 15:45:53 +0100 Subject: [PATCH 6/6] fix: reduction meter align -6dB --- client/assets/css/ReductionMeter.css | 15 +++++++-------- client/components/ReductionMeter.tsx | 4 ++-- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/client/assets/css/ReductionMeter.css b/client/assets/css/ReductionMeter.css index dae757ee..42b12413 100644 --- a/client/assets/css/ReductionMeter.css +++ b/client/assets/css/ReductionMeter.css @@ -1,17 +1,18 @@ .reductionmeter-body { top: 0.8vh; - width: 2vw; + width: 24px; margin-top: 15px; margin-left: 5px; background-color: black; border-radius: 7px; + font-size: 14px; } .reductionmeter-canvas { width: 10px; margin-left: -5px; bottom: 0px; - height: 100%; + height: 240x; } .reductionmeter-lower-part { @@ -34,15 +35,13 @@ color: #445f4a; width: 63px; height: 2px; - margin-left: -58px; - margin-right: 30px; - margin-top: 108px; + margin-left: -6px; + margin-top: -105px; } .reduction-12db { color: #5c3939; width: 63px; height: 2px; - margin-left: -88px; - margin-right: 30px; - margin-top: 152px; + margin-left: 2px; + margin-top: 50px; } diff --git a/client/components/ReductionMeter.tsx b/client/components/ReductionMeter.tsx index eba80e57..30c62c30 100644 --- a/client/components/ReductionMeter.tsx +++ b/client/components/ReductionMeter.tsx @@ -173,8 +173,8 @@ export class ReductionMeter extends React.Component - ___6dB - ___12dB +

    ___6dB

    +

    12dB

    ) }