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

Compare commits

base: variablelab:fad1bbb875e5f043ec4a4a793cc2d19a2c8574a4
Branches Tags
variablelab:main
variablelab:audio
..
compare: variablelab:1ef64e4eba622ebca4563cf8609b595bc0673b25
Branches Tags
variablelab:audio
variablelab:main

No commits in common. "fad1bbb875e5f043ec4a4a793cc2d19a2c8574a4" and "1ef64e4eba622ebca4563cf8609b595bc0673b25" have entirely different histories.
fad1bbb875 ... 1ef64e4eba

5 changed files with 34 additions and 119 deletions
Show stats Expand all files Collapse all files

52
bin/web/js/audio.js
View file

@ -1,10 +1,6 @@
import {
mapValue,
mix,
toCssClass,
flattenObject,
deFlattenObject,
clone,
} from './utils.js';
window.mapValue = mapValue;
@ -104,28 +100,28 @@ const Audio = function(tp, record) {
console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
return;
}
if (tp.getPanel().querySelector(toCssClass(`audioOptions${propTitle}`, '.')) !== null) {
if (tp.getPanel().querySelector(`.audioOptions${propTitle}`) !== null) {
//console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
return;
}
const container = panelPropTitle.parentNode.parentNode;
const container = tp.getPanelPropContainer(panelPropTitle);
const mappingOptions = mapping[layer.id()][propTitle];
const panel = tp.getPanel();
const audioOptions = document.createElement('div');
audioOptions.classList.add('audioOptions');
audioOptions.classList.add('audioOptionsTypeDefault');
audioOptions.classList.add(toCssClass(`audioOptions${propTitle}`));
audioOptions.classList.add(`audioOptions${propTitle}`);
audioOptions.style.position = 'relative';
audioOptions.style.width = '100%';
audioOptions.style.background = 'rgba(0,255,255,0.2)';
audioOptions.style.order = parseInt(container.style.order) + 1;
const updateMappingOptions = () => {
mappingOptions.min_out = parseFloat(panel.querySelector(toCssClass(`audio_min${propTitle}`,'#')).value);
mappingOptions.max_out = parseFloat(panel.querySelector(toCssClass(`audio_max${propTitle}`,'#')).value);
mappingOptions.min_out = parseFloat(panel.querySelector(`#audio_min${propTitle}`).value);
mappingOptions.max_out = parseFloat(panel.querySelector(`#audio_max${propTitle}`).value);
mappingOptions.sync =
panel.querySelector(`input[name="${toCssClass('audio_sync' + propTitle)}"]:checked`).value;
const s = panel.querySelector(toCssClass(`audio_smoothing${propTitle}`,'#')).value;
panel.querySelector(`input[name="audio_sync${propTitle}"]:checked`).value;
const s = panel.querySelector(`#audio_smoothing${propTitle}`).value;
mappingOptions.smoothing = parseFloat(s);
};
@ -136,24 +132,24 @@ const Audio = function(tp, record) {
min_inputDom_label.innerHTML = 'audio_min';
const min_inputDom = document.createElement('input');
min_inputDom.type = 'number';
min_inputDom.name = toCssClass(`audio_min${propTitle}`);
min_inputDom.id = toCssClass(`audio_min${propTitle}`);
min_inputDom.name = `audio_min${propTitle}`;
min_inputDom.id = `audio_min${propTitle}`;
min_inputDom.value = `${mappingOptions.min_out}`;
const max_inputDom_label = document.createElement('label');
max_inputDom_label.for = 'audio_max';
max_inputDom_label.innerHTML = 'audio_max';
const max_inputDom = document.createElement('input');
max_inputDom.type = 'number';
max_inputDom.name = toCssClass(`audio_max${propTitle}`);
max_inputDom.id = toCssClass(`audio_max${propTitle}`);
max_inputDom.name = `audio_max${propTitle}`;
max_inputDom.id = `audio_max${propTitle}`;
max_inputDom.value = `${mappingOptions.max_out}`;
const smoothing_inputDom_label = document.createElement('label');
smoothing_inputDom_label.for = 'audio_smoothing';
smoothing_inputDom_label.innerHTML = 'audio_smoothing';
const smoothing_inputDom = document.createElement('input');
smoothing_inputDom.type = 'number';
smoothing_inputDom.name = toCssClass(`audio_smoothing${propTitle}`);
smoothing_inputDom.id = toCssClass(`audio_smoothing${propTitle}`);
smoothing_inputDom.name = `audio_smoothing${propTitle}`;
smoothing_inputDom.id = `audio_smoothing${propTitle}`;
smoothing_inputDom.value = mappingOptions.smoothing;
smoothing_inputDom.min = 0;
smoothing_inputDom.max = 1;
@ -177,8 +173,8 @@ const Audio = function(tp, record) {
sync_inputDom_label.innerHTML = o;
const sync_inputDom = document.createElement('input');
sync_inputDom.type = 'radio';
sync_inputDom.name = toCssClass(`audio_sync${propTitle}`);
sync_inputDom.id = toCssClass(`audio_sync${propTitle}${o}`);
sync_inputDom.name = `audio_sync${propTitle}`;
sync_inputDom.id = `audio_sync${propTitle}${o}`;
sync_inputDom.value = o;
// default select first option
if (o === mappingOptions.sync) {
@ -261,11 +257,11 @@ const Audio = function(tp, record) {
// only selected layers have options
// otherwise the ui is not there
if (layer.isSelected()) {
const audioOptions = panel.querySelector(toCssClass(`audioOptions${propTitle}`,'.'));
const audioOptions = panel.querySelector(`.audioOptions${propTitle}`);
if (audioOptions !== null) {
audioOptions.remove();
}
const audioButton = panel.querySelector(toCssClass(`audioButton${propTitle}`,'.'));
const audioButton = panel.querySelector(`.audioButton${propTitle}`);
if (audioButton !== null) {
audioButton.classList.remove('active');
}
@ -277,8 +273,7 @@ const Audio = function(tp, record) {
const panel = tp.getPanel();
const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle !== null) {
//const container = tp.getPanelPropContainer(panelPropTitle);
const container = panelPropTitle.parentNode.parentNode;
const container = tp.getPanelPropContainer(panelPropTitle);
if (container === null) {
console.log("Audio::addAudioButton",
@ -290,7 +285,7 @@ const Audio = function(tp, record) {
} else {
const button = document.createElement('div');
button.classList.add('audioButton');
button.classList.add(toCssClass(`audioButton${propTitle}`));
button.classList.add(`audioButton${propTitle}`);
button.innerHTML = `<img src="/web/assets/sound.svg" alt="audio" />`;
container.append(button);
button.addEventListener('click', () => {
@ -317,9 +312,7 @@ const Audio = function(tp, record) {
};
const injectPanel = (layer) => {
const flatValues = clone(layer.theatreObject.value);
flattenObject(flatValues, ['color']);
const props = Object.keys(flatValues);
const props = Object.keys(layer.theatreObject.value);
props.forEach((propTitle) => {
if (config.audio.ignoreProps.indexOf(propTitle) < 0) {
let isActive = false;
@ -611,6 +604,7 @@ const Audio = function(tp, record) {
default:
break;
}
if (m.sync === 'volume') {}
});
}
});
@ -632,15 +626,13 @@ const Audio = function(tp, record) {
};
});
Object.keys(values).forEach((layerID) => {
deFlattenObject(values[layerID]);
record.liveUpdater.immediateUpdate(getLayer(layerID), values[layerID]);
});
}
} else {
propsToSet.forEach((p) => {
const title = tp
.getPanelPropTitle(p.title)
.parentNode.parentNode;
.getPanelPropContainer(p.title);
if (title !== null) {
const inputElement = title

4
bin/web/js/config.js
View file

@ -83,14 +83,14 @@ const config = {
zoomDynamicMax: 42,
},
audio: {
ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'],
ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy', 'fontVariationAxes', 'color'],
defaultSmoothing: 0.7,
fftBandsAnalysed: 256 * 8,
fftBandsUsed: 256 * 8 / 2,
fftHeight: 256 / 2,
},
record: {
ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'],
ignoreProps: ['fontVariationAxes','letterDelays','color'],
recordMapped: true,
},
midi: {

26
bin/web/js/record.js
View file

@ -1,9 +1,6 @@
import {
clone,
sequencialPromises,
toCssClass,
flattenObject,
deFlattenObject,
} from './utils.js';
const LiveBuffer = function() {
@ -153,8 +150,7 @@ const Record = function(tp) {
// handle UI only if layer is selected
if (getLayer(layerID).isSelected()) {
const button = tp
.getPanelPropTitle(propTitle)
.parentNode.parentNode
.getPanelPropContainer(propTitle)
.querySelector('.recordButton');
if (button !== null) {
button.classList.add('active');
@ -175,8 +171,7 @@ const Record = function(tp) {
// handle UI only if layer is selected
if (getLayer(layerID).isSelected()) {
const button = tp
.getPanelPropTitle(propTitle)
.parentNode.parentNode
.getPanelPropContainer(propTitle)
.querySelector('.recordButton');
if (button !== null) {
button.classList.remove('active');
@ -193,7 +188,7 @@ const Record = function(tp) {
const panel = tp.getPanel();
const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle !== null) {
const container = panelPropTitle.parentNode.parentNode;
const container = tp.getPanelPropContainer(panelPropTitle);
if (container === null) {
console.log("Record::addRecordButton",
`impossible! cannot find panelPropContainer for ${propTitle}`);
@ -204,7 +199,7 @@ const Record = function(tp) {
} else {
const button = document.createElement('div');
button.classList.add('recordButton');
button.classList.add(toCssClass(`recordButton${propTitle}`));
button.classList.add(`recordButton${propTitle}`);
button.innerHTML = `<img src="/web/assets/record.svg" alt="record" />`;
container.append(button);
button.addEventListener('click', () => {
@ -243,7 +238,7 @@ const Record = function(tp) {
const panel = tp.getPanel();
const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle !== null) {
const container = panelPropTitle.parentNode.parentNode;
const container = tp.getPanelPropContainer(panelPropTitle);
if (container === null) {
console.log("Record::cloneInput",
`impossible! cannot find panelPropContainer for ${propTitle}`);
@ -273,7 +268,7 @@ const Record = function(tp) {
const panel = tp.getPanel();
const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle !== null) {
const container = panelPropTitle.parentNode.parentNode;
const container = tp.getPanelPropContainer(panelPropTitle);
if (container === null) {
console.log("Record::uncloneInput",
`impossible! cannot find panelPropContainer for ${propTitle}`);
@ -300,9 +295,7 @@ const Record = function(tp) {
};
const injectPanel = (layer) => {
const flatValues = clone(layer.theatreObject.value);
flattenObject(flatValues, ['color']);
const props = Object.keys(flatValues);
const props = Object.keys(layer.theatreObject.value);
props.forEach((propTitle) => {
if (config.record.ignoreProps.indexOf(propTitle) < 0) {
addRecordButton(layer, propTitle);
@ -335,8 +328,7 @@ const Record = function(tp) {
[propTitle]: value,
};
buffy.addValues(layerID, recording, position, lastPosition);
const merged = clone(buffy.getValues(layerID, position));
deFlattenObject(merged);
const merged = buffy.getValues(layerID, position);
liveUpdater.immediateUpdate(layer, merged);
lastPosition = position;
});
@ -374,7 +366,7 @@ const Record = function(tp) {
// and should be the layer anyways
uncloneInput(layerID, propTitle);
keyframes.push({
path: propTitle.split('.'),
path: [propTitle],
keyframes: hot[layerID][propTitle].recording,
});
});

3
bin/web/js/theatre-play.js
View file

@ -167,8 +167,7 @@ const TheatrePlay = function(autoInit = false) {
window.removeEventListener('sequenceEvent', finishedSequencedEvent);
resolve(true);
} else {
// pretty verbose
//console.log('TheatrePlayu::setSequenced', 'ignored event', e, e.detail);
console.log('TheatrePlayu::setSequenced', 'ignored event', e, e.detail);
}
}
};

68
bin/web/js/utils.js
View file

@ -414,70 +414,6 @@ const sequencialPromises = async (iterable, callback = false) => {
}
};
// NOTE: this is not perfect,
// but good enough for our use case
// theoretically we would have to get
// rid of all special characters
const toCssClass = (text, prefix = '') => {
return prefix + 'vt_' + text
.replaceAll('.','-dot-')
.replaceAll('#','-hash-')
;
};
const renameProperty = (o, old_key, new_key) => {
Object.defineProperty(o, new_key,
Object.getOwnPropertyDescriptor(o, old_key));
delete o[old_key];
};
const flattenObject = (o, ignoreKeys = [], pathSymbol = '.') => {
if (typeof o !== 'object') {
return o;
}
let doItAgain = false;
Object.keys(o).forEach((k) => {
if (typeof o[k] === 'object' &&
ignoreKeys.indexOf(k) < 0) {
doItAgain = true;
Object.keys(o[k]).forEach((sk) => {
const nk = `${k}${pathSymbol}${sk}`;
o[nk] = o[k][sk];
});
delete o[k];
}
});
if (doItAgain) {
flattenObject(o, ignoreKeys, pathSymbol);
}
};
const deFlattenObject = (o, ignoreKeys = [], pathSymbol = '.') => {
Object.keys(o).forEach((k) => {
if (ignoreKeys.indexOf(k) < 0) {
const ks = k.split(pathSymbol);
if (ks.length > 1) {
let sos = o[k];
for (let i = ks.length - 1; i > 0; i--) {
sos = {[ks[i]]: sos};
}
o[ks[0]] = sos;
delete o[k];
}
}
});
};
/////////////////////////////////////
// you can test these functions in
// the browser like so:
/*
import("./web/js/utils.js").then((module) => {
const toast = module.toCssClass('lol.lol');
console.log(toast);
});
*/
//
/////////////////////////////////////
export {
@ -499,8 +435,4 @@ export {
mapValue,
isMobile,
sequencialPromises,
toCssClass,
renameProperty,
flattenObject,
deFlattenObject,
}