From 157703886db23878b537ce7d4125b6f3eeecb451 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 2 Apr 2024 13:51:20 +0200 Subject: [PATCH] fix disable/enable letterDelay input update dependencies hashes: openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501 ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3 ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239 ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8 theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18 --- bin/em/variabletime/web/css/theatre.css | 5 +++ bin/em/variabletime/web/js/audio.js | 44 ++++++++++++++++++++----- 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/bin/em/variabletime/web/css/theatre.css b/bin/em/variabletime/web/css/theatre.css index fa18a2c..d8036a6 100644 --- a/bin/em/variabletime/web/css/theatre.css +++ b/bin/em/variabletime/web/css/theatre.css @@ -734,3 +734,8 @@ li.layerMover div.selected svg circle { .color_preview{ border: none !important; } + +input:disabled { + background: darkgrey; + color: lightgrey; +} diff --git a/bin/em/variabletime/web/js/audio.js b/bin/em/variabletime/web/js/audio.js index b527dcc..cc20719 100644 --- a/bin/em/variabletime/web/js/audio.js +++ b/bin/em/variabletime/web/js/audio.js @@ -167,6 +167,11 @@ const Audio = function(tp, record) { } }; + const updateAudioMappingEvent = (type, layerID, propTitle, options) => { + const e = new CustomEvent('updateAudioMapping', {type, layerID, propTitle, options}); + tp.getPanel().dispatchEvent(e); + }; + // potentially recursive const addAudioMapping = (layer, propTitle, options = false) => { if (!options) { @@ -178,6 +183,7 @@ const Audio = function(tp, record) { const subPropTitle = `${propTitle}.${subPropKey}`; isGood = addAudioMapping(layer, subPropTitle, o[subPropKey]) ? isGood : false; }); + updateAudioMappingEvent('addAudioMapping', layer.id(), propTitle, options); return isGood; } } @@ -186,6 +192,7 @@ const Audio = function(tp, record) { } if (!mapping[layer.id()].hasOwnProperty(propTitle)) { mapping[layer.id()][propTitle] = options; + updateAudioMappingEvent('addAudioMapping', layer.id(), propTitle, options); return true; } else { // already there @@ -194,6 +201,7 @@ const Audio = function(tp, record) { fixColor(mapping[layer.id()][propTitle].max_out); fixColor(mapping[layer.id()][propTitle].value); } + updateAudioMappingEvent('addAudioMapping', layer.id(), propTitle, options); return false; } }; @@ -206,6 +214,7 @@ const Audio = function(tp, record) { }); delete mapping[layerID]; }); + updateAudioMappingEvent('removeAudioMapping', false, false, false); return true; } if (!mapping.hasOwnProperty(layer.id())) { @@ -220,6 +229,7 @@ const Audio = function(tp, record) { if (Object.keys(mapping[layer.id()]).length === 0) { delete mapping[layer.id()]; } + updateAudioMappingEvent('removeAudioMapping', layer.id(), propTitle, false); return true; } @@ -229,10 +239,10 @@ const Audio = function(tp, record) { config .layer.letterDelayProps .indexOf(propTitle.split('.')[0]) >= 0 - && mapping[layer.id()][`letterDelays.${propTitle}`] === 'undefined' // if the letterDelay is mapped itself, we don't do it //&& propTitle.indexOf('color') < 0 //&& !tp.isSequenced(propTitle) ; + let isLetterDelayMapped = typeof mapping[layer.id()][`letterDelays.${propTitle}`] === 'undefined'; // if the letterDelay is mapped itself, we don't do it let isSequenced = tp.isSequenced(propTitle, layer); const panel = tp.getPanel(); if (!areMutationsObserved) { @@ -250,6 +260,8 @@ const Audio = function(tp, record) { audioOptions.style.order = parseInt(container.style.order) + 1; const updateMappingOptions = () => { + isSequenced = tp.isSequenced(propTitle, layer); + isLetterDelayMapped = typeof mapping[layer.id()][`letterDelays.${propTitle}`] !== 'undefined'; // if the letterDelay is mapped itself, we don't do it if (propTitle === 'color') { mappingOptions.min_out = hexaToRgba(panel.querySelector(toCssClass(`audio_min${propTitle}`,'#')).value); const max_cssClass = toCssClass(`audio_max${propTitle}`,'#'); @@ -266,13 +278,24 @@ const Audio = function(tp, record) { const s = panel.querySelector(toCssClass(`audio_smoothing${propTitle}`,'#')).value; mappingOptions.smoothing = parseFloat(s); if (hasLetterDelay) { - const ld = panel.querySelector(toCssClass(`audio_letterDelay${propTitle}`,'#')); - mappingOptions.letterDelay = typeof ld.value === 'number' ? ld.value : parseInt(ld.value); - if (isSequenced) { - const prop = getNestedProperty(layer.theatreObject.props.letterDelays, propTitle.split('.')); - tp.studio.transaction(({set}) => { - set(prop, mappingOptions.letterDelay); - }); + const ld = panel.querySelector(toCssClass(`audio_letterDelay${propTitle}`, '#')); + if (isLetterDelayMapped) { + ld.setAttribute('disabled', 'disabled'); + ld.setAttribute('title', 'disabled, as the letterDelay is audioreactive (scroll down)'); + } else { + ld.removeAttribute('title'); + ld.removeAttribute('disabled'); + mappingOptions.letterDelay = typeof ld.value === 'number' ? ld.value : parseInt(ld.value); + if (isSequenced) { + const prop = getNestedProperty(layer.theatreObject.props.letterDelays, propTitle.split('.')); + console.log('updateMAppingOptions', prop, propTitle.split('.')); + alert('supposed to update for', propTitle.split('.')); + tp.studio.transaction(({ + set + }) => { + set(prop, mappingOptions.letterDelay); + }); + } } } mappingOptions.source = panel.querySelector(toCssClass(`audio_source${propTitle}`,'#')).value; @@ -677,6 +700,11 @@ const Audio = function(tp, record) { container.after(audioOptions); canvasCombos[propTitle] = [fft_imgDom, fft_imgDom.getContext("2d"), layer.id()]; + + + tp.getPanel().addEventListener('updateAudioMapping', () => { + updateMappingOptions(); + }); updateMappingOptions(); return audioOptions; };