finish Timbre display
This commit is contained in:
Aoife
@@ -115,10 +115,18 @@ export default function Timbre(props) {
|
||||
/>
|
||||
<Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
|
||||
<Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
|
||||
<Filter className='col-span-2' name='Filter' id={ids.filter} />
|
||||
<Amp className='col-span-2' name='Amp' id={ids.amp} />
|
||||
<EG className='col-span-2' name='EG 1' id={ids.eg1} />
|
||||
<EG className='col-span-2' name='EG 2' id={ids.eg2} />
|
||||
<div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
|
||||
<div />
|
||||
<Amp className='col-span-2' name='Amp' id={ids.amp} />
|
||||
<Filter className='col-span-2' name='Filter' id={ids.filter} />
|
||||
<EG
|
||||
className='col-span-3'
|
||||
name='EG 1 / 2'
|
||||
id1={ids.eg1}
|
||||
id2={ids.eg2}
|
||||
/>
|
||||
<div />
|
||||
</div>
|
||||
<LFO
|
||||
className='col-span-2'
|
||||
name='LFO 1'
|
||||
@@ -141,7 +149,7 @@ export default function Timbre(props) {
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<Patches className='col-span-2' name='Patches' id={ids.patches} />
|
||||
<Patches className='col-span-4' name='Patches' id={ids.patches} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Knob } from '../../utils/components';
|
||||
import { Knob, Checkbox } from '../../utils/components';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function Amp(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -11,7 +10,83 @@ export default function Amp(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<h3>Amp Level</h3>
|
||||
<div className='flex flex-row '>
|
||||
<div className='flex flex-col items-center justify-evenly w-1/2'>
|
||||
<h3>Amp Level</h3>
|
||||
<Knob
|
||||
value={parameters.ampLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center justify-evenly w-1/2'>
|
||||
<h3>Pan Pot</h3>
|
||||
<Knob
|
||||
value={parameters.panpot}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { panpot: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center justify-evenly w-1/2'>
|
||||
<h3>Keyboard Track</h3>
|
||||
<Knob
|
||||
value={parameters.ampTrack}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center justify-start w-1/2'>
|
||||
<h3>Distortion</h3>
|
||||
<Checkbox
|
||||
value={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export const VocoderAmp = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Knob
|
||||
value={parameters.ampLevel}
|
||||
max={127}
|
||||
@@ -24,21 +99,20 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3>PanPot</h3>
|
||||
Direct Level
|
||||
<Knob
|
||||
value={parameters.panpot}
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.directLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { panpot: value },
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3>Amp Keyboard Tracking</h3>
|
||||
Amp Keyboard Tracking
|
||||
<Knob
|
||||
value={parameters.ampTrack}
|
||||
dual={true}
|
||||
@@ -53,72 +127,7 @@ export default function Amp(props) {
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
parameter={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export const VocoderAmp = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Slider
|
||||
parameter={parameters.ampLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Direct Level
|
||||
<Slider
|
||||
parameter={parameters.directLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.ampTrack}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='Distortion'
|
||||
parameter={parameters.distortion}
|
||||
value={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
|
||||
@@ -1,83 +1,170 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
import { Knob, Checkbox } from '../../utils/components';
|
||||
|
||||
export default function EG(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
|
||||
const parameters_eg_2 = useSelector((state) => selectById(state, props.id2));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Attack
|
||||
<Slider
|
||||
parameter={parameters.attack}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Decay
|
||||
<Slider
|
||||
parameter={parameters.decay}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Sustain
|
||||
<Slider
|
||||
parameter={parameters.sustain}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Release
|
||||
<Slider
|
||||
parameter={parameters.release}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='EG Reset'
|
||||
parameter={parameters.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Attack</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.attack}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Decay</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.decay}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Sustain</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.sustain}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Release</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.release}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>EG 1 Reset</h3>
|
||||
<Checkbox
|
||||
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
|
||||
value={parameters_eg_1.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Attack</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.attack}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Decay</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.decay}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Sustain</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.sustain}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Release</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.release}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>EG 2 Reset</h3>
|
||||
<Checkbox
|
||||
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
|
||||
value={parameters_eg_2.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@ export default function Filter(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-4 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Filter Type</h3>
|
||||
<div className='-mt-2 flex items-center justify-between'>
|
||||
<h3>Filter Type</h3>
|
||||
<Select
|
||||
className='select w-4/6'
|
||||
value={parameters.filterType}
|
||||
@@ -32,9 +32,9 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='-mt-3 flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
@@ -49,7 +49,7 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3'>
|
||||
<div className='pt-3 flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
|
||||
<Knob
|
||||
value={parameters.resonance}
|
||||
@@ -67,7 +67,7 @@ export default function Filter(props) {
|
||||
</div>
|
||||
<div className='px-4'></div>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
EG Intensity
|
||||
</h3>
|
||||
@@ -85,9 +85,9 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3'>
|
||||
<div className='pt-3 flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Keyboard Tracking
|
||||
Keyboard Track
|
||||
</h3>
|
||||
<Knob
|
||||
value={parameters.keyboardTrack}
|
||||
|
||||
@@ -1,95 +1,109 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
import Card from '../card';
|
||||
import { Select, Knob, Checkbox } from '../../utils/components';
|
||||
|
||||
export default function LFO(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
LFO Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Key Sync
|
||||
<SelectList
|
||||
value={parameters.keySync}
|
||||
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='check-list'>
|
||||
<Checkbox
|
||||
name='Tempo Sync'
|
||||
parameter={parameters.tempoSync}
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3>LFO Waveform</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<SelectList
|
||||
value={parameters.syncNote}
|
||||
list={[
|
||||
{ value: '1/1' },
|
||||
{ value: '3/4' },
|
||||
{ value: '2/3' },
|
||||
{ value: '1/2' },
|
||||
{ value: '3/8' },
|
||||
{ value: '1/3' },
|
||||
{ value: '1/4' },
|
||||
{ value: '3/16' },
|
||||
{ value: '1/6' },
|
||||
{ value: '1/8' },
|
||||
{ value: '3/32' },
|
||||
{ value: '1/12' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/24' },
|
||||
{ value: '1/32' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { syncNote: value },
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
Frequency
|
||||
<Slider
|
||||
parameter={parameters.frequency}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { frequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3>Key Sync</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
value={parameters.keySync}
|
||||
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row mb-4'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<h3 className='self-center'>Tempo Sync</h3>
|
||||
<div className='flex flex-row items-center justify-evenly'>
|
||||
<Checkbox
|
||||
value={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
className='select mt-2 w-2/3'
|
||||
value={parameters.syncNote}
|
||||
list={[
|
||||
{ value: '1/1' },
|
||||
{ value: '3/4' },
|
||||
{ value: '2/3' },
|
||||
{ value: '1/2' },
|
||||
{ value: '3/8' },
|
||||
{ value: '1/3' },
|
||||
{ value: '1/4' },
|
||||
{ value: '3/16' },
|
||||
{ value: '1/6' },
|
||||
{ value: '1/8' },
|
||||
{ value: '3/32' },
|
||||
{ value: '1/12' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/24' },
|
||||
{ value: '1/32' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { syncNote: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Frequency</h3>
|
||||
<Knob
|
||||
value={parameters.frequency}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { frequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
import { Knob } from '../../utils/components';
|
||||
|
||||
export default function Mixer(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -11,12 +11,11 @@ export default function Mixer(props) {
|
||||
return (
|
||||
<Card header={props.name}>
|
||||
<div className='-mt-3'>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold'>Volume 1</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
value={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
@@ -27,12 +26,11 @@ export default function Mixer(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold'>Volume 2</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
value={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
@@ -43,12 +41,11 @@ export default function Mixer(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold'>Volume 3</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
value={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
|
||||
@@ -1,66 +1,75 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import Card from '../card';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
|
||||
const Patch = (props) => {
|
||||
return (
|
||||
<div>
|
||||
Source
|
||||
<SelectList
|
||||
value={props.patch.source}
|
||||
list={[
|
||||
{ value: 'Filter EG' },
|
||||
{ value: 'Amp Eg' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: value,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Destination
|
||||
<SelectList
|
||||
value={props.patch.destination}
|
||||
list={[
|
||||
{ value: 'Pitch' },
|
||||
{ value: 'OSC 2 Tune' },
|
||||
{ value: 'OSC 1 Control 1' },
|
||||
{ value: 'Noise Level' },
|
||||
{ value: 'Cutoff' },
|
||||
{ value: 'Amp' },
|
||||
{ value: 'Pan' },
|
||||
{ value: 'LFO 2 Frequency' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: value,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Mod Intensity
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={props.patch.modIntensity}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div className='-mt-3 w-1/4'>
|
||||
<div className='flex flex-col items-center justify-between'>
|
||||
<h3>Source</h3>
|
||||
<Select
|
||||
className='select w-2/3'
|
||||
value={props.patch.source}
|
||||
list={[
|
||||
{ value: 'Filter EG' },
|
||||
{ value: 'Amp Eg' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: value,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex flex-col items-center justify-between'>
|
||||
<h3>Destination</h3>
|
||||
<Select
|
||||
className='select w-2/3'
|
||||
value={props.patch.destination}
|
||||
list={[
|
||||
{ value: 'Pitch' },
|
||||
{ value: 'OSC 2 Tune' },
|
||||
{ value: 'OSC 1 Control 1' },
|
||||
{ value: 'Noise Level' },
|
||||
{ value: 'Cutoff' },
|
||||
{ value: 'Amp' },
|
||||
{ value: 'Pan' },
|
||||
{ value: 'LFO 2 Frequency' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: value,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex flex-col items-center'>
|
||||
<h3>Mod Intensity</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={props.patch.modIntensity}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -70,59 +79,57 @@ export default function Patches(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className} id='patches'>
|
||||
<span>{`${props.name}`}</span>
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch1: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch2}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch2: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch3}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch4}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} id='patches' header={props.name}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch1: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Patch
|
||||
patch={parameters.patch2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch2: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Patch
|
||||
patch={parameters.patch3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Patch
|
||||
patch={parameters.patch4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Select } from '../../utils/components';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Pitch(props) {
|
||||
@@ -11,31 +11,47 @@ export default function Pitch(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row justify-evenly -mt-4'>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Voice Assign
|
||||
</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='px-4 flex items-center justify-between w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='px-4 flex items-center justify-between w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<section className='w-1/3'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
<Knob
|
||||
value={parameters.transpose}
|
||||
dual={true}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -47,11 +63,11 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
<Knob
|
||||
value={parameters.tune}
|
||||
dual={true}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -63,13 +79,14 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</section>
|
||||
<section className='w-1/3'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Unison Detune
|
||||
</h3>
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
<Knob
|
||||
value={parameters.unisonDetune}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -81,32 +98,10 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4'></div>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Trigger Mode
|
||||
</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
<Knob
|
||||
value={parameters.portamento}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -118,11 +113,13 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</section>
|
||||
<section className='w-1/3'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
<Knob
|
||||
value={parameters.bendRange}
|
||||
dual={true}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -134,13 +131,13 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Vibrato Intensity
|
||||
</h3>
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
<Knob
|
||||
value={parameters.vibratoIntensity}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -152,7 +149,7 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function VCO(props) {
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-2 flex flex-row'>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
@@ -59,7 +59,7 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
|
||||
@@ -1,264 +1,255 @@
|
||||
.rc-slider {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
touch-action: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
margin: 5px 0;
|
||||
position: relative;
|
||||
height: 14px;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
touch-action: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
margin: 5px 0;
|
||||
}
|
||||
.rc-slider * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-rail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: lightgray;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: lightgray;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.rc-slider-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
background-color: lightgrey;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.rc-slider-handle {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
cursor: -webkit-grab;
|
||||
margin-top: -5px;
|
||||
cursor: grab;
|
||||
border-radius: 50%;
|
||||
background-color: slategrey;
|
||||
touch-action: pan-x;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
cursor: -webkit-grab;
|
||||
margin-top: -5px;
|
||||
cursor: grab;
|
||||
border-radius: 50%;
|
||||
background-color: slategrey;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
|
||||
background-color: slateblue;
|
||||
background-color: slateblue;
|
||||
}
|
||||
.rc-slider-handle:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
.rc-slider-handle-click-focused:focus {
|
||||
background-color: slateblue;
|
||||
background-color: slateblue;
|
||||
}
|
||||
.rc-slider-handle:hover {
|
||||
background-color: slateblue;
|
||||
background-color: slateblue;
|
||||
}
|
||||
.rc-slider-handle:active {
|
||||
background-color: slateblue;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
background-color: slateblue;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
.rc-slider-mark {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.rc-slider-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
.rc-slider-mark-text-active {
|
||||
color: #666;
|
||||
color: #666;
|
||||
}
|
||||
.rc-slider-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
.rc-slider-dot {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rc-slider-dot-active {
|
||||
border-color: #96dbfa;
|
||||
border-color: #96dbfa;
|
||||
}
|
||||
.rc-slider-dot-reverse {
|
||||
margin-right: -4px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
.rc-slider-disabled {
|
||||
background-color: #e9e9e9;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-track {
|
||||
background-color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-handle,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
border-color: #ccc;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
border-color: #ccc;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-mark-text,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
cursor: not-allowed !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.rc-slider-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-track {
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-handle {
|
||||
margin-left: -5px;
|
||||
touch-action: pan-y;
|
||||
margin-left: -5px;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-mark {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-step {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot:first-child {
|
||||
margin-bottom: -4px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot:last-child {
|
||||
margin-bottom: -4px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter,
|
||||
.rc-slider-tooltip-zoom-down-appear {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
animation-play-state: paused;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
animation-play-state: paused;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
|
||||
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
|
||||
animation-name: rcSliderTooltipZoomDownIn;
|
||||
animation-play-state: running;
|
||||
animation-name: rcSliderTooltipZoomDownIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
|
||||
animation-name: rcSliderTooltipZoomDownOut;
|
||||
animation-play-state: running;
|
||||
animation-name: rcSliderTooltipZoomDownOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter,
|
||||
.rc-slider-tooltip-zoom-down-appear {
|
||||
transform: scale(0, 0);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform: scale(0, 0);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
.rc-slider-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-tooltip * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-tooltip-hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.rc-slider-tooltip-placement-top {
|
||||
padding: 4px 0 8px 0;
|
||||
padding: 4px 0 8px 0;
|
||||
}
|
||||
.rc-slider-tooltip-inner {
|
||||
padding: 6px 2px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #6c6c6c;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
padding: 6px 2px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #6c6c6c;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
}
|
||||
.rc-slider-tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
border-width: 4px 4px 0;
|
||||
border-top-color: #6c6c6c;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
border-width: 4px 4px 0;
|
||||
border-top-color: #6c6c6c;
|
||||
}
|
||||
span {
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
transform: matrix(1.5, 0, 0, 1.5, 0, 1.5);
|
||||
margin: 0.75em 1em;
|
||||
}
|
||||
[type="checkbox"]:checked {
|
||||
filter: hue-rotate(40deg);
|
||||
}
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function Menu() {
|
||||
<div className='menu-patch-container'>
|
||||
<div className='patch-name'>
|
||||
<input
|
||||
className='block w-full rounded-md bg-gray-100 border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
|
||||
className='block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
|
||||
placeholder='Patch Name'
|
||||
type='text'
|
||||
maxLength='12'
|
||||
@@ -49,7 +49,7 @@ export default function Menu() {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='my-1 flex flex-col items-center'>
|
||||
<div className='my-3 flex flex-col items-center space-y-2'>
|
||||
<button
|
||||
className='btn'
|
||||
onClick={() => {
|
||||
@@ -101,7 +101,7 @@ export default function Menu() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='my-1 flex flex-col items-center'>
|
||||
<div className='my-1 flex flex-col items-center space-y-2'>
|
||||
<button
|
||||
disabled={state.patch.mode === 'Vocoder'}
|
||||
className='btn'
|
||||
|
||||
@@ -17,6 +17,21 @@ const Select = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
const Checkbox = (props) => {
|
||||
return (
|
||||
<input
|
||||
className={
|
||||
props.className + ' rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
|
||||
}
|
||||
style={props.style}
|
||||
type='checkbox'
|
||||
onChange={(e) => props.onChange(e.target.checked)}
|
||||
defaultChecked={props.value}
|
||||
value={props.value}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const RAD = Math.PI / 180;
|
||||
const START_ANGLE = Math.PI * 1.5 - (RAD * 45) / 2;
|
||||
const END_ANGLE = Math.PI * -0.5 + (RAD * 45) / 2;
|
||||
@@ -54,7 +69,7 @@ function getKnobValue(dragStart, currentY, bipolar) {
|
||||
const slope = 0.01;
|
||||
let newValue = value + deltaY * slope;
|
||||
if (bipolar) {
|
||||
const zeroCrossingResistance = 0; //0.3
|
||||
const zeroCrossingResistance = 0.2; //0.3
|
||||
if (value >= 0 && newValue < 0) {
|
||||
newValue += Math.min(zeroCrossingResistance, -newValue);
|
||||
} else if (value < 0 && newValue > 0) {
|
||||
@@ -169,15 +184,15 @@ function Knob({
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={size / 2}
|
||||
className='opacity-50'
|
||||
style={{ mask: `url(#value-track-mask-${uid})`, fill: 'black' }}
|
||||
className='fill-current text-blue-900 opacity-50'
|
||||
style={{ mask: `url(#value-track-mask-${uid})` }}
|
||||
/>
|
||||
{/* Value fill */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={size / 2}
|
||||
className='fill-current text-indigo-500'
|
||||
className='fill-current text-blue-500'
|
||||
style={{ mask: `url(#value-mask-${uid})` }}
|
||||
/>
|
||||
</svg>
|
||||
@@ -192,9 +207,7 @@ function Knob({
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
r={radius - fillWidth}
|
||||
style={{
|
||||
fill: 'white',
|
||||
}}
|
||||
className='fill-current text-gray-300'
|
||||
/>
|
||||
{/* Highlight */}
|
||||
<circle
|
||||
@@ -220,12 +233,12 @@ function Knob({
|
||||
x2={size / 2}
|
||||
y2={size / 2}
|
||||
strokeLinecap='round'
|
||||
strokeWidth='2'
|
||||
className='stroke-current text-indigo-900'></line>
|
||||
strokeWidth='3'
|
||||
className='stroke-current text-blue-500'></line>
|
||||
}
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export { Select, Knob };
|
||||
export { Select, Knob, Checkbox };
|
||||
|
||||
+6
-3
@@ -20,18 +20,21 @@ code {
|
||||
|
||||
@layer base {
|
||||
h3 {
|
||||
@apply pointer-events-none select-none;
|
||||
@apply pointer-events-none select-none text-lg font-semibold text-gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200;
|
||||
@apply w-2/3 font-semibold text-gray-700 rounded-md border px-2 py-2 border-gray-300 shadow-sm hover:bg-gray-50 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500;
|
||||
}
|
||||
.btn:disabled {
|
||||
@apply opacity-60 hover:bg-gray-100 cursor-default;
|
||||
@apply line-through opacity-50 hover:bg-white cursor-default;
|
||||
}
|
||||
.select {
|
||||
@apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
|
||||
}
|
||||
.checkbox {
|
||||
@apply rounded-md border-2 text-blue-500 mt-2 w-6 h-6;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user