From 82af558e5a357daeb1a0131d18c321ad728e94cd Mon Sep 17 00:00:00 2001 From: Daniel Gunzinger Date: Thu, 16 Apr 2020 19:09:24 +0200 Subject: [PATCH 1/5] implement trivial volume control slider and reporting of current volume to webinterface --- interface.py | 16 ++++++++++++++-- templates/index.html | 13 +++++++++---- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/interface.py b/interface.py index fd8c794..9e8c5bb 100644 --- a/interface.py +++ b/interface.py @@ -234,13 +234,15 @@ def status(): 'current_index': var.playlist.current_index, 'empty': False, 'play': not var.bot.is_pause, - 'mode': var.playlist.mode}) + 'mode': var.playlist.mode, + 'volume': var.db.getfloat('bot', 'volume')}) else: return jsonify({'ver': var.playlist.version, 'current_index': var.playlist.current_index, 'empty': True, 'play': not var.bot.is_pause, - 'mode': var.playlist.mode}) + 'mode': var.playlist.mode, + 'volume': var.db.getfloat('bot', 'volume')}) @web.route("/post", methods=['POST']) @@ -401,6 +403,16 @@ def post(): var.bot.volume_set = 0 var.db.set('bot', 'volume', str(var.bot.volume_set)) log.info("web: volume up to %d" % (var.bot.volume_set * 100)) + elif action == "volume_set_value": + if 'new_volume' in request.form: + # new_volume is slider value ranging from 0-100 + var.bot.volume_set = (request.form['new_volume'] * 0.01) + if var.bot.volume_set > 1: + var.bot.volume_set = 1 + elif var.bot.volume_set < 0: + var.bot.volume_set = 0 + var.db.set('bot', 'volume', str(var.bot.volume_set)) + log.info("web: volume set to %d" % (var.bot.volume_set * 100)) return status() diff --git a/templates/index.html b/templates/index.html index 17cc72d..164a488 100644 --- a/templates/index.html +++ b/templates/index.html @@ -72,6 +72,11 @@ onclick="request('post', {action : 'volume_up'})"> + + + @@ -497,7 +502,7 @@ if (data.ver !== playlist_ver) { checkForPlaylistUpdate(); } - updateControls(data.empty, data.play, data.mode); + updateControls(data.empty, data.play, data.mode, data.volume); } } }); @@ -659,7 +664,7 @@ displayActiveItem(data.current_index); } } - updateControls(data.empty, data.play, data.mode); + updateControls(data.empty, data.play, data.mode, data.volume); } } }); @@ -682,7 +687,7 @@ ); } - function updateControls(empty, play, mode){ + function updateControls(empty, play, mode, volume){ if(empty){ $("#play-btn").prop("disabled", true); $("#pause-btn").prop("disabled", true); @@ -719,7 +724,7 @@ $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false); $("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true); } - + $("#volume-slider").value = volume; } function themeInit(){ From 9e1f2d605ddfdf3df47d81b908cd6c9f329b265f Mon Sep 17 00:00:00 2001 From: Daniel Gunzinger Date: Thu, 16 Apr 2020 19:36:14 +0200 Subject: [PATCH 2/5] fix typeerror when setting volume; fix processing of volume updates in client-side webinterface --- interface.py | 2 +- templates/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/interface.py b/interface.py index 9e8c5bb..e28e444 100644 --- a/interface.py +++ b/interface.py @@ -406,7 +406,7 @@ def post(): elif action == "volume_set_value": if 'new_volume' in request.form: # new_volume is slider value ranging from 0-100 - var.bot.volume_set = (request.form['new_volume'] * 0.01) + var.bot.volume_set = (int(request.form['new_volume']) * 0.01) if var.bot.volume_set > 1: var.bot.volume_set = 1 elif var.bot.volume_set < 0: diff --git a/templates/index.html b/templates/index.html index 164a488..ae91b9c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -724,7 +724,7 @@ $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false); $("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true); } - $("#volume-slider").value = volume; + document.getElementById("volume-slider").value = Math.round(volume*100); } function themeInit(){ From b9fd17677b0381ea2af92d48c198ab30dea71159 Mon Sep 17 00:00:00 2001 From: Daniel Gunzinger Date: Thu, 16 Apr 2020 23:31:08 +0200 Subject: [PATCH 3/5] use bootstrap styling for the slider, center it vertically; move slider between the two volume buttons --- static/css/custom.css | 5 ++++- templates/index.html | 10 ++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/static/css/custom.css b/static/css/custom.css index fd152eb..21e0d12 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -108,4 +108,7 @@ font-style: italic !important; font-weight: 300; } - +#volume-slider { + margin-top: 8px; + margin-right: 6px; +} diff --git a/templates/index.html b/templates/index.html index ae91b9c..7a6c415 100644 --- a/templates/index.html +++ b/templates/index.html @@ -68,15 +68,17 @@ onclick="request('post', {action : 'volume_down'})"> + + + + - -
From 788383f65ccfff5a8a937070ef64df9eadb9228a Mon Sep 17 00:00:00 2001 From: Daniel Gunzinger Date: Fri, 17 Apr 2020 17:12:26 +0200 Subject: [PATCH 4/5] change where we get the current volume from in the status method; adjust html input range from 0-100 to 0-1, thus remove need for scaling in javascript --- interface.py | 13 +++++++------ templates/index.html | 10 ++++++++-- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/interface.py b/interface.py index e28e444..4693884 100644 --- a/interface.py +++ b/interface.py @@ -235,14 +235,14 @@ def status(): 'empty': False, 'play': not var.bot.is_pause, 'mode': var.playlist.mode, - 'volume': var.db.getfloat('bot', 'volume')}) + 'volume': var.bot.volume_set}) else: return jsonify({'ver': var.playlist.version, 'current_index': var.playlist.current_index, 'empty': True, 'play': not var.bot.is_pause, 'mode': var.playlist.mode, - 'volume': var.db.getfloat('bot', 'volume')}) + 'volume': var.bot.volume_set}) @web.route("/post", methods=['POST']) @@ -405,12 +405,13 @@ def post(): log.info("web: volume up to %d" % (var.bot.volume_set * 100)) elif action == "volume_set_value": if 'new_volume' in request.form: - # new_volume is slider value ranging from 0-100 - var.bot.volume_set = (int(request.form['new_volume']) * 0.01) - if var.bot.volume_set > 1: + if float(request.form['new_volume']) > 1: var.bot.volume_set = 1 - elif var.bot.volume_set < 0: + elif float(request.form['new_volume']) < 0: var.bot.volume_set = 0 + else: + # value for new volume is between 0 and 1, round to two decimal digits + var.bot.volume_set = round(float(request.form['new_volume']), 2) var.db.set('bot', 'volume', str(var.bot.volume_set)) log.info("web: volume set to %d" % (var.bot.volume_set * 100)) diff --git a/templates/index.html b/templates/index.html index 7a6c415..3dad160 100644 --- a/templates/index.html +++ b/templates/index.html @@ -70,7 +70,7 @@ @@ -726,7 +726,13 @@ $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false); $("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true); } - document.getElementById("volume-slider").value = Math.round(volume*100); + if(volume > 1) { + document.getElementById("volume-slider").value = 1; + } else if(volume < 0) { + document.getElementById("volume-slider").value = 0; + } else { + document.getElementById("volume-slider").value = volume; + } } function themeInit(){ From fa727b6869535051cdfd95254933c5cbce390c82 Mon Sep 17 00:00:00 2001 From: Daniel Gunzinger Date: Sat, 18 Apr 2020 16:46:38 +0200 Subject: [PATCH 5/5] add delay for sending the new volume (client -> server) to limit packet send rate; only update the slider value when the value has changed --- templates/index.html | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/templates/index.html b/templates/index.html index 3dad160..c85aa76 100644 --- a/templates/index.html +++ b/templates/index.html @@ -71,7 +71,7 @@ + onchange="setVolumeDelayed(this.value)">