RuneUI optimization for 7" 800x480 (general)

washburn_it

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

hondagx35

Hi Roberto,

you can use custom css like i did in my image (local browser).
My local-styles.css for midori:

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

washburn_it

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

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

hondagx35

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

washburn_it

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

Regards,

Roberto

Dohmar

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 ;

And the code

[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

hondagx35

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

Dohmar

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

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