variablelab/variabletime
variablelab/variabletime
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix disable/enable letterDelay input update

Browse source 
dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18
This commit is contained in:
themancalledjakob 2024-04-02 13:51:20 +02:00
parent 14e79208f3
commit 157703886d
2 changed files with 41 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
bin/em/variabletime/web/css/theatre.css
View file

@ -734,3 +734,8 @@ li.layerMover div.selected svg circle {
.color_preview{
border: none !important;
}
input:disabled {
background: darkgrey;
color: lightgrey;
}

44
bin/em/variabletime/web/js/audio.js
View file

@ -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;
};