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

recording notice, default mapping range

Browse source
This commit is contained in:
jrkb 2023-10-10 15:13:53 +02:00
parent 62f03862d6
commit 64af8d49d1
5 changed files with 151 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/template.html
View file

@ -359,6 +359,12 @@
<div class="details"><p></p></div>
</div>
</div>
<div id="notice_recording">
<div class="content">
<div class="what"><p>recording</p></div>
<div class="details"><p>please wait</p></div>
</div>
</div>
<!-- MIDI BEGIN -->
<div id="midiController">
<div class="midiMessages"></div>

23
bin/web/css/demo.css
View file

@ -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";

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

@ -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);
}
});

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

@ -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,

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

@ -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 = `<img src="/web/assets/record.svg" alt="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;