[Enhancement] Radial Gauges as Compass readability on Small Screens

[metzger100]

Context:
I use AvNav on my boat with an old Medion 7" Tablet. Given that I am about 2.5 meters away from the tablet, the viewing distance is quite large. While most of the displayed values are easily readable, I am experiencing difficulty with the readability of the radial gauge compass.

Problem:
As shown in the screenshot below, there is a significant amount of white space around the RadialMajorTicks and the RadialValueBox, which results in the text being too small to read comfortably from a distance.

Even though the viewer component takes up a substantial portion of the screen, the important information remains difficult to discern due to the underutilized space.

Observation:
Upon reviewing the source code, I noticed that the radial gauge is implemented using an external dependency, CanvasGauges. It appears that this library does not currently support dynamic scaling of the MajorTick text and ValueBox text based on the size of the screen or the available white space. But I also noticed that wellenvogel forked that library for avnav, so maybe this issue should be opened in that repo instead. Please inform me if that is the case. I will move it over there than.

Feature Request:
It would be highly beneficial if the text boxes within the radial gauge could dynamically scale according to the screen size or the available white space. This enhancement would greatly improve the readability of the compass gauge on smaller displays, especially from a distance.

Potential Solutions:

• Allow the text size for MajorTicks and ValueBox to be adjustable via configuration.
• Implement dynamic scaling of these text elements based on the component’s overall size.

[wellenvogel]

For the value you can use the valueFontFactor. Unfortunately it works somehow invers - i.e. lower values give a bigger font - I have to correct this.
And also the positioning is not really great for bigger font sizes. So you could add to your user.css:

.widget.canvasGauge .gaugeValue{
  top: calc(50% - 0.5em) !important;
}

For adapting the font size of the ticks you need to set fontNumbersSize at the gauge.
This is not directly possible via the layout editor.
But you can easily add an own compass widget that supports this (refer to https://www.wellenvogel.net/software/avnav/docs/hints/userjs.html?lang=en#h2:Widgets).

An example (copied the definition from

avnav/viewer/components/CanvasGaugeDefinitions.js

Line 60 in d85542c

//Compass

).
Add to your user.js:

var userCompass={
        /**
         * a unique name to select the widget
         */
        name: "userCompass",
        type: "radialGauge",
        "unit":"°",
        "formatter":"formatDirection",
        "drawValue":true,
        "animationDuration": 1000,
        "animationRule":"linear",
        "minValue": 0,
        "maxValue": 360,
        "majorTicks": [
        "N",
        "NE",
        "E",
        "SE",
        "S",
        "SW",
        "W",
        "NW",
        "N"
    ],
        "minorTicks": 9,
        "highlights": [
    ],
        "needleCircleSize":0,
        "needleCircleOuter":false,
        "needleType":"line",
        "needleStart":65,
        "needleEnd":99,
        "needleWidth":5,
        "borderShadowWidth":0,
        "valueBox": false,
        "ticksAngle": 360,
        "startAngle": 180,
        "animationTarget": "plate",
        colorPlate:"rgba(255, 255, 255, 0)"
    };
    /**
     * the definitions of parameters that the user can change
     * in the layout editor (beside the default parameters)
     * each parameter will become part of the data that the widget will receive
     *
     */
    var userCompassParameters={
      fontNumbersSize:{type:'NUMBER',default: 32},
    };
   
    avnav.api.registerWidget(userCompass,userCompassParameters);

With this widget you can set the size of the ticks text in the layout editor.
Just be sure to always reload the web page (shift+reload!) after changing user.css/user.js.

Btw: If you are unhappy with just the characters you could also use numbers for the ticks or whatever you want...
And you have the option to set any of the config values you have in canvas gauges - either directly as fixed parameters - or as editable parameters you can change in the layout editor.

[metzger100]

Hey Wellevogel,
thank you very much for this detailed guide. It’s not something I take for granted. However, I would like to point out that this solution might be challenging for someone who isn’t very technically inclined, though there seems to be a need for optimizing this widget. I also want to mention that I have thoroughly tested AvNav, and the instrument visualization works exceptionally well, aside from the two issues I’ve opened in the repository. As for the map interface, it leaves absolutely nothing to be desired.
Greetings Metzger!