fixing progressbars

This commit is contained in:
DJ2LS 2023-09-20 20:38:21 +02:00
parent be702cc92a
commit ab7a9598ac
4 changed files with 49 additions and 13 deletions

View file

@ -81,7 +81,7 @@ function startStopRecordAudio(){
class="progress-bar progress-bar-striped bg-primary force-gpu"
id="noise_level"
role="progressbar"
style="width: {{state.s_meter_strength_percent}}%;"
:style="{ width: state.s_meter_strength_percent + '%' }"
aria-valuenow="{{state.s_meter_strength_percent}}"
aria-valuemin="0"
aria-valuemax="100"
@ -134,7 +134,7 @@ function startStopRecordAudio(){
class="progress-bar progress-bar-striped bg-primary force-gpu"
id="dbfs_level"
role="progressbar"
style="width: 0%"
:style="{ width: state.dbfs_level_percent + '%' }"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
@ -143,7 +143,7 @@ function startStopRecordAudio(){
class="justify-content-center d-flex position-absolute w-100"
id="dbfs_level_value"
>
dBFS (Audio Level)
{{state.dbfs_level_percent}} dBFS
</p>
</div>
<div class="progress mb-0" style="height: 8px">

View file

@ -229,24 +229,48 @@ const settings = useSettingsStore(pinia);
</div>
<div class="col-lg-4">
<div style="margin-right: 2px">
<div class="progress w-100" style="height: 30px; min-width: 200px">
<div class="progress w-100" style="height: 20px; min-width: 200px">
<div
class="progress-bar progress-bar-striped bg-primary force-gpu"
id="transmission_progress"
role="progressbar"
style="width: 0%"
:style="{ width: state.arq_transmission_percent + '%' }"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
<!--<p class="justify-content-center d-flex position-absolute w-100">PROGRESS</p>-->
<p
class="justify-content-center mt-2 d-flex position-absolute w-100"
id="transmission_timeleft"
>
---
</p>
</div>
<div class="progress mb-0" style="height: 10px">
<div
class="progress-bar progress-bar-striped bg-warning"
id="transmission_timeleft"
role="progressbar"
:style="{ width: state.arq_transmission_percent + '%' }"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>
</nav>

View file

@ -192,21 +192,31 @@ client.on("data", function (socketdata) {
var noise_level = Math.round(Math.pow(10, stateStore.s_meter_strength_raw / 20) * 100);
stateStore.s_meter_strength_percent = noise_level
stateStore.dbfs_level_raw = data["audio_level"]
// var dbfs_level = Math.round(Math.pow(10, stateStore.dbfs_level_raw / 20) * 100);
var dbfs_level = stateStore.dbfs_level_raw
stateStore.dbfs_level_percent = dbfs_level
stateStore.arq_total_bytes = data["total_bytes"]
stateStore.heard_stations = data["stations"]
stateStore.dxcallsign = data["dxcallsign"]
stateStore.arq_session_state = data["arq_session"]
stateStore.arq_state = data["arq_state"]
stateStore.beacon_state = data["beacon_state"]
stateStore.audio_recording = data["audio_recording"]
stateStore.hamlib_status = data["hamlib_status"]
stateStore.audio_level = data["audio_level"]
stateStore.alc = data["alc"]
stateStore.rf_level = data["rf_level"]
stateStore.is_codec2_traffic = data["is_codec2_traffic"]
stateStore.arq_session_state = data["arq_session"]
stateStore.arq_state = data["arq_state"]
stateStore.arq_transmission_percent = data["arq_transmission_percent"]
// TODO: Remove ported objects
let Data = {
mycallsign: data["mycallsign"],
@ -228,7 +238,6 @@ client.on("data", function (socketdata) {
arq_bytes_per_minute: data["arq_bytes_per_minute"],
arq_seconds_until_finish: data["arq_seconds_until_finish"],
arq_compression_factor: data["arq_compression_factor"],
arq_transmission_percent: data["arq_transmission_percent"],
routing_table: data["routing_table"],
mesh_signalling_table: data["mesh_signalling_table"],
listen: data["listen"],

View file

@ -10,7 +10,9 @@ export const useStateStore = defineStore('stateStore', () => {
var mode = ref("-")
var rf_level = ref("10")
var bandwidth = ref("-")
var dbfs_level = ref(0)
var dbfs_level_percent = ref(0)
var dbfs_level_raw = ref(0)
var ptt_state = ref("False")
var speed_level = ref(0)
@ -26,6 +28,7 @@ export const useStateStore = defineStore('stateStore', () => {
var tnc_running_state = ref("--------")
var arq_total_bytes = ref(0)
var arq_transmission_percent = ref(0)
var heard_stations = ref("")
var dxcallsign = ref("")
@ -111,5 +114,5 @@ export const useStateStore = defineStore('stateStore', () => {
return { dxcallsign, busy_state, arq_state, new_frequency, frequency, mode, bandwidth, dbfs_level, speed_level, fft, channel_busy, channel_busy_slot, scatter, ptt_state, s_meter_strength_percent, s_meter_strength_raw, arq_total_bytes, audio_recording, hamlib_status, audio_level, alc, updateTncState };
return { dxcallsign, busy_state, arq_state, new_frequency, frequency, mode, bandwidth, dbfs_level_raw, dbfs_level_percent, speed_level, fft, channel_busy, channel_busy_slot, scatter, ptt_state, s_meter_strength_percent, s_meter_strength_raw, arq_total_bytes, audio_recording, hamlib_status, audio_level, alc, updateTncState, arq_transmission_percent };
});