From 64af8d49d1020105a086e3bee32dd0135141cf91 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 10 Oct 2023 15:13:53 +0200 Subject: [PATCH] recording notice, default mapping range --- assets/template.html | 6 ++++ bin/web/css/demo.css | 23 ++++++++++++ bin/web/js/audio.js | 86 +++++++++++++++++++++++++++++++++++--------- bin/web/js/config.js | 13 ++++++- bin/web/js/record.js | 46 +++++++++++++++++++++--- 5 files changed, 151 insertions(+), 23 deletions(-) diff --git a/assets/template.html b/assets/template.html index bdf963d..853d981 100644 --- a/assets/template.html +++ b/assets/template.html @@ -359,6 +359,12 @@

+
+
+

recording

+

please wait

+
+
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 = `record`; 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;