aboutsummaryrefslogtreecommitdiffstats
path: root/framework/src/onos/web/gui/src/main/webapp/_sdh/oblique.html
diff options
context:
space:
mode:
Diffstat (limited to 'framework/src/onos/web/gui/src/main/webapp/_sdh/oblique.html')
-rw-r--r--framework/src/onos/web/gui/src/main/webapp/_sdh/oblique.html473
1 files changed, 0 insertions, 473 deletions
diff --git a/framework/src/onos/web/gui/src/main/webapp/_sdh/oblique.html b/framework/src/onos/web/gui/src/main/webapp/_sdh/oblique.html
deleted file mode 100644
index e54d18f5..00000000
--- a/framework/src/onos/web/gui/src/main/webapp/_sdh/oblique.html
+++ /dev/null
@@ -1,473 +0,0 @@
-<!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.
- -->
-
-<!--
- Testing transformations for transitioning between overhead and
- perspective projections of two layers.
- -->
-<html>
-<head>
- <meta charset="utf-8">
- <title>Layer Transformations</title>
-
- <script src="../tp/d3.js"></script>
- <script src="../tp/jquery-2.1.1.min.js"></script>
-
- <style>
- html,
- body {
- background-color: #ccc;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 9pt;
- }
-
- svg {
- position: absolute;
- background-color: #fff;
- top: 30px;
- left: 60px;
- }
-
- svg text {
- font-size: 3pt;
- }
-
- </style>
-</head>
-<body>
- <svg width="1000px" height="600px" viewBox="0 0 160 120"></svg>
-
- <script>
- (function (){
-
- // Configuration...
- var w = 160,
- h = 120,
- time = 1500;
-
- var pktData = [
- [20,60,'a'],
- [60,20,'b'],
- [100,20,'c'],
- [140,60,'d'],
- [100,100,'e'],
- [60,100,'f'],
- [20,20,'w'],
- [140,20,'x'],
- [20,100,'y'],
- [140,100,'z']
- ],
- optData = [
- [40,40,'p'],
- [120,40,'q'],
- [120,80,'r'],
- [40,80,'s'],
- [20,20,'j'],
- [140,20,'k'],
- [20,100,'l'],
- [140,100,'m']
- ],
- linkData = [
- ['a','p'],
- ['p','b'],
- ['b','c'],
- ['c','q'],
- ['q','d'],
- ['d','r'],
- ['r','e'],
- ['e','f'],
- ['f','s'],
- ['s','a'],
- ['s','q'],
- ['p','r'],
- ['b','f'],
- ['c','e'],
- ['w','j'],
- ['x','k'],
- ['z','m'],
- ['y','l']
- ];
-
- // Transform parameters
- var tf = {
- tt: -.7, // x skew y factor
- xsk: -35, // x skew angle
- ysc: 0.5, // y scale
- ytr: 50, // y translate
- pad: 5
- },
- rectFill = {
- pkt: 'rgba(130,130,170,0.3)',
- opt: 'rgba(170,130,170,0.3)'
- };
-
- // Internal state...
- var nodes = [],
- links = [],
- overhead = true,
- xffn;
-
- // D3/DOM magic...
- var svg = d3.select('svg'),
- nodeG,
- linkG,
- node,
- link,
- force,
- pktLayer,
- optLayer;
-
-
- // General functions ...
- function isF(f) {
- return $.isFunction(f) ? f : null;
- }
-
- function translate(x,y) {
- return 'translate(' + x + ',' + y + ')';
- }
-
- function scale(x,y) {
- return 'scale(' + x + ',' + y + ')';
- }
- function skewX(x) {
- return 'skewX(' + x + ')';
- }
-
-
- // Key Bindings...
- var keyHandler = {
- T: transform
- };
-
- function whatKey(code) {
- switch (code) {
- case 13: return 'enter';
- case 16: return 'shift';
- case 17: return 'ctrl';
- case 18: return 'alt';
- case 27: return 'esc';
- case 32: return 'space';
- case 37: return 'leftArrow';
- case 38: return 'upArrow';
- case 39: return 'rightArrow';
- case 40: return 'downArrow';
- case 91: return 'cmdLeft';
- case 93: return 'cmdRight';
- case 187: return 'equals';
- case 189: return 'dash';
- case 191: return 'slash';
- default:
- if ((code >= 48 && code <= 57) ||
- (code >= 65 && code <= 90)) {
- return String.fromCharCode(code);
- } else if (code >= 112 && code <= 123) {
- return 'F' + (code - 111);
- }
- return '.';
- }
- }
-
- function keyIn() {
- var event = d3.event,
- keyCode = event.keyCode,
- key = whatKey(keyCode),
- fn = isF(keyHandler[key]);
- if (fn) {
- fn(key, keyCode, event);
- }
- }
-
- // Key events....
- function transform() {
- overhead = !overhead;
- if (overhead) {
- toOverhead();
- } else {
- toOblique();
- }
- }
-
- function toOverhead() {
- xffn = null;
- hidePlane(pktLayer);
- hidePlane(optLayer);
- transitionNodes();
- }
-
- function padBox(box, p) {
- box.x -= p;
- box.y -= p;
- box.width += p*2;
- box.height += p*2;
- }
-
- function toOblique() {
- var box = nodeG.node().getBBox();
- padBox(box, tf.pad);
-
- xffn = function (xy, dir) {
- var x = xy.x + xy.y*tf.tt,
- y = xy.y*tf.ysc + tf.ysc*tf.ytr*dir;
- return { x: x, y: y};
- };
-
- showPlane(pktLayer, box, -1);
- showPlane(optLayer, box, 1);
- transitionNodes();
- }
-
- function transitionNodes() {
- // note: turn off force layout while transitioning.. if it is on
-// force.stop();
-
- if (xffn) {
- nodes.forEach(function (d) {
- var dir = d.type === 'pkt' ? -1 : 1,
- oldxy = {x: d.x, y: d.y},
- coords = xffn(oldxy, dir);
- d.oldxy = oldxy;
- d.x = coords.x;
- d.y = coords.y;
- });
- } else {
- nodes.forEach(function (d) {
- d.x = d.oldxy.x;
- d.y = d.oldxy.y;
- delete d.oldxy;
- });
- }
-
- nodeG.selectAll('.node')
- .transition()
- .duration(time)
- .attr({
- transform: function (d) {
- return translate(d.x, d.y);
- }
- });
-
- linkG.selectAll('.link')
- .transition()
- .duration(time)
- .attr({
- x1: function (d) { return d.source.x; },
- y1: function (d) { return d.source.y; },
- x2: function (d) { return d.target.x; },
- y2: function (d) { return d.target.y; }
- });
- }
-
- function showPlane(layer, box, dir) {
- layer.select('rect')
- .attr(box)
- .attr('opacity', 0)
- .transition()
- .duration(time)
- .attr('opacity', 1)
- .attr('transform', obliqueXform(dir));
- }
-
- function hidePlane(layer) {
- var rect = layer.select('rect');
- rect.transition()
- .duration(time)
- .attr('opacity', 0)
- .attr('transform', overheadXform());
-
- }
-
- function obliqueXform(dir) {
- return scale(1, tf.ysc) + translate(0, dir * tf.ytr) + skewX(tf.xsk);
- }
-
-
- function overheadXform() {
- return skewX(0) + translate(0,0) + scale(1,1);
- }
-
- // Nodes and Links...
- function prepareNodes() {
- var hw = w/2,
- hh = h/2;
-
- function addNode(t, d) {
- nodes.push({
- type: t,
- x: d[0] - hw,
- y: d[1] - hh,
- id: d[2],
- fixed: true
- });
- }
-
- optData.forEach(function (d) {
- addNode('opt', d);
- });
- pktData.forEach(function (d) {
- addNode('pkt', d);
- });
- }
-
- function findNode(id) {
- for (var i=0,n=nodes.length; i<n; i++) {
- if (nodes[i].id === id) {
- return nodes[i];
- }
- }
- return null;
- }
-
- function prepareLinks() {
- linkData.forEach(function (d) {
- var src = d[0],
- dst = d[1];
- links.push({
- id: src + '-' + dst,
- source: findNode(src),
- target: findNode(dst)
- });
- });
-
- }
-
- function updateNodes() {
- node = nodeG.selectAll('.node')
- .data(nodes, function (d) { return d.id; });
-
- var entering = node.enter()
- .append('g').attr({
- id: function (d) { return d.id; },
- 'class': function (d) { return 'node ' + d.type; }
- });
-
- entering.each(function (d) {
- var el = d3.select(this);
- d.el = el;
-
- el.append('rect').attr({
- width: 5,
- height: 5,
- fill: function (d) {
- return d.type === 'pkt' ? '#669' : '#969';
- },
- rx: 1,
- transform: 'translate(-2.5,-2.5)'
- });
- el.append('text')
- .text(d.id)
- .attr({
- dy: '0.9em',
- 'text-anchor': 'middle',
- transform: 'translate(0,-2.5)',
- fill: 'white'
- });
- });
- }
-
- function updateLinks() {
- link = linkG.selectAll('.link')
- .data(links, function (d) { return d.id; });
-
- var entering = link.enter()
- .append('line').attr({
- id: function (d) { return d.id; },
- class: 'link',
- stroke: '#888',
- 'stroke-width': 0.4,
- opacity: 0.7
- });
-
- entering.each(function (d) {
- d.el = d3.select(this);
-
- });
- }
-
- function update() {
- updateNodes();
- updateLinks();
- }
-
- var ntick = 0;
- function tick() {
- console.log('tick ' + (++ntick));
- node.attr({
- transform: function (d) { return translate(d.x, d.y); }
- });
-
- link.attr({
- x1: function (d) { return d.source.x; },
- y1: function (d) { return d.source.y; },
- x2: function (d) { return d.target.x; },
- y2: function (d) { return d.target.y; }
- });
- }
-
- function setOrigin(/*varargs*/) {
- var i, n, g;
- for (i= 0,n=arguments.length; i< n; i++) {
- g = arguments[i];
- g.attr('transform', translate(w/2, h/2));
- }
- }
-
- function initLayers() {
- optLayer.attr('class', 'layer').append('rect')
- .attr('fill', rectFill.opt);
- pktLayer.attr('class', 'layer').append('rect')
- .attr('fill', rectFill.pkt);
- }
-
- function init() {
- svg.append('text')
- .text('Press the "T" key....')
- .attr({ dy: '1.2em', fill: '#999'})
- .style('font-size', '2.4pt')
- .style('font-style', 'italic');
-
- optLayer = svg.append('g').attr('id', 'optLayer');
- pktLayer = svg.append('g').attr('id', 'pktLayer');
- linkG = svg.append('g').attr('id', 'links');
- nodeG = svg.append('g').attr('id', 'nodes');
-
- setOrigin(optLayer, pktLayer, linkG, nodeG);
-
- node = nodeG.selectAll('.node');
- link = linkG.selectAll('.link');
-
- initLayers();
- prepareNodes();
- prepareLinks();
-
- force = d3.layout.force()
- .size([w,h])
- .nodes(nodes)
- .links(links)
- .gravity(0.4)
- .friction(0.7)
- .on('tick', tick);
- update();
- tick();
- d3.select('body').on('keydown', keyIn);
- }
-
- init();
- })();
- </script>
-</body>
-</html>