107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Test Fall 3</h1>
|
|
<h3>Dynamic Patches in parallel</h3>
|
|
<div>
|
|
<label for="patchCount">Number of Patches:</label>
|
|
<input
|
|
id="patchCount"
|
|
v-model.number="patchCount"
|
|
type="number"
|
|
min="1"
|
|
max="20"
|
|
:disabled="isStarted"
|
|
>
|
|
</div>
|
|
<button :disabled="isStarted" @click="startAllPatches">Start All Patches</button>
|
|
<table v-if="isStarted">
|
|
<thead>
|
|
<tr>
|
|
<th v-for="index in patchCount" :key="index">Patch {{ index }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td v-for="(value, index) in controlValues" :key="index">{{ value?.value.toFixed(2) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<RNBOControlValue
|
|
v-for="index in patchCount"
|
|
:key="index"
|
|
:ref="el => { if (el) rnboRefs[index - 1] = el }"
|
|
:center-frequency="centerFrequencies.at(index - 1)"
|
|
@control-value-change="updateValueTable(index - 1, $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import RNBOControlValue from '@/components/experiments/tests/ControlValues/RNBOControlValue.vue'
|
|
|
|
const patchCount = ref(9)
|
|
const controlValues = ref([])
|
|
const rnboRefs = ref([])
|
|
const isStarted = ref(false)
|
|
const centerFrequencies = ref([63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000])
|
|
const updateValueTable = (index, value) => {
|
|
controlValues.value[index] = value
|
|
}
|
|
|
|
const startAllPatches = () => {
|
|
isStarted.value = true
|
|
rnboRefs.value.forEach((rnbo) => {
|
|
if (rnbo && typeof rnbo.testControlValuesDevice === 'function') {
|
|
rnbo.testControlValuesDevice()
|
|
}
|
|
})
|
|
}
|
|
|
|
const formatValue = (value) => {
|
|
return Number(value).toFixed(2)
|
|
}
|
|
|
|
watch(patchCount, (newCount) => {
|
|
controlValues.value = new Array(newCount).fill(0)
|
|
rnboRefs.value = new Array(newCount).fill(null)
|
|
})
|
|
onMounted(() => {
|
|
controlValues.value = new Array(patchCount.value).fill(0)
|
|
rnboRefs.value = new Array(patchCount.value).fill(null)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
button, input {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:disabled, button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|