GUI - topo view: enhancements to provide tinting of maps.

Change-Id: Ie369f4eee4c28e70ef86852cfbeea78fea8fae4f

GUI - topo view: enhancements to provide tinting of maps.
Change-Id: Ie369f4eee4c28e70ef86852cfbeea78fea8fae4f
Simon Hunt · Gerrit Code Review
Commit a34fcb5822c2ae386820574699b28fcae0ed7c50 a34fcb58 1 parent 02ba2d1e
Showing 2 changed files with 89 additions and 15 deletions
web/gui/src/main/webapp/app/fw/svg/map.js
web/gui/src/main/webapp/app/view/topo/topo.js
--- a/web/gui/src/main/webapp/app/fw/svg/map.js
View file @a34fcb5
+++ b/web/gui/src/main/webapp/app/fw/svg/map.js
View file @a34fcb5
@@ -56,13 +56,13 @@
             deferredProjection.resolve(gen.settings.projection);
-            var path = mapLayer.selectAll('path')
+            mapLayer.selectAll('path')
                 .data(gen.geodata.features)
                 .enter()
                 .append('path')
                 .attr('d', gen.pathgen);
-            opts.fill && path.style('fill', opts.fill);
+            reshade(opts.shading);
         });
         return deferredProjection.promise;
     }
@@ -78,7 +78,7 @@
     //         }
     //     });
-    function loadMapRegionInto(mapLayer, filterOpts) {
+    function loadMapRegionInto(mapLayer, opts) {
         var promise = gds.fetchTopoData("*countries"),
             deferredProjection = $q.defer();
@@ -94,14 +94,14 @@
                 pathGen = d3.geo.path().projection(proj),
                 data = promise.topodata,
                 features = topojson.feature(data, data.objects.countries).features,
-                country = features.filter(filterOpts.countryFilter),
+                country = features.filter(opts.countryFilter),
                 countryFeature = {
                     type: 'FeatureCollection',
                     features: country
                 },
                 path = d3.geo.path().projection(proj);
-            gds.rescaleProjection(proj, 0.95, 1000, path, countryFeature);
+            gds.rescaleProjection(proj, 0.95, 1000, path, countryFeature, opts.adjustScale);
             deferredProjection.resolve(proj);
@@ -110,10 +110,31 @@
                 .enter()
                 .append('path').classed('country', true)
                 .attr('d', pathGen);
+
+            reshade(opts.shading);
         });
         return deferredProjection.promise;
     }
+    function reshade(sh) {
+        var p = sh && sh.palette,
+            svg, paths, stroke, fill, bg;
+        if (sh) {
+            stroke = p.outline;
+            fill = sh.flip ? p.sea : p.land;
+            bg = sh.flip ? p.land : p.sea;
+
+            svg = d3.select('#ov-topo').select('svg');
+            paths = d3.select('#topo-map').selectAll('path');
+
+            svg.style('background-color', bg);
+            paths.attr({
+                stroke: stroke,
+                fill: fill
+            });
+        }
+    }
+
     angular.module('onosSvg')
         .factory('MapService', ['$log', '$q', 'FnService', 'GeoDataService',
         function (_$log_, _$q_, _fs_, _gds_) {
@@ -124,7 +145,8 @@
             return {
                 loadMapRegionInto: loadMapRegionInto,
-                loadMapInto: loadMapInto
+                loadMapInto: loadMapInto,
+                reshade: reshade
             };
         }]);
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
View file @a34fcb5
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
View file @a34fcb5
@@ -29,14 +29,14 @@
     ];
     // references to injected services etc.
-    var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
+    var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps, th,
         tds, tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip, tov;
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
     // Internal state
-    var zoomer, actionMap;
+    var zoomer, actionMap, themeListener;
     // --- Short Cut Keys ------------------------------------------------
@@ -345,6 +345,27 @@
         }
     };
+    var tintOn = 0,
+        shadeFlip = 0,
+        shadePalette = {
+        light: {
+            sea: 'aliceblue',
+            land: 'white',
+            outline: '#ddd'
+        },
+        dark: {
+            sea: '#001830',
+            land: '#232331',
+            outline: '#3a3a3a'
+        }
+    };
+
+    function shading() {
+        return tintOn ? {
+            palette: shadePalette[th.theme()],
+            flip: shadeFlip
+        } : '';
+    }
     function setUpMap($loc) {
         var qp = $loc.search(),
@@ -355,27 +376,53 @@
             ms1 = qp.mapscale,
             ms2 = pr && pr.scale,
             mapScale = ms1 || ms2 || 1,
+            t1 = qp.tint,
+            t2 = pr && pr.tint,
+            tint = t1 || t2 || 'off',
             promise,
             cfilter;
+        tintOn = tint === 'on' ? 1 : 0;
+
         mapG = zoomLayer.append('g').attr('id', 'topo-map');
         if (mapId === 'usa') {
-            promise = ms.loadMapInto(mapG, '*continental_us');
+            shadeFlip = 0;
+            promise = ms.loadMapInto(mapG, '*continental_us', {
+                adjustScale: mapScale,
+                shading: shading()
+            });
         } else if (mapId === 'bayarea') {
-            // TODO: be consistent about propagating options to other cases
+            shadeFlip = 1;
             promise = ms.loadMapInto(mapG, '*bayarea', {
                 objectTag: 'bayareaGEO',
                 adjustScale: mapScale,
-                fill: 'aliceblue'
+                shading: shading()
             });
         } else {
+            shadeFlip = 0;
             cfilter = countryFilters[mapId] || countryFilters.world;
-            promise = ms.loadMapRegionInto(mapG, { countryFilter: cfilter });
+            promise = ms.loadMapRegionInto(mapG, {
+                countryFilter: cfilter,
+                adjustScale: mapScale,
+                shading: shading()
+            });
         }
-        ps.setPrefs('topo_mapid', { id: mapId, scale: mapScale });
+        ps.setPrefs('topo_mapid', { id: mapId, scale: mapScale, tint: tint });
         return promise;
     }
+    // set up theme listener to re-shade the map when required.
+    function mapShader(on) {
+        if (on) {
+            themeListener = th.addListener(function () {
+                ms.reshade(shading());
+            });
+        } else {
+            th.removeListener(themeListener);
+            themeListener = null;
+        }
+    }
+
     function opacifyMap(b) {
         mapG.transition()
             .duration(1000)
@@ -448,7 +495,8 @@
         .controller('OvTopoCtrl', ['$scope', '$log', '$location', '$timeout',
             '$cookies', 'FnService', 'MastService', 'KeyService', 'ZoomService',
             'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
-            'WebSocketService', 'PrefsService', 'TopoDialogService',
+            'WebSocketService', 'PrefsService', 'ThemeService',
+            'TopoDialogService',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
             'TopoInstService', 'TopoSelectService', 'TopoLinkService',
             'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
@@ -456,7 +504,8 @@
             'TopoOverlayService',
         function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
-                  _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tds_, _tes_,
+                  _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _th_,
+                  _tds_, _tes_,
                   _tfs_, _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_,
                   _ttbs_, tspr, _ttip_, _tov_) {
             var params = $loc.search(),
@@ -484,6 +533,7 @@
             flash = _flash_;
             wss = _wss_;
             ps = _ps_;
+            th = _th_;
             tds = _tds_;
             tes = _tes_;
             tfs = _tfs_;
@@ -523,6 +573,7 @@
                 tis.destroyInst();
                 tfs.destroyForce();
                 ttbs.destroyToolbar();
+                mapShader(false);
             });
             // svg layer and initialization of components
@@ -548,6 +599,7 @@
                     flash.enable(false);
                     toggleMap(prefsState.bg);
                     flash.enable(true);
+                    mapShader(true);
                     // now we have the map projection, we are ready for
                     //  the server to send us device/host data...