Page 1 of 1

mod: click time-knob to temporary show vol-knob in its place

PostPosted: 18 Jun 2016, 13:16
by waves
mod: click time-knob to temporarily show vol-knob in its place (by hiding time-knob and cover)
This makes it quicker to change the volume in a smartphone browser where the controls are vertically stacked. Instead of scrolling down to the volume-knob we hide the time-knob and cover which moves the vol-knob up. After 2.5 seconds all controls are automatically visible again.

note: this conflicts with my touch gesture mod. Use the touch gesture mod instead!

Caveats
- This presupposes that you SSH in to your Rune device and edit files there.
- It is a good idea to first make a backup of the files you modify.
- if the the knob circles do not match in position on your screen try tweaking the 5px value in the code below.

Edit this file
Code: Select all
/srv/http/assets/js/runeui.js


You can also browse through the contents of the file online here
https://github.com/RuneAudio/RuneUI/blo ... /runeui.js

First find this line near the top
Code: Select all
var GUI = {

and and this on a new line above it
Code: Select all
var knobhide;



Next find the lines
Code: Select all
// update info and status on Playback tab
function refreshState() {

and add these lines above them
Code: Select all
//click time-knob to temp hide, move up vol-knob
$('#countdown-display').click(function(){
$('#time-knob, #cover-art').addClass('hide');
$('#volume-knob').css('margin-top', '5px');
window.setTimeout(unhideknob,2500);
knobhide = 1;
});

function unhideknob(){
$('#time-knob, #cover-art').removeClass('hide');
$('#volume-knob').css('margin-top', '30px');
knobhide = "";
}


Extra step: needed only if you have done mod 4 on this page
find the line
Code: Select all
else { $('#time-knob, #cover-art').removeClass('hide'); }

and replace it with
Code: Select all
else if (!knobhide) { $('#time-knob, #cover-art').removeClass('hide'); }


Necessary steps to apply the modifications
First, when you are done editing, save runeui.js

Next we minify the file (i.e. convert it into a more compact file that RuneAudio normally uses)
- Copy all the contents of your modified runeui.js file to the clipboard
- Paste into the editbox at http://gpbmike.github.io/refresh-sf/
- Click the button Javascript on the right side of the editbox. The content is now minified
- Copy all the minified text in the editbox
- Edit the file runeui.min.js (make a backup of it first!) and replace all its contents with the minified text from the clipboard. Then save. Then reload RuneAudio in the browser.

edit: fixed typo in code