Compare commits
No commits in common. "main" and "showhide-button" have entirely different histories.
main
...
showhide-b
1740
ModEnum.maxhelp
1740
ModEnum.maxhelp
File diff suppressed because it is too large
Load Diff
3345
ModEnum.maxpat
3345
ModEnum.maxpat
File diff suppressed because one or more lines are too long
14
common.js
14
common.js
@ -43,19 +43,15 @@ function Switch(props){
|
||||
e('span', {className: 'slider round'}, null))
|
||||
}
|
||||
|
||||
function SendSaveEvent(){
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new CustomEvent('saveDict', {'detail' : "localStorage"}));
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function CreateParamChanger(arr, setArr, index, postCB=() => {}, preCB=(val) => val){
|
||||
return (event) => {
|
||||
let newArr = arr.slice();
|
||||
newArr[index] = preCB(event.target.value);
|
||||
setArr(newArr);
|
||||
postCB();
|
||||
SendSaveEvent();
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new CustomEvent('saveDict', {'detail' : "localStorage"}));
|
||||
}, 50)
|
||||
|
||||
log(`${index} ${event.target.value}`);
|
||||
}
|
||||
@ -68,7 +64,9 @@ function CreateMatrixParamChanger(matrix, setMatrix, i, j){
|
||||
});
|
||||
newMatrix[i][j] = event.target.value;
|
||||
setMatrix(newMatrix);
|
||||
SendSaveEvent();
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new CustomEvent('saveDict', {'detail' : "localStorage"}));
|
||||
}, 50)
|
||||
log(`${i}, ${j} ${event.target.value}`);
|
||||
|
||||
}
|
||||
|
||||
24
enums.js
24
enums.js
@ -4,18 +4,14 @@
|
||||
|
||||
|
||||
|
||||
function DataCell(element) {
|
||||
return e('td', null, element);
|
||||
}
|
||||
|
||||
// NOT A REACT FUNCTIONAL COMPONENT. MERELY RETURNS AN ARRAY WHICH IS UNPACKED
|
||||
function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames, setEnumNames, djParam, locked){
|
||||
let items = [];
|
||||
for (let i = 0; i < MAXENUMPOINTS; i++){
|
||||
|
||||
items.push(DataCell(e(TextBox, {locked, onChange: CreateMatrixParamChanger(enumNames, setEnumNames, index, i), value: enumNames[index][i], id:`text-${djParam}-${enumNames[index][i]}`}, null)));
|
||||
items.push(ListItem(e(TextBox, {locked, onChange: CreateMatrixParamChanger(enumNames, setEnumNames, index, i), value: enumNames[index][i], id:`text-${djParam}-${enumNames[index][i]}`}, null)));
|
||||
// Add 1 to make up for the lower enum bound
|
||||
items.push(DataCell(e(NumberBox, {locked, onChange: CreateMatrixParamChanger(enumBreakPoints, setEnumBreakPoints, index, i + 1), value:enumBreakPoints[index][i + 1]}, null)));
|
||||
items.push(ListItem(e(NumberBox, {locked, onChange: CreateMatrixParamChanger(enumBreakPoints, setEnumBreakPoints, index, i + 1), value:enumBreakPoints[index][i + 1]}, null)));
|
||||
}
|
||||
return items;
|
||||
}
|
||||
@ -23,15 +19,15 @@ function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames,
|
||||
function EnumeratorRow(props){
|
||||
let linkedText = props.linked ? "<- mods" : "";
|
||||
|
||||
let content = e('tr', {className: 'lfo-item', id: `${props.djParam}-enum-row`},
|
||||
DataCell(DropDown({locked:props.locked, onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
|
||||
DataCell(DropDown({locked:props.locked, onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
|
||||
DataCell(e(NumberBox, {locked:props.locked, onChange: props.setEnumItemCounts, step:1, value:props.enumItems, className: 'enum-count'}, null)),
|
||||
DataCell(e(NumberBox, {locked:props.locked, onChange: CreateMatrixParamChanger(props.enumBreakPoints, props.setEnumBreakPoints, props.index, 0), value:props.enumBreakPoints[props.index][0], step:0.1}, null)),
|
||||
let content = e('ul', {className: 'lfo-item', id: `${props.djParam}-enum-row`},
|
||||
ListItem(DropDown({locked:props.locked, onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
|
||||
ListItem(DropDown({locked:props.locked, onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
|
||||
ListItem(e(NumberBox, {locked:props.locked, onChange: props.setEnumItemCounts, step:1, value:props.enumItems, className: 'enum-count'}, null)),
|
||||
ListItem(e(NumberBox, {locked:props.locked, onChange: CreateMatrixParamChanger(props.enumBreakPoints, props.setEnumBreakPoints, props.index, 0), value:props.enumBreakPoints[props.index][0], step:0.1}, null)),
|
||||
...(EnumeratorItems(props.index, props.enumBreakPoints, props.setEnumBreakPoints, props.enumNames, props.setEnumNames, props.djParam, props.locked).slice(0, props.enumItems * 2)),
|
||||
DataCell(e(Button, {locked:props.locked, text:'+', onClick: props.addEnum}, null)),
|
||||
DataCell(e(Button, {locked:props.locked, text:'-', onClick: props.removeEnum}, null)),
|
||||
DataCell(e("div", {className:"linked"}, linkedText))
|
||||
ListItem(e(Button, {locked:props.locked, text:'+', onClick: props.addEnum}, null)),
|
||||
ListItem(e(Button, {locked:props.locked, text:'-', onClick: props.removeEnum}, null)),
|
||||
ListItem(e("div", {className:"linked"}, linkedText))
|
||||
);
|
||||
if (props.visible){
|
||||
return content;
|
||||
|
||||
2680
example-with-dj.maxpat
Normal file
2680
example-with-dj.maxpat
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
428
lfogui.css
428
lfogui.css
@ -1,14 +1,14 @@
|
||||
* {
|
||||
--locked-color: #5fadbf;
|
||||
--unlocked-color: #ff5153;
|
||||
--locked-color: #5fadbf;
|
||||
--unlocked-color: #ff5153;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: white;
|
||||
--background: ivory;
|
||||
--active: royalblue;
|
||||
--nonactive: rgb(205, 205, 205);
|
||||
--nonactive: lightsteelblue;
|
||||
--alert: red;
|
||||
--textcolor: black;
|
||||
--textcolor: #737373;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
@ -21,143 +21,49 @@ body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
display: block;
|
||||
/* No floating content on sides */
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow-x: hidden; /* no horizontal scrollbar*/
|
||||
overflow-y: scroll;
|
||||
display: block; /* No floating content on sides */
|
||||
}
|
||||
|
||||
/*navigation*/
|
||||
.header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1em;
|
||||
border-bottom: 1px solid var(--active);
|
||||
}
|
||||
|
||||
.header button {
|
||||
border: 1px solid var(--active);
|
||||
color: var(--active);
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
margin: 4px;
|
||||
font-size: 0.9em;
|
||||
min-width: 4.5em;
|
||||
}
|
||||
|
||||
td button {
|
||||
background-color: white;
|
||||
color: var(--active);
|
||||
border: 1px solid var(--active);
|
||||
}
|
||||
|
||||
/* :::::::::::::: SELECTING MODULATORS/ENUMERATORS */
|
||||
|
||||
.header button.highlighted-button {
|
||||
color: var(--active);
|
||||
border: 1px solid var(--active);
|
||||
}
|
||||
|
||||
.header button.unhighlighted-button {
|
||||
color: var(--nonactive);
|
||||
border: 1px solid var(--nonactive);
|
||||
}
|
||||
|
||||
/* table */
|
||||
table {
|
||||
margin: 1em;
|
||||
padding: 0em;
|
||||
border-collapse: collapse;
|
||||
background-color: lightsteelblue;
|
||||
}
|
||||
|
||||
/* points datacells should have a min-width*/
|
||||
.enum-count {
|
||||
min-width: 5.6em;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.4em 0.3em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
color: white;
|
||||
background-color: var(--active);
|
||||
}
|
||||
|
||||
tr,
|
||||
td {
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* input types */
|
||||
/* dropdown list */
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
option, select>* {
|
||||
font-size: 0.8em !important;
|
||||
padding: 0em !important;
|
||||
margin: 0em !important;
|
||||
min-height: 0em !important;
|
||||
}
|
||||
*/
|
||||
option {
|
||||
background-color: var(--active);
|
||||
}
|
||||
|
||||
option:not(:checked) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* input */
|
||||
input,
|
||||
select {
|
||||
border: 1px solid var(--active);
|
||||
color: var(--active);
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.5em;
|
||||
height: 1.5em;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: 5px;
|
||||
/*slight padding on left*/
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
table {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 60px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timeInput {
|
||||
width: 80px;
|
||||
width: 80px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
@ -174,205 +80,223 @@ input[type=text] {
|
||||
|
||||
.numbox-clicked {
|
||||
user-select: none;
|
||||
border: solid;
|
||||
border : solid;
|
||||
font-size: 12vw;
|
||||
}
|
||||
|
||||
.param-input-label {
|
||||
width: 93%;
|
||||
font-size: 5vw;
|
||||
width: 93%;
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.lfo-input-label {
|
||||
width: 40%;
|
||||
font-size: 5vw;
|
||||
width: 40%;
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
height: 8px;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
overflow: hidden;
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
/*slider knob*/
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
color: var(--active);
|
||||
margin-top: -1px;
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--active);
|
||||
box-shadow: -80px 0 0 80px var(--active);
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: var(--active);
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(13px);
|
||||
-ms-transform: translateX(13px);
|
||||
transform: translateX(13px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.enum-count {
|
||||
background-color: aquamarine;
|
||||
}
|
||||
|
||||
.label {
|
||||
background-color: aliceblue;
|
||||
padding: 0 4px 0 4px;
|
||||
margin: 0 2px 0 2px;
|
||||
border-color: #333333;
|
||||
border-width: 1px;
|
||||
background-color: aliceblue;
|
||||
padding: 0 4px 0 4px;
|
||||
margin: 0 2px 0 2px;
|
||||
border-color: #333333;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.base-val {
|
||||
border: none;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: lightgray;
|
||||
border-color: #333333;
|
||||
border-width: 1px;
|
||||
width: 50px;
|
||||
margin-left: 2px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.linked {
|
||||
color: red;
|
||||
border-width: 1px;
|
||||
width: 50px;
|
||||
font-size: small;
|
||||
margin-left: 2px;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
/*hide*/
|
||||
color: red;
|
||||
border-width: 1px;
|
||||
width: 50px;
|
||||
font-size: small;
|
||||
margin-left: 2px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse-animation {
|
||||
0% {
|
||||
color: black;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: red;
|
||||
}
|
||||
0% {
|
||||
color: black;
|
||||
}
|
||||
100% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
#pulse {
|
||||
animation: pulse-animation 0.2s normal;
|
||||
animation: pulse-animation 0.2s normal;
|
||||
}
|
||||
/* :::::::::::::: SELECTING MODULATORS/ENUMERATORS */
|
||||
|
||||
.highlighted-button {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.unhighlighted-button {
|
||||
background-color: white;
|
||||
}
|
||||
/* :::::::::::::: LOCK CSS */
|
||||
|
||||
.locked-component {
|
||||
pointer-events: none;
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
background-color: #333333;
|
||||
color : white;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: flex;
|
||||
}
|
||||
|
||||
/* Locked */
|
||||
.lock {
|
||||
margin-top: 14px;
|
||||
width: 24px;
|
||||
height: 21px;
|
||||
border: 3px solid var(--locked-color);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
margin-top: 14px;
|
||||
width: 24px;
|
||||
height: 21px;
|
||||
border: 3px solid var(--locked-color);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.lock:after {
|
||||
content: "";
|
||||
display: block;
|
||||
background: var(--locked-color);
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -3.5px 0 0 -2px;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
content: "";
|
||||
display: block;
|
||||
background: var(--locked-color);
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -3.5px 0 0 -2px;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.lock:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
bottom: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border: 3px solid var(--locked-color);
|
||||
border-top-right-radius: 50%;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom: 0;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
bottom: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border: 3px solid var(--locked-color);
|
||||
border-top-right-radius: 50%;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom: 0;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
/* Locked Hover */
|
||||
.lock:hover:before {
|
||||
height: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* Unlocked */
|
||||
.unlocked {
|
||||
transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.unlocked:before {
|
||||
bottom: 130%;
|
||||
left: 31%;
|
||||
margin-left: -11.5px;
|
||||
transform: rotate(-45deg);
|
||||
bottom: 130%;
|
||||
left: 31%;
|
||||
margin-left: -11.5px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.unlocked,
|
||||
.unlocked:before {
|
||||
border-color: var(--unlocked-color);
|
||||
border-color: var(--unlocked-color);
|
||||
}
|
||||
|
||||
.unlocked:after {
|
||||
background: var(--unlocked-color);
|
||||
background: var(--unlocked-color);
|
||||
}
|
||||
|
||||
/* Unlocked Hover */
|
||||
.unlocked:hover {
|
||||
transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.unlocked:hover:before {
|
||||
height: 10px;
|
||||
left: 40%;
|
||||
bottom: 124%;
|
||||
transform: rotate(-30deg);
|
||||
height: 10px;
|
||||
left: 40%;
|
||||
bottom: 124%;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
24
lfogui.html
24
lfogui.html
@ -7,21 +7,23 @@
|
||||
-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./lfogui.css">
|
||||
<link rel="stylesheet" href="./lfogui.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="lfo-container"></div>
|
||||
<div id="lfo-container"></div>
|
||||
|
||||
<script src="./react.js"></script>
|
||||
<script src="./react-dom.js"></script>
|
||||
<script src="./moment.js"></script>
|
||||
<script src="./common.js"></script>
|
||||
<script src="./enums.js"></script>
|
||||
<script src="./modulators.js"></script>
|
||||
<script src="./lfogui.js"></script>
|
||||
<script src="./react.js"></script>
|
||||
<script src="./react-dom.js"></script>
|
||||
<script src="./moment.js"></script>
|
||||
<script src="./common.js"></script>
|
||||
<script src="./enums.js"></script>
|
||||
<script src="./modulators.js"></script>
|
||||
<script src="./lfogui.js">
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
41
lfogui.js
41
lfogui.js
@ -30,7 +30,7 @@ const LockModes = Object.freeze({
|
||||
var modPhases = Array(MAXLFOS).fill(0);
|
||||
var firstUpdateTime = Date.now();
|
||||
|
||||
const MODULATORLABELS = ["inst", "type", "shape", "param", "timebase", "min", "max", "phase", "center", "result", "", ""];
|
||||
const MODULATORLABELS = ["inst", "type", "shape", "param", "timebase", "min", "max", "phase", "center"];
|
||||
const ENUMERATORLABELS = ["inst", "parameter", "# points"];
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ function MasterLfoHandler() {
|
||||
return content
|
||||
}
|
||||
|
||||
let toggleEnabledText = enabled ? `Hide \u{25BE}` : `Show \u{25B8}`;
|
||||
let toggleEnabledText = enabled ? "Hide" : "Show";
|
||||
|
||||
/// MODULATOR ARRAYS
|
||||
let userDefinedWavesBase = [];
|
||||
@ -102,7 +102,7 @@ function MasterLfoHandler() {
|
||||
const [modTypeArr, setModTypeArr] = React.useState(Array(MAXLFOS).fill('LFO'));
|
||||
const [modInstanceNumArr, setModInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1'));
|
||||
|
||||
const [modCenterVals, setModCenterVals] = React.useState({ '1': {}, '2': {}, '3': {}, '4': {}, '5': {}, '6': {}});
|
||||
const [modCenterVals, setModCenterVals] = React.useState({ '1': {}, '2': {}, '3': {}, '4': {} });
|
||||
|
||||
const [ticks, setTicks] = React.useState(0);
|
||||
const [beatsInMeasure, setBeatsInMeasure] = React.useState(4);
|
||||
@ -282,11 +282,6 @@ function MasterLfoHandler() {
|
||||
setTicks(event.detail);
|
||||
}
|
||||
|
||||
function handleChangeViewMode(event){
|
||||
setEnabled(true);
|
||||
setViewMode(event.detail);
|
||||
}
|
||||
|
||||
function setNN(event) {
|
||||
|
||||
for (let i = 0; i < MAXLFOS; i++) {
|
||||
@ -357,7 +352,6 @@ function MasterLfoHandler() {
|
||||
window.addEventListener('userFunction', handleChangeUserFunction);
|
||||
window.addEventListener('userDefinedType', handleChangeUserDefinedType);
|
||||
window.addEventListener('maxTicks', handleMaxTicks);
|
||||
window.addEventListener('viewMode', handleChangeViewMode);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('loadDict', handleLoad);
|
||||
@ -372,7 +366,6 @@ function MasterLfoHandler() {
|
||||
window.removeEventListener('userFunction', handleChangeUserFunction);
|
||||
window.removeEventListener('userDefinedType', handleChangeUserDefinedType);
|
||||
window.removeEventListener('maxTicks', handleMaxTicks);
|
||||
window.removeEventListener('viewMode', handleChangeViewMode);
|
||||
};
|
||||
}, [...allModArrays, ...allEnumArrays, ...allEnumMats, userDefinedWaves, userDefinedFunctions, userDefinedTypes, modCenterVals, render, beatsInMeasure, ticks]);
|
||||
|
||||
@ -452,7 +445,6 @@ function MasterLfoHandler() {
|
||||
allModSetters[j](array);
|
||||
}
|
||||
}
|
||||
SendSaveEvent();
|
||||
rerender(!render);
|
||||
|
||||
}
|
||||
@ -462,7 +454,6 @@ function MasterLfoHandler() {
|
||||
let newArr = modVisibleArr.slice();
|
||||
newArr[id] = false;
|
||||
setModVisibleArr(newArr);
|
||||
SendSaveEvent();
|
||||
}
|
||||
|
||||
}
|
||||
@ -486,15 +477,9 @@ function MasterLfoHandler() {
|
||||
enumItems: enumItemCounts[i],
|
||||
setEnumItemCounts: CreateParamChanger(enumItemCounts, setEnumItemCounts, i),
|
||||
enumBreakPoints: enumBreakPoints,
|
||||
setEnumBreakPoints: (val) => {
|
||||
setEnumBreakPoints(val);
|
||||
SendSaveEvent
|
||||
},
|
||||
setEnumBreakPoints: setEnumBreakPoints,
|
||||
enumNames: enumNames,
|
||||
setEnumNames: (val) => {
|
||||
setEnumNames(val);
|
||||
SendSaveEvent
|
||||
},
|
||||
setEnumNames: setEnumNames,
|
||||
visible: enumVisibleArr[i],
|
||||
djParam: enumDjParamArr[i],
|
||||
setDjParam: CreateParamChanger(enumDjParamArr, setEnumDjParamArr, i),
|
||||
@ -540,7 +525,6 @@ function MasterLfoHandler() {
|
||||
}
|
||||
}
|
||||
rerender(!render);
|
||||
SendSaveEvent();
|
||||
}
|
||||
},
|
||||
removeEnum: () => {
|
||||
@ -548,7 +532,6 @@ function MasterLfoHandler() {
|
||||
let newArr = enumVisibleArr.slice();
|
||||
newArr[id] = false;
|
||||
setEnumVisibleArr(newArr);
|
||||
SendSaveEvent();
|
||||
}
|
||||
}
|
||||
}, null)
|
||||
@ -583,11 +566,9 @@ function MasterLfoHandler() {
|
||||
|
||||
return e('div', null,
|
||||
e('div', { className: 'header' },
|
||||
e('div', {className: 'nav'},
|
||||
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.MOD), className: modButtonClass}, 'Modulators')),
|
||||
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.ENUM), className: enumButtonClass }, 'Enumerators'))
|
||||
),
|
||||
e('button', { onClick: toggleEnabled, id: 'hide-button'}, toggleEnabledText),
|
||||
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.MOD), className: modButtonClass}, 'Modulators')),
|
||||
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.ENUM), className: enumButtonClass }, 'Enumerators')),
|
||||
e('button', { onClick: toggleEnabled, }, toggleEnabledText),
|
||||
|
||||
//allows lock mode
|
||||
//e('span', { className: lockClass, onClick: toggleLockMode }, null)
|
||||
@ -595,7 +576,7 @@ function MasterLfoHandler() {
|
||||
|
||||
displayIfEnabled(
|
||||
e('table', { id: 'table' },
|
||||
e('thead', null, e('tr', { id: 'headers' }, ...labels.map(x => e('th', {id: x == '# points' ? 'points' : x}, x)))),
|
||||
e('thead', null, e('tr', { id: 'headers' }, ...labels.map(x => e('th', null, x)))),
|
||||
e('tbody', null, ...grid)
|
||||
))
|
||||
);
|
||||
@ -635,10 +616,6 @@ if (!DEBUG) {
|
||||
window.dispatchEvent(new CustomEvent('userWave', { 'detail': data }));
|
||||
});
|
||||
|
||||
window.max.bindInlet("viewMode", (mode) => {
|
||||
window.dispatchEvent(new CustomEvent('viewMode', { 'detail': parseInt(mode) }));
|
||||
});
|
||||
|
||||
window.max.bindInlet("userFunction", (index, ...points) => {
|
||||
//list of 101 points between 0-100
|
||||
let data = { points, index };
|
||||
|
||||
@ -7,7 +7,7 @@ var TYPEOPTIONS = ["LFO", "Noise"];
|
||||
var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom_1", "Custom_2", "Custom_3", "Custom_4"];
|
||||
var NOISETYPES = ["Rand", "Line Int.", "Sine Int."]
|
||||
|
||||
var INSTANCEOPTIONS = ["1", "2", "3", "4", "5", "6"];
|
||||
var INSTANCEOPTIONS = ["1", "2", "3", "4"];
|
||||
|
||||
const MODPARAMOPTIONS = ["NONE", "stream", "pulse_length", "eventfulness", "event_length", "metriclarity",
|
||||
"harmoniclarity", "melodic_cohesion", "melody_scope", "tonic_pitch", "pitch_center", "pitch_range", "dynamics",
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user