Skip to content

Commit a8d27a4

Browse files
lebaston100lebaston100
authored
Merge pull request #4 from Miniontoby/patch-1
Update display3.html to fix issue with meters stuck
2 parents cd566f6 + 1414dcd commit a8d27a4

File tree

1 file changed

+27
-13
lines changed

1 file changed

+27
-13
lines changed

‎display3.html

+27-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<meta charset="utf-8" />
@@ -98,7 +98,7 @@
9898
let inputStates = {};
9999

100100
function mul_to_decibel(inMul) {
101-
const val=-(Math.log10(inMul)*20);
101+
const val = -(Math.log10(inMul) * 20);
102102
return val<60?val:Infinity;
103103
}
104104

@@ -134,50 +134,64 @@
134134
obs.on("InputVolumeMeters", ({ inputs }) => {
135135
let i = 0;
136136
for (let { inputName, inputLevelsMul } of inputs) {
137-
// if meter is missing, create it from the template
138-
if (document.querySelector(`#meter-${i}`)==undefined) {
137+
// When this meter doesn't have an element yet, we create it from the template
138+
if (document.querySelector(`#meter-${i}`) == undefined) {
139139
let thisnode = document.querySelector('template#metertemplate').content.cloneNode(true);
140140
thisnode.children[0].id = 'meter-' + i;
141141
thisnode.children[0].children[0].innerText = inputName;
142142
document.querySelector('.wrapper').appendChild(thisnode);
143143
}
144+
145+
// If meter name is not the same (meaning inputs have been swapped places) we set the name
144146
if (document.querySelector(`#meter-${i} .Name`).innerText !== inputName) document.querySelector(`#meter-${i} .Name`).innerText = inputName;
147+
148+
// If we haven't seen this input before, we get it's settings
145149
if (!(inputName in inputStates)) {
146-
inputStates[inputName] = { muted: false, filters: [] };
150+
inputStates[inputName] = { muted: false, volume: 0, filters: [] };
147151
obs.call('GetInputMute', { inputName }).then(({ inputMuted }) => { inputStates[inputName].muted = inputMuted; });
152+
obs.call('GetInputVolume', { inputName }).then(({ inputVolumeDb }) => { inputStates[inputName].volume = inputVolumeDb; });
148153
reloadSourceFilterList(inputName);
149154
}
150-
let j = 0;
151155

152156
document.querySelector(`#meter-${i}`).className = 'meter' + (inputName in inputStates ? ((inputStates[inputName].muted ? ' muted' : '') + (inputStates[inputName].filters.find(f => f.filterKind === 'basic_eq_filter') ? ' EQEnabled' : '') + (inputStates[inputName].filters.find(f => f.filterKind === 'compressor_filter') ? ' DYEnabled' : '')) : '');
153157

158+
// Set the volume slider value at the bottom.
159+
document.querySelector(`#meter-${i}>div.Volume`).innerText = ((inputName in inputStates && inputStates[inputName].volume > -100) ? Math.round(inputStates[inputName].volume * 10) / 10 : "-∞") + " dB";
160+
154161
// if no data inputlevel data is received, make sure to set the data to all zeros
155162
if (inputLevelsMul.length == 0) inputLevelsMul = [[0, 0, 0], [0, 0, 0]]
156163
if (inputLevelsMul.length == 1) inputLevelsMul.push([0, 0, 0]);
164+
165+
let j = 0;
157166
for (const level of inputLevelsMul) {
158167
if (j>=2) break; // just do two channels
159-
const meterlevel = urlParams.has("metersource") ? level[parseInt(urlParams.get("metersource"))] : inputStates[inputName].muted ? level[2] : level[1]
168+
const meterlevel = urlParams.has("metersource") ? level[parseInt(urlParams.get("metersource"))] : inputStates[inputName].muted ? level[2] : level[1]; // level consists of [VU, POSTFADER, PREFADER]
160169
const value = mul_to_decibel(meterlevel);
161-
document.querySelector(`#meter-${i}>div.Volume`).innerText = (value == Infinity) ? "-∞" : -Math.round(value);
162170
if (j==0) document.querySelector(`#meter-${i}>div.VUMeter>div.Left`).style.setProperty('--amount', value_to_perc(value));
163171
if (j==1) document.querySelector(`#meter-${i}>div.VUMeter>div.Right`).style.setProperty('--amount', value_to_perc(value));
164172
j++;
165173
}
166174
i++;
167175
if (i >= 10) break; // it cannot show more than 11... but just stop at 10
168176
}
169-
// if more meters exist, delete them
170-
if (document.querySelector(`#meter-${i}`)) {
171-
const inputName = document.querySelector(`#meter-${i} .Name`).innerText;
177+
178+
// If more meters exist, delete them
179+
const allMeters = Array.from(document.querySelectorAll('.meter'));
180+
const metersTooMuch = allMeters.filter((e, idx) => idx >= i);
181+
for (const element of metersTooMuch) {
182+
const inputName = element.querySelector('.Name')?.innerText;
172183
if (inputName in inputStates) delete inputStates[inputName];
173-
document.querySelector(`#meter-${i}`).remove();
184+
element.remove();
174185
}
175186

176187
updateNumberPosition();
177188
});
178189
obs.on("InputMuteStateChanged", ({ inputName, inputMuted }) => {
179190
if (inputName in inputStates) inputStates[inputName].muted = inputMuted;
180191
});
192+
obs.on("InputVolumeChanged", ({ inputName, inputVolumeDb }) => {
193+
if (inputName in inputStates) inputStates[inputName].volume = inputVolumeDb;
194+
});
181195
obs.on("SourceFilterEnableStateChanged", ({ sourceName }) => reloadSourceFilterList(sourceName));
182196
obs.on("SourceFilterCreated", ({ sourceName }) => reloadSourceFilterList(sourceName));
183197
obs.on("SourceFilterRemoved", ({ sourceName }) => reloadSourceFilterList(sourceName));
@@ -232,4 +246,4 @@
232246
<h1>Not connected!</h1>
233247
</div>
234248
</body>
235-
</html>
249+
</html>

0 commit comments

Comments
 (0)