Skip to content

Commit

Permalink
Refined base synth and audio control styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@zxqx
zxqx committed Feb 14, 2016
1 parent 57f86a1 commit 832c312
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 58 deletions.
5 changes: 4 additions & 1 deletion app/components/Switch.js
View file
Expand Up @@ -13,14 +13,17 @@ export default class Switch extends React.Component
if (props.state) {
props.onToggleOn();
}

this.classes = ['audio-control'];
this.classes.push(props.className);
}

render()
{
const { props } = this;

return (
<div className='audio-control'>
<div className={this.classes.join(' ')}>
<label className='audio-control-label'>{props.label}</label>
<ReactSwitch state={props.state} animate={false} size='mini'
onChange={(state) => {
Expand Down
93 changes: 49 additions & 44 deletions app/containers/ThreeOscSynthUI.js
View file
Expand Up @@ -20,21 +20,10 @@ export default class ThreeOscSynthUI extends React.Component
let { osc1, osc2, osc3 } = oscGroup;

return (
<div className="three-osc-synth">
<Keyboard octaves={3} startingOctave={2}
onKeypress={[
osc1::osc1.setFrequency,
osc2::osc2.setFrequency,
osc3::osc3.setFrequency,
envelope::envelope.triggerADS,
]}
onKeyRelease={[
envelope::envelope.triggerRelease
]}
/>
<div className='three-osc-synth'>
<AudioControlGroup label='Osc 1'>
<Switch label='On/Off'
onToggleOn={() => mixer.ch1.toggleOn()} onToggleOff={() => mixer.ch1.toggleOff()} state={true} />
<Switch
onToggleOn={() => mixer.ch1.toggleOn()} onToggleOff={() => mixer.ch1.toggleOff()} state={true} className='osc-power-switch' />
<ButtonGroup label='Waveform' name='osc1-waveform' defaultValue='sawtooth' onChange={osc1::osc1.setWaveformType}>
<Button label='SN' value='sine' />
<Button label='SQ' value='square' />
Expand All @@ -46,8 +35,8 @@ export default class ThreeOscSynthUI extends React.Component
</AudioControlGroup>

<AudioControlGroup label='Osc 2'>
<Switch label='On/Off'
onToggleOn={() => mixer.ch2.toggleOn()} onToggleOff={() => mixer.ch2.toggleOff()} state={true} />
<Switch
onToggleOn={() => mixer.ch2.toggleOn()} onToggleOff={() => mixer.ch2.toggleOff()} state={true} className='osc-power-switch' />
<ButtonGroup label='Waveform' name='osc2-waveform' defaultValue='triangle' onChange={osc2::osc2.setWaveformType}>
<Button label='SN' value='sine' />
<Button label='SQ' value='square' />
Expand All @@ -56,13 +45,13 @@ export default class ThreeOscSynthUI extends React.Component
</ButtonGroup>
<Slider label='Osc 2 Volume'
min='0' max='1' step='0.01' defaultValue='1' onInput={(val) => mixer.ch2.setGain(val)} />
<Slider label='Freq Offset'
<Slider label='Frequency Offset'
min='-1200' max='1200' step='10' defaultValue='400' onInput={osc2::osc2.setDetune} />
</AudioControlGroup>

<AudioControlGroup label='Osc 3'>
<Switch label='On/Off'
onToggleOn={() => mixer.ch3.toggleOn()} onToggleOff={() => mixer.ch3.toggleOff()} state={true} />
<Switch
onToggleOn={() => mixer.ch3.toggleOn()} onToggleOff={() => mixer.ch3.toggleOff()} state={true} className='osc-power-switch' />
<ButtonGroup label='Waveform' name='osc3-waveform' defaultValue='square' onChange={osc3::osc3.setWaveformType}>
<Button label='SN' value='sine' />
<Button label='SQ' value='square' />
Expand All @@ -71,16 +60,25 @@ export default class ThreeOscSynthUI extends React.Component
</ButtonGroup>
<Slider label='Osc 3 Volume'
min='0' max='1' step='0.01' defaultValue='1' onInput={(val) => mixer.ch3.setGain(val)} />
<Slider label='Freq Offset'
<Slider label='Frequency Offset'
min='-1200' max='1200' step='10' defaultValue='700' onInput={osc3::osc3.setDetune} />
</AudioControlGroup>

<AudioControlGroup label='Filter'>
<Slider label='Cutoff Freq'
min='50' max='1200' step='5' defaultValue='1200' onInput={filter::filter.setFrequency} />
<Slider label='Resonance'
min='1' max = '35' step='1' defaultValue='1' onInput={filter::filter.setQ} />
</AudioControlGroup>
<div className='audio-control-column'>
<AudioControlGroup label='Filter'>
<Slider label='Cutoff Freq'
min='50' max='1200' step='5' defaultValue='1200' onInput={filter::filter.setFrequency} />
<Slider label='Resonance'
min='1' max = '35' step='1' defaultValue='1' onInput={filter::filter.setQ} />
</AudioControlGroup>

<AudioControlGroup label='LFO'>
<Slider label='Depth'
min={0} max={100} step={0.5} defaultValue={1} onInput={lfo::lfo.setDepth} />
<Slider label='Speed'
min={0} max={20} step={0.001} defaultValue={1} onInput={lfo::lfo.setFrequency} />
</AudioControlGroup>
</div>

<AudioControlGroup label='Volume Envelope'>
<Slider label='Attack'
Expand All @@ -93,21 +91,21 @@ export default class ThreeOscSynthUI extends React.Component
min={0} max={3} step={0.1} defaultValue={0.5} onInput={envelope::envelope.setRelease} />
</AudioControlGroup>

<AudioControlGroup label='LFO'>
<Slider label='Depth'
min={0} max={100} step={0.5} defaultValue={1} onInput={lfo::lfo.setDepth} />
<Slider label='Speed'
min={0} max={20} step={0.001} defaultValue={1} onInput={lfo::lfo.setFrequency} />
</AudioControlGroup>
<div className='audio-control-column'>
<AudioControlGroup label='Delay'>
<Slider label='Time'
min={0.001} max={6.4} step={0.01} defaultValue={0.5} onInput={delay::delay.setDelayTime} />
<Slider label='Feedback'
min={0} max={1} step={0.01} defaultValue={0.8} onInput={delay::delay.setFeedback} />
<Slider label='Mix'
min={0} max={1} step={0.01} defaultValue={0.15} onInput={delay::delay.setWetDryMix} />
</AudioControlGroup>

<AudioControlGroup label='Delay'>
<Slider label='Time'
min={0.001} max={6.4} step={0.01} defaultValue={0.5} onInput={delay::delay.setDelayTime} />
<Slider label='Feedback'
min={0} max={1} step={0.01} defaultValue={0.8} onInput={delay::delay.setFeedback} />
<Slider label='Mix'
min={0} max={1} step={0.01} defaultValue={0.15} onInput={delay::delay.setWetDryMix} />
</AudioControlGroup>
<AudioControlGroup label='Reverb'>
<Slider label='Wet/Dry'
min={0} max={1} step={0.01} defaultValue={0.5} onInput={convolver::convolver.setWetDryMix} />
</AudioControlGroup>
</div>

<AudioControlGroup label='EQ'>
<Slider label='Low Frequency'
Expand All @@ -122,10 +120,17 @@ export default class ThreeOscSynthUI extends React.Component
min={-50} max={25} step={0.01} defaultValue={0} onInput={eq3::eq3.highSetGain} />
</AudioControlGroup>

<AudioControlGroup label='Reverb'>
<Slider label='Wet/Dry'
min={0} max={1} step={0.01} defaultValue={0.5} onInput={convolver::convolver.setWetDryMix} />
</AudioControlGroup>
<Keyboard octaves={6} startingOctave={2}
onKeypress={[
osc1::osc1.setFrequency,
osc2::osc2.setFrequency,
osc3::osc3.setFrequency,
envelope::envelope.triggerADS,
]}
onKeyRelease={[
envelope::envelope.triggerRelease
]}
/>
</div>
)
}
Expand Down
1 change: 1 addition & 0 deletions style/_variables.scss
View file
@@ -0,0 +1 @@
$primary-color: #8500FF;
132 changes: 119 additions & 13 deletions style/style.scss
View file
@@ -1,47 +1,84 @@
@import 'bootstrap';
@import 'react-bootstrap-switch';
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,300,500,700');
@import url('https://fonts.googleapis.com/css?family=Francois+One');
@import './_variables.scss';
@import './three-osc-synth.scss';

body {
padding: 10px;
font-family: 'Roboto Mono', monospace;
font-family: 'Francois One', monospace;
background: #111;
}

.nav {
margin-bottom: 10px;
}

.nav-pills > li > a {
color: #ccc;

&:hover {
background: transparent;
color: #fff;
}
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background: #222;
}

.audio-control-group {
margin: 6px;
padding: 12px;
padding-top: 20px;
width: 190px;
float: left;
border: 1px solid #ccc;
border: 0;
border-radius: 3px;
background: #1a1a1a;
color: #fff;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);

.audio-control {
margin-bottom: 8px;
padding: 15px;
margin-bottom: 0;
padding: 15px 8px;
width: 164px;
height: 78px;
float: left;
border: 1px solid #ccc;
border: none;

&.btn-group {
height: 92px;
}
}

>.audio-control:last-child {
margin-bottom: 0;
}

h4 {
margin: 0 8px 8px;
font-size: 16px;
margin: 0 8px 4px;
font-size: 24px;
text-transform: uppercase;
}

.osc-power-switch {
padding: 4px 8px;
height: 33px;
}
}

.audio-control-column {
width: 202px;
float: left;
}

.audio-control-label {
margin-bottom: 5px;
display: block;
font-size: 18px;
font-weight: 500;
}

Expand All @@ -50,7 +87,7 @@ body {
}

.keyboard {
padding: 0 0 5px 5px;
padding: 5px;
clear: both;
zoom: 1.3;
}
Expand All @@ -63,13 +100,15 @@ body {
width: 350px;
height: 100px;
background: #337ab7;
display: none;
}

input[type='radio'] {
&:checked + span {
padding: 5px 8px;
margin: -4px -8px;
background: #eee;
padding: 6px 10px;
margin: -6px -10px;
background: $primary-color;
color: #fff;
}
}

Expand All @@ -81,7 +120,7 @@ input[type='radio'] {

&.keyboard-key-black {
position: relative;
top: -34px;
top: -35px;
width: 6px;
height: 66px;
margin: 0 -9px;
Expand All @@ -98,3 +137,70 @@ input[type='radio'] {
outline: none;
}
}

input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: #333;
}

input[type=range]::-webkit-slider-thumb {
border: 1px solid #000000;
height: 24px;
width: 12px;
background: #aaa;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;

&:hover {
background: #ccc;
}
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #555;
}

.bootstrap-switch {
border: none;
}

.bootstrap-switch-focused {
box-shadow: none;
}

.bootstrap-switch .bootstrap-switch-label {
background: $primary-color;
}

.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
background: #666;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
background: darken($primary-color, 15%);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
background: #333;
color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
background: #333;
color: #aaa;
}

0 comments on commit 832c312

Please sign in to comment.