홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
352be5fd 1 parent 998b1417

GUI - Cleanup of old files. 

Change-Id: I2fd30f32d15ecb0b97ee7f380523ebb8513a6a01
Inline Side-by-side
Showing 24 changed files with 27 additions and 300 deletions
......@@ -26,20 +26,20 @@
<title>ONOS GUI</title>
<!--TODO: use the minified version of d3, once debugging is complete -->
<script src="libs/d3.js"></script>
<script src="libs/jquery-2.1.1.min.js"></script>
<script src="../libs/d3.js"></script>
<script src="../libs/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="../base.css">
<link rel="stylesheet" href="onos.css">
<script src="geometry.js"></script>
<script src="../geometry.js"></script>
<script src="onos.js"></script>
</head>
<body>
<div id="frame">
<div id="mast">
<img id="logo" src="img/onos-logo.png">
<img id="logo" src="../img/onos-logo.png">
<span class="title">Open Network Operating System</span>
<span id="displayModes" class="right">
<span id="showAll" class="radio active">All Layers</span>
......
......@@ -157,8 +157,8 @@
d3.json(url , function (err, data) {
if (err) {
alert('Oops! Error reading JSON...\n\n' +
'URL: ' + url + '\n\n' +
'Error: ' + err.message);
'URL: ' + url + '\n\n' +
'Error: ' + err.message);
return;
}
// console.log("here is the JSON data...");
......@@ -263,7 +263,7 @@
.attr('y', 15)
.style('font-size', '20pt')
.text('keyCode: ' + d3.event.keyCode +
' applied to : ' + contextLabel())
' applied to : ' + contextLabel())
.transition().duration(2000)
.style('font-size', '2pt')
.style('fill-opacity', 0.01)
......@@ -474,7 +474,7 @@
'xlink:href': config.backgroundUrl
})
.style('visibility',
config.options.loadBackground ? 'visible' : 'hidden');
config.options.loadBackground ? 'visible' : 'hidden');
// function zoomRedraw() {
// d3.select("#zoomable").attr("transform",
......@@ -493,9 +493,9 @@
glow.append('feColorMatrix')
.attr('type', 'matrix')
.attr('values', '0 0 0 0 0 ' +
'0 0 0 0 0 ' +
'0 0 0 0 .7 ' +
'0 0 0 1 0 ');
'0 0 0 0 0 ' +
'0 0 0 0 .7 ' +
'0 0 0 1 0 ');
glow.append('feGaussianBlur')
.attr('stdDeviation', 3)
......@@ -596,14 +596,14 @@
if (d.source.type)
network.linkSrcPort.append('rect').attr({
id: 'srcPort-' + safeId(d.id),
class: 'port ' + srcType,
width: pw,
height: ph,
rx: 4,
ry: 4
}).style('visibility', portVis);
network.linkSrcPort.append('rect').attr({
id: 'srcPort-' + safeId(d.id),
class: 'port ' + srcType,
width: pw,
height: ph,
rx: 4,
ry: 4
}).style('visibility', portVis);
network.linkTgtPort.append('rect').attr({
id: 'tgtPort-' + safeId(d.id),
......@@ -673,15 +673,15 @@
width: 100,
height: 12
});
// note that width/height are adjusted to fit the label text
// then padded, and space made for the icon.
// note that width/height are adjusted to fit the label text
// then padded, and space made for the icon.
network.node.filter('.device').each(function(d) {
var node = d3.select(this),
icon = iconUrl(d);
node.append('text')
// TODO: add label cycle behavior
// TODO: add label cycle behavior
.text(d.id)
.attr('dy', '1.1em');
......@@ -1100,8 +1100,8 @@
d3.json(url, function (err, data) {
if (err) {
alert('Oops! Error reading JSON...\n\n' +
'URL: ' + url + '\n\n' +
'Error: ' + err.message);
'URL: ' + url + '\n\n' +
'Error: ' + err.message);
return;
}
// console.log("JSON data... " + url);
......
......@@ -24,13 +24,10 @@
<html>
<head>
<meta charset="utf-8">
<title>ONOS GUI (v1.1)</title>
<title>ONOS</title>
<link rel="shortcut icon" href="img/onos-logo.png">
<!-- first script to be run -->
<script src="preamble.js"></script>
<!-- Third party library code included here -->
<!--TODO: use the minified version of d3, once debugging is complete -->
<script src="libs/d3.js"></script>
......@@ -48,7 +45,6 @@
<!-- This is where contributed stylesheets get INJECTED -->
<!-- TODO: replace with template marker and inject refs server-side -->
<link rel="stylesheet" href="topo2.css">
<link rel="stylesheet" href="webSockTrace.css">
<!-- General library modules included here-->
......@@ -86,8 +82,7 @@
var ONOS = $.onos({
comment: 'configuration options',
theme: 'dark',
startVid: 'topo',
trace: false
startVid: 'topo'
});
</script>
......@@ -112,8 +107,6 @@
<!-- Contributed (application) views injected here -->
<!-- TODO: replace with template marker and inject refs server-side -->
<script src="webSockTrace.js"></script>
<script src="topo2.js"></script>
<!-- finally, build the UI-->
......
/*
* 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 -- Preamble -- the first thing we do
@author Simon Hunt
*/
(function () {
// NOTE: DON'T Want to do this.. we want to be able to
// use the parameter section, for example:
// #viewId,context?flag1,flag2,flag3
// Check if the URL in the address bar contains a parameter section
// (delineated by '?'). If this is the case, rewrite using '#' instead.
//var m = /([^?]*)\?(.*)/.exec(window.location.href);
//if (m) {
// window.location.href = m[1] + '#' + m[2];
//}
}());
/*
* 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 -- Web Socket Trace -- CSS file
@author Simon Hunt
*/
#webSockTrace .toolbar {
height: 36px;
padding: 4px;
vertical-align: baseline;
font-size: 12pt;
margin-top: 6px;
}
/* theme-related */
#webSockTrace .toolbar {
background-color: #448;
color: #fff;
}
#webSockTrace .output {
overflow-y: scroll;
}
/* theme-related */
#webSockTrace .output {
background-color: #eef;
color: #226;
}
#webSockTrace .output p {
margin: 2px 8px;
font-size: 10pt;
padding-left: 6px;
}
/* theme-related */
#webSockTrace .output p.tx {
color: magenta;
}
#webSockTrace .output p.rx {
color: blue;
}
#webSockTrace .output p.subtitle {
margin: 6px 8px;
padding-left: 2px;
font-size: 12pt;
font-weight: bold;
font-style: italic;
}
/* theme-related */
#webSockTrace .output p.subtitle {
color: #626;
}
/*
* 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.
*/
/*
View that traces messages across the websocket.
@author Simon Hunt
*/
(function (onos) {
'use strict';
var v,
$d,
tb,
out,
which = 'tx',
keyDispatch = {
space: function () {
output(which, "Simon woz 'ere... " + which);
which = (which === 'tx') ? 'rx' : 'tx';
}
};
function addHeader() {
tb = $d.append('div')
.attr('class', 'toolbar');
tb.append('span').text('Web Socket Trace');
}
function addOutput() {
out = $d.append('div')
.attr('class', 'output');
}
function subtitle(msg) {
out.append('p').attr('class', 'subtitle').text(msg);
}
function output(rxtx, msg) {
out.append('p').attr('class', rxtx).text(msg);
}
// invoked only the first time the view is loaded
function preload(view, ctx, flags) {
// NOTE: view.$div is a D3 selection of the view's div
v = view;
$d = v.$div;
addHeader();
addOutput();
// hack for now, to allow topo access to our API
// TODO: add 'exportApi' and 'importApi' to views.
onos.exported.webSockTrace = {
subtitle: subtitle,
output: output
};
}
// invoked just prior to loading the view
function reset(view, ctx, flags) {
}
// invoked when the view is loaded
function load(view, ctx, flags) {
resize(view, ctx, flags);
view.setKeys(keyDispatch);
subtitle('Waiting for messages...');
}
// invoked when the view is resized
function resize(view, ctx, flags) {
var h = view.height();
out.style('height', h + 'px');
}
// == register the view here, with links to lifecycle callbacks
onos.ui.addView('webSockTrace', {
preload: preload,
load: load,
resize: resize
});
}(ONOS));
<html>
<head>
<title>Web Sockets Demo</title>
<script src="libs/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
if (!window.WebSocket)
alert("WebSocket not supported by this browser");
var server = {
connect : function() {
var location = document.location.toString().replace('http://',
'ws://').replace('https://', 'wss://').replace('ws.html','ws/topology');
this.ws = new WebSocket(location);
this.ws.onopen = function() {
server._send("Hi there!");
};
this.ws.onmessage = function(m) {
if (m.data) {
$('#log').append(m.data).append($('<br/>'));
}
};
this.ws.onclose = function(m) {
this.ws = null;
};
},
_send : function(message) {
if (this.ws) {
this.ws.send(message);
}
},
send : function(text) {
if (text != null && text.length > 0) {
server._send(text);
}
}
};
</script>
</head>
<body>
<pre id='log'></pre>
<script type='text/javascript'>
server.connect();
</script>
</body>
</html>