joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more jquery magic for progressbars

Browse Source
This commit is contained in:
Jakob Ketterl
2020-05-08 21:35:45 +02:00
parent fc7188145b
commit 9563adacf7
3 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
htdocs/index.html
View File

@@ -134,12 +134,12 @@
</div> </div>
</div> </div>
<div class="openwebrx-panel" id="openwebrx-panel-status" data-panel-name="status" style="width: 615px;" data-panel-transparent="true"> <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" 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-buffer" data-type="audiobuffer"></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-output" data-type="audiooutput"></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-audio-speed" data-type="audiospeed"></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-network-speed" data-type="networkspeed"></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-server-cpu" data-type="cpu"></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 class="openwebrx-progressbar" id="openwebrx-bar-clients" data-type="clients"></div>
</div> </div>
</div> </div>
<div id="openwebrx-panels-container-right"> <div id="openwebrx-panels-container-right">

33
htdocs/lib/ProgressBar.js
View File

@@ -1,10 +1,15 @@
ProgressBar = function(el) { ProgressBar = function(el) {
this.$el = $(el); this.$el = $(el);
this.$innerText = this.$el.find('.openwebrx-progressbar-text'); this.$innerText = $('<span class="openwebrx-progressbar-text">' + this.getDefaultText() + '</span>');
this.$innerBar = this.$el.find('.openwebrx-progressbar-bar'); this.$innerBar = $('<div class="openwebrx-progressbar-bar"></div>');
this.$el.empty().append(this.$innerText, this.$innerBar);
this.$innerBar.css('width', '0%'); this.$innerBar.css('width', '0%');
}; };
ProgressBar.prototype.getDefaultText = function() {
return '';
}
ProgressBar.prototype.set = function(val, text, over) { ProgressBar.prototype.set = function(val, text, over) {
this.setValue(val); this.setValue(val);
this.setText(text); this.setText(text);
@@ -31,6 +36,10 @@ AudioBufferProgressBar = function(el) {
AudioBufferProgressBar.prototype = new ProgressBar(); AudioBufferProgressBar.prototype = new ProgressBar();
AudioBufferProgressBar.prototype.getDefaultText = function() {
return 'Audio buffer [0 ms]';
};
AudioBufferProgressBar.prototype.setSampleRate = function(sampleRate) { AudioBufferProgressBar.prototype.setSampleRate = function(sampleRate) {
this.sampleRate = sampleRate; this.sampleRate = sampleRate;
}; };
@@ -56,6 +65,10 @@ NetworkSpeedProgressBar = function(el) {
NetworkSpeedProgressBar.prototype = new ProgressBar(); NetworkSpeedProgressBar.prototype = new ProgressBar();
NetworkSpeedProgressBar.prototype.getDefaultText = function() {
return 'Network usage [0 kbps]';
};
NetworkSpeedProgressBar.prototype.setSpeed = function(speed) { NetworkSpeedProgressBar.prototype.setSpeed = function(speed) {
var speedInKilobits = speed * 8 / 1000; var speedInKilobits = speed * 8 / 1000;
this.set(speedInKilobits / 2000, "Network usage [" + speedInKilobits.toFixed(1) + " kbps]", false); this.set(speedInKilobits / 2000, "Network usage [" + speedInKilobits.toFixed(1) + " kbps]", false);
@@ -67,6 +80,10 @@ AudioSpeedProgressBar = function(el) {
AudioSpeedProgressBar.prototype = new ProgressBar(); AudioSpeedProgressBar.prototype = new ProgressBar();
AudioSpeedProgressBar.prototype.getDefaultText = function() {
return 'Audio stream [0 kbps]';
};
AudioSpeedProgressBar.prototype.setSpeed = function(speed) { AudioSpeedProgressBar.prototype.setSpeed = function(speed) {
this.set(speed / 500000, "Audio stream [" + (speed / 1000).toFixed(0) + " kbps]", false); this.set(speed / 500000, "Audio stream [" + (speed / 1000).toFixed(0) + " kbps]", false);
}; };
@@ -77,6 +94,10 @@ AudioOutputProgressBar = function(el, sampleRate) {
AudioOutputProgressBar.prototype = new ProgressBar(); AudioOutputProgressBar.prototype = new ProgressBar();
AudioOutputProgressBar.prototype.getDefaultText = function() {
return 'Audio output [0 sps]';
};
AudioOutputProgressBar.prototype.setSampleRate = function(sampleRate) { AudioOutputProgressBar.prototype.setSampleRate = function(sampleRate) {
this.maxRate = sampleRate * 1.25; this.maxRate = sampleRate * 1.25;
this.minRate = sampleRate * .25; this.minRate = sampleRate * .25;
@@ -94,6 +115,10 @@ ClientsProgressBar = function(el) {
ClientsProgressBar.prototype = new ProgressBar(); ClientsProgressBar.prototype = new ProgressBar();
ClientsProgressBar.prototype.getDefaultText = function() {
return 'Clients [1]';
};
ClientsProgressBar.prototype.setClients = function(clients) { ClientsProgressBar.prototype.setClients = function(clients) {
this.clients = clients; this.clients = clients;
this.render(); this.render();
@@ -114,6 +139,10 @@ CpuProgressBar = function(el) {
CpuProgressBar.prototype = new ProgressBar(); CpuProgressBar.prototype = new ProgressBar();
CpuProgressBar.prototype.getDefaultText = function() {
return 'Server CPU [0%]';
};
CpuProgressBar.prototype.setUsage = function(usage) { CpuProgressBar.prototype.setUsage = function(usage) {
this.set(usage, "Server CPU [" + Math.round(usage * 100) + "%]", usage > .85); this.set(usage, "Server CPU [" + Math.round(usage * 100) + "%]", usage > .85);
}; };

9
htdocs/openwebrx.js
View File

@@ -1353,9 +1353,12 @@ function init_header() {
} }
function initProgressBars() { function initProgressBars() {
$('#openwebrx-bar-audio-buffer, #openwebrx-bar-audio-output').each(function() { $(".openwebrx-progressbar").each(function(){
$(this).progressbar().setSampleRate(audioEngine.getSampleRate()); var bar = $(this).progressbar();
}); if ('setSampleRate' in bar) {
bar.setSampleRate(audioEngine.getSampleRate());
}
})
} }
function audioReporter(stats) { function audioReporter(stats) {