Layout Adaptation
The displays (widgets) on navigation and dashboard pages are controlled by a configuration json file ("layout"). A couple of predefined layouts are included with AvNav. They all have the "system." name prefix. As a user you can define your own layouts and store them (they will have the name prefix "user."). Those user layouts will be stored at a folder "layout" below the BASEDIR (/home/pi/avnav/data on the raspberry). You can directly edit those files, download and upload them - or you can modify the layout using the built in layout editor.
The preferred way of changing a layout should be the layout editor as this is the least error prone way.
The active layout can be set via Settings 
/Layout.
Layout Editor
You can invoke the layout editor via the Settings page , Layouts 
.
This dialog asks for a file name for the layout to be modified. If a system layout is active (that you cannot change) a new 'user' layout with the same name will be created and activated. If the layout already exists you can decide to overwrite it - or just choose a new name. You can still decide at the end of the editing process to discard your changes.
After starting the layout editor a red frame will be displayed - only pages where you can adapt the layout are visible.
By selecting a chart you can open the navigation page as usual.
All widgets are located in so called "panels". Within a panel you can drag and drop the widgets as long as editor mode is active (but you cannot move them from one panel to another one this way).
On the navigation page you can assign different widgets to the panels depending on your display width. On a small display (value can be changed at Settings/small display) you can have different panels than on a large one.
Via 
you
open a dialog to configure the panels on a page.
The available panels are marked red in the screenshot. You can select which panels should be visible - depending on the display mode (small/default). If the "small" checkbox is checked you define a different set up for the small mode. In the example above the top panel is not visible in normal mode, the left panel has a different content in normal and small mode, whereas the bottom panels have the same content both in normal and small mode. At "current conditions" you can select if you are editing the panels for normal or small mode.
Both the bottom panels may have 2 rows of widgets (Setting: "2 widget rows"). Widgets that do not fit any more will be hidden completely.
Widget Dialog
After completing the panel dialog you can move the widgets within the panels or click on a widget or a panel's free space to open the widget dialog.
Depending on the kind of widget the dialog will contain different settings.
If you would like to move the widget to another panel you can select the target panel in the top entry of the dialog.
"Update" will store your changes.
By clicking "New Widget" you can select a new widget from a list of available widgets.
Each widget requires information about the data to display. All displayable data are internally available in a store and each item is addressed by a key.
Depending on the type of widget, the key(s) it uses to fetch the data from the store is either fixed (i.e. built in) or has to be chosen in the dialog. Caption, unit and the css class can be set for most widgets. Assigning a css class is useful if you want to adapt the appearance via css.
Formatter
Most of the widgets need a formatter to convert data from internal format into the display format. In most cases the formatter used by a widget is fixed. Some, however, allow parameters (comma separated list) to be assigned in this dialog - e.g. you can change formatSpeed to convert to m/s instead of kn).
The list of formatters (and their parameters):
| Name | Description | Parameter |
| formatDecimal | format a decimal value | fix, fract, addSpace e.g.: 3,1 |
| formatDistance | distance in nm | one parameter (unit): nm - distance in nm m- distance in m instead of nm km - distance in km instead of nm |
| formatSpeed | speed in kn | one parameter (unit): ms - m/s instead of kn kmh - km/h instead of kn |
| formatDirection | formatting degrees | one parameter: inputRadian - input in rad instead of degrees |
| formatTime | Time value (internal value must be Date) (hh:mm:ss) | |
| formatClock | Time value (internal value must be Date) (hh:mm) | |
| formatDateTime | Date and Time (internal value must be Date) | |
| formatDate | Date (internal value must be Date) | |
| formatString | pass through | |
| formatTemperature | format temperature (since 20210106), input in kelvin | one Parameter (unit): celsius, kelvin |
| formatPressure | format a presssure (since 20210106), input in pa | one Parameter (unit): pa, hpa, bar |
Plugins or custom extensions can potentially add more formatters.
If you do not want to change the existing widget but add a new one - just select "Before" or "After" to insert it.
If the widget supports further parameters they will be displayed in the dialog.
In the example a configuration for a graphics display (internally canvas-gauges is used).
From the navigation page you can switch to the dashboard pages via the main page.
Dashboard Pages
You can configure up to 5 dashboard pages. Each of them can hold up to 5 panels.
On an empty dashboard page you have to start with the panel configuration
- .
You can define a different layout for anchor watch state (this feature is used in dashboard page 1 of default layout).
Dashboard pages without panels will not appear in the live display.
Principally you can also modify the the route editing display (
from
the navigation page) however the currently edited route and
the list of waypoints must remain visible there at all times.
When you are done with the layout editing you still need to save your
layout using the button (red border) on each page.
At this point you can still decide to discard all changes.
The saved layout will immediately become active in your current browser (and will be stored at the server). Other browsers will only use the new layout after reloading the app or changing their active layout.
Layout Download/Upload
Via the Files/Download page 
, subpage you can download/upload/edit and delete the
layout files. The currently active layout and system layouts can only be
downloaded.
If you delete a layout currently loaded by another browser, this browser will write the layout back to the server when it reloads the app - so the layout will reappear.
Special Widgets
In addition to a long list of predefined widgets (like SOG, COG, BRG, AisTargetWidget, ... where you can only change the caption, unit, formatterParameters and css class) there are a couple of special widgets.
Default
This widget internally serves as basis for most simple display widgets. But you can also use in the layout editor it to display custom values.
In any case you need to select a value (the key for the data store) and a formatter.
When clicking "value" you will be prompted to choose from a list of available data.
First of all those are the values predefined internally in AvNav. If you have enabled the signalk integration you will also see all received values from signalk (below vessels/self) with a prefix nav.gps.signalk.
You have to take care to select a formatter that fits the value you selected.
Gauges
As already mentioned AvNav integrates canvas-gauges. AvNav preconfigures a couple of widgets based on this library. Their parameters can be set in the layout editor.
There are linear gauges (linGauge...) or radial gauges (radGauge...).
Via the layout editor only a couple of the possible parameters can be set
directly.
If you want more control or utilize different features of the canvas gauges library you should define own widgets as described in adapting with user specific java script code .
SignalK
The signalk plugin also provides a couple of widgets - they especially contain formatters for values that are otherwise not included in AvNav like signalKCelsius to display temperatures in °C.
They only make sense if you have appropriate signalk data, of course.
Adapting the Look and Feel of a Widget
If you would like to adapt the look and feel of a widget you should add a css class to it. Afterwards you can assign rules to it in your user css.
Own Widgets
With user defined Java Script Code you can easily create your own widgets - both with simple HTML and with canvas based graphics.