diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js
index 60b332a..8d12f44 100644
--- a/bin/web/js/audio.js
+++ b/bin/web/js/audio.js
@@ -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 = `
`;
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
diff --git a/bin/web/js/config.js b/bin/web/js/config.js
index 85834e4..c3fc4bc 100644
--- a/bin/web/js/config.js
+++ b/bin/web/js/config.js
@@ -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: {
diff --git a/bin/web/js/record.js b/bin/web/js/record.js
index dc7511c..1fad8b6 100644
--- a/bin/web/js/record.js
+++ b/bin/web/js/record.js
@@ -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 = `
`;
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,
});
});
diff --git a/bin/web/js/theatre-play.js b/bin/web/js/theatre-play.js
index 4168ff1..09e268b 100644
--- a/bin/web/js/theatre-play.js
+++ b/bin/web/js/theatre-play.js
@@ -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);
}
}
};
diff --git a/bin/web/js/utils.js b/bin/web/js/utils.js
index f7d04a6..9b69b78 100644
--- a/bin/web/js/utils.js
+++ b/bin/web/js/utils.js
@@ -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,
}