user icons

User Symbols

Since version 20201030.

A couple of the symbols used in AvNav can be adapted to your preferences. You can resize the existing symbols, set a couple of properties or replace them by own symbols.

If you are going to use your own symbols you need to upload them as .png files into the images directory - see description for user files.

The symbols you are going to change need to be described in a json file (images.json) in the user directory.

An example of this file may look like:

{ "boatImage": { "anchor": [20,0], "size":[40,71] }, "markerImage":{ "src": "/user/images/Marker.png", "anchor": [15,15], "size":[30,30] }, "aisNormalImage-Sail":{ "src": "/user/images/Sail-Boat-40.png", "anchor": [15,15], "size":[30,30], "courseVectorColor": "#ff00ff", "rotate":false }, "aisNormalImage-Military":{ "anchor": [32,0], "size":[64,120] } }

Since 20230614 there is a base configuration that is used by the system. In the user images.json you can overwrite entries from the base config.

For each symbol you want to replace there must be an entry with the correct name.

Common Images

boatImage boat symbol on navigation page
boat symbol if hdt or hdm are used
boat symbol if zero SOG detect is active and not boat movement
markerImage symbol for active waypoint
anchorImage symbol for the anchor if anchor watch is activated
measureImage symbol for the starting point of the current measure

AIS Images

For AIS icons you have a couple of parameters that you can consider. Each AIS target will be in a particular state - shown by a different color.

State Meaning
Normal AIS target
Warning the closest AIS target with a CPA lower then the threshold
Tracking the AIS target you have selected at the AIS info page
Nearest the closest AIS target

Beside the state AIS icons can be defined based on the kind (Normal/Aton) and a couple of parameters (ship type, navigation status, aid type).

Basically you could define an own icon for each combination of parameters and state. But from 20230614 you can leave the handling of the state (color) to AvNav. To make this possible you need to create the icons in a way that there is one color that can be replaced by the state color. You need to define this color in the parameter "replaceColor" (see the defaults for examples).

Basically you can define the following icons (examples):

Key Meaning
aisImage default Ais icon
aisImage-status1 Icon for AIS targets with navigationl status 1(At Anchor), see the source code for other values.
aisImage-typeFishing Icon for AIS targets with ship type 30(Fishing), see the code for values
aisatonImage default AIS icon for atons
aisatonImage-type9 AIS icon for atons of aid_type 9 (Beacon, Cardinal N), see the code for values

If you do not want to use "replaceColor" you can define different icons depending on the state:

aisWarningImage, aisNormalImage, aisWarningImage-status1, ...

Icon Parameters

For each of the symbols in the file you can specify the following parameters:
src The source url for the image. Normally /user/images/XYZ.png for a file that has been uploaded to the images folder.
If you do not specify this parameter the system will use the built in symbol. You still can e.g. alter the size.
Your image files should have a reasonable size (e.g. 2x the specified size) - but not too large as otherwise the performance could suffer. If you have vector graphics (like svg) you can use a program like inkscape to create png's from them.

size [width,height] - must be specified as an array - see the example. This defines the size the image will be scaled to.
If you did not specify the src parameter, size applies to the built in image.

anchor [x,y] - the point (related to the image's width, height coordinates) to be anchored at the item's position on the map.
rotate true or false - if you set this to false the symbol will not be rotated according to its course. not for markerImage
courseVector true or false - if you set this to false, no course vector for this symbol is displayed. not for markerImage
courseVectorColor the color for the course vector. This allows you to adjust the course vector color to the image colors. not for markerImage
(since 20230614)
The color to be replaced by the state color. only ais...Image
(since 20230614)
An array [x,y] for the base text offset. The system will add some additional offset based on the course (mainly y). The x value must be related to the size of your icon. only ais...lImage

Parameters not being provided will be replaced by defaults. You can also only provide some parameters without an src attribute - this way you can e.g. change the size of AIS symbols based on there type. Normally you also have to adapt the anchor parameter if you change the size.

When you edit the images.json you have to be careful to create valid json. When using the AvNav edit function at the Files/Download page (sub page ) syntax will be automatically checked when saving the file.

After you saved the file, you need to reload AvNav.