GUI -- Further tweaking of the background map loading code, to properly align the map in the view.
- still WIP, as we need to invoke a resized() callback in the controller so that the view can also respond to the event.
Change-Id: I55fa5e52c70e208924ad22d389e2002c66cb37ef
diff --git a/web/gui/src/main/webapp/app/fw/svg/map.js b/web/gui/src/main/webapp/app/fw/svg/map.js
index 366204c..759f372 100644
--- a/web/gui/src/main/webapp/app/fw/svg/map.js
+++ b/web/gui/src/main/webapp/app/fw/svg/map.js
@@ -44,7 +44,7 @@
fs = _fs_;
gds = _gds_;
- function loadMapInto(mapLayer, id) {
+ function loadMapInto(mapLayer, id, opts) {
var promise = gds.fetchTopoData(id);
if (!promise) {
$log.warn('Failed to load map: ' + id);
@@ -52,7 +52,7 @@
}
promise.then(function () {
- var gen = gds.createPathGenerator(promise.topodata);
+ var gen = gds.createPathGenerator(promise.topodata, opts);
mapLayer.selectAll('path')
.data(gen.geodata.features)
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index 3152a08..1ab5954 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -39,6 +39,8 @@
#view {
padding: 6px;
+ width: 100%;
+ height: 100%;
}
#view h2 {
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index 8f4a618..a8669db 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -44,6 +44,37 @@
angular.module('onosApp', moduleDependencies)
+ // Create a resize directive, that we can apply to elements to
+ // respond to window resize events.
+ .directive('resize', ['$window', function ($window) {
+ return function (scope, element, attrs) {
+ var w = angular.element($window);
+ scope.$watch(function () {
+ return {
+ h: window.innerHeight,
+ w: window.innerWidth
+ };
+ }, function (newVal, oldVal) {
+ scope.windowHeight = newVal.h;
+ scope.windowWidth = newVal.w;
+
+ scope.resizeWithOffset = function (offH, offW) {
+ var oh = offH || 0,
+ ow = offW || 0;
+ scope.$eval(attrs.notifier);
+ return {
+ height: (newVal.h - oh) + 'px',
+ width: (newVal.w - ow) + 'px'
+ };
+ };
+ }, true);
+
+ w.bind('resize', function () {
+ scope.$apply();
+ });
+ };
+ }])
+
.controller('OnosCtrl', [
'$log', '$route', '$routeParams', '$location',
'KeyService', 'ThemeService', 'GlyphService',
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index ddd0246..48c879a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -29,5 +29,13 @@
}
#ov-topo svg {
- background-color: #dde;
+ background-color: #fff;
+ border: 1px solid red;
}
+
+#ov-topo svg #topo-map {
+ stroke-width: 2px;
+ /*stroke: #eee;*/
+ stroke: #445;
+ fill: transparent;
+}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.html b/web/gui/src/main/webapp/app/view/topo/topo.html
index 9fec03a..2e25c74 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.html
+++ b/web/gui/src/main/webapp/app/view/topo/topo.html
@@ -1,4 +1,7 @@
<!-- Topology View partial HTML -->
<div id="ov-topo">
- <svg viewBox="0 0 1000 1000"></svg>
+ <svg viewBox="0 0 1000 1000"
+ resize
+ ng-style="resizeWithOffset(56, 12)"
+ notifier="notifyResize(params)"></svg>
</div>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index a5bec59..733e0c0 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -29,10 +29,10 @@
];
// references to injected services etc.
- var $log, ks, zs, gs, ms;
+ var $log, $window, ks, zs, gs, ms;
// DOM elements
- var svg, defs, zoomLayer, map;
+ var ovtopo, svg, defs, zoomLayer, map;
// Internal state
var zoomer;
@@ -104,8 +104,22 @@
// --- Background Map ------------------------------------------------
function setUpMap() {
- map = zoomLayer.append('g').attr('id', '#topo-map');
+ map = zoomLayer.append('g').attr('id', 'topo-map');
+ //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
ms.loadMapInto(map, '*continental_us');
+
+ // temp code for calibration
+ var points = [
+ [0, 0], [0, 1000], [1000, 0], [1000, 1000]
+ ];
+ map.selectAll('circle')
+ .data(points)
+ .enter()
+ .append('circle')
+ .attr('cx', function (d) { return d[0]; })
+ .attr('cy', function (d) { return d[1]; })
+ .attr('r', 5)
+ .style('fill', 'red');
}
// --- Controller Definition -----------------------------------------
@@ -113,21 +127,26 @@
angular.module('ovTopo', moduleDependencies)
.controller('OvTopoCtrl', [
- '$log', 'KeyService', 'ZoomService', 'GlyphService', 'MapService',
+ '$log', '$window',
+ 'KeyService', 'ZoomService', 'GlyphService', 'MapService',
- function (_$log_, _ks_, _zs_, _gs_, _ms_) {
+ function (_$log_, _$window_, _ks_, _zs_, _gs_, _ms_) {
var self = this;
$log = _$log_;
+ $window = _$window_;
ks = _ks_;
zs = _zs_;
gs = _gs_;
ms = _ms_;
- // exported state
- self.message = 'Topo View Rocks!';
+ self.notifyResize = function () {
+ $log.log('Hey, we changed size');
+ };
// svg layer and initialization of components
- svg = d3.select('#ov-topo svg');
+ ovtopo = d3.select('#ov-topo');
+ svg = ovtopo.select('svg');
+
setUpKeys();
setUpDefs();
setUpZoom();