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.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