blob: 96ed131fbef3ee5737e1a4cea42fcbab1d64dd3f [file] [log] [blame]
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -07001/*
2 * Copyright 2015 Open Networking Laboratory
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17/*
18 ONOS GUI -- SVG mouse over d3 exercise module
19 */
20
21(function () {
22 'use strict';
23
24 // injected references
25 var $log, fs;
26
27 // constants
28 var btnWidth = 175,
29 btnHeight = 50,
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -070030 hoverZone = 70,
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070031 sectorDivisions = 3,
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -070032 margin = 10;
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070033
34 // svg elements
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070035 var svg, g;
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070036
37 // other variables
38 var winWidth, winHeight,
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070039 sectorWidth, sectorHeight,
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -070040 currSector = 4, // always starts in the middle
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070041 mouse;
42
43 // ====================================================
44
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070045 function centeredOnWindow(axis, dim) {
46 return (axis / 2) - (dim / 2);
47 }
48
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070049 function onMouseMove() {
50 mouse = d3.mouse(this);
51 moveButton();
52 }
53
54 function removeMouseListener() {
55 g.on('mousemove', null);
56 }
57
58 function addMouseListener() {
59 g.on('mousemove', onMouseMove);
60 }
61
62 function selectSector() {
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -070063 var sector, row, col,
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -070064 currCol = currSector % sectorDivisions;
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070065
66 do {
67 sector = Math.floor((Math.random() * 9));
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -070068 col = sector % sectorDivisions;
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -070069 } while (col === currCol);
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070070 currSector = sector;
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070071 row = Math.floor(sector / sectorDivisions);
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070072
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070073 return {
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -070074 xmin: (sectorWidth * col) + margin,
75 xmax: ((sectorWidth * col) + sectorWidth) - margin,
76 ymin: (sectorHeight * row) + margin,
77 ymax: ((sectorHeight * row) + sectorHeight) - margin
78 };
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070079 }
80
81 function selectXY(sectorCoords) {
82 var x, y, x1, y1;
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -070083
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -070084 do {
85 x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin;
86 y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin;
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070087 x1 = x + btnWidth;
88 y1 = y + btnHeight;
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -070089 } while (x1 > sectorCoords.xmax || y1 > sectorCoords.ymax);
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070090
91 return {
92 x: x,
93 y: y
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -070094 };
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -070095 }
96
97 function gTranslate(x, y) {
98 return 'translate(' + x + ',' + y + ')';
99 }
100
101 function moveButton() {
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700102 var sec = selectSector(),
103 pos = selectXY(sec);
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700104 g.transition()
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -0700105 .duration(300)
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700106 .ease('cubic-out')
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700107 .each('start', removeMouseListener)
108 .attr('transform', gTranslate(pos.x, pos.y))
109 .each('end', addMouseListener);
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700110 }
111
112 angular.module('svgExercise', ['onosUtil'])
113
114 .controller('svgExCtrl', ['$log', function (_$log_) {
115 $log = _$log_;
116 }])
117
118 .directive('improvePerformance', ['FnService', function (_fs_) {
119 fs = _fs_;
120 return {
121 restrict: 'E',
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -0700122 link: function (scope, elem) {
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700123 winWidth = fs.windowSize().width;
124 winHeight = fs.windowSize().height;
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700125 sectorWidth = winWidth / sectorDivisions;
126 sectorHeight = winHeight / sectorDivisions;
127
128 svg = d3.select(elem[0])
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700129 .append('svg')
130 .attr({
131 width: winWidth + 'px',
132 height: winHeight + 'px'
133 });
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700134
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700135 g = svg.append('g');
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700136
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -0700137 g.append('rect')
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700138 .attr({
139 width: btnWidth + 'px',
140 height: btnHeight + 'px',
141 rx: '10px',
142 'class': 'button'
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -0700143 });
Bri Prebilic Colea1f54d52015-03-26 10:27:29 -0700144
145 g.append('text')
146 .style('text-anchor', 'middle')
147 .text('Click for better performance.')
148 .attr({
149 x: btnWidth / 2,
150 y: (btnHeight / 2) + 5
151 });
152
153 g.append('rect')
154 .attr({
155 fill: 'none',
156 'pointer-events': 'all',
157 width: btnWidth + hoverZone + 'px',
158 height: btnHeight + hoverZone + 'px',
159 x: -(hoverZone / 2),
160 y: -(hoverZone / 2)
161 });
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700162 g.attr('transform',
Bri Prebilic Cole5a206bb2015-03-25 16:33:27 -0700163 gTranslate(centeredOnWindow(winWidth, btnWidth),
164 centeredOnWindow(winHeight, btnHeight)));
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700165
Bri Prebilic Cole4db8dce2015-03-18 13:57:24 -0700166 addMouseListener();
Bri Prebilic Cole91425fb2015-03-11 16:29:48 -0700167 }
168 };
169 }]);
170}());