Add Node.js LTS version in travis.yml (#105)

Updated DOP-NRW WMS URL

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
-before_install:
+node_js:
-  - gem install sass
+  - "lts/*"
-  - npm install -g grunt-cli
+  - "node"
 install:
-  - npm install
+  - yarn
-script: grunt
+script: node_modules/.bin/grunt

Gruntfile.js

@@ -17,7 +17,7 @@ module.exports = function (grunt) {
 
   grunt.loadTasks("tasks")
 
-  grunt.registerTask("default", ["bower-install-simple", "lint", "saveRevision", "copy", "sass", "postcss", "requirejs"])
+  grunt.registerTask("default", ["lint", "saveRevision", "copy", "sass", "postcss", "requirejs"])
   grunt.registerTask("lint", ["eslint"])
   grunt.registerTask("dev", ["default", "connect:server", "watch"])
 }

README.md

@@ -1,8 +1,8 @@
-[![Build Status](https://travis-ci.org/plumpudding/hopglass.svg?branch=master)](https://travis-ci.org/plumpudding/hopglass)
+[![Build Status](https://travis-ci.org/hopglass/hopglass.svg?branch=master)](https://travis-ci.org/hopglass/hopglass)
 
 # HopGlass
 
-HopGlass is a frontend for the [HopGlass Server](https://github.com/plumpudding/hopglass-server).
+HopGlass is a frontend for the [HopGlass Server](https://github.com/hopglass/hopglass-server).
 
 # Screenshots
 
@@ -14,29 +14,32 @@ HopGlass is a frontend for the [HopGlass Server](https://github.com/plumpudding/
 
 # Dependencies
 
-- npm
+- NodeJS
-- bower
+- yarn (recommended) or npm
-- grunt-cli
-- Sass (>= 3.2)
 
 # Installing dependencies
 
 Install npm package-manager. On Debian-like systems run:
 
-    sudo apt-get install npm
+    sudo apt-get install nodejs
 
-On Mac you have to install only npm via brew and sass
+**Note:** The official Debian packages for NodeJS are quite old, you might want to check at [NodeSource](https://github.com/nodesource/distributions/blob/master/README.md) for current binaries installable with your distribution's package manager.
+
+On Mac you can install nodejs and yarn via brew:
 
     /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
     brew install node
-    npm install node-sass
+    brew install yarn
+
+On Arch Linux you can install nodejs and yarn via pacman:
+
+    sudo pacman -S nodejs yarn
 
 Execute these commands on your server as a normal user to prepare the dependencies:
 
-    git clone https://github.com/plumpudding/hopglass
+    git clone https://github.com/hopglass/hopglass
     cd hopglass
-    npm install
+    yarn install # or `npm install`
-    npm install grunt-cli
 
 # Building
 
@@ -52,7 +55,7 @@ Copy `config.json.example` to `build/config.json` and change it to match your co
 
 ## dataPath (string/array)
 
-`dataPath` can be either a string containing the address of a [HopGlass Server](https://github.com/plumpudding/hopglass-server) or an array containing multiple addresses.
+`dataPath` can be either a string containing the address of a [HopGlass Server](https://github.com/hopglass/hopglass-server) 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.

app.js

@@ -1,20 +1,20 @@
 require.config({
   baseUrl: "lib",
   paths: {
-    "leaflet": "../bower_components/leaflet/dist/leaflet",
+    "leaflet": "../node_modules/leaflet/dist/leaflet",
-    "leaflet.label": "../bower_components/Leaflet.label/dist/leaflet.label",
+    "leaflet.label": "../node_modules/leaflet-label/dist/leaflet.label",
-    "leaflet.providers": "../bower_components/leaflet-providers/leaflet-providers",
+    "leaflet.providers": "../node_modules/leaflet-providers/leaflet-providers",
-    "chroma-js": "../bower_components/chroma-js/chroma.min",
+    "chroma-js": "../node_modules/chroma-js/chroma.min",
-    "moment": "../bower_components/moment/min/moment-with-locales.min",
+    "moment": "../node_modules/moment/min/moment-with-locales.min",
-    "tablesort": "../bower_components/tablesort/tablesort.min",
+    "tablesort": "../node_modules/tablesort/tablesort.min",
-    "tablesort.numeric": "../bower_components/tablesort/src/sorts/tablesort.numeric",
+    "tablesort.numeric": "../node_modules/tablesort/src/sorts/tablesort.numeric",
-    "d3": "../bower_components/d3/d3.min",
+    "d3": "../node_modules/d3/d3.min",
-    "numeral": "../bower_components/numeraljs/min/numeral.min",
+    "numeral": "../node_modules/numeraljs/min/numeral.min",
-    "numeral-intl": "../bower_components/numeraljs/min/languages.min",
+    "numeral-intl": "../node_modules/numeraljs/min/languages.min",
-    "virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom",
+    "virtual-dom": "../node_modules/virtual-dom/dist/virtual-dom",
-    "rbush": "../bower_components/rbush/rbush",
+    "rbush": "../node_modules/rbush/rbush",
     "helper": "../helper",
-    "jshashes": "../bower_components/jshashes/hashes"
+    "jshashes": "../node_modules/jshashes/hashes"
   },
   shim: {
     "leaflet.label": ["leaflet"],

bower.json

@@ -1,36 +0,0 @@
-{
-  "name": "HopGlass",
-  "ignore": [
-    "node_modules",
-    "bower_components",
-    "**/.*",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "Leaflet.label": "~0.2.1",
-    "chroma-js": "~0.6.1",
-    "leaflet": "~0.7.3",
-    "ionicons": "~2.0.1",
-    "moment": "~2.9.0",
-    "requirejs": "~2.1.16",
-    "tablesort": "https://github.com/tristen/tablesort.git#v3.0.2",
-    "roboto-slab-fontface": "*",
-    "es6-shim": "~0.27.1",
-    "almond": "~0.3.1",
-    "r.js": "~2.1.16",
-    "d3": "~3.5.5",
-    "numeraljs": "~1.5.3",
-    "roboto-fontface": "~0.3.0",
-    "virtual-dom": "~2.0.1",
-    "leaflet-providers": "~1.0.27",
-    "rbush": "https://github.com/mourner/rbush.git#~1.3.5",
-    "jshashes": "~1.0.5"
-  },
-  "authors": [
-    "Milan Pässler <me@petabyteboy.de>",
-    "Nils Schneider <nils@nilsschneider.net>"
-  ],
-  "license": "AGPL3",
-  "private": true
-}

build.js

@@ -1,6 +1,6 @@
 ({
     baseUrl: "lib",
-    name: "../bower_components/almond/almond",
+    name: "../node_modules/almond/almond",
     mainConfigFile: "app.js",
     include: "../app",
     wrap: true,

config.json.example

@@ -5,11 +5,25 @@
   "showContact": true,  
   "maxAge": 14,
   "mapLayers": [
+    { "name": "CartoDB",
+      "url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
+      "config": {
+        "maxZoom": 18,
+        "attribution": "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, &copy; | <a href=\"https://carto.com/attribution\">CARTO</a>"
+      }
+    },
     {
       "name": "OpenStreetMap.HOT"
     },
     {
-      "name": "Stamen.TonerLite"
+      "name": "Luftbilder NRW",
+      "url": "https://www.wms.nrw.de/geobasis/wms_nw_dop?",
+      "config": {
+        "maxZoom": 20,
+        "attribution": "<a href=\"http://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html\">DOP20</a>, Land NRW (2017), Datenlizenz Deutschland - Namensnennung - Version 2.0 (<a href=\"https://www.govdata.de/dl-de/by-2-0\">www.govdata.de/dl-de/by-2-0</a>)",
+        "format": "image/jpeg",
+        "layers": "nw_dop_rgb"
+      }
     }
   ],
   "nodeInfos": [

html/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="stylesheet" href="css/ionicons.min.css">
-    <link rel="stylesheet" href="roboto-slab-fontface.css">
+    <link rel="stylesheet" href="css/roboto-slab/roboto-slab-fontface.css">
-    <link rel="stylesheet" href="roboto-fontface.css">
+    <link rel="stylesheet" href="css/roboto/roboto-fontface.css">
     <link rel="stylesheet" href="style.css">
     <script src="vendor/es6-shim/es6-shim.min.js"></script>
     <script src="app.js"></script>

index.html

@@ -3,14 +3,14 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="stylesheet" href="bower_components/roboto-slab-fontface/roboto-slab-fontface.css">
+    <link rel="stylesheet" href="node_modules/roboto-fontface/css/roboto-slab/roboto-slab-fontface.css">
-    <link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css">
+    <link rel="stylesheet" href="node_modules/roboto-fontface/css/roboto/roboto-fontface.css">
-    <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
+    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
-    <link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
+    <link rel="stylesheet" href="node_modules/leaflet-label/dist/leaflet.label.css">
-    <link rel="stylesheet" href="bower_components/ionicons/css/ionicons.min.css">
+    <link rel="stylesheet" href="node_modules/ionicons/css/ionicons.min.css">
     <link rel="stylesheet" href="style.css">
-    <script src="bower_components/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="bower_components/requirejs/require.js" data-main="app"></script>
+    <script src="node_modules/requirejs/require.js" data-main="app"></script>
   </head>
   <body>
   </body>

lib/about.js

@@ -29,8 +29,8 @@ define(function () {
       s += "https://www.gnu.org/licenses/</a>.</p>"
 
       s += "<p>The source code is available at "
-      s += "<a href=\"https://github.com/plumpudding/hopglass\">"
+      s += "<a href=\"https://github.com/hopglass/hopglass\">"
-      s += "https://github.com/plumpudding/hopglass</a>."
+      s += "https://github.com/hopglass/hopglass</a>."
 
       el.innerHTML = s
     }

lib/infobox/node.js

@@ -271,40 +271,6 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
     return span
   }
 
-  function showAirtimeBar(className, v) {
-    var span = document.createElement("span")
-    span.classList.add("bar")
-    span.classList.add(className)
-
-    var waitbar = document.createElement("span")
-    waitbar.style.width = (v.wait * 100) + "%"
-    span.appendChild(waitbar)
-    waitbar.style.background = "rgba(221, 44, 0, 1)"
-    var waitlabel = document.createElement("span")
-    waitlabel.textContent = (Math.round(v.wait * 100)) + " % wait"
-    waitbar.appendChild(waitlabel)
-    var rxbar = document.createElement("span")
-    rxbar.style.width = (v.rx * 100) + "%"
-    span.appendChild(rxbar)
-    rxbar.style.background = "rgba(0, 145, 234, 1)"
-    var rxlabel = document.createElement("span")
-    rxlabel.textContent = (Math.round(v.rx * 100)) + " % rx"
-    rxbar.appendChild(rxlabel)
-    var txbar = document.createElement("span")
-    txbar.style.width = (v.tx * 100) + "%"
-    span.appendChild(txbar)
-    txbar.style.background = "rgba(0, 191, 165, 1)"
-    var txlabel = document.createElement("span")
-    txlabel.textContent = (Math.round(v.tx * 100)) + " % tx"
-    txbar.appendChild(txlabel)
-
-    var label = document.createElement("label")
-    label.textContent = (Math.round(v.free * 100)) + " % frei"
-    span.appendChild(label)
-
-    return span
-  }
-
   function showLoad(d) {
     if (!("loadavg" in d.statistics))
       return undefined
@@ -326,13 +292,9 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
   function showAirtime(band, val) {
     if (!val)
       return undefined
-    if (!isNaN(val))
-      return function (el) {
-        el.appendChild(showBar("airtime" + band.toString(), val))
-      }
 
     return function (el) {
-      el.appendChild(showAirtimeBar("airtime" + band.toString(), val))
+      el.appendChild(showBar("airtime" + band.toString(), val))
     }
   }
 

lib/map.js

@@ -286,7 +286,7 @@ define(["map/clientlayer", "map/labelslayer",
       var layers = config.mapLayers.map( function (d) {
         return {
           "name": d.name,
-          "layer": "url" in d ? L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
+          "layer": "url" in d ? "layers" in d.config ? L.tileLayer.wms(d.url, d.config) : L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
         }
       })
 

lib/map/clientlayer.js

@@ -1,15 +1,12 @@
-define(["leaflet", "jshashes"],
+define(["leaflet"],
-  function (L, jsHashes) {
+  function (L) {
-    var MD5 = new jsHashes.MD5()
-
     return L.TileLayer.Canvas.extend({
       setData: function (d) {
         this.data = d
 
         //pre-calculate start angles
         this.data.all().forEach(function (d) {
-          var hash = MD5.hex(d.node.nodeinfo.node_id)
+          d.startAngle = (parseInt(d.node.nodeinfo.node_id.substr(10, 2), 16) / 255) * 2 * Math.PI
-          d.startAngle = (parseInt(hash.substr(0, 2), 16) / 255) * 2 * Math.PI
         })
         this.redraw()
       },

package.json

@@ -1,24 +1,41 @@
 {
   "name": "hopglass",
+  "version": "1.0.0",
   "scripts": {
     "test": "node -e \"require('grunt').cli()\" '' clean lint"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.3",
-    "grunt": "^0.4.5",
+    "dart-sass": "^1.16.1",
+    "grunt": "^1.0.3",
     "grunt-check-dependencies": "^0.6.0",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-connect": "^0.8.0",
     "grunt-contrib-copy": "^0.5.0",
     "grunt-contrib-cssmin": "^0.12.2",
     "grunt-contrib-requirejs": "^0.4.4",
-    "grunt-sass": "^1.1.0",
-    "grunt-postcss": "^0.7.2",
     "grunt-contrib-uglify": "^0.5.1",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-eslint": "^10.0.0",
-    "grunt-bower-install-simple": "^1.1.2",
+    "grunt-git-describe": "^2.3.2",
-    "grunt-git-describe": "^2.3.2"
+    "grunt-postcss": "^0.7.2",
+    "grunt-sass": "^3.0.2"
+  },
+  "dependencies": {
+    "almond": "^0.3.3",
+    "chroma-js": "^0.7.8",
+    "d3": "^3.5.17",
+    "ionicons": "^2.0.1",
+    "leaflet": "^0.7.7",
+    "leaflet-label": "^0.2.1-0",
+    "leaflet-providers": "^1.5.0",
+    "moment": "^2.23.0",
+    "numeraljs": "^1.5.6",
+    "rbush": "^1.4.3",
+    "requirejs": "^2.3.2",
+    "roboto-fontface": "^0.10.0",
+    "tablesort": "3.0.2",
+    "virtual-dom": "^2.1.1"
   },
   "eslintConfig": {
     "env": {

scss/_leaflet.label.scss

@@ -1 +1 @@
-../bower_components/Leaflet.label/dist/leaflet.label.css
+../node_modules/leaflet-label/dist/leaflet.label.css

scss/_leaflet.scss

@@ -1 +1 @@
-../bower_components/leaflet/dist/leaflet.css
+../node_modules/leaflet/dist/leaflet.css

scss/main.scss

@@ -70,7 +70,7 @@ $buttondistance: 12pt;
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto Slab', serif;
+  font-family: 'Roboto-Slab', serif;
   font-size: 11pt;
   color: #333;
 }
@@ -409,7 +409,6 @@ table {
     display: inline-block;
     height: 1.4em;
     background: rgba(85, 128, 32, 0.8);
-    overflow: hidden;
   }
 
   label {
@@ -422,14 +421,6 @@ table {
   }
 }
 
-.bar > span > span {
-  left: 0.5em;
-  font-weight: bold;
-  color: white;
-  white-space: nowrap;
-  background: none !important;
-}
-
 .proportion th {
   font-weight: normal !important;
   text-align: right !important;

tasks/build.js

@@ -1,6 +1,6 @@
 module.exports = function(grunt) {
   grunt.config.merge({
-    bowerdir: "bower_components",
+    nodedir: "node_modules",
     copy: {
       html: {
         options: {
@@ -22,24 +22,18 @@ module.exports = function(grunt) {
         src: ["es6-shim/es6-shim.min.js",
           "es6-shim/es6-shim.map"],
         expand: true,
-        cwd: "bower_components/",
+        cwd: "node_modules/",
         dest: "build/vendor/"
       },
-      robotoSlab: {
-        src: [ "fonts/*",
-               "roboto-slab-fontface.css"
-             ],
-        expand: true,
-        dest: "build/",
-        cwd: "bower_components/roboto-slab-fontface"
-      },
       roboto: {
-        src: [ "fonts/*",
+        src: [ "fonts/roboto/*",
-               "roboto-fontface.css"
+               "fonts/roboto-slab/*",
+               "css/roboto/roboto-fontface.css",
+               "css/roboto-slab/roboto-slab-fontface.css"
              ],
         expand: true,
         dest: "build/",
-        cwd: "bower_components/roboto-fontface"
+        cwd: "node_modules/roboto-fontface/"
       },
       ionicons: {
         src: [ "fonts/*",
@@ -47,19 +41,20 @@ module.exports = function(grunt) {
              ],
         expand: true,
         dest: "build/",
-        cwd: "bower_components/ionicons/"
+        cwd: "node_modules/ionicons/"
       },
       leafletImages: {
         src: [ "images/*" ],
         expand: true,
         dest: "build/",
-        cwd: "bower_components/leaflet/dist/"
+        cwd: "node_modules/leaflet/dist/"
       }
     },
     sass: {
       options: {
         sourceMap: true,
-        outputStyle: "compressed"
+        outputStyle: "compressed",
+        implementation: require("dart-sass")
       },
       dist: {
         files: {
@@ -83,31 +78,18 @@ module.exports = function(grunt) {
     cssmin: {
       target: {
         files: {
-          "build/style.css": [ "bower_components/leaflet/dist/leaflet.css",
+          "build/style.css": [ "node_modules/leaflet/dist/leaflet.css",
-                               "bower_components/Leaflet.label/dist/leaflet.label.css",
+                               "node_modules/leaflet-label/dist/leaflet.label.css",
                                "style.css"
                              ]
         }
       }
     },
-    "bower-install-simple": {
-        options: {
-          directory: "<%=bowerdir%>",
-          color: true,
-          interactive: false,
-          production: true
-        },
-        "prod": {
-          options: {
-            production: true
-          }
-        }
-      },
     requirejs: {
       compile: {
         options: {
           baseUrl: "lib",
-          name: "../bower_components/almond/almond",
+          name: "../node_modules/almond/almond",
           mainConfigFile: "app.js",
           include: "../app",
           wrap: true,
@@ -118,7 +100,6 @@ module.exports = function(grunt) {
     }
   })
 
-  grunt.loadNpmTasks("grunt-bower-install-simple")
   grunt.loadNpmTasks("grunt-contrib-copy")
   grunt.loadNpmTasks("grunt-contrib-requirejs")
   grunt.loadNpmTasks("grunt-sass")

tasks/linting.js

@@ -4,11 +4,6 @@ module.exports = function (grunt) {
       options: {
         install: true
       },
-      bower: {
-        options: {
-          packageManager: "bower"
-        }
-      },
       npm: {}
     },
     eslint: {