홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
a1f54d52 1 parent 89ad3770

GUI -- SVG example view files complete. SVG filter added, cleaned up code. 

Change-Id: I56eb84790bfa61b13368552dd4102fbd3c244f04
Inline Side-by-side
Showing 2 changed files with 58 additions and 84 deletions
...@@ -38,47 +38,51 @@ ...@@ -38,47 +38,51 @@
38 font-family: Arial, Helvetica, sans-serif; 38 font-family: Arial, Helvetica, sans-serif;
39 font-size: 9pt; 39 font-size: 9pt;
40 margin: 0; 40 margin: 0;
41 + overflow: hidden;
41 } 42 }
42 .button { 43 .button {
43 fill: #369; 44 fill: #369;
44 - /* TODO: figure out why svg filters are not working */ 45 + filter: url(#buttonBevel);
45 - /* is it because there is an invisible rectangle behind it? */
46 - /*filter: url(#innerbevel);*/
47 } 46 }
48 svg text { 47 svg text {
49 fill: white; 48 fill: white;
50 letter-spacing: .005em; 49 letter-spacing: .005em;
51 } 50 }
52 - defs {
53 - display: none;
54 - }
55 </style> 51 </style>
56 </head> 52 </head>
57 53
58 <body ng-app="svgExercise"> 54 <body ng-app="svgExercise">
55 +
59 <div id="svgExDiv" ng-controller="svgExCtrl as ctrl"> 56 <div id="svgExDiv" ng-controller="svgExCtrl as ctrl">
60 <improve-performance></improve-performance> 57 <improve-performance></improve-performance>
61 </div> 58 </div>
62 59
63 -<svg> 60 +<svg xmlns="http://www.w3.org/2000/svg"
64 - <defs> 61 + viewBox="-10 -10 110 110"
65 - <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%"> 62 + visibility="hidden">
66 - <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/> 63 + <filter id="buttonBevel"
67 - <feOffset dy="-1" dx="-1"/> 64 + filterUnits="objectBoundingBox"
68 - <feComposite in2="SourceAlpha" operator="arithmetic" 65 + x="-10%" y="-10%" width="110%" height="110%">
69 - k2="-1" k3="1" result="hlDiff"/> 66 + <feGaussianBlur in="SourceAlpha"
70 - <feFlood flood-color="white" flood-opacity=".7"/> 67 + stdDeviation="4"
71 - <feComposite in2="hlDiff" operator="in"/> 68 + result="blur"/>
72 - <feComposite in2="SourceGraphic" operator="over" result="withGlow"/> 69 + <feSpecularLighting in="blur"
73 - 70 + surfaceScale="7"
74 - <feOffset in="blur" dy="3" dx="3"/> 71 + specularConstant="0.6"
75 - <feComposite in2="SourceAlpha" operator="arithmetic" 72 + specularExponent="5"
76 - k2="-1" k3="1" result="shadowDiff"/> 73 + result="spec"
77 - <feFlood flood-color="black" flood-opacity="1"/> 74 + lighting-color="#4E7199">
78 - <feComposite in2="shadowDiff" operator="in"/> 75 + <fePointLight x="-5000" y="-10000" z="20000"/>
79 - <feComposite in2="withGlow" operator="over"/> 76 + </feSpecularLighting>
80 - </filter> 77 + <feComposite in="spec"
81 - </defs> 78 + in2="SourceAlpha"
79 + operator="in"
80 + result="spec2"/>
81 + <feComposite in="SourceGraphic"
82 + in2="spec2"
83 + operator="arithmetic"
84 + k1="0" k2="1" k3="1" k4="0" />
85 + </filter>
82 </svg> 86 </svg>
83 87
84 </body> 88 </body>
......
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
27 // constants 27 // constants
28 var btnWidth = 175, 28 var btnWidth = 175,
29 btnHeight = 50, 29 btnHeight = 50,
30 - hoverZone = 60, 30 + hoverZone = 70,
31 sectorDivisions = 3, 31 sectorDivisions = 3,
32 - pageMargin = 10; 32 + margin = 10;
33 33
34 // svg elements 34 // svg elements
35 var svg, g; 35 var svg, g;
...@@ -46,36 +46,6 @@ ...@@ -46,36 +46,6 @@
46 return (axis / 2) - (dim / 2); 46 return (axis / 2) - (dim / 2);
47 } 47 }
48 48
49 - function showSectors() {
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 - }
78 -
79 function onMouseMove() { 49 function onMouseMove() {
80 mouse = d3.mouse(this); 50 mouse = d3.mouse(this);
81 moveButton(); 51 moveButton();
...@@ -91,22 +61,21 @@ ...@@ -91,22 +61,21 @@
91 61
92 function selectSector() { 62 function selectSector() {
93 var sector, row, col, 63 var sector, row, col,
94 - currSectorCol = currSector % sectorDivisions; 64 + currCol = currSector % sectorDivisions;
95 65
96 do { 66 do {
97 sector = Math.floor((Math.random() * 9)); 67 sector = Math.floor((Math.random() * 9));
98 col = sector % sectorDivisions; 68 col = sector % sectorDivisions;
99 - } while (col === currSectorCol); 69 + } while (col === currCol);
100 currSector = sector; 70 currSector = sector;
101 row = Math.floor(sector / sectorDivisions); 71 row = Math.floor(sector / sectorDivisions);
102 72
103 - // active area is the coordinates of the sector, plus or minus a margin
104 return { 73 return {
105 - xmin: (sectorWidth * col) + pageMargin, 74 + xmin: (sectorWidth * col) + margin,
106 - xmax: ((sectorWidth * col) + sectorWidth) - pageMargin, 75 + xmax: ((sectorWidth * col) + sectorWidth) - margin,
107 - ymin: (sectorHeight * row) + pageMargin, 76 + ymin: (sectorHeight * row) + margin,
108 - ymax: ((sectorHeight * row) + sectorHeight) - pageMargin 77 + ymax: ((sectorHeight * row) + sectorHeight) - margin
109 - } 78 + };
110 } 79 }
111 80
112 function selectXY(sectorCoords) { 81 function selectXY(sectorCoords) {
...@@ -122,7 +91,7 @@ ...@@ -122,7 +91,7 @@
122 return { 91 return {
123 x: x, 92 x: x,
124 y: y 93 y: y
125 - } 94 + };
126 } 95 }
127 96
128 function gTranslate(x, y) { 97 function gTranslate(x, y) {
...@@ -163,32 +132,33 @@ ...@@ -163,32 +132,33 @@
163 height: winHeight + 'px' 132 height: winHeight + 'px'
164 }); 133 });
165 134
166 - //showSectors();
167 g = svg.append('g'); 135 g = svg.append('g');
168 136
169 - var button = g.append('rect') 137 + g.append('rect')
170 .attr({ 138 .attr({
171 width: btnWidth + 'px', 139 width: btnWidth + 'px',
172 height: btnHeight + 'px', 140 height: btnHeight + 'px',
173 rx: '10px', 141 rx: '10px',
174 'class': 'button' 142 '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)
191 }); 143 });
144 +
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 + });
192 g.attr('transform', 162 g.attr('transform',
193 gTranslate(centeredOnWindow(winWidth, btnWidth), 163 gTranslate(centeredOnWindow(winWidth, btnWidth),
194 centeredOnWindow(winHeight, btnHeight))); 164 centeredOnWindow(winHeight, btnHeight)));
......