mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
156 lines
5.1 KiB
Vue
156 lines
5.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
import { setActivePinia } from "pinia";
|
||
|
import pinia from "../store/index";
|
||
|
setActivePinia(pinia);
|
||
|
|
||
|
import { useStateStore } from "../store/stateStore.js";
|
||
|
const state = useStateStore(pinia);
|
||
|
|
||
|
import { record_audio } from "../js/sock";
|
||
|
|
||
|
function startStopRecordAudio() {
|
||
|
record_audio();
|
||
|
}
|
||
|
</script>
|
||
|
<template>
|
||
|
<div class="card w-100 h-100">
|
||
|
<div class="card-header">
|
||
|
<div class="dropdown">
|
||
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||
|
|
||
|
</button>
|
||
|
<i class="bi bi-volume-up" style="font-size: 1rem"></i>
|
||
|
<strong>Audio</strong>
|
||
|
<ul class="dropdown-menu">
|
||
|
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#audioModal" href="#">Tune</a></li>
|
||
|
<li><a class="dropdown-item" @click="startStopRecordAudio" href="#">Record</a></li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card-body">
|
||
|
<div class="container-wide">
|
||
|
<div class="row">
|
||
|
<div class="col-6">
|
||
|
<div
|
||
|
class="progress mb-0 rounded-0 rounded-top"
|
||
|
style="height: 22px"
|
||
|
>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||
|
id="noise_level"
|
||
|
role="progressbar"
|
||
|
:style="{ width: state.s_meter_strength_percent + '%' }"
|
||
|
aria-valuenow="{{state.s_meter_strength_percent}}"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<p
|
||
|
class="justify-content-center d-flex position-absolute w-100"
|
||
|
id="noise_level_value"
|
||
|
>
|
||
|
S-Meter(dB): {{ state.s_meter_strength_raw }}
|
||
|
</p>
|
||
|
</div>
|
||
|
<div
|
||
|
class="progress mb-0 rounded-0 rounded-bottom"
|
||
|
style="height: 8px"
|
||
|
>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-warning"
|
||
|
role="progressbar"
|
||
|
style="width: 1%"
|
||
|
aria-valuenow="1"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<div
|
||
|
class="progress-bar bg-success"
|
||
|
role="progressbar"
|
||
|
style="width: 89%"
|
||
|
aria-valuenow="50"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-warning"
|
||
|
role="progressbar"
|
||
|
style="width: 20%"
|
||
|
aria-valuenow="20"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-danger"
|
||
|
role="progressbar"
|
||
|
style="width: 29%"
|
||
|
aria-valuenow="29"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-lg-6">
|
||
|
<div
|
||
|
class="progress mb-0 rounded-0 rounded-top"
|
||
|
style="height: 22px"
|
||
|
>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||
|
id="dbfs_level"
|
||
|
role="progressbar"
|
||
|
:style="{ width: state.dbfs_level_percent + '%' }"
|
||
|
aria-valuenow="0"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<p
|
||
|
class="justify-content-center d-flex position-absolute w-100"
|
||
|
id="dbfs_level_value"
|
||
|
>
|
||
|
{{ state.dbfs_level }} dBFS
|
||
|
</p>
|
||
|
</div>
|
||
|
<div
|
||
|
class="progress mb-0 rounded-0 rounded-bottom"
|
||
|
style="height: 8px"
|
||
|
>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-warning"
|
||
|
role="progressbar"
|
||
|
style="width: 1%"
|
||
|
aria-valuenow="1"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<div
|
||
|
class="progress-bar bg-success"
|
||
|
role="progressbar"
|
||
|
style="width: 89%"
|
||
|
aria-valuenow="50"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-warning"
|
||
|
role="progressbar"
|
||
|
style="width: 20%"
|
||
|
aria-valuenow="20"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
<div
|
||
|
class="progress-bar progress-bar-striped bg-danger"
|
||
|
role="progressbar"
|
||
|
style="width: 29%"
|
||
|
aria-valuenow="29"
|
||
|
aria-valuemin="0"
|
||
|
aria-valuemax="100"
|
||
|
></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|