From b82b278727c619a22dd142d4032f3087fab33cba Mon Sep 17 00:00:00 2001 From: Kieran McAuliffe Date: Mon, 22 Jul 2024 14:58:51 +0200 Subject: [PATCH] enum highlighting --- enums.js | 23 +++++++++++++++++------ example.maxpat | 49 ++++++++++++++++++++++++++++++++++++++++--------- lfogui.html | 20 +++++++++++++++++--- lfogui.js | 4 +++- 4 files changed, 77 insertions(+), 19 deletions(-) diff --git a/enums.js b/enums.js index 3bf7893..3c39595 100644 --- a/enums.js +++ b/enums.js @@ -5,11 +5,11 @@ // NOT A REACT FUNCTIONAL COMPONENT. MERELY RETURNS AN ARRAY WHICH IS UNPACKED -function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames, setEnumNames){ +function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames, setEnumNames, djParam){ let items = []; - for (let i = 0; i < MAXENUMPOINTS; i++){ - items.push(ListItem(e(TextBox, {onChange: CreateMatrixParamChanger(enumNames, setEnumNames, index, i), value: enumNames[index][i]}, null))); + + items.push(ListItem(e(TextBox, {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(ListItem(e(NumberBox, {onChange: CreateMatrixParamChanger(enumBreakPoints, setEnumBreakPoints, index, i + 1), value:enumBreakPoints[index][i + 1]}, null))); } @@ -17,11 +17,11 @@ function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames, } function EnumeratorRow(props){ - let content = e('ul', {className: 'lfo-item'}, + let content = e('ul', {className: 'lfo-item', id: `${props.djParam}-enum-row`}, ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})), ListItem(e(NumberBox, {onChange: props.setEnumItemCounts, step:1, value:props.enumItems, className: 'enum-count'}, null)), ListItem(e(NumberBox, {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).slice(0, props.enumItems * 2)), + ...(EnumeratorItems(props.index, props.enumBreakPoints, props.setEnumBreakPoints, props.enumNames, props.setEnumNames, props.djParam).slice(0, props.enumItems * 2)), ListItem(e(Button, {text:'+', onClick: props.addEnum}, null)), ListItem(e(Button, {text:'-', onClick: props.removeEnum}, null)) ); @@ -40,7 +40,18 @@ function enumerate(name, inval, count, keys, vals){ break } } + let highlightedItem = document.getElementById(`text-${name}-${output}`); + + if (highlightedItem){ - window.max.outlet(name + " " + output); + highlightedItem.style.animation = "pulse-animation 0.5s normal"; + + highlightedItem.addEventListener('animationend', () => { + highlightedItem.style.animation = ""; + }); + } + + + //window.max.outlet(name + " " + output); } diff --git a/example.maxpat b/example.maxpat index 5167688..a19b096 100644 --- a/example.maxpat +++ b/example.maxpat @@ -10,7 +10,7 @@ } , "classnamespace" : "box", - "rect" : [ 741.0, 148.0, 799.0, 715.0 ], + "rect" : [ 299.0, 99.0, 1220.0, 715.0 ], "bglocked" : 0, "openinpresentation" : 0, "default_fontsize" : 12.0, @@ -39,6 +39,31 @@ "subpatcher_template" : "", "assistshowspatchername" : 0, "boxes" : [ { + "box" : { + "id" : "obj-7", + "linecount" : 3, + "maxclass" : "comment", + "numinlets" : 1, + "numoutlets" : 0, + "patching_rect" : [ 89.0, 227.0, 197.0, 47.0 ], + "presentation_linecount" : 3, + "text" : "This parameter is defined in the modulators, and when sent will act as the center value for that LFO" + } + + } +, { + "box" : { + "id" : "obj-5", + "maxclass" : "message", + "numinlets" : 2, + "numoutlets" : 1, + "outlettype" : [ "" ], + "patching_rect" : [ 126.0, 276.0, 94.0, 22.0 ], + "text" : "param scale 1.6" + } + + } +, { "box" : { "id" : "obj-25", "maxclass" : "newobj", @@ -57,8 +82,7 @@ "maxclass" : "comment", "numinlets" : 1, "numoutlets" : 0, - "patching_rect" : [ 120.0, 230.0, 254.0, 47.0 ], - "presentation_linecount" : 4, + "patching_rect" : [ 89.0, 358.0, 254.0, 47.0 ], "text" : "This parameter is not defined by either the Modulators or Enumerators, so it will be passed directly to the output" } @@ -82,7 +106,7 @@ "maxclass" : "comment", "numinlets" : 1, "numoutlets" : 0, - "patching_rect" : [ 111.0, 353.0, 253.0, 141.0 ], + "patching_rect" : [ 89.0, 463.0, 254.0, 141.0 ], "text" : "The operation runs\n\nInput > Modulators > Enumerators > Output\n\nA parameter from the input not established by a Modulator will be passed directly to the Enumerators\n\nLikewise, the Enumerators will pass not established parameters" } @@ -118,7 +142,7 @@ "numinlets" : 2, "numoutlets" : 1, "outlettype" : [ "" ], - "patching_rect" : [ 146.0, 281.0, 129.0, 22.0 ], + "patching_rect" : [ 115.0, 409.0, 129.0, 22.0 ], "text" : "param attenuation 200" } @@ -139,9 +163,9 @@ "box" : { "data" : { "data" : { - "enumArrays" : [ [ 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ "2", 2, 2, "2", "2", "2", "2", "2", "2", "2" ], [ "event_length", "meter", "stream", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation" ] ], - "enumMats" : [ [ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ "0", "1", "2", 3, 4, 5, 6, 7, 8, 9, 10 ], [ "0", "1", "2", 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] ], [ [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "3 4", "7 8", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "0", "1", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ] ] ], - "modArrays" : [ [ 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ "Sine", "SawUp", "SawUp", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine" ], [ "metriclarity", "stream", "meter", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation" ], [ "1", "0.3", "0.1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1" ], [ "30", "2", "2", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1" ], [ "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0" ] ] + "enumArrays" : [ [ 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ "2", 2, 2, 2, "2", "2", "2", "2", "2", "2" ], [ "event_length", "meter", "stream", "scale", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation" ] ], + "enumMats" : [ [ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ "0", "1", "2", 3, 4, 5, 6, 7, 8, 9, 10 ], [ "0", "1", "2", 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] ], [ [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "3 4", "7 8", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "0", "1", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "pentatonic", "major", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ], [ "param", "param", "param", "param", "param", "param", "param", "param", "param", "param" ] ] ], + "modArrays" : [ [ 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ "Sine", "SawUp", "SawDown", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine", "Sine" ], [ "metriclarity", "stream", "meter", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation", "attenuation" ], [ "1", "0.3", "0.1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1" ], [ "30", "2", "2", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1" ], [ "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0" ] ] } } @@ -264,7 +288,7 @@ "numinlets" : 1, "numoutlets" : 1, "outlettype" : [ "" ], - "patching_rect" : [ 428.894733190536499, 104.0, 459.105266809463501, 323.0 ], + "patching_rect" : [ 438.52631402015686, 108.0, 611.105266809463501, 325.0 ], "rendermode" : 0, "url" : "file://lfogui.html" } @@ -351,6 +375,13 @@ "source" : [ "obj-3", 0 ] } + } +, { + "patchline" : { + "destination" : [ "obj-2", 0 ], + "source" : [ "obj-5", 0 ] + } + } , { "patchline" : { diff --git a/lfogui.html b/lfogui.html index dad76a3..4644015 100644 --- a/lfogui.html +++ b/lfogui.html @@ -32,7 +32,7 @@ input[type=number] { - width: 30px; + width: 50px; margin: 0; padding: 0; } @@ -41,6 +41,7 @@ width: 60px; margin: 0; padding: 0; + font-weight: bold; } #matrix { @@ -50,14 +51,12 @@ } .numbox-unclicked { - background-color: none; user-select: none; border: solid; font-size: 12vw; } .numbox-clicked { - background-color: pink; user-select: none; border : solid; font-size: 12vw; @@ -152,6 +151,21 @@ border-color: #333333; border-width: 1px; } + + @keyframes pulse-animation { + 0% { + color: black; + } + 100% { + color: red; + } + } + + #pulse { + animation: pulse-animation 0.2s normal; + } + + diff --git a/lfogui.js b/lfogui.js index 1b9353d..8e13484 100644 --- a/lfogui.js +++ b/lfogui.js @@ -22,6 +22,7 @@ const ViewModes = Object.freeze({ var modPhases = Array(MAXLFOS).fill(0); +var firstUpdateTime = Date.now(); var lastUpdateTime = Date.now(); const MODULATORLABELS = ["-type-", "---shape---", "----param----", "freq", "amp", "phase"]; @@ -166,6 +167,7 @@ function MasterLfoHandler(){ i++ } if (i == MAXLFOS){ + window.dispatchEvent(new CustomEvent('enum', {'detail' : [name, val]})); } @@ -354,7 +356,7 @@ function MasterLfoHandler(){ e(Switch, {ontoggle: toggleViewMode}, null), e('h5', null, title), e('ul', null, ...labels.map(x => ListItem(Label(x)))), - e('div', null, ...grid) + e('div', {id: 'grid'}, ...grid) ); }