diff --git a/bin/web/css/demo.css b/bin/web/css/demo.css
index 6012523..9d6d978 100755
--- a/bin/web/css/demo.css
+++ b/bin/web/css/demo.css
@@ -223,6 +223,29 @@ body.debug div:not(.centerLine) {
#notice .content .details p {
color: black;
}
+#notice_recording {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.1);
+ z-index: 2000;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ font-family: "Tonka";
+ font-variation-settings: 'wght' 500;
+ font-size: 0.8em;
+ pointer-events: none;
+}
+#notice_recording.visible {
+ display: flex;
+}
+#notice_recording.impenetrable {
+ pointer-events: all;
+ background-color: rgba(0,0,0,0.5);
+}
.exporterChild * {
font-family: "Tonka";
diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js
index 94c7687..57a47d7 100644
--- a/bin/web/js/audio.js
+++ b/bin/web/js/audio.js
@@ -50,16 +50,20 @@ const Audio = function(tp, record) {
const mutationObserver = new MutationObserver(function(e) {
if (e[0].removedNodes) {
e[0].removedNodes.forEach((n) => {
- if (n.hasAttribute('data-propTitle')) {
- const propTitle = n.getAttribute('data-propTitle');
- delete canvasCombos[propTitle];
- } else {
- const subProps = n.querySelectorAll('[data-propTitle]');
- if (subProps.length > 0) {
- subProps.forEach((sp) => {
- const propTitle = sp.getAttribute('data-propTitle');
- delete canvasCombos[propTitle];
- });
+ if (typeof n === 'object' &&
+ n.hasOwnProperty('hasAttribute') &&
+ n.hasOwnProperty('querySelectorAll')) {
+ if (n.hasAttribute('data-propTitle')) {
+ const propTitle = n.getAttribute('data-propTitle');
+ delete canvasCombos[propTitle];
+ } else {
+ const subProps = n.querySelectorAll('[data-propTitle]');
+ if (subProps.length > 0) {
+ subProps.forEach((sp) => {
+ const propTitle = sp.getAttribute('data-propTitle');
+ delete canvasCombos[propTitle];
+ });
+ }
}
}
});
@@ -85,24 +89,68 @@ const Audio = function(tp, record) {
return true;
};
+ const getDefaultRange = (layer, propTitle) => {
+ if (config.audio.defaultRange.hasOwnProperty(propTitle)) {
+ return config.audio.defaultRange[propTitle];
+ } else if (propTitle.indexOf('width') === 0) {
+ return [
+ getArtboard().theatreObject.value.width / 2,
+ getArtboard().theatreObject.value.width
+ ];
+ } else if (propTitle.indexOf('y') === 0) {
+ return [
+ 0,
+ getArtboard().theatreObject.value.height / 2
+ ];
+ } else if (propTitle.indexOf('x') === 0) {
+ return [
+ 0,
+ getArtboard().theatreObject.value.width / 2
+ ];
+ } else if (propTitle.indexOf('y') === 0) {
+ return [
+ 0,
+ getArtboard().theatreObject.value.height / 2
+ ];
+ } else if (propTitle.indexOf('letterDelay') === 0) {
+ return [
+ config.audio.defaultRange.letterDelay[0],
+ config.audio.defaultRange.letterDelay[1]
+ ];
+ } else if (propTitle.split('.')[0] === 'fontVariationAxes') {
+ return layer.props.fontVariationAxes
+ .props[propTitle.split('.')[1]].range;
+ }
+ };
+
const getAudioMappingOptions = (layer, propTitle) => {
if (propTitle === 'color') {
+ const mm = getDefaultRange(layer, 'color');
if (config.audio.colorSeparateRGBA) {
const r = new AudioMappingOptions();
+ r.min_out = mm[0];
+ r.max_out = mm[1];
const g = new AudioMappingOptions();
+ g.min_out = mm[0];
+ g.max_out = mm[1];
const b = new AudioMappingOptions();
+ b.min_out = mm[0];
+ b.max_out = mm[1];
const a = new AudioMappingOptions();
+ a.min_out = mm[0];
+ a.max_out = mm[1];
return [{r}, {g}, {b}, {a}];
} else {
- const rgba = new AudioMappingOptions();
- rgba.min_out = {r: 0, b: 0, g: 0, a: 0};
- rgba.max_out = {r: 1, b: 1, g: 1, a: 1};
- return rgba;
+ const o = new AudioMappingOptions();
+ o.min_out = {r: mm[0], b: mm[0], g: mm[0], a: mm[0]};
+ o.max_out = {r: mm[1], b: mm[1], g: mm[1], a: mm[1]};
+ return o;
}
} else {
const o = new AudioMappingOptions();
- // TODO: get min_out, max_out from layer.props
- // check for typeof layer.props[propTitle.split('.')[0]] blabla
+ const mm = getDefaultRange(layer, propTitle);
+ o.min_out = mm[0];
+ o.max_out = mm[1];
return o;
}
};
@@ -909,7 +957,11 @@ const Audio = function(tp, record) {
}
}
record.addValue(p.id, p.title, p.value, position);
- if (!config.audio.colorSeparateRGBA || p.title === 'color.a') {
+ if (p.title.indexOf('color') === 0) {
+ if (!config.audio.colorSeparateRGBA || p.title === 'color.a') {
+ record.liveUpdate(p.layer, position);
+ }
+ } else {
record.liveUpdate(p.layer, position);
}
});
diff --git a/bin/web/js/config.js b/bin/web/js/config.js
index 3d2ecec..11f13b8 100644
--- a/bin/web/js/config.js
+++ b/bin/web/js/config.js
@@ -83,7 +83,18 @@ const config = {
zoomDynamicMax: 42,
},
audio: {
- ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'],
+ defaultRange: { // check audio.getDefaultRange for dynamic defaults
+ 'textAlignment': [0, 1],
+ 'fontSize_px': [42, 100],
+ 'letterSpacing': [0, 1],
+ 'lineHeight': [0, 1],
+ 'rotation': [0, 180],
+ 'mirror_x_distance': [0, 200],
+ 'mirror_y_distance': [0, 70],
+ 'color': [0, 1],
+ 'letterDelays': [0, 1000],
+ },
+ ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy', 'height'],
defaultSmoothing: 0.7,
fftBandsAnalysed: 256 * 8,
fftBandsUsed: 256 / 2,
diff --git a/bin/web/js/record.js b/bin/web/js/record.js
index 5ba73bc..6786c46 100644
--- a/bin/web/js/record.js
+++ b/bin/web/js/record.js
@@ -144,10 +144,27 @@ const LiveUpdater = function(tp, buffy) {
const Record = function(tp) {
+ const NOT_RECORDING = 0;
+ const STARTING_RECORDING = 1;
+ const RECORDING = 2;
+ const STOPPING_RECORDING = 3;
+
const hot = {};
- let isRecording = false;
+ let isRecording = NOT_RECORDING;
const buffy = new LiveBuffer();
const liveUpdater = new LiveUpdater(tp, buffy);
+ let isInitialized = false;
+
+ const init = () => {
+ if (!isInitialized) {
+ tp.core.onChange(tp.sheet.sequence.pointer.playing, (playing) => {
+ if (isRecording === RECORDING && !playing) {
+ stopRecording();
+ }
+ });
+ isInitialized = true;
+ }
+ };
const isHot = (layerID, propTitle) => {
return hot.hasOwnProperty(layerID)
@@ -231,7 +248,7 @@ const Record = function(tp) {
button.innerHTML = `
`;
container.append(button);
button.addEventListener('click', () => {
- if(isRecording) {
+ if(isRecording === RECORDING) {
stopRecording();
} else {
if (config.record.recordMapped) {
@@ -369,7 +386,17 @@ const Record = function(tp) {
};
const startRecording = () => {
+ isRecording = STARTING_RECORDING;
console.log('Record::startRecording');
+ document.querySelector('#notice_recording')
+ .classList.add('visible');
+ document.querySelector('#notice_recording')
+ .classList.remove('imprenetrable');
+ document.querySelector('#notice_recording .what p').innerHTML = 'recording';
+ document.querySelector('#notice_recording .details p').innerHTML = '';
+ if (!isInitialized) {
+ init();
+ }
lastPositions = {};
tp.sheet.sequence.pause();
const layerKeys = Object.keys(hot);
@@ -398,9 +425,16 @@ const Record = function(tp) {
tp.sheet.sequence.position = 0;
tp.sheet.sequence.play();
});
- isRecording = true;
+ isRecording = RECORDING;
};
const stopRecording = () => {
+ document.querySelector('#notice_recording')
+ .classList.add('visible');
+ document.querySelector('#notice_recording')
+ .classList.add('imprenetrable');
+ document.querySelector('#notice_recording .what p').innerHTML = 'digesting recording';
+ document.querySelector('#notice_recording .details p').innerHTML = 'please wait';
+ isRecording = STOPPING_RECORDING;
return new Promise((resolve) => {
const layerKeys = Object.keys(hot);
const promises = [];
@@ -474,8 +508,10 @@ const Record = function(tp) {
});
buffy.deregister(layerID);
});
+ document.querySelector('#notice_recording')
+ .classList.remove('visible');
console.log('Record::stopRecording', 'stopped recording');
- isRecording = false;
+ isRecording = NOT_RECORDING;
resolve();
});
});
@@ -493,7 +529,7 @@ const Record = function(tp) {
return hot;
};
this.isRecording = () => {
- return isRecording;
+ return isRecording != NOT_RECORDING;
};
this.injectPanel = injectPanel;
this.startRecording = startRecording;