[Addon] RuneUI Enhancement

dynobot

There was another user named 'waves' who did some very good work for a minimal UI.

#800

R101

The original RuneUI still looks very impressive but most of the UI problems which users report are due to the amount of space taken up by the circular progress indicator and volume control. I wonder if having straight progress and volume control bars would allow for a universal UI which would suit all sizes of display?

I know this is a radical suggestion, but it might make it easier for the developers and it should still be possible to have a good-looking UI.

dynobot

R101 wroteThe original RuneUI still looks very impressive but most of the UI problems which users report are due to the amount of space taken up by the circular progress indicator and volume control. I wonder if having straight progress and volume control bars would allow for a universal UI which would suit all sizes of display?

I know this is a radical suggestion, but it might make it easier for the developers and it should still be possible to have a good-looking UI.

I agree, the RuneUI does look very nice. IMO the circles are a distinctive feature or 'brand image' of Rune and its counterparts [Volumio, Moode etc] With that said, I don't think they'd be willing to get rid of them. How about something smaller or maybe even put the album cover inside the circular progress bar to save some space.

rern

Not scroll - Fixed.
Too large to fit small screen - Now scaled down. Please try and report back.
Also works on Rune Audio App - Good to know that it does.

Information about your screen resolution would be useful for fixing issues.

ianhaynes

Excellent. Now able to scroll down to the volume control. My phone has a 4.5 inch screen with 1280x720 resolution, so I guess a bit small these days...

Thanks!

PS: There is one issue I've just noticed on IE11 mobile. Vertical scrolling on the playlist sometimes 'sticks'. This was a problem with Rune a while back but had been resolved in some way.

rern

Latest Update

I think I have tweaked it to the point that it should be ok for most of the issues.
Please try the latest update and let me know if there's still any glitches or ideas for improvement.
For those not yet installed, you can try the Demo in the 1st post without install.

rpt007

@[deleted]: big compliment for this enhancement!

Short feedback (after having dealt with it only the last 15min):
- having activated the lyrics window, it would be great if
either
1. the lyrics would be updated whenever a new song is played
or
2. the lyrics window is closed automatically when a new song is played (if 1. option is technically impossible or too complicated)

But this is already moaning on a very high level ...

Raimund

rern

rpt007 wrote...
- having activated the lyrics window, it would be great if
either
1. the lyrics would be updated whenever a new song is played
...

Done !
Thank you for this good suggestion.
Please reinstall and report back.

(The install command line will have a prompt for reinstall. No need to run uninstall.sh first.)

rpt007

Hi rern,

wonderful - works as requested!
Good job again!

PS:
Hope you have an answer for me with my non-responsive menu button (non-responsive since GUI enhancement on my waveshare 7" tft).
I suggest to answer either here or in the GPIO thread. I would then place a link to your answer to ensure consistency.

rern

rpt007 wrote (from another post)
...
Hope you have an answer for me with my non-responsive menu button (non-responsive since GUI enhancement on my waveshare 7" tft).
....

Since I don't have a touch screen for local browser, please try this for me:

Edit /srv/http/app/templates/header.php line 93
replace with this line:

        <a style="padding-right: 40px;" id="menu-settings" class="btn-default dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="fa fa-gear"></i></a>

clear OPcache and restart local browser

curl '127.0.0.1/clear'
killall midori
sleep 1
startx  > /dev/null 2>&1 &

rern

humschti wroteJust installed but get a strange UI.

Fixed !

Please reinstall and report back.
(The install command line will have a prompt for reinstall. No need to run uninstall.sh first.)

rpt007

Sorry,

but I hesitate to exchange a line which I can't exactly identify

Edit /srv/http/app/templates/header.php line 93
replace with this line:

a) I have to count manually (using nano as editor: there is no line count)
b) there is no such previous line with "style"

To have an exact match what to replace, could you pls post the code in line 93 which has to replaced by the new one.
Thanks.

hondagx35

Hi rpt007,

i can not help with your problem but have a tip for you.

Use WinSCP and Notepad++ on your host PC to edit files.
If you are on a MAC you can use Cyberduck instead.

Do not use built-in windows editors, because they may break file encodings and line endings.

Frank

rern

rpt007 wrote To have an exact match what to replace, could you pls post the code in line 93 which has to replaced by the new one.

The line 93 in my answer is a hyperlink to the code on GitHub.

You can click this one as well.

rpt007

@[deleted]:
Unfortunately no success. Put the original code back.

@[deleted]:
Frank, I used WinSCP which comes with a line counter. Is there an easy way to use Notepad++ as I have no experience with using NP++ as SSH tool (I found it a bit confusing where to tell it to set up a ssh session (I am pretty new to all this here, so be easy with my

)

Raimund

hondagx35

Hi Raimund,

I have no experience with using NP++ as SSH tool

Notepad++ is not a SSH tool it is an editor.
To get it working:
- install Notepad++ on your PC
- open WinSCP
- go to Options->Preferences and add Notepad++ as editor and set it as default.

: notepad++.jpg (267.3 KiB) Viewed 2396 times

Frank

rpt007

Frank,
thank you. That is the way I was looking for. I know that np++ is an editor but I didn't know how I vould use it within a ssh session. Now my life will be easier.
Raimund

rpt007

I still have the problem with the RuneUI Enhancement.

The enhanced UI works like a charm - only the menu item shows absolutely no reaction when clicking the icon, whereas the normal UI menu works without any problems, -> see attached screenshots of my 7" waveshare TFT display.

I chose option 1 (small screen) when the enhanced screen is installed.
https://www.dropbox.com/s/o6wnrfcvdv8opzo/RA_Enhanced_UI.jpg?dl=0
and
https://www.dropbox.com/s/typ4teg4qdju5lj/RA_Normal_UI.jpg?dl=0

PS:
sorry, I have no idea how to get the images visible right away; gave up after 5min try and error and posted links to my dropbox instead.

rern

@[deleted]
Well, let's have some fun finding out whether the settings button was disabled:

1. Enable mouse pointer in local browser
/root/.xinitrc
-use_cursor no > -use_cursor yes

...
matchbox-window-manager -use_titlebar no -use_cursor yes &
...

Connect a mouse to USB port
Reboot

2. Move mouse pointer over the settings button. It must show a hover effect, dark square behind the icon. Otherwise it was disabled somehow. This will be a clue for me to start with.

3. Right click on empty area > Inspect Elements > show me these lines:

    <div class="dropdown">
        <button id="menu-settings" class="btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gear"></i></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu-settings">

4. Go back to RuneUI

killall midori
startx  > /dev/null 2>&1 &

By the way, to show dropbox link images directly, your code should be:

Change the last part - ...dl=0 > ...dl=1
and place it between - [img]..link...[/img]

[img]https://www.dropbox.com/s/o6wnrfcvdv8opzo/RA_Enhanced_UI.jpg?dl=1[/img]

rpt007

@[deleted]:
First thank you for your time to get this solved.

What are the findings and problems so far:
1. I edited .xinitrc and rebooted with a mouse connected
2. mouse pointer showed up and I could move it around
3. the mouse hover showed the dark box behind the menu icon
4. I could click the icon and the submenu items showed up like on my desktop browser
5. Rightclick on an empty arey and moving down to "Inspecting Elements" showed the (html?) code
6. It was very hard to read as the characters are pretty small and colored - but: there is NO such line with a "dropdown" class - I checked the whole code at least three or four times
7. Unfortunately I am not skilled enough (yet) to export the whole text so I could have added it here
8. I have no idea how to get back into RuneAudio by the help of the mouse connected to the 7" screen, so I had to reboot via webbrowser (remotely).

Any ideas already what is wrong here? Is the missing codeline something which should have shown up?
Raimund

Addit:
When I am opening the source code in my webbrowser (laptop remote access to runeaudio) then I find the code lines with the dropdown class. Trying to open the websource code via the waveshare display -> no chance; when opening other items like "View DOM Source" or "View Source" the screen gets dark for about 5sec and returns with the login screen to runeaudio like it is shown for a few seconds while booting into the graphic screen. After that the display hangs at this point, while music ist still playing and the remote access via LAN/WLAN and a webrowser still works.

« Previous Page Next Page »