RuneUI optimization for 7" 800x480 (general)

Suggestions/requests/ideas for RuneAudio core features and functions

RuneUI optimization for 7" 800x480 (general)

Postby washburn_it » 27 Nov 2015, 11:10

Hi,

is it possible to have an UI optimization (if not already available) for existing (general) 7" LCD 800x480, (not only the Raspberry PI 7")?
I'm using a Waveshare 7" with HDMI input (and touchscreen) and the UI is displayed through the Epiphany browser (fullscreen).
To fit everything in the main screen I had to reduce the page zoom by some factor but then the "play, stop, forward and menu" buttons are pretty small and, since it will be used as media center in my car, I must be very "precise" to click with the finger on those buttons.
I don't know if there are technical issues but, maybe, a kind of configuration menu where one may set the size of those buttons and volume and time indicators? (considering these last two as if they were inside a square).
Best, regards.

Roberto
washburn_it
 
Posts: 42
Joined: 11 Oct 2015, 13:42

Re: RuneUI optimization for 7" 800x480 (general)

Postby hondagx35 » 27 Nov 2015, 17:22

Hi Roberto,

you can use custom css like i did in my image (local browser).
My local-styles.css for midori:
Code: Select all
body {
   -webkit-user-select: none;
   user-select: none;
    font-size: 24px !important;
}

/*
html {
    overflow: hidden;
}

#volume-knob { display: none; }
*/

#section-sources, #section-network, #section-settings {
   animation: example 5s linear 2s infinite alternate !important;
   -webkit-animation: example 5s linear 2s infinite alternate !important;
}

.container {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.knobs {
    margin-top: 0px !important;
    line-height: 0 !important;
}

.col-sm-12 {
    width: 100% !important;
    height: 0 !important;
   visibility: hidden !important;
}

#currentalbum  .notag {
   font-size: 18px !important;
}

#currentalbum  {
    margin-bottom: 5px !important;
}

#menu-top {
   height: 47px !important;
   margin: 10px 0px 0px 0px !important;
}

#menu-top .dropdown .dropdown-menu {
    font-size: 24px !important;
}

#menu-top .playback-controls {
    left: 40% !important;
   width: 400px !important;
}

#menu-bottom {
   height: 48px !important;
}

#menu-bottom li a {
    font-size: 24px !important;
}

.dropdown-menu {
    font-size: 24px !important;
}

#currentartist, #currentalbum {
    font-size: 24px !important;
}

.btn {
    font-size: 24px !important;
}

.btnlist.btnlist-bottom .btn {
    font-size: 36px !important;
   margin-top: 5px !important;
   padding: 0px 20px !important;
}

.pl-nextPage, .db-nextPage, .pl-lastPage, .db-lastPage, .btnlist-bottom {
    bottom: 50px !important;
    padding: 0px 20px !important;
}

.btnlist-top {
    top: 60px !important;
    padding: 0px 10px !important;
   height: 50px !important;
}

.btnlist-bottom {
    height: 60px !important;
    font-size: 20px !important;
}

#db-search input, #pl-search input {
    height: 42px !important;
}

#playlist, #database {
    padding: 120px 0px !important;
}

#playlist-entries li {
    font-size: 24px !important;
}

#playlist-entries .pl-action {
    font-size: 24px !important;
}

#database-entries li {
    font-size: 24px !important;
}

#database-entries .db-action {
    font-size: 24px !important;
}

.col-sm-10 {
    width: 75% !important;
}

.col-sm-2 {
    width: 25% !important;
}

.input-lg {
    height: 60px !important;
    font-size: 24px !important;
}

.help-block, .help-inline {
    font-size: 18px !important;
}


As far as i know, the next version will be more touch friendly.

Frank
User avatar
hondagx35
 
Posts: 3041
Joined: 11 Sep 2014, 22:06
Location: Germany

Re: RuneUI optimization for 7" 800x480 (general)

Postby washburn_it » 30 Nov 2015, 00:46

It worked thank you.
Time ago you told me that there is a way to "launch" a "shutdown" remotely to the RuneAudio "server" from the "client" (the one where there is the browser), how could I do it?
It would be useful for me since I can shutdown by pushing a button on the "Raspbian PI" that, through a Python script, launch the command "shutdown -h now" but it only shutdowns the "local" PI.
What I would like to do is to shutdown both PIs with the single button, the python script would launch the command to the other PI (connected through ethernet).
Thank you, regards.

Roberto
washburn_it
 
Posts: 42
Joined: 11 Oct 2015, 13:42

Re: RuneUI optimization for 7" 800x480 (general)

Postby washburn_it » 10 Dec 2015, 10:40

Hi Frank,

as I stated in my previous post, the "css" solution worked but....strangely it seems that the items that got bigger lost their "touch" precision.
I try to explane: if I touch, for example, on the "Library" link (but it's the same for the other two links) at the bottom of the main page to display the library page, I have to touch almost outside from its "blue area", on the top of this area...it seems that the "clickable" area moved in another position, sligthly to the top.
Same thing with "back, play, stop, forward" buttons....to have the "touch-click" event I have to click a bit below the button, almost on the black background.
Did you experience the same thing?
If I open the "Library" page and I click on one of the buttons, everything is correct...same for the other pages.
It seems that the problem is only on the main page.
If I close the browser (thus returning to the Raspbian desktop) everything is very precise, I mean if I click on an icon or button (the menu button for example) the "touch-click" event is recognized exactly where I touch.
Should I set something else?
Thank you, regards.

Roberto
washburn_it
 
Posts: 42
Joined: 11 Oct 2015, 13:42

Re: RuneUI optimization for 7" 800x480 (general)

Postby hondagx35 » 10 Dec 2015, 18:21

Hi Roberto,

thank you for the report.

Did you experience the same thing?


Yes i have the same problem on my system with the 7" Pi touch tft, but no idea what is going on.

Frank
User avatar
hondagx35
 
Posts: 3041
Joined: 11 Sep 2014, 22:06
Location: Germany

Re: RuneUI optimization for 7" 800x480 (general)

Postby washburn_it » 11 Dec 2015, 09:53

Well, as english use to say "a trouble shared is a trouble halved" ahah :D

Regards,

Roberto
washburn_it
 
Posts: 42
Joined: 11 Oct 2015, 13:42

Re: RuneUI optimization for 7" 800x480 (general)

Postby Dohmar » 30 Apr 2016, 02:59

Hi Guys
I've tried to modify the css to suit the 7" touchscreen better, but I can't tweak it right... the bottom row has been made larger but the buttons aren't matching the height of the footer. Also, I've increased the size of the top bar but the menu button isnt aligned in the middle, and the rune audio logo is still small.
Screenshot of how it looks ;
Image

And the code
Code: Select all
[root@hifi styles]# cat local-styles.css
    body {
       -webkit-user-select: none;
       user-select: none;
        font-size: 30px !important;
    }

    /*
    html {
        overflow: hidden;
    }

    #volume-knob { display: none; }
    */

    #section-sources, #section-network, #section-settings {
       animation: example 5s linear 2s infinite alternate !important;
       -webkit-animation: example 5s linear 2s infinite alternate !important;
    }

    .container {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .knobs {
        margin-top: 0px !important;
        line-height: 0 !important;
    }

    .col-sm-12 {
        width: 100% !important;
        height: 0 !important;
       visibility: hidden !important;
    }

    #currentalbum  .notag {
       font-size: 18px !important;
    }

    #currentalbum  {
        margin-bottom: 5px !important;
    }

    #menu-top {
       height: 60px !important;
       margin: 0px 0px 0px 0px !important;
    }

    #menu-top .dropdown .dropdown-menu {
        font-size: 30px !important;
    }

    #menu-top .playback-controls {
        left: 40% !important;
       width: 400px !important;
    }

    #menu-bottom {
       height: 60px !important;
    }

    #menu-bottom li a {
        font-size: 30px !important;
    }

    .dropdown-menu {
        font-size: 30px !important;
    }

    #currentartist, #currentalbum {
        font-size: 30px !important;
    }

    .btn {
        font-size: 30px !important;
    }

    .btnlist.btnlist-bottom .btn {
        font-size: 36px !important;
       margin-top: 5px !important;
       padding: 0px 20px !important;
    }

    .pl-nextPage, .db-nextPage, .pl-lastPage, .db-lastPage, .btnlist-bottom {
        bottom: 50px !important;
        padding: 0px 20px !important;
    }

    .btnlist-top {
        top: 50px !important;
        padding: 0px 10px !important;
       height: 50px !important;
    }

    .btnlist-bottom {
        height: 60px !important;
        font-size: 40px !important;
    }

    #db-search input, #pl-search input {
        height: 42px !important;
    }

    #playlist, #database {
        padding: 120px 0px !important;
    }

    #playlist-entries li {
        font-size: 40px !important;
    }

    #playlist-entries .pl-action {
        font-size: 40px !important;
    }

    #database-entries li {
        font-size: 40px !important;
    }

    #database-entries .db-action {
        font-size: 40px !important;
    }

    .col-sm-10 {
        width: 75% !important;
    }

    .col-sm-2 {
        width: 25% !important;
    }

    .input-lg {
        height: 60px !important;
        font-size: 40px !important;
    }

    .help-block, .help-inline {
        font-size: 18px !important;
    }
[root@hifi styles]#


I thought I had the right variables modified but evidently not
Any help would be appreciated
Cheers
-D
Dohmar
 
Posts: 79
Joined: 14 Mar 2016, 12:27

Re: RuneUI optimization for 7" 800x480 (general)

Postby hondagx35 » 30 Apr 2016, 11:05

Hi Dohmar,

I've tried to modify the css to suit the 7" touchscreen better,

What are the things you don't like?

Best way to do this:
- use Firefox on your PC
- right click on the element you like to change
- select inspect element
- modify the css settings
- make the same changes in "local-styles.css "

I would start with a fresh "local-styles.css" and only use it as a reference.
This file was my first attempt to optimize the appearance.

Frank
User avatar
hondagx35
 
Posts: 3041
Joined: 11 Sep 2014, 22:06
Location: Germany

Re: RuneUI optimization for 7" 800x480 (general)

Postby Dohmar » 30 Apr 2016, 23:40

Hi Frank
Good advice, I'll give it a go - thanks
What I dont like is the size of the buttons, theyre too small for my fat fingers. I'd like to increase the size of the header and footer, as well as the general font when displaying the contents of a library. The layout in general is fine, I just need things to be bigger (Also would be nice to make the progress circle and the volume circle take up more space)

-D
Dohmar
 
Posts: 79
Joined: 14 Mar 2016, 12:27

Re: RuneUI optimization for 7" 800x480 (general)

Postby Dohmar » 01 May 2016, 05:06

I've had a play around and tried what you suggested with the inspecting item, however the browser output doesnt show the line at the bottom because they're using different css's.

If I increase menu-bottom height it increases the width of the footer, but it doesnt make the buttons any taller, so the buttons are anchored to the top edge of the footer. Increasing the font has no bearing on the button height.

Does anyone know how to increase the size of the 3 buttons on the bottom? If you change menu-bottom height to 60 pixels you'll see what I mean

-D
Dohmar
 
Posts: 79
Joined: 14 Mar 2016, 12:27

support RuneAudio Donate with PayPal


Return to Feature request

Who is online

Users browsing this forum: No registered users and 0 guests