[PROBLEM] font size on 5inch display

[Grimmigenaaier]

Hi there,

Would it be possible to point me to a config file or something where I can play around with the layout, ie font size, of the player... I'm running it on a 5inch 800x480 display, and some people are having difficulty with reading the song title, etc...

Cheers,

[Grimmigenaaier]

Are there no bread crumbs for me?

[Tim Curtis]

Have a look at /var/www/css
moode.css
panels.css

Currently there is no single, global setting that would adjust the UI but we have discussed implementing such a mechanism.

-Tim

[Grimmigenaaier]

Thanks Tim.

I'll have a look at it when I get home.

[Grimmigenaaier]

Have a look at /var/www/css
moode.css
panels.css

Currently there is no single, global setting that would adjust the UI but we have discussed implementing such a mechanism.

-Tim

Hi Tim,

I see that under moode.css there are configurations for different screens. There is one #Pi 7" Touch#... would I be correct in thinking that I can edit this for the 5" Touch screen? Or rather, create a new layout for the 5"?

If so, how do I know which configuration is selected by the player? Where do I set this?

I am not so well spoken in HTML (which this looks like), do you have an explanation for things like .9em, 1.5vmin? I am guessing "em" and "vmin" are variables that contain the screen/panel pixel numbers? verticle minimum, etc...?

If there is a guide that already explains all of this, you can just point me to it.

Thanks for your time.

Cheers.

[swizzle]

There’s kind of a half implemented font size setting in panels.css around line 46, something like

--pbfont:calc(.75em + 1vmin);

changing the .75 number will make the font size larger or smaller in some parts of the interface.

Manually creating a new rule set based on your particular screen is probably the safer bet. In general 1em is the current font size so a number relative to that like .9em is 90% of that. If the font is set in a parent element then the values will be relative to that value (so like the base level the font size is 20px and there’s a div element (a grouping mechanism) sets the font size to .9em then any child elements contained within that set a em based value will use the altered value set by their parent (the div) rather than any document level value. To get around that there’s rem so 1rem will be the default font size for the document. The vmin value here is kind of a trick used to set the font in a way that lets it scale based on screen resolution so that the font displays more legibly on larger screens.