config_js

Gulp merges config.js into config.default.js (config.default.js will be overwritten). This is no deep merge, i.e. you always need to add complete arrays or objects like nodeInfobox or supportedLocale to your config.js. You can use JS and functions to create new node details rows.

config.default.js contains settings like supportedLocale or maxAge config.js contains community specific settings like statistic images or siteName (and the values/arrays/objects you want to overwrite in config.default.js)

config.js

dataPath (string/array)

dataPath needs a path/URL with meshviewer.js provided in an array. Don't forget the trailing slash! Also, proxying the data through a webserver will allow brotli or deflat/gzip which will greatly reduce bandwidth consumption. The header Access-Control-Allow-Origin: "*" should be added to allow local development.

Single data source

'dataPath' : [
    'https://regensburg.freifunk.net/data/'
]

Multiple data sources

'dataPath' : [
    'https://regensburg.freifunk.net/data/',
    'https://bremen.freifunk.net/data/'
]

siteName (string)

Set this to match your community name. It's used in several places.

'siteName': 'Freifunk Regensburg'

mapLayers (List)

A list of objects describing the map layers. Each object has at least the properties name, url and config.

• A list of some possible layers available: Example layers and configuration, but every source supporting the used standard will work.
• Layer provider list for meshviewer

mode (string, optional)

Allows to load an additional style for a night mode or a similar use case. It is possible to load the stylesheet inline or with a link-tag. Inline avoids re-rendering and possible issues with label-layer updates. It is important to add the following attributes: class="css-mode mode-name" media="not".

Default mode is night which is added inline in index.html

'mode': 'night'

html/index.html

 <link rel="stylesheet" class="css-mode mode-name" media="not" href="mode-name.css">

or

<style class="css-mode mode-name" media="not">
   <inline src="mode-name.css" />
</style>

start (integer, optional)

Start a time range to put this mapLayer on first position.

'start': 19

end (integer, optional)

End a time range for first map. Stops sort this mapLayer.

'end': 7

fixedCenter (array[array, array])

This sets the initial area shown on loading the map. Chose exactly two locations. Everything between those two locations will be displayed. Nodes outside the initial `fixedCenter`` will be visible then you use map controls like zoom or moving around on the map.

Examples for fixedCenter:

'fixedCenter': [
  [
    49.3522,
    11.7752
  ],
  [
    48.7480,
    12.8917
  ]
],

nodeInfos (array, optional)

This option allows to show node statistics depending on following case-sensitive parameters:

• name - header of statistics segment in the infobox

• href - absolute or relative URL to statistics image

• image (required) - absolute or relative URL to image,

  can be the same like href

• title - the image title tag (also used as mouse hover)

To insert variables in either href, image or title you can use the case-sensitive template strings {NODE_ID}, {NODE_NAME}, {LOCALE} and {TIME} (as cache-breaker).

Examples for nodeInfos:

'nodeInfos': [
  { 
    'name': 'Clientstatistik',
    'href': 'stats/dashboard/db/node-byid?var-nodeid={NODE_ID}',
    'image': 'stats/render/dashboard-solo/db/node-byid?panelId=1&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&var-host={NODE_NAME}&_t={TIME}',
    'title': 'Knoten {NODE_ID}'
  },
  {
    'name': 'Uptime',
    'href': 'stats/dashboard/db/node-byid?var-nodeid={NODE_ID}',
    'image': 'stats/render/dashboard-solo/db/node-byid?panelId=2&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&_t={TIME}',
    'title': 'Knoten {NODE_ID}'
  }
]

In order to have statistics images available, you have to set up an instance of each Prometheus and Grafana.

globalInfos (array, optional)

This option allows to show global statistics on statistics page depending on following case-sensitive parameters:

• name - header of statistics segment in the infobox

• href - absolute or relative URL to statistics image

• image (required) - absolute or relative URL to image,

  can be the same like href

• title - the image title tag (also used as mouse hover)

To insert the variables locale or time (as cache-breaker) in either href, image or title you can use the case-sensitive template strings {LOCALE} and {TIME}.

Examples for globalInfos using Grafana server rendering:

'globalInfos': [
  { 
    'name': 'Wochenstatistik',
    'href': 'stats/render/render/dashboard-solo/db/global?panelId=1&fullscreen&theme=light&width=600&height=300',
    'image': 'nodes/globalGraph.png',
    'title': 'Bild mit Wochenstatistik'
  }
]

linkInfos (array, optional)

This option allows to show link statistics depending on the following case-sensitive parameters:

• name - header of statistics segment in the infobox

• href - absolute or relative URL to statistics image

• image (required) - absolute or relative URL to image,

  can be the same like href

• title - the image title tag (also used as mouse hover)

To insert the source or target variables in either href, image or title you can use the case-sensitive template strings {SOURCE_ID}, {TARGET_ID}, {SOURCE_MAC}, {TARGET_MAC}, {SOURCE_ADDR}, {TARGET_ADDR}, {SOURCE_NAME}, {TARGET_NAME}, {LOCALE} and {TIME} (as cache-breaker).

'linkInfos': [
  {
    'name': 'Linkstatistik',
    'href': 'stats/dashboard/db/links?var-source={SOURCE_ID}&var-target={TARGET_ID}',
    'image': 'stats/render/dashboard-solo/db/links?panelId=1&fullscreen&theme=light&width=800&height=600&var-source={SOURCE_ID}&var-target={TARGET_ID}&_t={TIME}',
    'title': 'Bild mit Linkstatistik'
  }
]

siteNames (array, optional)

In this array name definitions for site statistics and node info can be set. This requires one object for each site code. This object must contain:

• site - the site code

• name - the displayed name for this site

If neither siteNames nor showSites are set, site statistics and node info won't be displayed.

Example for siteNames:

  'siteNames': [
    {
      'site': 'ffrgb',
      'name': 'Regensburg'
    },
    {
      'site': 'ffrgb-dummy',
      'name': 'Regensburg Test'
    }
  ]

linkList (array, optional)

Defines an additional list of links displayed in the infobox. It can be used for links to legal notice, web or stats:

• title - the image title tag (also used as mouse hover) link

• href - URL of the link

Example for linkList:

    'linkList': [
      {
        'title': 'Impressum',
        'href': '/verein/impressum/'
      },
      {
        'title': 'Datenschutz',
        'href': '/verein/datenschutz/'
      }
    ]
]

geo (array, optional)

The definition for additional custom GeoJSON objects to be displayed in Meshviewer.

• json - geoJSON (javascript allowed e.g. load external json)

• option - style or other options

Multiple GeoJSON examples

Example for geo:

geo: [
      {
        json: function () {
          return Promise.all([
              // Content
          ]);
        },
        option: {
          style: {
            color: '#e23535',
            weight: 5,
            opacity: 0.4,
            fillColor: '#6de922',
            fillOpacity: 0.1
          }
        }
      }
    ]

config.default.js

reverseGeocodingApi (string)

Settings for a reverse proxy or your own geocoding server used by the location-picker. Setting up this will enhance data privacy and avoid problems caused by script-blockers like NoScript in case you are using different domains for your json data or the map tiles. External URLs need to be considered in your privacy policy.

'reverseGeocodingApi': 'https://nominatim.openstreetmap.org/reverse'

maxAge (string)

Nodes being online for less than maxAge days are considered "new". Likewise, nodes being offline for more than than maxAge days are considered "lost".

'maxAge': 14

maxAgeAlert (integer)

Nodes being offline for more than than maxAge days are considered "lost". Lost will be split up in alert and lost.

'maxAgeAlert': 3

nodeZoom (integer)

The zoom level that is used when clicking on a node or when using a deep-link URL directly to a node. The value 18 is a good default where nearby buildings and streets should be visible.

'nodeZoom': 18

labelZoom (integer)

Min. zoom level from which on the node labels are shown on the map. Note that every level in between labelZoom and maxZoom (defined in mapLayers) has a negative performance impact.

'labelZoom': 13

clientZoom (integer)

The min. level from which on the client dots are visible. Note that every level in between clientZoom and maxZoom (defined in mapLayers) has a negative performance impact.

'clientZoom': 15

nodeAttr (array)

Remove or add node properties in details view. The value can be a node attribute (depth 1) or any of the functions with a name starting with "show" from lib/utils/node.js.

'nodeAttr': [
    // value can be a node attribute (depth 1) or any of the functions with a name starting with "show" from lib/utils/node.js with
    {
      'name': 'node.status',
      'value': 'Status'
    },
    {
      'name': 'node.gateway',
      'value': 'Gateway'
    },
    {
      'name': 'node.coordinates',
      'value': 'GeoURI'
    },
// Remove unwanted attributes    
//    {
//      'name': 'node.contact',
//      'value': 'owner'
//    },
    {
      'name': 'node.hardware',
      'value': 'model'
    },
    {
      'name': 'node.primaryMac',
      'value': 'mac'
    },
    {
      'name': 'node.firmware',
      'value': 'Firmware'
    },
    {
      'name': 'node.uptime',
      'value': 'Uptime'
    },
    {
      'name': 'node.firstSeen',
      'value': 'FirstSeen'
    },
    {
      'name': 'node.systemLoad',
      'value': 'Load'
    },
    {
      'name': 'node.ram',
      'value': 'RAM'
    },
    {
      'name': 'node.ipAddresses',
      'value': 'IPs'
    },
    {
      'name': 'node.update',
      'value': 'Autoupdate'
    },
    {
      'name': 'node.site',
      'value': 'Site'
    },
    {
      'name': 'node.clients',
      'value': 'Clients'
    }
  ]

supportedLocale (array)

Add supported locale (with matching language file in locales/*.js). This will be matched against the browser language setting. Fallback will be the first language in the array.

Example for supportedLocale:

'supportedLocale': [
  'en',
  'de',
  'cz',
  'fr',
  'tr',
  'ru'
]

color (array)

Different color values for all canvas related settings. Couldn't be done via SCSS.

cacheBreaker (string)

Will be replaced in every build to avoid missing or outdated language strings because language.js is not up to date.

Fixed value (vy0zx).