use jquery to store progressbar objects

This commit is contained in:
Jakob Ketterl 2020-05-08 21:18:03 +02:00
parent ceafcbf850
commit fc7188145b
3 changed files with 43 additions and 30 deletions

View File

@ -134,12 +134,12 @@
</div>
</div>
<div class="openwebrx-panel" id="openwebrx-panel-status" data-panel-name="status" style="width: 615px;" data-panel-transparent="true">
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-buffer"> <span class="openwebrx-progressbar-text">Audio buffer [0 ms]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-output"> <span class="openwebrx-progressbar-text">Audio output [0 sps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-speed"> <span class="openwebrx-progressbar-text">Audio stream [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-network-speed"> <span class="openwebrx-progressbar-text">Network usage [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-server-cpu"> <span class="openwebrx-progressbar-text">Server CPU [0%]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-clients"> <span class="openwebrx-progressbar-text">Clients [1]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-buffer" data-type="audiobuffer"> <span class="openwebrx-progressbar-text">Audio buffer [0 ms]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-output" data-type="audiooutput"> <span class="openwebrx-progressbar-text">Audio output [0 sps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-speed" data-type="audiospeed"> <span class="openwebrx-progressbar-text">Audio stream [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-network-speed" data-type="networkspeed"> <span class="openwebrx-progressbar-text">Network usage [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-server-cpu" data-type="cpu"> <span class="openwebrx-progressbar-text">Server CPU [0%]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-clients" data-type="clients"> <span class="openwebrx-progressbar-text">Clients [1]</span><div class="openwebrx-progressbar-bar"></div></div>
</div>
</div>
<div id="openwebrx-panels-container-right">

View File

@ -25,13 +25,16 @@ ProgressBar.prototype.setOver = function(over) {
this.$innerBar.css('backgroundColor', (over) ? "#ff6262" : "#00aba6");
};
AudioBufferProgressBar = function(el, sampleRate) {
AudioBufferProgressBar = function(el) {
ProgressBar.call(this, el);
this.sampleRate = sampleRate;
};
AudioBufferProgressBar.prototype = new ProgressBar();
AudioBufferProgressBar.prototype.setSampleRate = function(sampleRate) {
this.sampleRate = sampleRate;
};
AudioBufferProgressBar.prototype.setBuffersize = function(buffersize) {
var audio_buffer_value = buffersize / this.sampleRate;
var overrun = audio_buffer_value > audio_buffer_maximal_length_sec;
@ -70,12 +73,15 @@ AudioSpeedProgressBar.prototype.setSpeed = function(speed) {
AudioOutputProgressBar = function(el, sampleRate) {
ProgressBar.call(this, el);
this.maxRate = sampleRate * 1.25;
this.minRate = sampleRate * .25;
};
AudioOutputProgressBar.prototype = new ProgressBar();
AudioOutputProgressBar.prototype.setSampleRate = function(sampleRate) {
this.maxRate = sampleRate * 1.25;
this.minRate = sampleRate * .25;
};
AudioOutputProgressBar.prototype.setAudioRate = function(audioRate) {
this.set(audioRate / this.maxRate, "Audio output [" + (audioRate / 1000).toFixed(1) + " ksps]", audioRate > this.maxRate || audioRate < this.minRate);
};
@ -111,3 +117,20 @@ CpuProgressBar.prototype = new ProgressBar();
CpuProgressBar.prototype.setUsage = function(usage) {
this.set(usage, "Server CPU [" + Math.round(usage * 100) + "%]", usage > .85);
};
ProgressBar.types = {
cpu: CpuProgressBar,
audiobuffer: AudioBufferProgressBar,
audiospeed: AudioSpeedProgressBar,
audiooutput: AudioOutputProgressBar,
clients: ClientsProgressBar,
networkspeed: NetworkSpeedProgressBar
}
$.fn.progressbar = function() {
if (!this.data('progressbar')) {
var constructor = ProgressBar.types[this.data('type')] || ProgressBar;
this.data('progressbar', new constructor(this));
}
return this.data('progressbar');
};

View File

@ -739,7 +739,7 @@ function on_ws_recv(evt) {
divlog("Audio stream is " + ((audio_compression === "adpcm") ? "compressed" : "uncompressed") + ".");
fft_compression = config['fft_compression'];
divlog("FFT stream is " + ((fft_compression === "adpcm") ? "compressed" : "uncompressed") + ".");
clientProgressBar.setMaxClients(config['max_clients']);
$('#openwebrx-bar-clients').progressbar().setMaxClients(config['max_clients']);
waterfall_init();
var demodulatorPanel = $('#openwebrx-panel-receiver').demodulatorPanel();
@ -773,10 +773,10 @@ function on_ws_recv(evt) {
setSmeterAbsoluteValue(smeter_level);
break;
case "cpuusage":
cpuProgressBar.setUsage(json['value']);
$('#openwebrx-bar-server-cpu').progressbar().setUsage(json['value']);
break;
case "clients":
clientProgressBar.setClients(json['value']);
$('#openwebrx-bar-clients').progressbar().setClients(json['value']);
break;
case "profiles":
var listbox = e("openwebrx-sdr-profiles-listbox");
@ -1121,7 +1121,7 @@ function on_ws_opened() {
if (!networkSpeedMeasurement) {
networkSpeedMeasurement = new Measurement();
networkSpeedMeasurement.report(60000, 1000, function(rate){
networkSpeedProgressBar.setSpeed(rate);
$('#openwebrx-bar-network-speed').progressbar().setSpeed(rate);
});
} else {
networkSpeedMeasurement.reset();
@ -1352,33 +1352,23 @@ function init_header() {
});
}
var audioBufferProgressBar;
var networkSpeedProgressBar;
var audioSpeedProgressBar;
var audioOutputProgressBar;
var clientProgressBar;
var cpuProgressBar;
function initProgressBars() {
audioBufferProgressBar = new AudioBufferProgressBar($('#openwebrx-bar-audio-buffer'), audioEngine.getSampleRate());
networkSpeedProgressBar = new NetworkSpeedProgressBar($('#openwebrx-bar-network-speed'));
audioSpeedProgressBar = new AudioSpeedProgressBar($('#openwebrx-bar-audio-speed'));
audioOutputProgressBar = new AudioOutputProgressBar($('#openwebrx-bar-audio-output'), audioEngine.getSampleRate());
clientProgressBar = new ClientsProgressBar($('#openwebrx-bar-clients'));
cpuProgressBar = new CpuProgressBar($('#openwebrx-bar-server-cpu'));
$('#openwebrx-bar-audio-buffer, #openwebrx-bar-audio-output').each(function() {
$(this).progressbar().setSampleRate(audioEngine.getSampleRate());
});
}
function audioReporter(stats) {
if (typeof(stats.buffersize) !== 'undefined') {
audioBufferProgressBar.setBuffersize(stats.buffersize);
$('#openwebrx-bar-audio-buffer').progressbar().setBuffersize(stats.buffersize);
}
if (typeof(stats.audioByteRate) !== 'undefined') {
audioSpeedProgressBar.setSpeed(stats.audioByteRate * 8);
$('#openwebrx-bar-audio-speed').progressbar().setSpeed(stats.audioByteRate * 8);
}
if (typeof(stats.audioRate) !== 'undefined') {
audioOutputProgressBar.setAudioRate(stats.audioRate);
$('#openwebrx-bar-audio-output').progressbar().setAudioRate(stats.audioRate);
}
}