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 | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 32 | pageMargin = 10; |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 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, |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 40 | currSector = 4, // always starts in the middle |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 41 | mouse; |
| 42 | |
| 43 | // ==================================================== |
| 44 | |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 45 | function centeredOnWindow(axis, dim) { |
| 46 | return (axis / 2) - (dim / 2); |
| 47 | } |
| 48 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 49 | function showSectors() { |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 50 | for (var i = 1; i < 5; i++) { |
| 51 | var j; |
| 52 | if (i < 3) { |
| 53 | j = i; |
| 54 | svg.append('line') |
| 55 | .attr({ |
| 56 | x1: sectorWidth * j, |
| 57 | x2: sectorWidth * j, |
| 58 | y1: 0, |
| 59 | y2: winHeight, |
| 60 | stroke: 'red', |
| 61 | 'stroke-width': '3px' |
| 62 | }); |
| 63 | } |
| 64 | else { |
| 65 | j = i - 2; |
| 66 | svg.append('line') |
| 67 | .attr({ |
| 68 | x1: 0, |
| 69 | x2: winWidth, |
| 70 | y1: sectorHeight * j, |
| 71 | y2: sectorHeight * j, |
| 72 | stroke: 'red', |
| 73 | 'stroke-width': '3px' |
| 74 | }); |
| 75 | } |
| 76 | } |
| 77 | } |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 78 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 79 | function onMouseMove() { |
| 80 | mouse = d3.mouse(this); |
| 81 | moveButton(); |
| 82 | } |
| 83 | |
| 84 | function removeMouseListener() { |
| 85 | g.on('mousemove', null); |
| 86 | } |
| 87 | |
| 88 | function addMouseListener() { |
| 89 | g.on('mousemove', onMouseMove); |
| 90 | } |
| 91 | |
| 92 | function selectSector() { |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 93 | var sector, row, col, |
| 94 | currSectorCol = currSector % sectorDivisions; |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 95 | |
| 96 | do { |
| 97 | sector = Math.floor((Math.random() * 9)); |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 98 | col = sector % sectorDivisions; |
| 99 | } while (col === currSectorCol); |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 100 | currSector = sector; |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 101 | row = Math.floor(sector / sectorDivisions); |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 102 | |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 103 | // active area is the coordinates of the sector, plus or minus a margin |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 104 | return { |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 105 | xmin: (sectorWidth * col) + pageMargin, |
| 106 | xmax: ((sectorWidth * col) + sectorWidth) - pageMargin, |
| 107 | ymin: (sectorHeight * row) + pageMargin, |
| 108 | ymax: ((sectorHeight * row) + sectorHeight) - pageMargin |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 109 | } |
| 110 | } |
| 111 | |
| 112 | function selectXY(sectorCoords) { |
| 113 | var x, y, x1, y1; |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 114 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 115 | do { |
| 116 | x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin; |
| 117 | y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin; |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 118 | x1 = x + btnWidth; |
| 119 | y1 = y + btnHeight; |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 120 | } while (x1 > sectorCoords.xmax || y1 > sectorCoords.ymax); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 121 | |
| 122 | return { |
| 123 | x: x, |
| 124 | y: y |
| 125 | } |
| 126 | } |
| 127 | |
| 128 | function gTranslate(x, y) { |
| 129 | return 'translate(' + x + ',' + y + ')'; |
| 130 | } |
| 131 | |
| 132 | function moveButton() { |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 133 | var sec = selectSector(), |
| 134 | pos = selectXY(sec); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 135 | g.transition() |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 136 | .duration(300) |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 137 | .ease('cubic-out') |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 138 | .each('start', removeMouseListener) |
| 139 | .attr('transform', gTranslate(pos.x, pos.y)) |
| 140 | .each('end', addMouseListener); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 141 | } |
| 142 | |
| 143 | angular.module('svgExercise', ['onosUtil']) |
| 144 | |
| 145 | .controller('svgExCtrl', ['$log', function (_$log_) { |
| 146 | $log = _$log_; |
| 147 | }]) |
| 148 | |
| 149 | .directive('improvePerformance', ['FnService', function (_fs_) { |
| 150 | fs = _fs_; |
| 151 | return { |
| 152 | restrict: 'E', |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 153 | link: function (scope, elem) { |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 154 | winWidth = fs.windowSize().width; |
| 155 | winHeight = fs.windowSize().height; |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 156 | sectorWidth = winWidth / sectorDivisions; |
| 157 | sectorHeight = winHeight / sectorDivisions; |
| 158 | |
| 159 | svg = d3.select(elem[0]) |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 160 | .append('svg') |
| 161 | .attr({ |
| 162 | width: winWidth + 'px', |
| 163 | height: winHeight + 'px' |
| 164 | }); |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 165 | |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 166 | //showSectors(); |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 167 | g = svg.append('g'); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 168 | |
| 169 | var button = g.append('rect') |
| 170 | .attr({ |
| 171 | width: btnWidth + 'px', |
| 172 | height: btnHeight + 'px', |
| 173 | rx: '10px', |
| 174 | 'class': 'button' |
| 175 | }), |
| 176 | text = g.append('text') |
| 177 | .style('text-anchor', 'middle') |
| 178 | .text('Click for better performance.') |
| 179 | .attr({ |
| 180 | x: btnWidth / 2, |
| 181 | y: (btnHeight / 2) + 5 |
| 182 | }), |
| 183 | rect = g.append('rect') |
| 184 | .attr({ |
| 185 | fill: 'none', |
| 186 | 'pointer-events': 'all', |
| 187 | width: btnWidth + hoverZone + 'px', |
| 188 | height: btnHeight + hoverZone + 'px', |
| 189 | x: -(hoverZone / 2), |
| 190 | y: -(hoverZone / 2) |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 191 | }); |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 192 | g.attr('transform', |
Bri Prebilic Cole | 5a206bb | 2015-03-25 16:33:27 -0700 | [diff] [blame] | 193 | gTranslate(centeredOnWindow(winWidth, btnWidth), |
| 194 | centeredOnWindow(winHeight, btnHeight))); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 195 | |
Bri Prebilic Cole | 4db8dce | 2015-03-18 13:57:24 -0700 | [diff] [blame] | 196 | addMouseListener(); |
Bri Prebilic Cole | 91425fb | 2015-03-11 16:29:48 -0700 | [diff] [blame] | 197 | } |
| 198 | }; |
| 199 | }]); |
| 200 | }()); |