홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
c2202d52 1 parent d0ef7527

GUI -- Beginnings of new file structure / Angular implementation. WIP. 

Change-Id: Ic79347b41292432605cd30bf1d4920063f6602e8
Inline Side-by-side
Showing 15 changed files with 311 additions and 0 deletions
1 +# Main Application
2 +
3 +index.html is the main launch point for the application.
4 +
5 +fw/ contains framework related code
6 +
7 +view/ contains view related code
...\ No newline at end of file ...\ No newline at end of file
1 +# Framework related code
2 +
3 +- Masthead
4 +- Float Panels
5 +- Alerts
6 +- Flash (transient messages)
7 +- Quick Help (key bindings, mouse gestures)
8 +- Death Mask (server connection lost)
9 +
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 + vertical-align: baseline;
27 +}
28 +
29 +.light #mast {
30 + background-color: #bbb;
31 + box-shadow: 0 2px 8px #777;
32 +}
33 +.dark #mast {
34 + background-color: #444;
35 + box-shadow: 0 2px 8px #777;
36 +}
37 +
38 +#mast img.logo {
39 + height: 38px;
40 + padding-left: 8px;
41 + padding-right: 8px;
42 +}
43 +
44 +#mast .title {
45 + font-size: 14pt;
46 + font-style: italic;
47 + vertical-align: 12px;
48 +}
49 +
50 +.light #mast .title {
51 + color: #369;
52 +}
53 +.dark #mast .title {
54 + color: #eee;
55 +}
1 +<!-- Masthead partial HTML -->
2 +<img class="logo" src="../data/img/onos-logo.png">
3 +<span class="title">Open Network Operating System</span>
...\ 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 -- Masthead
19 +
20 + @author Simon Hunt
21 + */
22 +(function () {
23 + 'use strict';
24 +
25 + angular.module('onosMast', [])
26 + .controller('MastCtrl', [function () {
27 + // controller logic here
28 + console.log('MastCtrl has been created');
29 + }]);
30 +
31 +}());
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 +<html>
18 +<head>
19 + <meta charset="utf-8">
20 + <link rel="shortcut icon" href="../data/img/onos-logo.png">
21 + <title>ONOS Angular</title>
22 +
23 + <!-- Third party library code included here -->
24 + <!--TODO: use minified versions, once debugging is complete -->
25 + <script src="../tp/angular.js"></script>
26 + <script src="../tp/angular-route.js"></script>
27 +
28 + <script src="../tp/d3.js"></script>
29 + <script src="../tp/topojson.v1.min.js"></script>
30 +
31 + <!-- NOTE: We are going to see if we can dispense with jQuery... -->
32 + <!--<script src="../tp/jquery-2.1.1.min.js"></script>-->
33 +
34 + <!-- ONOS UI Framework included here -->
35 + <!-- TODO: use a single catenated-minified file here -->
36 + <script src="onos.js"></script>
37 + <script src="fw/mast/mast.js"></script>
38 +
39 + <!-- Framework and library stylesheets included here -->
40 + <!-- TODO: use a single catenated-minified file here -->
41 + <link rel="stylesheet" href="onos.css">
42 + <link rel="stylesheet" href="fw/mast/mast.css">
43 +
44 + <!-- This is where contributed javascript get injected -->
45 + <!-- INJECTED-JAVASCRIPT -->
46 + <!-- TODO: inject javascript refs server-side -->
47 +
48 + <!-- This is where contributed stylesheets get injected -->
49 + <!-- INJECTED-CSS-STYLESHEETS -->
50 + <!-- TODO: inject style-sheet refs server-side -->
51 +</head>
52 +<body class="light" ng-app="onosApp">
53 + <div id="mast"
54 + ng-controller="MastCtrl as mastCtrl"
55 + ng-include="'fw/mast/mast.html'"></div>
56 +
57 + <div id="view" ng-view></div>
58 +
59 + <div id="floatpanels"></div>
60 + <div id="alerts"></div>
61 + <div id="flash"></div>
62 + <div id="quickhelp"></div>
63 + <div id="deathmask"></div>
64 +</body>
65 +</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 -- core -- CSS file
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +html {
24 + font-family: sans-serif;
25 + -webkit-text-size-adjust: 100%;
26 + -ms-text-size-adjust: 100%;
27 + height: 100%;
28 +}
29 +
30 +/*
31 + overflow hidden is to ensure that the body does not expand to account
32 + for any flyout panes, that are positioned "off screen".
33 + */
34 +body {
35 + height: 100%;
36 + margin: 0;
37 + overflow: hidden;
38 +}
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 +(function () {
23 + 'use strict';
24 +
25 + angular.module('onosApp', ['onosMast'])
26 + .controller('OnosCtrl', [function () {
27 + // controller logic here
28 + console.log('OnosCtrl has been created');
29 + }]);
30 +
31 +}());
1 +# ONOS Topology View
2 +
3 +Code and resources for implementing the client-side for the Topology View.
1 +The 'appext' directory is for "Application Extensions". That is to say,
2 +this would be the path to applications contributing to the GUI.
1 +see: http://bost.ocks.org/mike/map/
2 +
3 +brew install gdal
4 +npm install -g topojson
5 +
6 +To generate continental US map:
7 +
8 + $ wget 'http://www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_1_states_provinces_lakes.zip'
9 + $ unzip ne_50m_admin_1_states_provinces_lakes.zip
10 + $ ogr2ogr -f GeoJSON -where "sr_adm0_a3 IN ('USA')" states.json ne_50m_admin_1_states_provinces_lakes.shp
11 +
12 +edit states.json to remove data for Hawaii and Alaska
13 +
14 + $ topojson states.json > topology.json
15 +
16 +
17 +The .shp file above is incomplete (USA and part of Candada.)
18 +So it may be that each region requires a bit of research to generate.
19 +Ideally a source for public domain shp files can be found that covers all geographic regions.
20 +
21 +
22 +For Canada:
23 +
24 + # wget 'http://www12.statcan.gc.ca/census-recensement/2011/geo/bound-limit/files-fichiers/gpr_000b11a_e.zip'
25 + # unzip gpr_000b11a_e.zip
26 + # ogr2ogr -f "GeoJSON" -s_srs EPSG:21781 -t_srs EPSG:4326 canada.json gpr_000b11a_e.shp
27 + # topojson --id-property CFSAUID -p name=PRNAME -p name canada.json > topology.json
28 +
29 +
30 +This produces a very large (5MB) file and draws very slowly in Chrome.
31 +So some additional processing is required to simplify the geometry. (It is not checked in.)
32 +
33 +Also, the specification of object structure within the geojson is unclear.
34 +In the US map the geojson structure is
35 +
36 + json.objects.states
37 +
38 +but in the Canadian data it's
39 +
40 + json.objects.canada
41 +
42 +
43 +Lastly, the projection that is used may be tailored to the region.
44 +The preferred projection for the US is "albers" and d3 provides a "albersUSA" which can be used to
45 + project hawaii and alaska as well
46 +
47 +For Canada, apparantly a "Lambert" projection (called conicConformal in d3) is preferred
48 +
49 +see:
50 + https://github.com/mbostock/d3/wiki/Geo-Projections
51 + http://www.statcan.gc.ca/pub/92-195-x/2011001/other-autre/mapproj-projcarte/m-c-eng.htm
52 +
53 +
54 +Summary:
55 +- some additional work is required to fully generalize maps functionality.
56 +- it may be worthwhile for ON.LAB to provide the topo files for key regions since producing these
57 + files is non-trivial
58 +
59 +
60 +
61 +
This diff could not be displayed because it is too large.
1 +# Placeholder for a mock topology view servlet (using node.js),
2 +# so that we can inject test events...
3 +
4 +This is so we don't have to pollute the client-side code with test stuff.
5 +