Meshviewer

A web-app to visualize nodes and links on a map for Freifunk open mesh network.

Main differences to https://github.com/ffnord/meshviewer

Some similar features might have been implemented/merged

• Forcegraph rewrite with d3.js v4
• Map layer modes (Allow to set a default layer based on time combined with a stylesheet)
• Automatic updates for selected node or list (incl. image stats cache-breaker)
• Node filter
• Zoom level for clicking on a node (nodeZoom) is definable independently from the maximum zoom level 22
• Formatted Code
• Translation support - https://crowdin.com/project/meshviewer - Contact us for new languages
  • Currently available: en, de, fr & ru
• Grunt inline for some css and js - less requests
• Icon font with needed icons only
• Grunt upgraded to v1.x (Tested with Node.js 4/6 LTS, 7 on Linux, 7 OSX & W**)
  • css and some js moved inline
• Yarn/npm in favour of bower
  • Load only moment.js without languages (Languages are included in translations)
  • unneeded components removed (es6-shim, tablesort, numeraljs, leaflet-providers, jshashes, chroma-js)
• RBush v2 - performance boost in last versions (positions, labels and clients on the map)
• Ruby dependency removed
• FixedCenter is required
• Sass-lint, scss and variables rewritten for easy customizations/adjustments
• Cross browser/device support improved (THX@BrowserStack)
• Leaflet fork with a patch to avoid IE/Edge crashes
• Yarn package manager in favour of npm (npm still works)
• Configurable reverse geocoding server
• A lot more in the commit history

Demo

Embedded: https://regensburg.freifunk.net/netz/karte/
Standalone: https://regensburg.freifunk.net/meshviewer/

Known instances

Community	Instance	Repo GitHub
Freifunk Bremen	https://map.bremen.freifunk.net/	FreifunkBremen/meshviewer-ffrgb

Dependencies

• yarn (npm fallback)
• grunt-cli

Installing dependencies

npm is still possible to use, but yarn is much faster https://yarnpkg.com/

Install yarn package-manager:

Choose your OS and install yarn https://yarnpkg.com/en/docs/install

Execute these commands on your server as a normal user to prepare the dependencies:

git clone https://github.com/ffrgb/meshviewer.git
cd meshviewer
yarn
# Only needed if no global grunt is installed
yarn global add grunt-cli

Building

Just run the following command from the meshviewer directory:

grunt

This will generate the folder build/ that will contain all required files.

Development

Use grunt serve for development.

Support/Help

• IRC on irc.hackint.org
  • #freifunkRGB
  • #meshviewer (development-channel)
• Feel free to open an issue for a problem or an idea.

Customize style

Start your development and edit files in scss/custom/. Additional information in file comments.

Configure

Change config.jsonto match your community.

dataPath (string/array)

dataPath can be either a string containing the address of a Nodes.json v2 compatible backend (e.g. ffmap backend) or an array containing multiple addresses. Don't forget the trailing slash! Also, proxying the data through a webserver will allow GZip and thus will greatly reduce bandwidth consumption. It may help with firewall problems too.

siteName (string)

Change this to match your communities' name. It will be used in various places.

maxAge (integer)

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

maxAgeAlert (integer)

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

nodeZoom (integer)

Max level to be applied by clicking a node or opening a node. Value 18 is a good default, so nearby buildings and streets should be visible.

labelZoom (integer)

Min. level for node labels shown on the map. Labels aren't shown in first zoom levels and need performance.

clientZoom (integer)

Min. level to set starting layer for client dots on map.

nodeInfobox

contact (bool, optional)

Setting this to false will hide contact information for nodes.

hardwareUsage (bool, optional)

Setting this to false will hide bars of memory usage and load avg for nodes.

mapLayers (List)

A list of objects describing map layers. Each object has at least name, url and config properties. Example layers and configuration (map against config.json).

mode (string, optional)

Allows to load a additional style for a night mode or similar use case. Possible are inline style or link. Inline avoids re-rendering and maybe issues with label-layer update. Important are class "css-mode mode-name" and media "not".

Default is night.css inline in 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.

end (integer, optional)

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

fixedCenter (array[array, array])

Choose a rectangle that must be displayed on the map. Set 2 Locations and everything between will displayed.

Examples for fixedCenter:

// Set a visible frame
"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 infobox
• href absolute or relative URL to statistics image
• image (required) absolute or relative URL to image, can be the same like href
• title for the image

To insert current variables in either href, image or title you can use the case-sensitive template string {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 infobox
• href absolute or relative URL to statistics image
• image (required) absolute or relative URL to image, can be the same like href
• title for the image

In contrast to nodeInfos there is no template substitution in href, image or title.

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 infobox
• href absolute or relative URL to statistics image
• image (required) absolute or relative URL to image, can be the same like href
• title for the image

To insert the source or target variable in either href, image or title you can use the case-sensitive template strings {SOURCE_ID}, {TARGET_ID}, {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 saved. This requires one object for each site code. This object must contain:

• site the site code
• name the defined written name for this site code

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"
    }
  ],

supportedLocale (array)

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

Example for supportedLocale:

"supportedLocale": [
  "en",
  "de",
  "fr"
]

cacheBreaker (string)

Will be replaced in every build to avoid missing or outdated language strings, because language.json isn't up to date.

Fixed value (y0z).

Sponsoring / Supporting

• BrowserStack for providing an awesome testing service for hundreds of browsers
• Travis CI for building meshviewer on every push and pull request
• Scrutinizer CI for testing code quality on every push and pull request
• Crowdin for providing an easy non-developer translation environment

These tools need a lot of infrastructure and provide a free account for open source software.