Page 1 of 2

add general toggle for a more minimal UI mode

PostPosted: 18 Jan 2015, 01:28
by waves
RuneAudio is already great but all great software has room for more tweaks. In that spirit I have posted some requests and have a few more coming. But before I go on, do you devs/mods prefer one post per request or can I lump many into one post (i.e. a numbered list)? While I wait for an answer to that, here is one more general request:

**ADD A TOGGLE FOR A MORE MINIMAL UI MODE**
I like that RuneAudio is rather minimal, many other music player UIs are seriously cluttered in comparison. That said RuneAudio has some hints and help text labels in the UI that are helpful during the first few uses but seem redundant once the user is familiar with the application. I request a general option that toggles to a more minimal mode. E.g. hides subtexts on library startscreen buttons, shortens descriptions, perhaps removes text and only displays icons at some places, etcetera. Here are some examples:

LIBRARY
- shrink "browse your library" to "library"
- disable subtext on library startscreen buttons
- let users disable buttons they don't use
- remove help text in search box
- shorten text folder/file dropdown menu (add; add + play; replace + play; update folder; bookmark) or remove text and use only icons

LIBRARY: WEBRADIO
- remove subtext "webradio" for each item here
- change "add new" text to only a (+) icon

PLAYBACK
- add option to remove ui elements (MPD button, share button, ...)
- when no coverart, show nothing in the middle (keep that space blank when in landscape view, remove that space when in vertical view on smartphone)
- when streaming live radio hide timeknob or at least freeze it and show no time progress (I see that is discussed in older request threads already)

QUEUE
- remove help text in search box

All that said, I realize of course that some others may not like such a more minimalistic mode. But I hope enough people would like such a mode for it to be worthwhile to add.

Re: add general toggle for a more minimal UI mode

PostPosted: 18 Jan 2015, 18:03
by ACX
Hi waves,
what it works for you may not work for other users. It's difficult to choose a design that makes everybody happy, but we have to try to be more "universal" as possible.
Unfortunatly, having the customizations that you suggest would add a level of complexity to the code of the UI (and thus to its maintainability), and we'd rather avoid that. Anyway you are free to customize the UI by yourself and make it exactly around your taste (with the new incoming UI code refactoring it will be even easier).

Re: add general toggle for a more minimal UI mode

PostPosted: 19 Jan 2015, 09:40
by waves
ACX wrote:Hi waves,
what it works for you may not work for other users. It's difficult to choose a design that makes everybody happy, but we have to try to be more "universal" as possible.

Hi and thanks for the replies. I agree with the quote above.

But I also stick to the main point I tried to made. The individual sugggestions in my list isn't the main point. The point is: all software has new user that soon turn into experienced users. The hint and help needs of the new and the experienced user differs. I think that is a universal fact about software users and therefore a challenge for all software. Software can handle that through a one time tutorial at first start (Google often do that for major changes to their Android apps for example) and/or through a setting that can toggle hints in the UI on and off and/or throught a toggle for beginner / expert mode (with more advanced features) and/or through tools for users to customize parts of the interface (Firefox customization of buttons on toolbars for example). My impression is that RuneAudio largely has the same UI for new and experienced user alike and that some hints that are helpful only to new users stay in the UI forever. So let me ask this: do you devs have a plan for how to deal with this new / experienced user challenge?

An especially clear example of what I'm talking about (UI too little adapted to experienced users) is the messages that show up in the middle of the queue screen when the queue is empty. Special boxes, exclamation points and quite a lot of text. Every time! I got tired of seing that after only a few times and poked around in the code until I found a way to disable it. In this case it was simply to comment out this command in runeui.js (and then minimy to runeui.min.js):
Code: Select all
$('#playlist-warning').removeClass('hide');

like so
Code: Select all
// $('#playlist-warning').removeClass('hide');

Not very messy! All other code tweaks (minimalizations) I've done to my local install has so far been quite slim, commenting out something here, adding a line there (once I found the right command, id and code position to modify that is). So I'm not sure I agree with this:
ACX wrote:Unfortunatly, having the customizations that you suggest would add a level of complexity to the code of the UI (and thus to its maintainability) ...


It so far seems to me that a "disable UI hints" mode could be had by quite slim changes to mostly runeui.js. The main refresh functions there would include a short check of this kind: if variable nohintsmode is set to true, apply addClass('Hide') to the list of id's A B C D .... . At some other places in the code preexisting checks would get a similar "if nohintsmode == true" conditional added. Some text strings seem hardcoded in other files, but if you proceed with language localizations for future versions then those strings would also be easy to deal with in a "no hints mode".

Let me add that I may well underestimate the challenges with maintaining such a mode though. You guys know the code and where you aim to take RuneAudio next of course. I'm sure it will continue to be great. Anyway I'll continue to poke around in the code to minimalize the UI for my own use and I hope it is ok to continue to ask forum questions about how to do this or that tweak.

with the new incoming UI code refactoring it will be even easier).

Sounds great!

Re: add general toggle for a more minimal UI mode

PostPosted: 21 Jan 2015, 01:22
by ACX
We'll have a look on what it can be done without introducing too much complexity. The UI refactoring will change a lot of cards on the table :)

Re: add general toggle for a more minimal UI mode

PostPosted: 23 Feb 2015, 14:45
by waves
Here are a few screenshots from Android with the UI modded to be more minimal - less text on buttons, no default text in search boxes, some buttons hidden/moved, no cover or time-knob when playing webstream radio, and a few more things. All changes are achieved by modifications in the runeui.js file.

file playback

minimal1.jpg
minimal1.jpg (52.96 KiB) Viewed 3971 times


radio playback
minimal4.png
minimal4.png (32.86 KiB) Viewed 3971 times


library main page
minimal2.jpg
minimal2.jpg (25.83 KiB) Viewed 3971 times

Re: add general toggle for a more minimal UI mode

PostPosted: 23 Feb 2015, 14:47
by waves
queue (no default search text, nav buttons hidden, repeat buttons moved from playback)

minimal3.png
minimal3.png (33.86 KiB) Viewed 3971 times

Re: add general toggle for a more minimal UI mode

PostPosted: 27 Apr 2016, 12:51
by matlo74
Hi waves

I would be interested in a minimalist ui on my android tablet (chrome). Couldyou share a bit more details on how to customize it in runejs.

thanks in advance

Mat

Re: add general toggle for a more minimal UI mode

PostPosted: 03 May 2016, 21:21
by waves
matlo74 wrote:Hi waves
I would be interested in a minimalist ui on my android tablet (chrome). Couldyou share a bit more details on how to customize it in runejs.
thanks in advance
Mat

Hi, ok I'll try to clean up and post my notes when I have a bit more time. It presupposes you know how to SSH to the rune device and can copy and edit files there.

Re: add general toggle for a more minimal UI mode

PostPosted: 04 May 2016, 12:11
by matlo74
Thanks waves

Yes I Know how to use ssh

Regards

Mat

Re: add general toggle for a more minimal UI mode

PostPosted: 11 May 2016, 19:50
by waves
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
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

preliminary step: make a variable for toggling modifications on/off
find the line
Code: Select all
var GUI = {

and add this line above it
Code: Select all
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
Code: Select all
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
Code: Select all
USB storage

with
Code: Select all
USB


and all instances of the string
Code: Select all
My Webradios

with
Code: Select all
Radio


and all instances of the string
Code: Select all
s</h3>

with
Code: Select all
</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
Code: Select all
networkMounts))

with
Code: Select all
networkMounts) && !mini)


Code: Select all
localStorages))

with
Code: Select all
localStorages) && !mini)


Code: Select all
Spotify))

with
Code: Select all
Spotify) && !mini)


Code: Select all
Dirble))

with
Code: Select all
Dirble) && !mini)


find the line
Code: Select all
// Jamendo (static)

and add this line below it
Code: Select all
if (!mini) {

and find the line
Code: Select all
// Album list (static)

and add this line above it
Code: Select all
   }


mod 4: Playback: if radiostream, hide time-knob and cover
find the line
Code: Select all
function refreshState() {

and add these lines below it
Code: Select all
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
Code: Select all
function refreshState() {

and add these lines above it
Code: Select all
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('&nbsp;');

//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
Code: Select all
$('#playlist-warning').removeClass('hide');

and add lines above and below like this
Code: Select all
if (!mini) {
$('#playlist-warning').removeClass('hide');
}


mod 7: Disable [No Title] type placeholders when no title tag
Search for each of these strings
Code: Select all
[no artist]
[no album]
[no title]

and replace the string including the [ ] brackets (but not the whole line) with this string
Code: Select all
&nbsp;


mod 8: Library: remove subtitle for add new webradio
search and delete this string (but leave everything else on the same line)
Code: Select all
<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
Code: Select all
$('#db-search-keyword').removeAttr('placeholder');

and add this below it
Code: Select all
$("#cover-art").css('border', '2px solid #000000');


Next find both instances of the string
Code: Select all
$('#cover-art').css('background-image'

and add this on new lines above each instance
Code: Select all
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
Code: Select all
pushstream.addChannel('notify');

and comment out the line below it so the two lines look like this
Code: Select all
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.