mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
140 lines
4.6 KiB
Vue
140 lines
4.6 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);
|
|
</script>
|
|
<template>
|
|
<div class="card w-100 h-100">
|
|
<div class="card-header p-0 mb-1">
|
|
<i class="bi bi-volume-up" style="font-size: 1rem"></i>
|
|
<strong>Audio</strong>
|
|
</div>
|
|
<div class="card-body pt-0 pb-0">
|
|
<div class="container-wide">
|
|
<div class="row">
|
|
<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="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>
|