[Enhancement] Caption readability on Small Screens

[metzger100]

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:

• Caption weight: 1
• Viewer component weight: 9

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:

[wellenvogel]

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]

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