wellenvogel
commented
3 months ago 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 https://github.com/wellenvogel/avnav/blob/d85542ca45ca7a4ae62bb36f8cfd963cf95a0f1d/viewer/components/CanvasGaugeDefinitions.js#L60). 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
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: