Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 1 | /* |
| 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, |
| 30 | hoverZone = 60, |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 31 | sectorDivisions = 3, |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 32 | pageMargin = 20; |
| 33 | |
| 34 | // svg elements |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 35 | var svg, g; |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 36 | |
| 37 | // other variables |
| 38 | var winWidth, winHeight, |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 39 | sectorWidth, sectorHeight, |
| 40 | currSector = 4, |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 41 | mouse; |
| 42 | |
| 43 | // ==================================================== |
| 44 | |
| 45 | // helper functions |
| 46 | function centeredOnWindow(axis, dim) { |
| 47 | return (axis / 2) - (dim / 2); |
| 48 | } |
| 49 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 50 | // ==================================================== |
| 51 | |
| 52 | function center(elem) { |
| 53 | $log.debug(winWidth / 2); |
| 54 | $log.debug(winHeight / 2); |
| 55 | $log.debug((winWidth / 2) - ((elem.node().getBBox().width) / 2)); |
| 56 | $log.debug((winHeight / 2) - ((elem.node().getBBox().height) / 2)); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 57 | return { |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 58 | x: (winWidth / 2) - ((elem.node().getBBox().width) / 2), |
| 59 | y: (winHeight / 2) - ((elem.node().getBBox().height) / 2) |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 60 | } |
| 61 | } |
| 62 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 63 | function showSectors() { |
| 64 | svg.append('line') |
| 65 | .attr({ |
| 66 | x1: winWidth / 2, |
| 67 | x2: winWidth / 2, |
| 68 | y1: 0, |
| 69 | y2: winHeight, |
| 70 | stroke: 'purple', |
| 71 | 'stroke-width': '3px' |
| 72 | }); |
| 73 | svg.append('line') |
| 74 | .attr({ |
| 75 | x1: 0, |
| 76 | x2: winWidth, |
| 77 | y1: winHeight / 2, |
| 78 | y2: winHeight / 2, |
| 79 | stroke: 'purple', |
| 80 | 'stroke-width': '3px' |
| 81 | }); |
| 82 | for (var i = 1; i < 5; i++) { |
| 83 | var j; |
| 84 | if (i < 3) { |
| 85 | j = i; |
| 86 | svg.append('line') |
| 87 | .attr({ |
| 88 | x1: sectorWidth * j, |
| 89 | x2: sectorWidth * j, |
| 90 | y1: 0, |
| 91 | y2: winHeight, |
| 92 | stroke: 'red', |
| 93 | 'stroke-width': '3px' |
| 94 | }); |
| 95 | } |
| 96 | else { |
| 97 | j = i - 2; |
| 98 | svg.append('line') |
| 99 | .attr({ |
| 100 | x1: 0, |
| 101 | x2: winWidth, |
| 102 | y1: sectorHeight * j, |
| 103 | y2: sectorHeight * j, |
| 104 | stroke: 'red', |
| 105 | 'stroke-width': '3px' |
| 106 | }); |
| 107 | } |
| 108 | } |
| 109 | } |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 110 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 111 | function onMouseMove() { |
| 112 | mouse = d3.mouse(this); |
| 113 | moveButton(); |
| 114 | } |
| 115 | |
| 116 | function removeMouseListener() { |
| 117 | g.on('mousemove', null); |
| 118 | } |
| 119 | |
| 120 | function addMouseListener() { |
| 121 | g.on('mousemove', onMouseMove); |
| 122 | } |
| 123 | |
| 124 | function selectSector() { |
| 125 | var sector, row, col; |
| 126 | |
| 127 | do { |
| 128 | sector = Math.floor((Math.random() * 9)); |
| 129 | } while (sector === currSector); |
| 130 | $log.debug('sector after loop: ' + sector); |
| 131 | $log.debug('currSector after loop: ' + currSector); |
| 132 | currSector = sector; |
| 133 | $log.debug('currSector after assignment: ' + currSector); |
| 134 | row = Math.floor(sector / sectorDivisions); |
| 135 | col = sector % sectorDivisions; |
| 136 | |
| 137 | $log.debug('row: ' + row); |
| 138 | $log.debug('col: ' + col); |
| 139 | |
| 140 | return { |
| 141 | xmin: sectorWidth * col, |
| 142 | xmax: (sectorWidth * col) + sectorWidth, |
| 143 | ymin: sectorHeight * row, |
| 144 | ymax: (sectorHeight * row) + sectorHeight |
| 145 | } |
| 146 | } |
| 147 | |
| 148 | function selectXY(sectorCoords) { |
| 149 | var x, y, x1, y1; |
| 150 | do { |
| 151 | x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin; |
| 152 | y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin; |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 153 | x1 = x + btnWidth; |
| 154 | y1 = y + btnHeight; |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 155 | } while (x1 >= winWidth - pageMargin || y1 >= winHeight - pageMargin); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 156 | |
| 157 | return { |
| 158 | x: x, |
| 159 | y: y |
| 160 | } |
| 161 | } |
| 162 | |
| 163 | function gTranslate(x, y) { |
| 164 | return 'translate(' + x + ',' + y + ')'; |
| 165 | } |
| 166 | |
| 167 | function moveButton() { |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 168 | var sec = selectSector(), |
| 169 | pos = selectXY(sec); |
| 170 | $log.debug(pos.x, pos.y); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 171 | g.transition() |
| 172 | .duration(400) |
| 173 | .ease('cubic-out') |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 174 | .each('start', removeMouseListener) |
| 175 | .attr('transform', gTranslate(pos.x, pos.y)) |
| 176 | .each('end', addMouseListener); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 177 | } |
| 178 | |
| 179 | angular.module('svgExercise', ['onosUtil']) |
| 180 | |
| 181 | .controller('svgExCtrl', ['$log', function (_$log_) { |
| 182 | $log = _$log_; |
| 183 | }]) |
| 184 | |
| 185 | .directive('improvePerformance', ['FnService', function (_fs_) { |
| 186 | fs = _fs_; |
| 187 | return { |
| 188 | restrict: 'E', |
| 189 | link: function (scope, elem, attrs) { |
| 190 | winWidth = fs.windowSize().width; |
| 191 | winHeight = fs.windowSize().height; |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 192 | // getting rid of pageMargin to see if the math is easier |
| 193 | // could put the padding somewhere else as in where it's ok to move the button |
| 194 | //sectorWidth = (winWidth / sectorDivisions) - pageMargin; |
| 195 | //sectorHeight = (winHeight / sectorDivisions) - pageMargin; |
| 196 | sectorWidth = winWidth / sectorDivisions; |
| 197 | sectorHeight = winHeight / sectorDivisions; |
| 198 | |
| 199 | svg = d3.select(elem[0]) |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 200 | .append('svg') |
| 201 | .attr({ |
| 202 | width: winWidth + 'px', |
| 203 | height: winHeight + 'px' |
| 204 | }); |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 205 | |
| 206 | showSectors(); |
| 207 | g = svg.append('g'); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 208 | |
| 209 | var button = g.append('rect') |
| 210 | .attr({ |
| 211 | width: btnWidth + 'px', |
| 212 | height: btnHeight + 'px', |
| 213 | rx: '10px', |
| 214 | 'class': 'button' |
| 215 | }), |
| 216 | text = g.append('text') |
| 217 | .style('text-anchor', 'middle') |
| 218 | .text('Click for better performance.') |
| 219 | .attr({ |
| 220 | x: btnWidth / 2, |
| 221 | y: (btnHeight / 2) + 5 |
| 222 | }), |
| 223 | rect = g.append('rect') |
| 224 | .attr({ |
| 225 | fill: 'none', |
| 226 | 'pointer-events': 'all', |
| 227 | width: btnWidth + hoverZone + 'px', |
| 228 | height: btnHeight + hoverZone + 'px', |
| 229 | x: -(hoverZone / 2), |
| 230 | y: -(hoverZone / 2) |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 231 | }), |
| 232 | centeredG = center(g); |
| 233 | g.attr('transform', |
| 234 | gTranslate(centeredG.x, centeredG.y)); |
| 235 | //gTranslate(centeredOnWindow(winWidth, btnWidth), |
| 236 | // centeredOnWindow(winHeight, btnHeight))); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 237 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 238 | addMouseListener(); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 239 | } |
| 240 | }; |
| 241 | }]); |
| 242 | }()); |