GUI -- Topo View: define SVG layer; inject (sample) key bindings and install glyph definitions.
Change-Id: I1c063b0484a9cedcf8e57a35cc51c3c4b35c9329
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index da61ee1..c238d7f 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -40,6 +40,12 @@
<script src="fw/mast/mast.js"></script>
+ <script src="fw/svg/svg.js"></script>
+ <script src="fw/svg/glyph.js"></script>
+ <script src="fw/svg/icon.js"></script>
+ <script src="fw/svg/map.js"></script>
+ <script src="fw/svg/zoom.js"></script>
+
<!-- Framework and library stylesheets included here -->
<!-- TODO: use a single catenated-minified file here -->
<link rel="stylesheet" href="onos.css">
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index cad9cab..2941f17 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -23,43 +23,43 @@
(function () {
'use strict';
- var coreDependencies = [
+ var moduleDependencies = [
+ // view modules...
+ // TODO: inject view dependencies server side
+ // {INJECTED-VIEW-MODULE-DEPENDENCIES}
+ // NOTE: 'ov' == 'Onos View'...
+ 'ovSample',
+ 'ovTopo',
+ // (end of view modules)
+
+ // core modules...
'ngRoute',
'onosUtil',
+ 'onosSvg',
'onosMast'
];
- var viewDependencies = [
- // TODO: inject view dependencies server side
- // NOTE: 'ov' == 'Onos View'...
- // {INJECTED-VIEW-MODULE-DEPENDENCIES}
- 'ovSample',
- 'ovTopo',
- // NOTE: dummy element allows all previous entries to end with comma
- '___dummy___'
- ];
+ var $log;
- var dependencies = coreDependencies.concat(viewDependencies);
- dependencies.pop(); // remove dummy
-
- angular.module('onosApp', dependencies)
+ angular.module('onosApp', moduleDependencies)
.controller('OnosCtrl', [
'$log', '$route', '$routeParams', '$location',
- 'KeyService', 'ThemeService',
+ 'KeyService', 'ThemeService', 'GlyphService',
- function (_$log_, $route, $routeParams, $location, ks, ts) {
- var $log = _$log_,
- self = this;
+ function (_$log_, $route, $routeParams, $location, ks, ts, gs) {
+ var self = this;
+ $log = _$log_;
self.$route = $route;
self.$routeParams = $routeParams;
self.$location = $location;
self.version = '1.1.0';
- // initialize onos (main app) controller here...
+ // initialize services...
ts.init();
ks.installOn(d3.select('body'));
+ gs.init();
$log.log('OnosCtrl has been created');
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 46740ee..84a4eff 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -27,3 +27,7 @@
font-style: italic;
color: seagreen;
}
+
+#ov-topo svg {
+ background-color: #88f;
+}
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 a1e0749..9fec03a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.html
+++ b/web/gui/src/main/webapp/app/view/topo/topo.html
@@ -1,10 +1,4 @@
<!-- Topology View partial HTML -->
<div id="ov-topo">
- <h2> Topology View </h2>
-
- <p>
- This is a place-holder for the topology viewer.
- </p>
-
- <div class="msg"> {{ctrl.message}} </div>
+ <svg viewBox="0 0 1000 1000"></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 833d0cd..adf7d2a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -22,13 +22,65 @@
(function () {
'use strict';
- angular.module('ovTopo', ['onosUtil'])
- .controller('OvTopoCtrl', ['$log', function (_$log_) {
- var self = this,
- $log = _$log_;
+
+ var moduleDependencies = [
+ 'onosUtil',
+ 'onosSvg'
+ ];
+
+ // references to injected services etc.
+ var $log, ks, gs;
+
+ // DOM elements
+ var defs;
+
+ // Internal state
+ // ...
+
+ // Note: "exported" state should be properties on 'self' variable
+
+ var keyBindings = {
+ W: [logWarning, 'log a warning'],
+ E: [logError, 'log an error']
+ };
+
+ // -----------------
+ // these functions are necessarily temporary examples....
+ function logWarning() {
+ $log.warn('You have been warned!');
+ }
+ function logError() {
+ $log.error('You are erroneous!');
+ }
+ // -----------------
+
+ function setUpKeys() {
+ ks.keyBindings(keyBindings);
+ }
+
+ function setUpDefs() {
+ defs = d3.select('#ov-topo svg').append('defs');
+ gs.loadDefs(defs);
+ }
+
+
+ angular.module('ovTopo', moduleDependencies)
+
+ .controller('OvTopoCtrl', [
+ '$log', 'KeyService', 'GlyphService',
+
+ function (_$log_, _ks_, _gs_) {
+ var self = this;
+
+ $log = _$log_;
+ ks = _ks_;
+ gs = _gs_;
self.message = 'Topo View Rocks!';
- $log.log('OvTopoCtrl has been created');
+ setUpKeys();
+ setUpDefs();
+
+ $log.log('OvTopoCtrl has been created');
}]);
}());