Some tweaks possible ?

[matlo74]

Hi

I would like to say thank you for this great app you provided. I replaced a squeezebox with a Pi3 and rune audio connected to my oppo by USB B.

I tried to search the following in the forum without success :

- my 7" official display light off after 15mn. Is it possible to have a bigger delay or deactivate the screensaver ? I found something like xset off but not sure how to use it as I am a newbie
- volume is fixed into the settings to 100%. So I don't need to see the volume in the interface. Would it be possible to change the interface by removing this button and enlarge the album cover instead ?

Thanks in advance

Best regards

Mat

[hondagx35]

Hi Mat,

- my 7" official display light off after 15mn.

This should not be the case, because power management is turned of with the latest build.
Please post the output from:

Code: Select all

 cat /root/.xinitrc

Mine looks like this:

Code: Select all

#!/bin/bash
export XDG_CACHE_HOME="/tmp/.cache" &
export DISPLAY=":0" &

# start the touchscreen calibration utility
# needed for some screens (Pollin 7" tft)
# for this to work you have to disable loading midori
#xinput_calibrator &

# turn off display power management
xset -dpms &

# turn off screensaver
xset s off &
...


Would it be possible to change the interface by removing this button and enlarge the album cover instead ?

The interface can be tweaked by adapting "/root/.local/share/midori/styles/local-styles.css"

to get something like this (on a local browser / tft connected to HDMI / DSI)

disable-volume.png (769.98 KiB) Viewed 1679 times

you have to add this

Code: Select all

    #volume-knob { display: none; }
   
   .col-sm-4 {
       width: 50% !important;
   }
   
   #cover-art {
       margin: -150 !important;
      max-width: 480px !important;
      margin-top: -150px !important;
   }
   
   #currentartist, #currentsong, #currentalbum{
       width: 50% !important;
   }
   
   #overlay-playsource-open {
      width: 100% !important;
   }
   
   #playlist-position {
       display: block !important;
      width: 50% !important;
   }
   
   #overlay-social-open {
       display: none !important;
   }

   #format-bitrate {
       width: 50% !important;
   }


Frank

[matlo74]

Hi frank

thanks for your answer.

Strange because i have the right parameters :

Code: Select all

#!/bin/bash
export XDG_CACHE_HOME="/tmp/.cache" &
export DISPLAY=":0" &

# start the touchscreen calibration utility
# needed for some screens (Pollin 7" tft)
# for this to work you have to disable loading midori
#xinput_calibrator &

# turn off display power management
xset -dpms &

# turn off screensaver
xset s off &

# start the window manager without titlebar and mouse
matchbox-window-manager -use_titlebar no -use_cursor no &

# install multimedia keyboard shortcuts
xbindkeys &

# start midori in privat mode with fullscreen display
midori -p -e Fullscreen http://localhost


thank you for the code to change the UI. I did it and reboot. Nothing has changed in the Web U of my browser. Something I do wrong ?

Mat

[rikardo1979]

to get something like this

disable-volume.png

you have to add this

Code: Select all

    #volume-knob { display: none; }
   
   .col-sm-4 {
       width: 50% !important;
   }
   
   #cover-art {
       margin: -150 !important;
      max-width: 480px !important;
      margin-top: -150px !important;
   }
   
   #currentartist, #currentsong, #currentalbum{
       width: 50% !important;
   }
   
   #overlay-playsource-open {
      width: 100% !important;
   }
   
   #playlist-position {
       display: block !important;
      width: 50% !important;
   }
   
   #overlay-social-open {
       display: none !important;
   }

   #format-bitrate {
       width: 50% !important;
   }


Frank

this is something I am interested into :0 I give it a try tonight
Thank you Frank

[hondagx35]

Hi Mat,

you asked about the official 7" screen.

my 7" official display light off after 15mn.

The changes only will effect the local browser on the 7" screen or a connected HDMI monitor.

Frank

[rikardo1979]

Hi Mat,

you asked about the official 7" screen.

my 7" official display light off after 15mn.

The changes only will effect the local browser on the 7" screen or a connected HDMI monitor.

Frank

aoh,,,so is there a way to remove this and adapt it same way on every device which open the web gui?

[hondagx35]

Hi rikardo1979,

so is there a way to remove this and adapt it same way on every device which open the web gui?

No, not the easy way. To change the user interface for all browsers you have to modify RuneAudio by itself.

But you can use a technique called "override CSS stylesheets" with most browsers.
So for example with Firefox you have to setup a file "userContent.css" in your local profile.
Please read this for a detailed description.

The file "userContent.css" should look like this:

Code: Select all

@-moz-document domain(runeaudio) {
    body {
       -webkit-user-select: none;
       user-select: none;
        font-size: 24px !important;
    }

    /*
    html {
        overflow: hidden;
    }
*/
    #volume-knob { display: none; }
   
   .col-sm-4 {
       width: 50% !important;
   }
   
   #cover-art {
       margin: -150 !important;
      max-width: 480px !important;
      margin-top: -150px !important;
   }
   
   #currentartist, #currentsong, #currentalbum{
       width: 50% !important;
   }
   
   #overlay-playsource-open {
      width: 100% !important;
   }
   
   #playlist-position {
       display: block !important;
      width: 50% !important;
   }
   
   #overlay-social-open {
       display: none !important;
   }
   
   #format-bitrate {
       width: 50% !important;
   }
   
   a[href^="/settings/"] {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }

    #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: 0px 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;
    }
}

Take care to adapt the first line to your needs:
- @-moz-document domain(runeaudio)
- @-moz-document domain(runeaudio.local)
- @-moz-document domain(192.168.0.40)

Frank

[rikardo1979]

Hi rikardo1979,

so is there a way to remove this and adapt it same way on every device which open the web gui?

No, not the easy way. To change the user interface for all browsers you have to modify RuneAudio by itself.



Frank

I may look into this maybe I going to lear something

Thanks Frank

[matlo74]

Thanks frank for your prompt answers. I only tested my browser on my laptop that's why there is no change. I will give it a try on the 7 display tonight

Mat

[matlo74]

Hello Frank

It works like a charm. I can see the cover 4 meters away. I have now to try enlarge tile of the song and artist and done !

thanks for your help

Mat