홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
91425fbf 1 parent af1042df

GUI -- SVG practice (button that moves when you try to mouseover) created. WIP 

Change-Id: Ic1232f7a7d6b645436603107da05361ce4d7d18a
Inline Side-by-side
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