add attribution to devicePictures

Text is translatable in different languages with configurable source and license

Author: maurerle

config.example.json

@@ -66,7 +66,9 @@
       "title": "Bild der Wochenstatistik"
     }
   ],
-  "hwImg": "https://map.aachen.freifunk.net/router-images/{MODEL_NORMALIZED}.svg",
+  "devicePictures": "https://map.aachen.freifunk.net/pictures-svg/{MODEL_NORMALIZED}.svg",
+  "devicePicturesSource": "<a href='https://github.com/freifunk/device-pictures'>https://github.com/freifunk/device-pictures</a>",
+  "devicePicturesLicense": "CC-BY-NC-SA 4.0",
   "node_custom": "/[^a-z0-9\\-\\.]/ig",
   "deprecation_text": "Hier kann ein eigener Text für die Deprecation Warning (inkl. HTML) stehen!",
   "deprecation_enabled": true

lib/about.js

@@ -1,4 +1,4 @@
-export const About = function () {
+export const About = function (picturesSource, picturesLicense) {
   this.render = function render(d) {
     d.innerHTML =
       _.t("sidebar.aboutInfo") +
@@ -29,6 +29,12 @@ export const About = function () {
       _.t("others") +
       "</span>" +
       "</p>" +
+      (picturesSource
+        ? _.t("sidebar.devicePicturesAttribution", {
+            pictures_source: picturesSource,
+            pictures_license: picturesLicense,
+          })
+        : "") +
       "<h3>Feel free to contribute!</h3>" +
       "<p>Please support this meshviewer-fork by opening issues or sending pull requests!</p>" +
       '<p><a href="https://github.com/freifunk/meshviewer">' +

lib/gui.js

@@ -111,7 +111,7 @@ export const Gui = function (language) {
   var nodelist = new Nodelist();
   var linklist = new Linklist(linkScale);
   var statistics = new Proportions(fanout);
-  var about = new About();
+  var about = new About(config.devicePicturesSource, config.devicePicturesLicense);
 
   fanoutUnfiltered.add(legend);
   fanoutUnfiltered.add(newnodeslist);

lib/infobox/node.js

@@ -15,7 +15,7 @@ function showStatImg(o, d) {
   return helper.showStat(V, o, subst);
 }
 
-function showHwImg(o, d) {
+function showDevicePictures(o, d) {
   if (!d.model) {
     return null;
   }
@@ -32,7 +32,7 @@ function showHwImg(o, d) {
       .replace(/^-+/, "")
       .replace(/-+$/, ""),
   };
-  return helper.showHwImg(V, o, subst);
+  return helper.showDevicePicture(V, o, subst);
 }
 
 export function Node(el, d, linkScale, nodeDict) {
@@ -118,7 +118,7 @@ export function Node(el, d, linkScale, nodeDict) {
 
   var self = this;
   var header = document.createElement("h2");
-  var hwImage = document.createElement("div");
+  var devicePicture = document.createElement("div");
   var table = document.createElement("table");
   var images = document.createElement("div");
   var neighbours = document.createElement("h3");
@@ -173,7 +173,7 @@ export function Node(el, d, linkScale, nodeDict) {
   deprecation.innerHTML = "<div>" + (config.deprecation_text || _.t("deprecation")) + "</div>";
 
   el.appendChild(header);
-  el.appendChild(hwImage);
+  el.appendChild(devicePicture);
   el.appendChild(deprecation);
   el.appendChild(table);
   el.appendChild(neighbours);
@@ -183,13 +183,16 @@ export function Node(el, d, linkScale, nodeDict) {
   self.render = function render() {
     V.patch(header, V.h("h2", d.hostname));
 
-    var hwImg = showHwImg(config.hwImg, d);
-    var hwImgContainerData = {
+    var devicePictures = showDevicePictures(config.devicePictures, d);
+    var devicePicturesContainerData = {
       attrs: {
         class: "hw-img-container",
       },
     };
-    hwImage = V.patch(hwImage, hwImg ? V.h("div", hwImgContainerData, hwImg) : V.h("div"));
+    devicePicture = V.patch(
+      devicePicture,
+      devicePictures ? V.h("div", devicePicturesContainerData, devicePictures) : V.h("div"),
+    );
 
     var children = [];
 

lib/utils/helper.js

@@ -151,7 +151,7 @@ export const showStat = function showStat(V, o, subst) {
   return V.h("div", content);
 };
 
-export const showHwImg = function showHwImg(V, o, subst) {
+export const showDevicePicture = function showDevicePicture(V, o, subst) {
   if (!o) {
     return null;
   }

public/locale/de.json

@@ -55,6 +55,7 @@
     "nodeOffline": "offline",
     "nodeUplink": "uplink",
     "aboutInfo": "<h2>Über Meshviewer</h2><p>Mit Doppelklick kann man in die Karte hinein zoomen und Shift+Doppelklick heraus zoomen.</p>",
+    "devicePicturesAttribution": "<h3>Hardware-Bilder Attribution</h3><p>Die Hardware Bilder sind unter %{pictures_source} lizensiert unter %{pictures_license} verfügbar</p>",
     "actual": "Aktuell",
     "stats": "Statistiken",
     "about": "Über",

public/locale/en.json

@@ -55,6 +55,7 @@
     "nodeOffline": "offline",
     "nodeUplink": "uplink",
     "aboutInfo": "<h2>About Meshviewer</h2> <p>You can zoom in with double-click and zoom out with shift+double-click</p>",
+    "devicePicturesAttribution": "<h3>Device Pictures Attribution</h3><p>The hardware pictures are available at %{pictures_source} licensed under %{pictures_license}</p>",
     "actual": "Current",
     "stats": "Statistics",
     "about": "About",