search

wellenvogel / avnav

using the raspberry pi as a nav computer
MIT License
85 stars 26 forks source link

[Enhancement] Caption readability on Small Screens #370

Open metzger100 opened 2 weeks ago

metzger100 commented 2 weeks ago

Context:
I use AvNav on my boat with an older Medion 7" Tablet. Given that my viewing distance is approximately 2.5 meters, readability is a key concern. While the size of the widgets/viewer components can be adjusted, the captions above them remain at a fixed size, which becomes unreadable from a distance.

Problem:
Even though I can resize the viewer components to suit my needs, the captions above these components do not scale accordingly. As a result, the captions are difficult to read when viewed from a distance.

Feature Request:
It would be highly beneficial if the height of the captions could be configured relative to the viewer components. A system similar to the existing widget weight configuration could be applied, allowing for a "sub-weight system" within each widget:

Potential Solutions:

  1. Implement a "sub-weight system" within each viewer component to adjust the size ratio between the caption and the viewer component.
  2. Introduce a global "sub-weight system" for all viewer components within the "Edit Page Layout" settings, providing consistent scaling across the interface.

"Edit Page Layout" settings: image

wellenvogel commented 2 weeks ago

Very valid point. There is a least a partial solution - you could scale the caption font sizes via css.

.system_default #gpspage .hfield .infoLeft {
    font-size: 1em !important;
}

Adding this to your user.css will change the caption sizes on the dashboard pages. 1em is just an example - slightly bigger... And as the captions are part of the dynamic sizing widgets it will already adapt dynamically. With the example it becomes valid for the default layout. You can also use other layout names to only set this for some particular layout - or just omit the first part (i.e. .system_default) to set this for all layouts. For the map pages you could set this with:

.system_default .mapPage .widget .infoLeft {
    font-size: 1em !important;
}

By digging a bit deeper into the css stuff you can do a lot of adaptations to the look of AvNav. I always recommend to do this on a desktop/laptop (just connect to your AvNav server with the browser) and use the developer tools of the browser to try things out. By having at least 2 tabs open - one to edit the user.css an one to test the changes (always reload this one) you can easily do a couple of change/test cycles.

metzger100 commented 2 weeks ago

Thank you very much for the detailed guide to fixing it. I’ll try it out next time I visit my boat.