Committed by
Gerrit Code Review
GUI -- SVG practice (button that moves when you try to mouseover) created. WIP
Change-Id: Ic1232f7a7d6b645436603107da05361ce4d7d18a
Showing
2 changed files
with
228 additions
and
0 deletions
1 | +<!DOCTYPE html> | ||
2 | +<!-- | ||
3 | + ~ Copyright 2015 Open Networking Laboratory | ||
4 | + ~ | ||
5 | + ~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
6 | + ~ you may not use this file except in compliance with the License. | ||
7 | + ~ You may obtain a copy of the License at | ||
8 | + ~ | ||
9 | + ~ http://www.apache.org/licenses/LICENSE-2.0 | ||
10 | + ~ | ||
11 | + ~ Unless required by applicable law or agreed to in writing, software | ||
12 | + ~ distributed under the License is distributed on an "AS IS" BASIS, | ||
13 | + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
14 | + ~ See the License for the specific language governing permissions and | ||
15 | + ~ limitations under the License. | ||
16 | + --> | ||
17 | + | ||
18 | +<!-- | ||
19 | + ONOS -- SVG mouse over d3 exercise html | ||
20 | + --> | ||
21 | + | ||
22 | +<html> | ||
23 | +<head lang="en"> | ||
24 | + <meta charset="UTF-8"> | ||
25 | + <title>Upgrade Performance</title> | ||
26 | + | ||
27 | + <script type="text/javascript" src="../tp/angular.js"></script> | ||
28 | + <script type="text/javascript" src="../tp/d3.js"></script> | ||
29 | + <script type="text/javascript" src="svg-exercise.js"></script> | ||
30 | + <script type="text/javascript" src="../app/fw/util/util.js"></script> | ||
31 | + <script type="text/javascript" src="../app/fw/util/fn.js"></script> | ||
32 | + | ||
33 | + | ||
34 | + <style> | ||
35 | + html, | ||
36 | + body { | ||
37 | + background-color: #eee; | ||
38 | + font-family: Arial, Helvetica, sans-serif; | ||
39 | + font-size: 9pt; | ||
40 | + } | ||
41 | + .button { | ||
42 | + fill: #369; | ||
43 | + /* TODO: figure out why svg filters are not working */ | ||
44 | + /*filter: url(#innerbevel);*/ | ||
45 | + } | ||
46 | + svg text { | ||
47 | + fill: white; | ||
48 | + letter-spacing: .005em; | ||
49 | + } | ||
50 | + defs { | ||
51 | + display: none; | ||
52 | + } | ||
53 | + </style> | ||
54 | +</head> | ||
55 | + | ||
56 | +<body ng-app="svgExercise"> | ||
57 | +<div id="svgExDiv" ng-controller="svgExCtrl as ctrl"> | ||
58 | + <improve-performance></improve-performance> | ||
59 | +</div> | ||
60 | + | ||
61 | +<svg> | ||
62 | + <defs> | ||
63 | + <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%"> | ||
64 | + <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/> | ||
65 | + <feOffset dy="-1" dx="-1"/> | ||
66 | + <feComposite in2="SourceAlpha" operator="arithmetic" | ||
67 | + k2="-1" k3="1" result="hlDiff"/> | ||
68 | + <feFlood flood-color="white" flood-opacity=".7"/> | ||
69 | + <feComposite in2="hlDiff" operator="in"/> | ||
70 | + <feComposite in2="SourceGraphic" operator="over" result="withGlow"/> | ||
71 | + | ||
72 | + <feOffset in="blur" dy="3" dx="3"/> | ||
73 | + <feComposite in2="SourceAlpha" operator="arithmetic" | ||
74 | + k2="-1" k3="1" result="shadowDiff"/> | ||
75 | + <feFlood flood-color="black" flood-opacity="1"/> | ||
76 | + <feComposite in2="shadowDiff" operator="in"/> | ||
77 | + <feComposite in2="withGlow" operator="over"/> | ||
78 | + </filter> | ||
79 | + </defs> | ||
80 | +</svg> | ||
81 | + | ||
82 | +</body> | ||
83 | +</html> |
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, | ||
31 | + pageMargin = 20; | ||
32 | + | ||
33 | + // svg elements | ||
34 | + var g; | ||
35 | + | ||
36 | + // other variables | ||
37 | + var winWidth, winHeight, | ||
38 | + mouse; | ||
39 | + | ||
40 | + // ==================================================== | ||
41 | + | ||
42 | + // helper functions | ||
43 | + function centeredOnWindow(axis, dim) { | ||
44 | + return (axis / 2) - (dim / 2); | ||
45 | + } | ||
46 | + | ||
47 | + function randomPos() { | ||
48 | + return { | ||
49 | + x: Math.random() * winWidth, | ||
50 | + y: Math.random() * winHeight | ||
51 | + } | ||
52 | + } | ||
53 | + | ||
54 | + function getPosition() { | ||
55 | + var x = randomPos().x + pageMargin, | ||
56 | + y = randomPos().y + pageMargin, | ||
57 | + x1 = x + btnWidth, | ||
58 | + y1 = y + btnHeight, | ||
59 | + wwMargin = winWidth - pageMargin, | ||
60 | + whMargin = winHeight - pageMargin; | ||
61 | + | ||
62 | + while (x1 >= wwMargin || y1 >= whMargin) { | ||
63 | + x = randomPos().x + pageMargin; | ||
64 | + y = randomPos().y + pageMargin; | ||
65 | + x1 = x + btnWidth; | ||
66 | + y1 = y + btnHeight; | ||
67 | + } | ||
68 | + | ||
69 | + return { | ||
70 | + x: x, | ||
71 | + y: y | ||
72 | + } | ||
73 | + } | ||
74 | + | ||
75 | + function gTranslate(x, y) { | ||
76 | + return 'translate(' + x + ',' + y + ')'; | ||
77 | + } | ||
78 | + | ||
79 | + function moveButton() { | ||
80 | + var pos = getPosition(), | ||
81 | + x = pos.x, | ||
82 | + y = pos.y; | ||
83 | + g.transition() | ||
84 | + .duration(400) | ||
85 | + .ease('cubic-out') | ||
86 | + .attr('transform', gTranslate(x, y)); | ||
87 | + } | ||
88 | + | ||
89 | + angular.module('svgExercise', ['onosUtil']) | ||
90 | + | ||
91 | + .controller('svgExCtrl', ['$log', function (_$log_) { | ||
92 | + $log = _$log_; | ||
93 | + }]) | ||
94 | + | ||
95 | + .directive('improvePerformance', ['FnService', function (_fs_) { | ||
96 | + fs = _fs_; | ||
97 | + return { | ||
98 | + restrict: 'E', | ||
99 | + link: function (scope, elem, attrs) { | ||
100 | + winWidth = fs.windowSize().width; | ||
101 | + winHeight = fs.windowSize().height; | ||
102 | + var svg = d3.select(elem[0]) | ||
103 | + .append('svg') | ||
104 | + .attr({ | ||
105 | + width: winWidth + 'px', | ||
106 | + height: winHeight + 'px' | ||
107 | + }); | ||
108 | + g = svg.append('g') | ||
109 | + .attr('transform', | ||
110 | + gTranslate(centeredOnWindow(winWidth, btnWidth), | ||
111 | + centeredOnWindow(winHeight, btnHeight))); | ||
112 | + | ||
113 | + var button = g.append('rect') | ||
114 | + .attr({ | ||
115 | + width: btnWidth + 'px', | ||
116 | + height: btnHeight + 'px', | ||
117 | + rx: '10px', | ||
118 | + 'class': 'button' | ||
119 | + }), | ||
120 | + text = g.append('text') | ||
121 | + .style('text-anchor', 'middle') | ||
122 | + .text('Click for better performance.') | ||
123 | + .attr({ | ||
124 | + x: btnWidth / 2, | ||
125 | + y: (btnHeight / 2) + 5 | ||
126 | + }), | ||
127 | + rect = g.append('rect') | ||
128 | + .attr({ | ||
129 | + fill: 'none', | ||
130 | + 'pointer-events': 'all', | ||
131 | + width: btnWidth + hoverZone + 'px', | ||
132 | + height: btnHeight + hoverZone + 'px', | ||
133 | + x: -(hoverZone / 2), | ||
134 | + y: -(hoverZone / 2) | ||
135 | + }); | ||
136 | + | ||
137 | + g.on('mousemove', function () { | ||
138 | + mouse = d3.mouse(this); | ||
139 | + moveButton(); | ||
140 | + }); | ||
141 | + | ||
142 | + } | ||
143 | + }; | ||
144 | + }]); | ||
145 | +}()); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment