blob: 1f475a91fb1633e48b4fc3e255db8b27d1263ebe [file] [log] [blame]
Simon Hunt8914d8b2014-11-04 17:06:00 -08001/*
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 Module template file for SVG based view.
19
20 @author Simon Hunt
21 */
22
23(function (onos) {
24 'use strict';
25
Simon Huntf67722a2014-11-10 09:32:06 -080026 var svg,
27 data = [ 60 ];
Simon Hunt8914d8b2014-11-04 17:06:00 -080028
29 // invoked only the first time the view is loaded
Simon Huntf67722a2014-11-10 09:32:06 -080030 // - used to initialize the view contents
Simon Hunta2994cc2014-12-02 14:19:15 -080031 function init(view, ctx, flags) {
Simon Hunt8914d8b2014-11-04 17:06:00 -080032 svg = view.$div.append('svg');
Simon Huntf67722a2014-11-10 09:32:06 -080033 resize(view);
Simon Hunt8914d8b2014-11-04 17:06:00 -080034 // ... further code to initialize the SVG view ...
35
36 }
37
38 // invoked just prior to loading the view
Simon Huntf67722a2014-11-10 09:32:06 -080039 // - used to clear the view of stale data
40 function reset(view, ctx, flags) {
41 // e.g. clear svg of all objects...
42 // svg.html('');
Simon Hunt8914d8b2014-11-04 17:06:00 -080043
44 }
45
46 // invoked when the view is loaded
Simon Huntf67722a2014-11-10 09:32:06 -080047 // - used to load data into the view,
48 // when the view is shown
49 function load(view, ctx, flags) {
50 var w = view.width(),
51 h = view.height();
52
53 // as an example...
54 svg.selectAll('circle')
55 .data(data)
56 .enter()
57 .append('circle')
58 .attr({
59 cx: w / 2,
60 cy: h / 2,
61 r: function (d) { return d; }
62 })
63 .style({
64 fill: 'goldenrod',
65 stroke: 'black',
66 'stroke-width': 3.5,
67 });
68 }
69
70 // invoked when the view is unloaded
71 // - used to clean up data that should be removed,
72 // when the view is hidden
73 function unload(view, ctx, flags) {
Simon Hunt8914d8b2014-11-04 17:06:00 -080074
75 }
76
77 // invoked when the view is resized
Simon Huntf67722a2014-11-10 09:32:06 -080078 // - used to reconfigure elements to the new size of the view
79 function resize(view, ctx, flags) {
80 var w = view.width(),
81 h = view.height();
82
83 // resize svg layer to match new size of view
84 svg.attr({
85 width: w,
86 height: h
87 });
88
89 // as an example...
90 svg.selectAll('circle')
91 .attr({
92 cx: w / 2,
93 cy: h / 2
94 });
95
Simon Hunt8914d8b2014-11-04 17:06:00 -080096 // ... further code to handle resize of view ...
97
98 }
99
Simon Huntf67722a2014-11-10 09:32:06 -0800100 // invoked when the framework needs to alert the view of an error
101 // - (EXPERIMENTAL -- not currently used)
102 function error(view, ctx, flags) {
103
104 }
105
106 // ================================================================
Simon Hunt8914d8b2014-11-04 17:06:00 -0800107 // == register the view here, with links to lifecycle callbacks
108
Simon Huntf67722a2014-11-10 09:32:06 -0800109 // A typical setup that initializes the view once, then reacts to
110 // load and resize events would look like this:
111
112 onos.ui.addView('mySvgViewId', {
Simon Hunta2994cc2014-12-02 14:19:15 -0800113 init: init,
Simon Hunt8914d8b2014-11-04 17:06:00 -0800114 load: load,
Simon Hunt8914d8b2014-11-04 17:06:00 -0800115 resize: resize
116 });
117
Simon Huntf67722a2014-11-10 09:32:06 -0800118 // A minimum setup that builds the view every time it is loaded
119 // would look like this:
120 //
121 // onos.ui.addView('myViewId', {
122 // reset: true, // clear view contents on reset
123 // load: load
124 // });
125
126 // The complete gamut of callbacks would look like this:
127 //
128 // onos.ui.addView('myViewId', {
Simon Hunta2994cc2014-12-02 14:19:15 -0800129 // init: init,
Simon Huntf67722a2014-11-10 09:32:06 -0800130 // reset: reset,
131 // load: load,
132 // unload: unload,
133 // resize: resize,
134 // error: error
135 // });
136
Simon Hunt8914d8b2014-11-04 17:06:00 -0800137}(ONOS));