홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
4db8dce9 1 parent 2a1779dd

GUI -- TopoToolbarService created, working first set of toggles added. 

- WIP on svg exercise (tabled to be worked on on another date)

Change-Id: I8d4ed84f0de44516419910dc5ee4c8eca7dc46ff
Inline Side-by-side
Showing 5 changed files with 248 additions and 38 deletions
...@@ -33,10 +33,11 @@ ...@@ -33,10 +33,11 @@
33 33
34 <style> 34 <style>
35 html, 35 html,
36 - body { 36 + body, div {
37 background-color: #eee; 37 background-color: #eee;
38 font-family: Arial, Helvetica, sans-serif; 38 font-family: Arial, Helvetica, sans-serif;
39 font-size: 9pt; 39 font-size: 9pt;
40 + margin: 0;
40 } 41 }
41 .button { 42 .button {
42 fill: #369; 43 fill: #369;
......
...@@ -28,13 +28,16 @@ ...@@ -28,13 +28,16 @@
28 var btnWidth = 175, 28 var btnWidth = 175,
29 btnHeight = 50, 29 btnHeight = 50,
30 hoverZone = 60, 30 hoverZone = 60,
31 + sectorDivisions = 3,
31 pageMargin = 20; 32 pageMargin = 20;
32 33
33 // svg elements 34 // svg elements
34 - var g; 35 + var svg, g;
35 36
36 // other variables 37 // other variables
37 var winWidth, winHeight, 38 var winWidth, winHeight,
39 + sectorWidth, sectorHeight,
40 + currSector = 4,
38 mouse; 41 mouse;
39 42
40 // ==================================================== 43 // ====================================================
...@@ -44,27 +47,112 @@ ...@@ -44,27 +47,112 @@
44 return (axis / 2) - (dim / 2); 47 return (axis / 2) - (dim / 2);
45 } 48 }
46 49
47 - function randomPos() { 50 + // ====================================================
51 +
52 + function center(elem) {
53 + $log.debug(winWidth / 2);
54 + $log.debug(winHeight / 2);
55 + $log.debug((winWidth / 2) - ((elem.node().getBBox().width) / 2));
56 + $log.debug((winHeight / 2) - ((elem.node().getBBox().height) / 2));
48 return { 57 return {
49 - x: Math.random() * winWidth, 58 + x: (winWidth / 2) - ((elem.node().getBBox().width) / 2),
50 - y: Math.random() * winHeight 59 + y: (winHeight / 2) - ((elem.node().getBBox().height) / 2)
60 + }
61 + }
62 +
63 + function showSectors() {
64 + svg.append('line')
65 + .attr({
66 + x1: winWidth / 2,
67 + x2: winWidth / 2,
68 + y1: 0,
69 + y2: winHeight,
70 + stroke: 'purple',
71 + 'stroke-width': '3px'
72 + });
73 + svg.append('line')
74 + .attr({
75 + x1: 0,
76 + x2: winWidth,
77 + y1: winHeight / 2,
78 + y2: winHeight / 2,
79 + stroke: 'purple',
80 + 'stroke-width': '3px'
81 + });
82 + for (var i = 1; i < 5; i++) {
83 + var j;
84 + if (i < 3) {
85 + j = i;
86 + svg.append('line')
87 + .attr({
88 + x1: sectorWidth * j,
89 + x2: sectorWidth * j,
90 + y1: 0,
91 + y2: winHeight,
92 + stroke: 'red',
93 + 'stroke-width': '3px'
94 + });
95 + }
96 + else {
97 + j = i - 2;
98 + svg.append('line')
99 + .attr({
100 + x1: 0,
101 + x2: winWidth,
102 + y1: sectorHeight * j,
103 + y2: sectorHeight * j,
104 + stroke: 'red',
105 + 'stroke-width': '3px'
106 + });
107 + }
51 } 108 }
52 } 109 }
53 110
54 - function getPosition() { 111 + function onMouseMove() {
55 - var x = randomPos().x + pageMargin, 112 + mouse = d3.mouse(this);
56 - y = randomPos().y + pageMargin, 113 + moveButton();
57 - x1 = x + btnWidth, 114 + }
58 - y1 = y + btnHeight, 115 +
59 - wwMargin = winWidth - pageMargin, 116 + function removeMouseListener() {
60 - whMargin = winHeight - pageMargin; 117 + g.on('mousemove', null);
61 - 118 + }
62 - while (x1 >= wwMargin || y1 >= whMargin) { 119 +
63 - x = randomPos().x + pageMargin; 120 + function addMouseListener() {
64 - y = randomPos().y + pageMargin; 121 + g.on('mousemove', onMouseMove);
122 + }
123 +
124 + function selectSector() {
125 + var sector, row, col;
126 +
127 + do {
128 + sector = Math.floor((Math.random() * 9));
129 + } while (sector === currSector);
130 + $log.debug('sector after loop: ' + sector);
131 + $log.debug('currSector after loop: ' + currSector);
132 + currSector = sector;
133 + $log.debug('currSector after assignment: ' + currSector);
134 + row = Math.floor(sector / sectorDivisions);
135 + col = sector % sectorDivisions;
136 +
137 + $log.debug('row: ' + row);
138 + $log.debug('col: ' + col);
139 +
140 + return {
141 + xmin: sectorWidth * col,
142 + xmax: (sectorWidth * col) + sectorWidth,
143 + ymin: sectorHeight * row,
144 + ymax: (sectorHeight * row) + sectorHeight
145 + }
146 + }
147 +
148 + function selectXY(sectorCoords) {
149 + var x, y, x1, y1;
150 + do {
151 + x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin;
152 + y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin;
65 x1 = x + btnWidth; 153 x1 = x + btnWidth;
66 y1 = y + btnHeight; 154 y1 = y + btnHeight;
67 - } 155 + } while (x1 >= winWidth - pageMargin || y1 >= winHeight - pageMargin);
68 156
69 return { 157 return {
70 x: x, 158 x: x,
...@@ -77,13 +165,15 @@ ...@@ -77,13 +165,15 @@
77 } 165 }
78 166
79 function moveButton() { 167 function moveButton() {
80 - var pos = getPosition(), 168 + var sec = selectSector(),
81 - x = pos.x, 169 + pos = selectXY(sec);
82 - y = pos.y; 170 + $log.debug(pos.x, pos.y);
83 g.transition() 171 g.transition()
84 .duration(400) 172 .duration(400)
85 .ease('cubic-out') 173 .ease('cubic-out')
86 - .attr('transform', gTranslate(x, y)); 174 + .each('start', removeMouseListener)
175 + .attr('transform', gTranslate(pos.x, pos.y))
176 + .each('end', addMouseListener);
87 } 177 }
88 178
89 angular.module('svgExercise', ['onosUtil']) 179 angular.module('svgExercise', ['onosUtil'])
...@@ -99,16 +189,22 @@ ...@@ -99,16 +189,22 @@
99 link: function (scope, elem, attrs) { 189 link: function (scope, elem, attrs) {
100 winWidth = fs.windowSize().width; 190 winWidth = fs.windowSize().width;
101 winHeight = fs.windowSize().height; 191 winHeight = fs.windowSize().height;
102 - var svg = d3.select(elem[0]) 192 + // getting rid of pageMargin to see if the math is easier
193 + // could put the padding somewhere else as in where it's ok to move the button
194 + //sectorWidth = (winWidth / sectorDivisions) - pageMargin;
195 + //sectorHeight = (winHeight / sectorDivisions) - pageMargin;
196 + sectorWidth = winWidth / sectorDivisions;
197 + sectorHeight = winHeight / sectorDivisions;
198 +
199 + svg = d3.select(elem[0])
103 .append('svg') 200 .append('svg')
104 .attr({ 201 .attr({
105 width: winWidth + 'px', 202 width: winWidth + 'px',
106 height: winHeight + 'px' 203 height: winHeight + 'px'
107 }); 204 });
108 - g = svg.append('g') 205 +
109 - .attr('transform', 206 + showSectors();
110 - gTranslate(centeredOnWindow(winWidth, btnWidth), 207 + g = svg.append('g');
111 - centeredOnWindow(winHeight, btnHeight)));
112 208
113 var button = g.append('rect') 209 var button = g.append('rect')
114 .attr({ 210 .attr({
...@@ -132,13 +228,14 @@ ...@@ -132,13 +228,14 @@
132 height: btnHeight + hoverZone + 'px', 228 height: btnHeight + hoverZone + 'px',
133 x: -(hoverZone / 2), 229 x: -(hoverZone / 2),
134 y: -(hoverZone / 2) 230 y: -(hoverZone / 2)
135 - }); 231 + }),
136 - 232 + centeredG = center(g);
137 - g.on('mousemove', function () { 233 + g.attr('transform',
138 - mouse = d3.mouse(this); 234 + gTranslate(centeredG.x, centeredG.y));
139 - moveButton(); 235 + //gTranslate(centeredOnWindow(winWidth, btnWidth),
140 - }); 236 + // centeredOnWindow(winHeight, btnHeight)));
141 237
238 + addMouseListener();
142 } 239 }
143 }; 240 };
144 }]); 241 }]);
......
...@@ -29,20 +29,20 @@ ...@@ -29,20 +29,20 @@
29 29
30 // references to injected services etc. 30 // references to injected services etc.
31 var $log, fs, ks, zs, gs, ms, sus, flash, wss, 31 var $log, fs, ks, zs, gs, ms, sus, flash, wss,
32 - tes, tfs, tps, tis, tss, tts, tos; 32 + tes, tfs, tps, tis, tss, tts, tos, ttbs;
33 33
34 // DOM elements 34 // DOM elements
35 var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer; 35 var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
36 36
37 // Internal state 37 // Internal state
38 - var zoomer; 38 + var zoomer, actionMap;
39 39
40 // --- Short Cut Keys ------------------------------------------------ 40 // --- Short Cut Keys ------------------------------------------------
41 41
42 function setUpKeys() { 42 function setUpKeys() {
43 // key bindings need to be made after the services have been injected 43 // key bindings need to be made after the services have been injected
44 // thus, deferred to here... 44 // thus, deferred to here...
45 - ks.keyBindings({ 45 + actionMap = {
46 O: [tps.toggleSummary, 'Toggle ONOS summary pane'], 46 O: [tps.toggleSummary, 'Toggle ONOS summary pane'],
47 I: [toggleInstances, 'Toggle ONOS instances pane'], 47 I: [toggleInstances, 'Toggle ONOS instances pane'],
48 D: [tss.toggleDetails, 'Disable / enable details pane'], 48 D: [tss.toggleDetails, 'Disable / enable details pane'],
...@@ -74,7 +74,9 @@ ...@@ -74,7 +74,9 @@
74 ['X', 'Z', 'L', 'U', 'R' ], 74 ['X', 'Z', 'L', 'U', 'R' ],
75 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ] 75 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
76 ] 76 ]
77 - }); 77 + };
78 +
79 + ks.keyBindings(actionMap);
78 80
79 ks.gestureNotes([ 81 ks.gestureNotes([
80 ['click', 'Select the item and show details'], 82 ['click', 'Select the item and show details'],
...@@ -132,6 +134,20 @@ ...@@ -132,6 +134,20 @@
132 } 134 }
133 } 135 }
134 136
137 + // --- Toolbar Functions ---------------------------------------------
138 +
139 + function getActionEntry(key) {
140 + var entry = actionMap[key];
141 + return fs.isA(entry) || [entry, ''];
142 + }
143 +
144 + function setUpToolbar() {
145 + ttbs.init({
146 + getActionEntry: getActionEntry
147 + });
148 + ttbs.createToolbar();
149 + }
150 +
135 // --- Glyphs, Icons, and the like ----------------------------------- 151 // --- Glyphs, Icons, and the like -----------------------------------
136 152
137 function setUpDefs() { 153 function setUpDefs() {
...@@ -220,11 +236,11 @@ ...@@ -220,11 +236,11 @@
220 'WebSocketService', 236 'WebSocketService',
221 'TopoEventService', 'TopoForceService', 'TopoPanelService', 237 'TopoEventService', 'TopoForceService', 'TopoPanelService',
222 'TopoInstService', 'TopoSelectService', 'TopoTrafficService', 238 'TopoInstService', 'TopoSelectService', 'TopoTrafficService',
223 - 'TopoObliqueService', 239 + 'TopoObliqueService', 'TopoToolbarService',
224 240
225 function ($scope, _$log_, $loc, $timeout, _fs_, mast, 241 function ($scope, _$log_, $loc, $timeout, _fs_, mast,
226 _ks_, _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, 242 _ks_, _zs_, _gs_, _ms_, _sus_, _flash_, _wss_,
227 - _tes_, _tfs_, _tps_, _tis_, _tss_, _tts_, _tos_) { 243 + _tes_, _tfs_, _tps_, _tis_, _tss_, _tts_, _tos_, _ttbs_) {
228 var self = this, 244 var self = this,
229 projection, 245 projection,
230 dim, 246 dim,
...@@ -256,6 +272,7 @@ ...@@ -256,6 +272,7 @@
256 tss = _tss_; 272 tss = _tss_;
257 tts = _tts_; 273 tts = _tts_;
258 tos = _tos_; 274 tos = _tos_;
275 + ttbs = _ttbs_;
259 276
260 self.notifyResize = function () { 277 self.notifyResize = function () {
261 svgResized(fs.windowSize(mast.mastHeight())); 278 svgResized(fs.windowSize(mast.mastHeight()));
...@@ -278,6 +295,7 @@ ...@@ -278,6 +295,7 @@
278 dim = [svg.attr('width'), svg.attr('height')]; 295 dim = [svg.attr('width'), svg.attr('height')];
279 296
280 setUpKeys(); 297 setUpKeys();
298 + setUpToolbar();
281 setUpDefs(); 299 setUpDefs();
282 setUpZoom(); 300 setUpZoom();
283 setUpNoDevs(); 301 setUpNoDevs();
......
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Topology Toolbar Module.
19 + Defines functions for manipulating the toolbar.
20 + */
21 +
22 +(function () {
23 +
24 + // injected references
25 + var $log, tbs;
26 +
27 + var api, toolbar;
28 +
29 + // buttons (named for keystroke)
30 + var O, I, D, H, M, P, B;
31 + var togSummary, togInstances, togDetails,
32 + togHosts, togOffline, togPorts, togBackground;
33 +
34 + function init(_api_) {
35 + api = _api_;
36 + }
37 +
38 + function getActions() {
39 + togSummary = api.getActionEntry('O');
40 + togInstances = api.getActionEntry('I');
41 + togDetails = api.getActionEntry('D');
42 +
43 + togHosts = api.getActionEntry('H');
44 + togOffline = api.getActionEntry('M');
45 + togPorts = api.getActionEntry('P');
46 + togBackground = api.getActionEntry('B');
47 + }
48 +
49 + function entryCallback(entry) {
50 + return entry[0];
51 + }
52 +
53 + function entryToolTip(entry) {
54 + return entry[1];
55 + }
56 +
57 + function createToolbar() {
58 + getActions();
59 + // in actions, function reference is entry[0], tooltip is entry[1]
60 + toolbar = tbs.createToolbar('topo-tbar');
61 + toolbar.addToggle('summary-tog', 'unknown', true,
62 + entryCallback(togSummary), entryToolTip(togSummary));
63 + toolbar.addToggle('instance-tog', 'unknown', true,
64 + entryCallback(togInstances), entryToolTip(togInstances));
65 + toolbar.addToggle('details-tog', 'unknown', true,
66 + entryCallback(togDetails), entryToolTip(togDetails));
67 + toolbar.addSeparator();
68 +
69 + toolbar.addToggle('hosts-tog', 'endstation', false,
70 + entryCallback(togHosts), entryToolTip(togHosts));
71 + toolbar.addToggle('offline-tog', 'unknown', true,
72 + entryCallback(togOffline), entryToolTip(togOffline));
73 + toolbar.addToggle('ports-tog', 'unknown', true,
74 + entryCallback(togPorts), entryToolTip(togPorts));
75 + toolbar.addToggle('bkgrnd-tog', 'unknown', true,
76 + entryCallback(togBackground), entryToolTip(togBackground));
77 +
78 + toolbar.hide();
79 + }
80 +
81 + angular.module('ovTopo')
82 + .factory('TopoToolbarService', ['$log', 'ToolbarService',
83 +
84 + function (_$log_, _tbs_) {
85 + $log = _$log_;
86 + tbs = _tbs_;
87 +
88 + return {
89 + init: init,
90 + createToolbar: createToolbar
91 + };
92 + }]);
93 +}());
...\ No newline at end of file ...\ No newline at end of file
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
97 <script src="app/view/topo/topoPanel.js"></script> 97 <script src="app/view/topo/topoPanel.js"></script>
98 <script src="app/view/topo/topoSelect.js"></script> 98 <script src="app/view/topo/topoSelect.js"></script>
99 <script src="app/view/topo/topoTraffic.js"></script> 99 <script src="app/view/topo/topoTraffic.js"></script>
100 + <script src="app/view/topo/topoToolbar.js"></script>
100 <script src="app/view/device/device.js"></script> 101 <script src="app/view/device/device.js"></script>
101 <!-- {INJECTED-JAVASCRIPT-END} --> 102 <!-- {INJECTED-JAVASCRIPT-END} -->
102 103
......