Here are my notes on making Rune more minimalistic.
Caveats:
- This presupposes that you SSH in to your Rune device and edit files there.
- I don't know if the modifications work with all versions of RuneAudio and on all systems. There could also be errors in my notes. Post corrections and I'll update the notes.
- It is
a good idea to first make a backup of the whole RuneAudio installation (make a clone of the microSD card)
and backup the individual file that you will modify.
- In the instructions pay attention to when you are to search and replace (1) a string (part of a line) and when to replace (2) a whole line.
The file we will do all modifications in is runeui.js
It is located here
/srv/http/assets/js/runeui.js
You can also browse through the contents of the file online here
https://github.com/RuneAudio/RuneUI/blob/master/assets/js/runeui.js
preliminary step: make a variable for toggling modifications on/off
find the line
var GUI = {
and add this line above it
var mini = 1;
Once the modifications are done you can toggle many but not all of them on/off by changing this variable. Useful for troubleshooting.
mod 1: Library: remove subtitles
Search each one of these strings and replace it with nothing
browse MPD database by album
browse MPD database by artist
browse MPD database by genre
USB attached drives
webradio local playlists
Browse your library
mod 2: Library: shorten titles
Search and replace all instances of the string
USB storage
with
USB
and all instances of the string
My Webradios
with
Radio
and all instances of the string
s</h3>
with
</h3>
(This changes Albums to Album and so on.)
mod 3: Library: hide buttons except usb radio album artist genre
Search and replace the string
networkMounts))
with
networkMounts) && !mini)
localStorages))
with
localStorages) && !mini)
Spotify))
with
Spotify) && !mini)
Dirble))
with
Dirble) && !mini)
find the line
// Jamendo (static)
and add this line below it
if (!mini) {
and find the line
// Album list (static)
and add this line above it
}
mod 4: Playback: if radiostream, hide time-knob and cover
find the line
function refreshState() {
and add these lines below it
if (mini) {
if (GUI.stream === 'radio') { $('#time-knob, #cover-art').addClass('hide'); }
else { $('#time-knob, #cover-art').removeClass('hide'); }
}
mod 5: Playback: various modifications
find the line
function refreshState() {
and add these lines above it
if (mini) {
// hide share, mpd, bitrate, playlistpos
$('#overlay-social-open, #overlay-playsource-open, #playlist-position, #format-bitrate').addClass('hide');
//hide vol up down mute buttons
$('#volumedn, #volumeup, #volumemute').addClass('hide');
//click vol wheel to toggle mute
$("#volume").bind("click", function () {
$(':focus').blur();
$("#volumemute").click();
});
//move repeat random single buttons to queue page footer
$('#repeat, #random, #single').prependTo("#pl-controls");
//hide nav btn in library & queue
$('#db-controls, #pl-firstPage, #pl-lastPage, #pl-prevPage, #pl-nextPage').addClass('hide');
//hide spinner
$("#currentsong i, #currenttitle i, #currentalbum i, #countdown-display i, #total i").addClass('hide');
//remove dummy text
$("#currentsong, #currenttitle, #currentalbum, #countdown-display, #total").html(' ');
//remove search default + hints
$('#pl-filter').removeAttr('placeholder').removeAttr('data-original-title');
$('#db-search-keyword').removeAttr('placeholder');
}
mod 6: Playlist: disable reminders when queue is empty
find both instances of
$('#playlist-warning').removeClass('hide');
and add lines above and below like this
if (!mini) {
$('#playlist-warning').removeClass('hide');
}
mod 7: Disable [No Title] type placeholders when no title tag
Search for each of these strings
[no artist]
[no album]
[no title]
and replace the string including the [ ] brackets (but
not the whole line) with this string
mod 8: Library: remove subtitle for add new webradio
search and delete this string (but leave everything else on the same line)
<span class="bl">add a webradio to your library</span>
mod 9: Playback: hide album image placeholder when no song in queue
find this line in the section added in mod 5 above
$('#db-search-keyword').removeAttr('placeholder');
and add this below it
$("#cover-art").css('border', '2px solid #000000');
Next find both instances of the string
$('#cover-art').css('background-image'
and add this on new lines above each instance
var miniopacity = mini && ( !currentalbum && !currentartist ) ? "0.0" : "1.0"
$("#cover-art").css('opacity', miniopacity);
mod 10: Library/Playlist: disable popup notifications/confirmations
find this line
pushstream.addChannel('notify');
and comment out the line below it so the two lines look like this
pushstream.addChannel('notify');
// pushstream.connect();
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.
(Note: you
can test the modifications without minifying. For that go to developer settings ( the url to your Rune device with /dev added, for example 192.168.96.2/dev ). and turn Dev Mode on and save. RuneAudio will now use runeui.js instead of runeui.min.js . When done testing do the minify steps above and also turn Dev Mode off.)
edit: removed steps that were actually not needed to apply the changes.
