홍길동 / 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
# Main Application
index.html is the main launch point for the application.
fw/ contains framework related code
view/ contains view related code
\ No newline at end of file
# Framework related code
- Masthead
- Float Panels
- Alerts
- Flash (transient messages)
- Quick Help (key bindings, mouse gestures)
- Death Mask (server connection lost)
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Masthead -- CSS file
@author Simon Hunt
*/
#mast {
height: 36px;
padding: 4px;
vertical-align: baseline;
}
.light #mast {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #mast {
background-color: #444;
box-shadow: 0 2px 8px #777;
}
#mast img.logo {
height: 38px;
padding-left: 8px;
padding-right: 8px;
}
#mast .title {
font-size: 14pt;
font-style: italic;
vertical-align: 12px;
}
.light #mast .title {
color: #369;
}
.dark #mast .title {
color: #eee;
}
<!-- Masthead partial HTML -->
<img class="logo" src="../data/img/onos-logo.png">
<span class="title">Open Network Operating System</span>
\ No newline at end of file
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Masthead
@author Simon Hunt
*/
(function () {
'use strict';
angular.module('onosMast', [])
.controller('MastCtrl', [function () {
// controller logic here
console.log('MastCtrl has been created');
}]);
}());
<!DOCTYPE html>
<!--
~ Copyright 2014 Open Networking Laboratory
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="../data/img/onos-logo.png">
<title>ONOS Angular</title>
<!-- Third party library code included here -->
<!--TODO: use minified versions, once debugging is complete -->
<script src="../tp/angular.js"></script>
<script src="../tp/angular-route.js"></script>
<script src="../tp/d3.js"></script>
<script src="../tp/topojson.v1.min.js"></script>
<!-- NOTE: We are going to see if we can dispense with jQuery... -->
<!--<script src="../tp/jquery-2.1.1.min.js"></script>-->
<!-- ONOS UI Framework included here -->
<!-- TODO: use a single catenated-minified file here -->
<script src="onos.js"></script>
<script src="fw/mast/mast.js"></script>
<!-- Framework and library stylesheets included here -->
<!-- TODO: use a single catenated-minified file here -->
<link rel="stylesheet" href="onos.css">
<link rel="stylesheet" href="fw/mast/mast.css">
<!-- This is where contributed javascript get injected -->
<!-- INJECTED-JAVASCRIPT -->
<!-- TODO: inject javascript refs server-side -->
<!-- This is where contributed stylesheets get injected -->
<!-- INJECTED-CSS-STYLESHEETS -->
<!-- TODO: inject style-sheet refs server-side -->
</head>
<body class="light" ng-app="onosApp">
<div id="mast"
ng-controller="MastCtrl as mastCtrl"
ng-include="'fw/mast/mast.html'"></div>
<div id="view" ng-view></div>
<div id="floatpanels"></div>
<div id="alerts"></div>
<div id="flash"></div>
<div id="quickhelp"></div>
<div id="deathmask"></div>
</body>
</html>
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- core -- CSS file
@author Simon Hunt
*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
}
/*
overflow hidden is to ensure that the body does not expand to account
for any flyout panes, that are positioned "off screen".
*/
body {
height: 100%;
margin: 0;
overflow: hidden;
}
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Base Framework
@author Simon Hunt
*/
(function () {
'use strict';
angular.module('onosApp', ['onosMast'])
.controller('OnosCtrl', [function () {
// controller logic here
console.log('OnosCtrl has been created');
}]);
}());
# ONOS Topology View
Code and resources for implementing the client-side for the Topology View.
The 'appext' directory is for "Application Extensions". That is to say,
this would be the path to applications contributing to the GUI.
see: http://bost.ocks.org/mike/map/
brew install gdal
npm install -g topojson
To generate continental US map:
$ wget 'http://www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_1_states_provinces_lakes.zip'
$ unzip ne_50m_admin_1_states_provinces_lakes.zip
$ ogr2ogr -f GeoJSON -where "sr_adm0_a3 IN ('USA')" states.json ne_50m_admin_1_states_provinces_lakes.shp
edit states.json to remove data for Hawaii and Alaska
$ topojson states.json > topology.json
The .shp file above is incomplete (USA and part of Candada.)
So it may be that each region requires a bit of research to generate.
Ideally a source for public domain shp files can be found that covers all geographic regions.
For Canada:
# wget 'http://www12.statcan.gc.ca/census-recensement/2011/geo/bound-limit/files-fichiers/gpr_000b11a_e.zip'
# unzip gpr_000b11a_e.zip
# ogr2ogr -f "GeoJSON" -s_srs EPSG:21781 -t_srs EPSG:4326 canada.json gpr_000b11a_e.shp
# topojson --id-property CFSAUID -p name=PRNAME -p name canada.json > topology.json
This produces a very large (5MB) file and draws very slowly in Chrome.
So some additional processing is required to simplify the geometry. (It is not checked in.)
Also, the specification of object structure within the geojson is unclear.
In the US map the geojson structure is
json.objects.states
but in the Canadian data it's
json.objects.canada
Lastly, the projection that is used may be tailored to the region.
The preferred projection for the US is "albers" and d3 provides a "albersUSA" which can be used to
project hawaii and alaska as well
For Canada, apparantly a "Lambert" projection (called conicConformal in d3) is preferred
see:
https://github.com/mbostock/d3/wiki/Geo-Projections
http://www.statcan.gc.ca/pub/92-195-x/2011001/other-autre/mapproj-projcarte/m-c-eng.htm
Summary:
- some additional work is required to fully generalize maps functionality.
- it may be worthwhile for ON.LAB to provide the topo files for key regions since producing these
files is non-trivial
This diff could not be displayed because it is too large.
# Placeholder for a mock topology view servlet (using node.js),
# so that we can inject test events...
This is so we don't have to pollute the client-side code with test stuff.