홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
195cb389 1 parent a887ba8a

Restructuring GUI code - first pass - WIP.

Expand all
Inline Side-by-side
Showing 10 changed files with 971 additions and 0 deletions
1 +/*
2 + * Copyright 2014 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 + Geometry library - based on work by Mike Bostock.
19 + */
20 +
21 +(function() {
22 +
23 + if (typeof geo == 'undefined') {
24 + geo = {};
25 + }
26 +
27 + var tolerance = 1e-10;
28 +
29 + function eq(a, b) {
30 + return (Math.abs(a - b) < tolerance);
31 + }
32 +
33 + function gt(a, b) {
34 + return (a - b > -tolerance);
35 + }
36 +
37 + function lt(a, b) {
38 + return gt(b, a);
39 + }
40 +
41 + geo.eq = eq;
42 + geo.gt = gt;
43 + geo.lt = lt;
44 +
45 + geo.LineSegment = function(x1, y1, x2, y2) {
46 + this.x1 = x1;
47 + this.y1 = y1;
48 + this.x2 = x2;
49 + this.y2 = y2;
50 +
51 + // Ax + By = C
52 + this.a = y2 - y1;
53 + this.b = x1 - x2;
54 + this.c = x1 * this.a + y1 * this.b;
55 +
56 + if (eq(this.a, 0) && eq(this.b, 0)) {
57 + throw new Error(
58 + 'Cannot construct a LineSegment with two equal endpoints.');
59 + }
60 + };
61 +
62 + geo.LineSegment.prototype.intersect = function(that) {
63 + var d = (this.x1 - this.x2) * (that.y1 - that.y2) -
64 + (this.y1 - this.y2) * (that.x1 - that.x2);
65 +
66 + if (eq(d, 0)) {
67 + // The two lines are parallel or very close.
68 + return {
69 + x : NaN,
70 + y : NaN
71 + };
72 + }
73 +
74 + var t1 = this.x1 * this.y2 - this.y1 * this.x2,
75 + t2 = that.x1 * that.y2 - that.y1 * that.x2,
76 + x = (t1 * (that.x1 - that.x2) - t2 * (this.x1 - this.x2)) / d,
77 + y = (t1 * (that.y1 - that.y2) - t2 * (this.y1 - this.y2)) / d,
78 + in1 = (gt(x, Math.min(this.x1, this.x2)) && lt(x, Math.max(this.x1, this.x2)) &&
79 + gt(y, Math.min(this.y1, this.y2)) && lt(y, Math.max(this.y1, this.y2))),
80 + in2 = (gt(x, Math.min(that.x1, that.x2)) && lt(x, Math.max(that.x1, that.x2)) &&
81 + gt(y, Math.min(that.y1, that.y2)) && lt(y, Math.max(that.y1, that.y2)));
82 +
83 + return {
84 + x : x,
85 + y : y,
86 + in1 : in1,
87 + in2 : in2
88 + };
89 + };
90 +
91 + geo.LineSegment.prototype.x = function(y) {
92 + // x = (C - By) / a;
93 + if (this.a) {
94 + return (this.c - this.b * y) / this.a;
95 + } else {
96 + // a == 0 -> horizontal line
97 + return NaN;
98 + }
99 + };
100 +
101 + geo.LineSegment.prototype.y = function(x) {
102 + // y = (C - Ax) / b;
103 + if (this.b) {
104 + return (this.c - this.a * x) / this.b;
105 + } else {
106 + // b == 0 -> vertical line
107 + return NaN;
108 + }
109 + };
110 +
111 + geo.LineSegment.prototype.length = function() {
112 + return Math.sqrt(
113 + (this.y2 - this.y1) * (this.y2 - this.y1) +
114 + (this.x2 - this.x1) * (this.x2 - this.x1));
115 + };
116 +
117 + geo.LineSegment.prototype.offset = function(x, y) {
118 + return new geo.LineSegment(
119 + this.x1 + x, this.y1 + y,
120 + this.x2 + x, this.y2 + y);
121 + };
122 +
123 +})();
1 +<!DOCTYPE html>
2 +<!--
3 + ~ Copyright 2014 Open Networking Laboratory
4 + ~
5 + ~ Licensed under the Apache License, Version 2.0 (the "License");
6 + ~ you may not use this file except in compliance with the License.
7 + ~ You may obtain a copy of the License at
8 + ~
9 + ~ http://www.apache.org/licenses/LICENSE-2.0
10 + ~
11 + ~ Unless required by applicable law or agreed to in writing, software
12 + ~ distributed under the License is distributed on an "AS IS" BASIS,
13 + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 + ~ See the License for the specific language governing permissions and
15 + ~ limitations under the License.
16 + -->
17 +
18 +<!--
19 + ONOS UI - single page web app
20 + Version 1.1
21 +
22 + @author Simon Hunt
23 + -->
24 +<html>
25 +<head>
26 + <meta charset="utf-8">
27 + <title>ONOS GUI (v1.1)</title>
28 +
29 + <link rel="shortcut icon" href="img/onos-logo.png">
30 +
31 + <!-- first script to be run -->
32 + <script src="preamble.js"></script>
33 +
34 + <!-- Third party library code included here -->
35 + <!--TODO: use the minified version of d3, once debugging is complete -->
36 + <script src="libs/d3.js"></script>
37 + <script src="libs/jquery-2.1.1.min.js"></script>
38 +
39 + <!-- Base library and framework stylesheets included here -->
40 + <link rel="stylesheet" href="base.css">
41 + <link rel="stylesheet" href="onos2.css">
42 + <link rel="stylesheet" href="mast2.css">
43 +
44 + <!-- This is where contributed stylesheets get INJECTED -->
45 + <!-- TODO: replace with template marker and inject refs server-side -->
46 + <link rel="stylesheet" href="topo2.css">
47 +
48 +
49 + <!-- General library modules included here-->
50 + <script src="geometry2.js"></script>
51 +
52 + <!-- ONOS UI Framework included here-->
53 + <script src="onos2.js"></script>
54 +
55 +</head>
56 +<body>
57 + <div id="frame">
58 + <div id="mast">
59 + <!-- NOTE: masthead injected here by mast.js -->
60 + </div>
61 + <div id="view">
62 + <!-- NOTE: views injected here by onos.js -->
63 + </div>
64 + <div id="overlays">
65 + <!-- NOTE: overlays injected here, as needed -->
66 + </div>
67 + </div>
68 +
69 + <!-- Initialize the UI...-->
70 + <script type="text/javascript">
71 + var ONOS = $.onos({note: "config, if needed"});
72 + </script>
73 +
74 + <!-- Framework module files included here -->
75 + <script src="mast2.js"></script>
76 +
77 + <!-- Contributed (application) views injected here -->
78 + <!-- TODO: replace with template marker and inject refs server-side -->
79 + <script src="temp2.js"></script>
80 +
81 + <!-- finally, build the UI-->
82 + <script type="text/javascript">
83 + $(ONOS.buildUi);
84 + </script>
85 +
86 +</body>
87 +</html>
1 +/*
2 + * Copyright 2014 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 -- Masthead -- CSS file
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +#mast {
24 + height: 36px;
25 + padding: 4px;
26 + background-color: #bbb;
27 + vertical-align: baseline;
28 + box-shadow: 0px 2px 8px #777;
29 +}
30 +
31 +#mast img#logo {
32 + height: 38px;
33 + padding-left: 8px;
34 + padding-right: 8px;
35 +}
36 +
37 +#mast span.title {
38 + color: #369;
39 + font-size: 14pt;
40 + font-style: italic;
41 + vertical-align: 12px;
42 +}
43 +
44 +#mast span.right {
45 + padding-top: 8px;
46 + padding-right: 16px;
47 + float: right;
48 +}
49 +
50 +#mast span.radio {
51 + color: darkslateblue;
52 + font-size: 10pt;
53 +}
54 +
55 +#mast span.radio {
56 + margin: 4px 0;
57 + border: 1px dotted #222;
58 + padding: 1px 6px;
59 + color: #eee;
60 + cursor: pointer;
61 +}
62 +
63 +#mast span.radio.active {
64 + background-color: #bbb;
65 + border: 1px solid #eee;
66 + padding: 1px 6px;
67 + color: #666;
68 + font-weight: bold;
69 +}
1 +/*
2 + * Copyright 2014 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 -- Masthead
19 +
20 + Defines the masthead for the UI. Injects logo and title, as well as providing
21 + the placeholder for a set of radio buttons.
22 +
23 + @author Simon Hunt
24 + */
25 +
26 +(function (onos){
27 + 'use strict';
28 +
29 + // API's
30 + var api = onos.api;
31 +
32 + // Config variables
33 + var guiTitle = 'Open Networking Operating System';
34 +
35 + // DOM elements and the like
36 + var mast = d3.select('#mast');
37 +
38 + mast.append('img')
39 + .attr({
40 + id: 'logo',
41 + src: 'img/onos-logo.png'
42 + });
43 +
44 + mast.append('span')
45 + .attr({
46 + class: 'title'
47 + })
48 + .text(guiTitle);
49 +
50 + mast.append('span')
51 + .attr({
52 + id: 'mastRadio',
53 + class: 'right'
54 + });
55 +
56 +}(ONOS));
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 + * Copyright 2014 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 -- Base Framework -- CSS file
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +html, body {
24 + height: 100%;
25 +}
26 +
27 +
28 +/*
29 + * === DEBUGGING ======
30 + */
31 +svg {
32 + /*border: 1px dashed red;*/
33 +}
34 +
35 +svg #bg {
36 + opacity: 0.5;
37 +}
38 +
39 +
40 +/*
41 + * Network Graph elements ======================================
42 + */
43 +
44 +svg .link {
45 + fill: none;
46 + stroke: #666;
47 + stroke-width: 2.0px;
48 + opacity: .7;
49 +
50 + transition: opacity 250ms;
51 + -webkit-transition: opacity 250ms;
52 + -moz-transition: opacity 250ms;
53 +}
54 +
55 +svg .link.host {
56 + stroke: #666;
57 + stroke-width: 1px;
58 +}
59 +
60 +svg g.portLayer rect.port {
61 + fill: #ccc;
62 +}
63 +
64 +svg g.portLayer text {
65 + font: 8pt sans-serif;
66 + pointer-events: none;
67 +}
68 +
69 +svg .node.device rect {
70 + stroke-width: 1.5px;
71 +
72 + transition: opacity 250ms;
73 + -webkit-transition: opacity 250ms;
74 + -moz-transition: opacity 250ms;
75 +}
76 +
77 +svg .node.device.fixed rect {
78 + stroke-width: 1.5;
79 + stroke: #ccc;
80 +}
81 +
82 +svg .node.device.roadm rect {
83 + fill: #03c;
84 +}
85 +
86 +svg .node.device.switch rect {
87 + fill: #06f;
88 +}
89 +
90 +svg .node.host circle {
91 + fill: #c96;
92 + stroke: #000;
93 +}
94 +
95 +svg .node text {
96 + fill: white;
97 + font: 10pt sans-serif;
98 + pointer-events: none;
99 +}
100 +
101 +/* for debugging */
102 +svg .node circle.debug {
103 + fill: white;
104 + stroke: red;
105 +}
106 +svg .node rect.debug {
107 + fill: yellow;
108 + stroke: red;
109 + opacity: 0.35;
110 +}
111 +
112 +
113 +svg .node.selected rect,
114 +svg .node.selected circle {
115 + filter: url(#blue-glow);
116 +}
117 +
118 +svg .link.inactive,
119 +svg .port.inactive,
120 +svg .portText.inactive,
121 +svg .node.inactive rect,
122 +svg .node.inactive circle,
123 +svg .node.inactive text,
124 +svg .node.inactive image {
125 + opacity: .1;
126 +}
127 +
128 +svg .node.inactive.selected rect,
129 +svg .node.inactive.selected text,
130 +svg .node.inactive.selected image {
131 + opacity: .6;
132 +}
133 +
134 +/*
135 + * =============================================================
136 + */
137 +
138 +/*
139 + * Specific structural elements
140 + */
141 +
142 +/* This is to ensure that the body does not expand to account for the
143 + flyout details pane, that is positioned "off screen".
144 + */
145 +body {
146 + overflow: hidden;
147 +}
148 +
149 +
150 +#frame {
151 + width: 100%;
152 + height: 100%;
153 + background-color: #fff;
154 +}
155 +
156 +#flyout {
157 + position: absolute;
158 + z-index: 100;
159 + display: block;
160 + top: 10%;
161 + width: 280px;
162 + right: -300px;
163 + opacity: 0;
164 + background-color: rgba(255,255,255,0.8);
165 +
166 + padding: 10px;
167 + color: black;
168 + font-size: 10pt;
169 + box-shadow: 2px 2px 16px #777;
170 +}
171 +
172 +#flyout h2 {
173 + margin: 8px 4px;
174 + color: black;
175 + vertical-align: middle;
176 +}
177 +
178 +#flyout h2 img {
179 + height: 32px;
180 + padding-right: 8px;
181 + vertical-align: middle;
182 +}
183 +
184 +#flyout p, table {
185 + margin: 4px 4px;
186 +}
187 +
188 +#flyout td.label {
189 + font-style: italic;
190 + color: #777;
191 + padding-right: 12px;
192 +}
193 +
194 +#flyout td.value {
195 +
196 +}
197 +
198 +#flyout hr {
199 + height: 1px;
200 + color: #ccc;
201 + background-color: #ccc;
202 + border: 0;
203 +}
204 +
1 +/*
2 + * Copyright 2014 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 -- Base Framework
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +(function ($) {
24 + 'use strict';
25 + var tsI = new Date().getTime(), // initialize time stamp
26 + tsB, // build time stamp
27 + defaultHash = 'temp1';
28 +
29 +
30 + // attach our main function to the jQuery object
31 + $.onos = function (options) {
32 + var publicApi; // public api
33 +
34 + // internal state
35 + var views = {},
36 + current = {
37 + view: null,
38 + ctx: ''
39 + },
40 + built = false,
41 + errorCount = 0;
42 +
43 + // DOM elements etc.
44 + var $view;
45 +
46 +
47 + // ..........................................................
48 + // Internal functions
49 +
50 + // throw an error
51 + function throwError(msg) {
52 + // separate function, as we might add tracing here too, later
53 + throw new Error(msg);
54 + }
55 +
56 + function doError(msg) {
57 + errorCount++;
58 + console.warn(msg);
59 + }
60 +
61 + // hash navigation
62 + function hash() {
63 + var hash = window.location.hash,
64 + redo = false,
65 + view,
66 + t;
67 +
68 + if (!hash) {
69 + hash = defaultHash;
70 + redo = true;
71 + }
72 +
73 + t = parseHash(hash);
74 + if (!t || !t.vid) {
75 + doError('Unable to parse target hash: ' + hash);
76 + }
77 +
78 + view = views[t.vid];
79 + if (!view) {
80 + doError('No view defined with id: ' + t.vid);
81 + }
82 +
83 + if (redo) {
84 + window.location.hash = makeHash(t);
85 + // the above will result in a hashchange event, invoking
86 + // this function again
87 + } else {
88 + // hash was not modified... navigate to where we need to be
89 + navigate(hash, view, t);
90 + }
91 +
92 + }
93 +
94 + function parseHash(s) {
95 + // extract navigation coordinates from the supplied string
96 + // "vid,ctx" --> { vid:vid, ctx:ctx }
97 +
98 + var m = /^[#]{0,1}(\S+),(\S*)$/.exec(s);
99 + if (m) {
100 + return { vid: m[1], ctx: m[2] };
101 + }
102 +
103 + m = /^[#]{0,1}(\S+)$/.exec(s);
104 + return m ? { vid: m[1] } : null;
105 + }
106 +
107 + function makeHash(t, ctx) {
108 + // make a hash string from the given navigation coordinates.
109 + // if t is not an object, then it is a vid
110 + var h = t,
111 + c = ctx || '';
112 +
113 + if ($.isPlainObject(t)) {
114 + h = t.vid;
115 + c = t.ctx || '';
116 + }
117 +
118 + if (c) {
119 + h += ',' + c;
120 + }
121 + return h;
122 + }
123 +
124 + function navigate(hash, view, t) {
125 + // closePanes() // flyouts etc.
126 + // updateNav() // accordion / selected nav item
127 + createView(view);
128 + setView(view, hash, t);
129 + }
130 +
131 + function reportBuildErrors() {
132 + // TODO: validate registered views / nav-item linkage etc.
133 + console.log('(no build errors)');
134 + }
135 +
136 + // ..........................................................
137 + // View life-cycle functions
138 +
139 + function createView(view) {
140 + var $d;
141 + // lazy initialization of the view
142 + if (view && !view.$div) {
143 + $d = $view.append('div')
144 + .attr({
145 + id: view.vid
146 + });
147 + view.$div = $d; // cache a reference to the selected div
148 + }
149 + }
150 +
151 + function setView(view, hash, t) {
152 + // set the specified view as current, while invoking the
153 + // appropriate life-cycle callbacks
154 +
155 + // if there is a current view, and it is not the same as
156 + // the incoming view, then unload it...
157 + if (current.view && !(current.view.vid !== view.vid)) {
158 + current.view.unload();
159 + }
160 +
161 + // cache new view and context
162 + current.view = view;
163 + current.ctx = t.ctx || '';
164 +
165 + // TODO: clear radio button set (store on view?)
166 +
167 + // preload is called only once, after the view is in the DOM
168 + if (!view.preloaded) {
169 + view.preload(t.ctx);
170 + }
171 +
172 + // clear the view of stale data
173 + view.reset();
174 +
175 + // load the view
176 + view.load(t.ctx);
177 + }
178 +
179 + function resizeView() {
180 + if (current.view) {
181 + current.view.resize();
182 + }
183 + }
184 +
185 + // ..........................................................
186 + // View class
187 + // Captures state information about a view.
188 +
189 + // Constructor
190 + // vid : view id
191 + // nid : id of associated nav-item (optional)
192 + // cb : callbacks (preload, reset, load, resize, unload, error)
193 + // data: custom data object (optional)
194 + function View(vid) {
195 + var av = 'addView(): ',
196 + args = Array.prototype.slice.call(arguments),
197 + nid,
198 + cb,
199 + data;
200 +
201 + args.shift(); // first arg is always vid
202 + if (typeof args[0] === 'string') { // nid specified
203 + nid = args.shift();
204 + }
205 + cb = args.shift();
206 + data = args.shift();
207 +
208 + this.vid = vid;
209 +
210 + if (validateViewArgs(vid)) {
211 + this.nid = nid; // explicit navitem id (can be null)
212 + this.cb = $.isPlainObject(cb) ? cb : {}; // callbacks
213 + this.data = data; // custom data (can be null)
214 + this.$div = null; // view not yet added to DOM
215 + this.ok = true; // valid view
216 + }
217 +
218 + }
219 +
220 + function validateViewArgs(vid) {
221 + var ok = false;
222 + if (typeof vid !== 'string' || !vid) {
223 + doError(av + 'vid required');
224 + } else if (views[vid]) {
225 + doError(av + 'View ID "' + vid + '" already exists');
226 + } else {
227 + ok = true;
228 + }
229 + return ok;
230 + }
231 +
232 + var viewInstanceMethods = {
233 + toString: function () {
234 + return '[View: id="' + this.vid + '"]';
235 + },
236 +
237 + token: function() {
238 + return {
239 + vid: this.vid,
240 + nid: this.nid,
241 + data: this.data
242 + }
243 + }
244 + // TODO: create, preload, reset, load, error, resize, unload
245 + };
246 +
247 + // attach instance methods to the view prototype
248 + $.extend(View.prototype, viewInstanceMethods);
249 +
250 + // ..........................................................
251 + // Exported API
252 +
253 + publicApi = {
254 + printTime: function () {
255 + console.log("the time is " + new Date());
256 + },
257 +
258 + addView: function (vid, nid, cb, data) {
259 + var view = new View(vid, nid, cb, data),
260 + token;
261 + if (view.ok) {
262 + views[vid] = view;
263 + token = view.token();
264 + } else {
265 + token = { vid: view.vid, bad: true };
266 + }
267 + return token;
268 + }
269 + };
270 +
271 + // function to be called from index.html to build the ONOS UI
272 + function buildOnosUi() {
273 + tsB = new Date().getTime();
274 + tsI = tsB - tsI; // initialization duration
275 +
276 + console.log('ONOS UI initialized in ' + tsI + 'ms');
277 +
278 + if (built) {
279 + throwError("ONOS UI already built!");
280 + }
281 + built = true;
282 +
283 + $view = d3.select('#view');
284 +
285 + $(window).on('hashchange', hash);
286 +
287 + // Invoke hashchange callback to navigate to content
288 + // indicated by the window location hash.
289 + hash();
290 +
291 + // If there were any build errors, report them
292 + reportBuildErrors();
293 + }
294 +
295 +
296 + // export the api and build-UI function
297 + return {
298 + api: publicApi,
299 + buildUi: buildOnosUi
300 + };
301 + };
302 +
303 +}(jQuery));
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 + * Copyright 2014 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 -- Preamble -- the first thing we do
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +(function () {
24 + // Check if the URL in the address bar contains a parameter section
25 + // (delineated by '?'). If this is the case, rewrite using '#' instead.
26 +
27 + var m = /([^?]*)\?(.*)/.exec(window.location.href);
28 + if (m) {
29 + window.location.href = m[1] + '#' + m[2];
30 + }
31 +
32 +}());
1 +/*
2 + * Copyright 2014 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 + Temporary module file to test the framework integration.
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +(function (onos) {
24 + 'use strict';
25 +
26 + var api = onos.api;
27 +
28 + var vid,
29 + svg;
30 +
31 + // == define your functions here.....
32 +
33 +
34 + // NOTE: view is a data structure:
35 + // {
36 + // id: 'view-id',
37 + // el: ... // d3 selection of dom view div.
38 + // }
39 +
40 + function load(view) {
41 + vid = view.id;
42 + svg = view.el.append('svg')
43 + .attr({
44 + width: 400,
45 + height: 300
46 + });
47 +
48 + var fill = (vid === 'temp1') ? 'red' : 'blue',
49 + stroke = (vid === 'temp2') ? 'yellow' : 'black';
50 +
51 + svg.append('circle')
52 + .attr({
53 + cx: 200,
54 + cy: 150,
55 + r: 30
56 + })
57 + .style({
58 + fill: fill,
59 + stroke: stroke,
60 + 'stroke-width': 3.5
61 + });
62 + }
63 +
64 + // == register views here, with links to lifecycle callbacks
65 +
66 + api.addView('temp1', {
67 + load: load
68 + });
69 +
70 + api.addView('temp2', {
71 + load: load
72 + });
73 +
74 +
75 +}(ONOS));
1 +/*
2 + * Copyright 2014 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 view -- CSS file
19 +
20 + @author Simon Hunt
21 + */
22 +
This diff is collapsed. Click to expand it.