GUI -- SVG practice (button that moves when you try to mouseover) created. WIP
Change-Id: Ic1232f7a7d6b645436603107da05361ce4d7d18a
diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.html b/web/gui/src/main/webapp/_bripc/svg-exercise.html
new file mode 100644
index 0000000..676f71a
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+ ~ Copyright 2015 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 -- SVG mouse over d3 exercise html
+ -->
+
+<html>
+<head lang="en">
+ <meta charset="UTF-8">
+ <title>Upgrade Performance</title>
+
+ <script type="text/javascript" src="../tp/angular.js"></script>
+ <script type="text/javascript" src="../tp/d3.js"></script>
+ <script type="text/javascript" src="svg-exercise.js"></script>
+ <script type="text/javascript" src="../app/fw/util/util.js"></script>
+ <script type="text/javascript" src="../app/fw/util/fn.js"></script>
+
+
+ <style>
+ html,
+ body {
+ background-color: #eee;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 9pt;
+ }
+ .button {
+ fill: #369;
+ /* TODO: figure out why svg filters are not working */
+ /*filter: url(#innerbevel);*/
+ }
+ svg text {
+ fill: white;
+ letter-spacing: .005em;
+ }
+ defs {
+ display: none;
+ }
+ </style>
+</head>
+
+<body ng-app="svgExercise">
+<div id="svgExDiv" ng-controller="svgExCtrl as ctrl">
+ <improve-performance></improve-performance>
+</div>
+
+<svg>
+ <defs>
+ <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
+ <feOffset dy="-1" dx="-1"/>
+ <feComposite in2="SourceAlpha" operator="arithmetic"
+ k2="-1" k3="1" result="hlDiff"/>
+ <feFlood flood-color="white" flood-opacity=".7"/>
+ <feComposite in2="hlDiff" operator="in"/>
+ <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
+
+ <feOffset in="blur" dy="3" dx="3"/>
+ <feComposite in2="SourceAlpha" operator="arithmetic"
+ k2="-1" k3="1" result="shadowDiff"/>
+ <feFlood flood-color="black" flood-opacity="1"/>
+ <feComposite in2="shadowDiff" operator="in"/>
+ <feComposite in2="withGlow" operator="over"/>
+ </filter>
+ </defs>
+</svg>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.js b/web/gui/src/main/webapp/_bripc/svg-exercise.js
new file mode 100644
index 0000000..f1491f4
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.js
@@ -0,0 +1,145 @@
+/*
+ * Copyright 2015 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 -- SVG mouse over d3 exercise module
+ */
+
+(function () {
+ 'use strict';
+
+ // injected references
+ var $log, fs;
+
+ // constants
+ var btnWidth = 175,
+ btnHeight = 50,
+ hoverZone = 60,
+ pageMargin = 20;
+
+ // svg elements
+ var g;
+
+ // other variables
+ var winWidth, winHeight,
+ mouse;
+
+ // ====================================================
+
+ // helper functions
+ function centeredOnWindow(axis, dim) {
+ return (axis / 2) - (dim / 2);
+ }
+
+ function randomPos() {
+ return {
+ x: Math.random() * winWidth,
+ y: Math.random() * winHeight
+ }
+ }
+
+ function getPosition() {
+ var x = randomPos().x + pageMargin,
+ y = randomPos().y + pageMargin,
+ x1 = x + btnWidth,
+ y1 = y + btnHeight,
+ wwMargin = winWidth - pageMargin,
+ whMargin = winHeight - pageMargin;
+
+ while (x1 >= wwMargin || y1 >= whMargin) {
+ x = randomPos().x + pageMargin;
+ y = randomPos().y + pageMargin;
+ x1 = x + btnWidth;
+ y1 = y + btnHeight;
+ }
+
+ return {
+ x: x,
+ y: y
+ }
+ }
+
+ function gTranslate(x, y) {
+ return 'translate(' + x + ',' + y + ')';
+ }
+
+ function moveButton() {
+ var pos = getPosition(),
+ x = pos.x,
+ y = pos.y;
+ g.transition()
+ .duration(400)
+ .ease('cubic-out')
+ .attr('transform', gTranslate(x, y));
+ }
+
+ angular.module('svgExercise', ['onosUtil'])
+
+ .controller('svgExCtrl', ['$log', function (_$log_) {
+ $log = _$log_;
+ }])
+
+ .directive('improvePerformance', ['FnService', function (_fs_) {
+ fs = _fs_;
+ return {
+ restrict: 'E',
+ link: function (scope, elem, attrs) {
+ winWidth = fs.windowSize().width;
+ winHeight = fs.windowSize().height;
+ var svg = d3.select(elem[0])
+ .append('svg')
+ .attr({
+ width: winWidth + 'px',
+ height: winHeight + 'px'
+ });
+ g = svg.append('g')
+ .attr('transform',
+ gTranslate(centeredOnWindow(winWidth, btnWidth),
+ centeredOnWindow(winHeight, btnHeight)));
+
+ var button = g.append('rect')
+ .attr({
+ width: btnWidth + 'px',
+ height: btnHeight + 'px',
+ rx: '10px',
+ 'class': 'button'
+ }),
+ text = g.append('text')
+ .style('text-anchor', 'middle')
+ .text('Click for better performance.')
+ .attr({
+ x: btnWidth / 2,
+ y: (btnHeight / 2) + 5
+ }),
+ rect = g.append('rect')
+ .attr({
+ fill: 'none',
+ 'pointer-events': 'all',
+ width: btnWidth + hoverZone + 'px',
+ height: btnHeight + hoverZone + 'px',
+ x: -(hoverZone / 2),
+ y: -(hoverZone / 2)
+ });
+
+ g.on('mousemove', function () {
+ mouse = d3.mouse(this);
+ moveButton();
+ });
+
+ }
+ };
+ }]);
+}());
\ No newline at end of file