Skip to content

Commit

Permalink
feat: Full channelstrip GUI scaling - initial changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@olzzon
olzzon committed Nov 29, 2021
1 parent 3bec47d commit 4d49bcc
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 113 deletions.
185 changes: 85 additions & 100 deletions client/assets/css/ChanStripFull.css
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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%,
Expand All @@ -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(
Expand Down
25 changes: 12 additions & 13 deletions client/components/ChanStripFull.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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()
}
Expand Down Expand Up @@ -602,8 +601,8 @@ class ChanStripFull extends React.PureComponent<
: valueAsLabels[valueAsLabels.length - 1] + valueLabel}
</div>
<ReactSlider
className="chan-strip-fader"
thumbClassName="chan-strip-thumb"
className="chan-strip-full-fader"
thumbClassName="chan-strip-full-thumb"
orientation="vertical"
invert
min={0}
Expand Down

0 comments on commit 4d49bcc

Please sign in to comment.