UI changes

This commit is contained in:
trian-gles 2024-08-08 15:31:57 +02:00
parent 985b6c832f
commit c8c410a38f
3 changed files with 27 additions and 12 deletions

View File

@ -130,7 +130,7 @@
"numoutlets" : 1, "numoutlets" : 1,
"outlettype" : [ "" ], "outlettype" : [ "" ],
"patching_rect" : [ 586.0, 713.0, 89.0, 36.0 ], "patching_rect" : [ 586.0, 713.0, 89.0, 36.0 ],
"text" : "harmoniclarity 40.156651" "text" : "harmoniclarity 14.213599"
} }
} }
@ -143,7 +143,7 @@
"numoutlets" : 1, "numoutlets" : 1,
"outlettype" : [ "" ], "outlettype" : [ "" ],
"patching_rect" : [ 491.0, 713.0, 85.0, 36.0 ], "patching_rect" : [ 491.0, 713.0, 85.0, 36.0 ],
"text" : "event_length 29.843349" "text" : "event_length 55.786401"
} }
} }
@ -156,7 +156,7 @@
"numoutlets" : 1, "numoutlets" : 1,
"outlettype" : [ "" ], "outlettype" : [ "" ],
"patching_rect" : [ 385.0, 715.0, 84.0, 36.0 ], "patching_rect" : [ 385.0, 715.0, 84.0, 36.0 ],
"text" : "metriclarity 22.176645" "text" : "metriclarity 79.192955"
} }
} }

View File

@ -48,6 +48,7 @@ function MasterLfoHandler(){
const [userDefinedWave, setUserDefinedWave] = React.useState(Array(50).fill(0)); const [userDefinedWave, setUserDefinedWave] = React.useState(Array(50).fill(0));
const [modVisibleArr, setModVisibleArr] = React.useState(initVisArr); const [modVisibleArr, setModVisibleArr] = React.useState(initVisArr);
const [modTypeArr, setModTypeArr] = React.useState(Array(MAXLFOS).fill('LFO'));
const [modInstanceNumArr, setModInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1')); const [modInstanceNumArr, setModInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1'));
const [modCenterVals, setModCenterVals] = React.useState({'1':{}, '2':{}, '3':{}, '4':{}}); const [modCenterVals, setModCenterVals] = React.useState({'1':{}, '2':{}, '3':{}, '4':{}});
@ -55,6 +56,7 @@ function MasterLfoHandler(){
const [bpm, setBpm] = React.useState(100); const [bpm, setBpm] = React.useState(100);
const [beatsInMeasure, setBeatsInMeasure] = React.useState(4); const [beatsInMeasure, setBeatsInMeasure] = React.useState(4);
const [noiseTypeArr, setNoiseTypeArr] = React.useState(Array(MAXLFOS).fill('Sine Int.'));
const [shapeArr, setShapeArr] = React.useState(Array(MAXLFOS).fill('Sine')); const [shapeArr, setShapeArr] = React.useState(Array(MAXLFOS).fill('Sine'));
const [djParamArr, setDjParamArr] = React.useState(Array(MAXLFOS).fill('NONE')); const [djParamArr, setDjParamArr] = React.useState(Array(MAXLFOS).fill('NONE'));
@ -66,8 +68,8 @@ function MasterLfoHandler(){
const [phaseArr, setPhaseArr] = React.useState(Array(MAXLFOS).fill('0')); const [phaseArr, setPhaseArr] = React.useState(Array(MAXLFOS).fill('0'));
const allModArrays = [modVisibleArr, modInstanceNumArr, shapeArr, djParamArr, freqArr, minArr, maxArr, phaseArr]; const allModArrays = [modVisibleArr, modTypeArr, modInstanceNumArr, shapeArr, noiseTypeArr, djParamArr, freqArr, minArr, maxArr, phaseArr];
const allModSetters = [setModVisibleArr, setModInstanceNumArr, setShapeArr, setDjParamArr, setFreqArr, setMinArr, setMaxArr, setPhaseArr]; const allModSetters = [setModVisibleArr, setModTypeArr, setModInstanceNumArr, setShapeArr, setNoiseTypeArr, setDjParamArr, setFreqArr, setMinArr, setMaxArr, setPhaseArr];
const modBlankVals = [true, '1', SHAPETYPES[0], MODPARAMOPTIONS[0], '1hz', '0', '1', '0']; const modBlankVals = [true, '1', SHAPETYPES[0], MODPARAMOPTIONS[0], '1hz', '0', '1', '0'];
@ -258,8 +260,14 @@ function MasterLfoHandler(){
e(LfoRow, { e(LfoRow, {
instanceNum : modInstanceNumArr[i], instanceNum : modInstanceNumArr[i],
setInstanceNum: CreateParamChanger(modInstanceNumArr, setModInstanceNumArr, i), setInstanceNum: CreateParamChanger(modInstanceNumArr, setModInstanceNumArr, i),
type: modTypeArr[i],
setType: CreateParamChanger(modTypeArr, setModTypeArr, i),
shape: shapeArr[i], shape: shapeArr[i],
setShape: CreateParamChanger(shapeArr, setShapeArr, i), setShape: CreateParamChanger(shapeArr, setShapeArr, i),
noise: noiseTypeArr[i],
setNoise: CreateParamChanger(noiseTypeArr, setNoiseTypeArr, i),
djParam: djParamArr[i], djParam: djParamArr[i],
setDjParam: CreateParamChanger(djParamArr, setDjParamArr, i), setDjParam: CreateParamChanger(djParamArr, setDjParamArr, i),
centerVals: modCenterVals, centerVals: modCenterVals,

View File

@ -2,7 +2,10 @@
// MODULATORS // MODULATORS
///////////////////////// /////////////////////////
var TYPEOPTIONS = ["LFO", "Noise"];
var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom"]; var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom"];
var NOISETYPES = ["Sine Int."]
var INSTANCEOPTIONS = ["1", "2", "3", "4"]; var INSTANCEOPTIONS = ["1", "2", "3", "4"];
@ -10,11 +13,6 @@ const MODPARAMOPTIONS = ["NONE", "stream", "pulse_length", "eventfulness", "even
"harmoniclarity", "melodic_cohesion", "melody_scope", "tonic_pitch", "pitch_center", "pitch_range", "dynamics", "harmoniclarity", "melodic_cohesion", "melody_scope", "tonic_pitch", "pitch_center", "pitch_range", "dynamics",
"attenuation", "chordal_weight", "tonality-profile", "ostinato-buffer", "ostinato", "meter", "scale"]; "attenuation", "chordal_weight", "tonality-profile", "ostinato-buffer", "ostinato", "meter", "scale"];
function ControlType(){
return e('select', {className: 'control-type'}, Option("LFO"));
}
function LfoRow(props){ function LfoRow(props){
@ -23,10 +21,19 @@ function LfoRow(props){
if (!center) if (!center)
center = 0; center = 0;
let typeOption = null;
if (props.type == "LFO"){
typeOption = ListItem(DropDown({onChange: props.setShape, value:props.shape, options: SHAPETYPES}));
}
else if (props.type == "Noise"){
typeOption = ListItem(DropDown({onChange: props.setNoise, value:props.noise, options: NOISETYPES}));
}
let content = e('ul', {className: 'lfo-item'}, let content = e('ul', {className: 'lfo-item'},
ListItem(DropDown({onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})), ListItem(DropDown({onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
ListItem(ControlType()), ListItem(DropDown({options: TYPEOPTIONS, onChange: props.setType, value:props.type})),
ListItem(DropDown({onChange: props.setShape, value:props.shape, options: SHAPETYPES})), typeOption,
ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})), ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
ListItem(e("input", {onChange:props.setFreq, value:props.freq, className:"timeInput"}, null)), ListItem(e("input", {onChange:props.setFreq, value:props.freq, className:"timeInput"}, null)),
ListItem(e(NumberBox, {onChange:props.setMin, value:props.min, step:0.1}, null)), ListItem(e(NumberBox, {onChange:props.setMin, value:props.min, step:0.1}, null)),