From 223121655e1e7df429a8c36b74e79cce37fa1698 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Mon, 23 Oct 2023 15:16:46 +0200 Subject: [PATCH 1/5] fix mute button css --- bin/web/js/theatre-play.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/bin/web/js/theatre-play.js b/bin/web/js/theatre-play.js index 9c5bf38..35ebeee 100644 --- a/bin/web/js/theatre-play.js +++ b/bin/web/js/theatre-play.js @@ -627,12 +627,10 @@ const TheatrePlay = function(autoInit = false) { // margin-right: 15px; // } input[type=checkbox] { - position: absolute; - width: 27px; - opacity: 0; } input[type=checkbox]:checked + label { color: #1cba94; + padding-left: 4px; } input[type=checkbox] + label::after{ content: ' OFF'; From 2d43063537095d86bf92d13d7dc17ed6590159ec Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 24 Oct 2023 07:36:50 +0200 Subject: [PATCH 2/5] default range on hover --- bin/web/js/audio.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js index 1a4aba7..fe3af98 100644 --- a/bin/web/js/audio.js +++ b/bin/web/js/audio.js @@ -319,6 +319,7 @@ const Audio = function(tp, record) { source_Dom_Cont.append(muteDom); source_Dom_Cont.append(muteDom_label); + const defaultRange = getDefaultRange(layer, propTitle); const min_max_Dom = document.createElement('div'); min_max_Dom.classList.add('audio_min_max'); const min_Cont = document.createElement('div'); @@ -330,6 +331,7 @@ const Audio = function(tp, record) { min_inputDom.type = 'number'; min_inputDom.name = toCssClass(`audio_min${propTitle}`); min_inputDom.id = toCssClass(`audio_min${propTitle}`); + min_inputDom.title = `default: ${defaultRange[0]}`; min_inputDom.value = `${mappingOptions.min_out}`; const max_Cont = document.createElement('div'); max_Cont.classList.add('audio_max_Cont'); @@ -340,6 +342,7 @@ const Audio = function(tp, record) { max_inputDom.type = 'number'; max_inputDom.name = toCssClass(`audio_max${propTitle}`); max_inputDom.id = toCssClass(`audio_max${propTitle}`); + max_inputDom.title = `default: ${defaultRange[1]}`; max_inputDom.value = `${mappingOptions.max_out}`; const smoothing_inputDom_label = document.createElement('label'); smoothing_inputDom_label.for = 'audio_smoothing'; From f19843bd469a8163bf9efb5c4b080d514a457a95 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 24 Oct 2023 07:38:06 +0200 Subject: [PATCH 3/5] full range audio fft on click --- bin/web/js/audio.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js index fe3af98..f39c8b0 100644 --- a/bin/web/js/audio.js +++ b/bin/web/js/audio.js @@ -448,18 +448,24 @@ const Audio = function(tp, record) { max_inputDom.addEventListener('change', updateMappingOptions); smoothing_inputDom.addEventListener('change', updateMappingOptions); let setFrequency = false; + let wasMoved = false; let freq_down = 0; let freq_up = 0; let xy_start; fft_Dom.addEventListener('mousedown', (e) => { setFrequency = true; + wasMoved = false; const bb = fft_imgDom.getBoundingClientRect(); const x = e.clientX - bb.x; const y = e.clientY - bb.y; - xy_start = {x, y}; + xy_start = { + x, + y + }; }); fft_Dom.addEventListener('mousemove', (e) => { if (setFrequency) { + wasMoved = true; const bb = fft_imgDom.getBoundingClientRect(); const x_factor = config.audio.fftBandsUsed / bb.width; const y_factor = 256.0 / bb.height; @@ -488,6 +494,20 @@ const Audio = function(tp, record) { }); const unset = (e) => { setFrequency = false; + if (!wasMoved) { + const bb = fft_imgDom.getBoundingClientRect(); + const x_factor = config.audio.fftBandsUsed / bb.width; + const y_factor = 256.0 / bb.height; + let min_x, max_x, min_y, max_y; + min_x = 0; + min_y = 0; + max_x = bb.width; + max_y = bb.height; + mappingOptions.min_freq = min_x * x_factor; + mappingOptions.max_freq = max_x * x_factor; + mappingOptions.min_in = (bb.height - max_y) * y_factor; + mappingOptions.max_in = (bb.height - min_y) * y_factor; + } }; const unsetFromOutside = (e) => { document.removeEventListener('mouseup', unsetFromOutside); From ab3786ef23270e253c1626857a4b29bce5069492 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 24 Oct 2023 07:41:44 +0200 Subject: [PATCH 4/5] recordbutton can be disabled --- bin/web/js/config.js | 1 + bin/web/js/layer.js | 10 ++++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/bin/web/js/config.js b/bin/web/js/config.js index 62fd178..e1c1d90 100644 --- a/bin/web/js/config.js +++ b/bin/web/js/config.js @@ -115,6 +115,7 @@ const config = { rolloverResetLoop: true, }, record: { + active: false, ignoreProps: { artboard: ['x', 'y', 'zoom', 'pixelDensity', 'width', 'height'], layer: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'], diff --git a/bin/web/js/layer.js b/bin/web/js/layer.js index 7068789..c30fee3 100644 --- a/bin/web/js/layer.js +++ b/bin/web/js/layer.js @@ -806,10 +806,12 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) { console.log('Layer::findInjectPanel', `cannot inject audio panel for ${this.id()} for some reason.`); } // should we have a record object, let's inject the buttons, etc - if (typeof record === 'object' && record.hasOwnProperty('injectPanel')) { - record.injectPanel(this); - } else { - console.log('Layer::findInjectPanel', `cannot inject record panel for ${this.id()} for some reason.`); + if (config.record.active) { + if (typeof record === 'object' && record.hasOwnProperty('injectPanel')) { + record.injectPanel(this); + } else { + console.log('Layer::findInjectPanel', `cannot inject record panel for ${this.id()} for some reason.`); + } } injectedPanel = true; From 2d55ef11b0769d5c61c19bdd0bf3005ce1ad544e Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 24 Oct 2023 07:42:29 +0200 Subject: [PATCH 5/5] reset fontvariationaxes on font change --- bin/web/js/layer.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/bin/web/js/layer.js b/bin/web/js/layer.js index c30fee3..fa8712e 100644 --- a/bin/web/js/layer.js +++ b/bin/web/js/layer.js @@ -100,20 +100,37 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) { ); let axes = fontsAndAxes[selectedFontIndex].axes; if (axes.length > 0) { - let variationAxes = {}; + let variationAxes = {}; + let doThese = []; for (let a = 0; a < axes.length; a++) { const sanity_minMax = axes[a].minValue < axes[a].maxValue; const sanity_minDefault = axes[a].minValue <= axes[a].defaultValue; const sanity_maxDefault = axes[a].maxValue >= axes[a].defaultValue; if (sanity_minMax && sanity_minDefault && sanity_maxDefault) { variationAxes[axes[a].name] = tp.core.types.number(axes[a].defaultValue, { - range: [axes[a].minValue, axes[a].maxValue], + range: [axes[a].minValue, axes[a].maxValue], }); + if (typeof audio === 'object' && + typeof audio.getSavedMapping()[this.id()][`fontVariationAxes.${axes[a].name}`] === 'object' && + typeof audio.getMapping()[this.id()][`fontVariationAxes.${axes[a].name}`] === 'object' && + tp.getPanel() !== null) { + doThese.push(() => { + audio.removeAudioOptions(this, `fontVariationAxes.${axes[a].name}`); + audio.removeAudioMapping(this, `fontVariationAxes.${axes[a].name}`); + audio.getSavedMapping()[this.id()][`fontVariationAxes.${axes[a].name}`].min_out = axes[a].minValue; + audio.getSavedMapping()[this.id()][`fontVariationAxes.${axes[a].name}`].max_out = axes[a].maxValue; + audio.addAudioMapping(this, `fontVariationAxes.${axes[a].name}`); + audio.addAudioOptions(this, `fontVariationAxes.${axes[a].name}`); + }); + } } else { console.log('js::layer::selectFont', 'this axis is insane, abort', axes[a]); } } props.fontVariationAxes = tp.core.types.compound(variationAxes); + doThese.forEach((d) => { + d(); + }); } else { delete props.fontVariationAxes; }