GUI -- SVG example view files complete. SVG filter added, cleaned up code.
Change-Id: I56eb84790bfa61b13368552dd4102fbd3c244f04
diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.html b/web/gui/src/main/webapp/_bripc/svg-exercise.html
index 785a3a7..f9c11b8 100644
--- a/web/gui/src/main/webapp/_bripc/svg-exercise.html
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.html
@@ -38,47 +38,51 @@
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
margin: 0;
+ overflow: hidden;
}
.button {
fill: #369;
- /* TODO: figure out why svg filters are not working */
- /* is it because there is an invisible rectangle behind it? */
- /*filter: url(#innerbevel);*/
+ filter: url(#buttonBevel);
}
svg text {
fill: white;
letter-spacing: .005em;
}
- defs {
- display: none;
- }
</style>
</head>
<body ng-app="svgExercise">
+
<div id="svgExDiv" ng-controller="svgExCtrl as ctrl">
<improve-performance></improve-performance>
</div>
-<svg>
- <defs>
- <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
- <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
- <feOffset dy="-1" dx="-1"/>
- <feComposite in2="SourceAlpha" operator="arithmetic"
- k2="-1" k3="1" result="hlDiff"/>
- <feFlood flood-color="white" flood-opacity=".7"/>
- <feComposite in2="hlDiff" operator="in"/>
- <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
-
- <feOffset in="blur" dy="3" dx="3"/>
- <feComposite in2="SourceAlpha" operator="arithmetic"
- k2="-1" k3="1" result="shadowDiff"/>
- <feFlood flood-color="black" flood-opacity="1"/>
- <feComposite in2="shadowDiff" operator="in"/>
- <feComposite in2="withGlow" operator="over"/>
- </filter>
- </defs>
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="-10 -10 110 110"
+ visibility="hidden">
+ <filter id="buttonBevel"
+ filterUnits="objectBoundingBox"
+ x="-10%" y="-10%" width="110%" height="110%">
+ <feGaussianBlur in="SourceAlpha"
+ stdDeviation="4"
+ result="blur"/>
+ <feSpecularLighting in="blur"
+ surfaceScale="7"
+ specularConstant="0.6"
+ specularExponent="5"
+ result="spec"
+ lighting-color="#4E7199">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="spec"
+ in2="SourceAlpha"
+ operator="in"
+ result="spec2"/>
+ <feComposite in="SourceGraphic"
+ in2="spec2"
+ operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" />
+ </filter>
</svg>
</body>
diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.js b/web/gui/src/main/webapp/_bripc/svg-exercise.js
index 1595f76..96ed131 100644
--- a/web/gui/src/main/webapp/_bripc/svg-exercise.js
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.js
@@ -27,9 +27,9 @@
// constants
var btnWidth = 175,
btnHeight = 50,
- hoverZone = 60,
+ hoverZone = 70,
sectorDivisions = 3,
- pageMargin = 10;
+ margin = 10;
// svg elements
var svg, g;
@@ -46,36 +46,6 @@
return (axis / 2) - (dim / 2);
}
- function showSectors() {
- for (var i = 1; i < 5; i++) {
- var j;
- if (i < 3) {
- j = i;
- svg.append('line')
- .attr({
- x1: sectorWidth * j,
- x2: sectorWidth * j,
- y1: 0,
- y2: winHeight,
- stroke: 'red',
- 'stroke-width': '3px'
- });
- }
- else {
- j = i - 2;
- svg.append('line')
- .attr({
- x1: 0,
- x2: winWidth,
- y1: sectorHeight * j,
- y2: sectorHeight * j,
- stroke: 'red',
- 'stroke-width': '3px'
- });
- }
- }
- }
-
function onMouseMove() {
mouse = d3.mouse(this);
moveButton();
@@ -91,22 +61,21 @@
function selectSector() {
var sector, row, col,
- currSectorCol = currSector % sectorDivisions;
+ currCol = currSector % sectorDivisions;
do {
sector = Math.floor((Math.random() * 9));
col = sector % sectorDivisions;
- } while (col === currSectorCol);
+ } while (col === currCol);
currSector = sector;
row = Math.floor(sector / sectorDivisions);
- // active area is the coordinates of the sector, plus or minus a margin
return {
- xmin: (sectorWidth * col) + pageMargin,
- xmax: ((sectorWidth * col) + sectorWidth) - pageMargin,
- ymin: (sectorHeight * row) + pageMargin,
- ymax: ((sectorHeight * row) + sectorHeight) - pageMargin
- }
+ xmin: (sectorWidth * col) + margin,
+ xmax: ((sectorWidth * col) + sectorWidth) - margin,
+ ymin: (sectorHeight * row) + margin,
+ ymax: ((sectorHeight * row) + sectorHeight) - margin
+ };
}
function selectXY(sectorCoords) {
@@ -122,7 +91,7 @@
return {
x: x,
y: y
- }
+ };
}
function gTranslate(x, y) {
@@ -163,32 +132,33 @@
height: winHeight + 'px'
});
- //showSectors();
g = svg.append('g');
- var button = g.append('rect')
+ g.append('rect')
.attr({
width: btnWidth + 'px',
height: btnHeight + 'px',
rx: '10px',
'class': 'button'
- }),
- text = g.append('text')
- .style('text-anchor', 'middle')
- .text('Click for better performance.')
- .attr({
- x: btnWidth / 2,
- y: (btnHeight / 2) + 5
- }),
- rect = g.append('rect')
- .attr({
- fill: 'none',
- 'pointer-events': 'all',
- width: btnWidth + hoverZone + 'px',
- height: btnHeight + hoverZone + 'px',
- x: -(hoverZone / 2),
- y: -(hoverZone / 2)
});
+
+ g.append('text')
+ .style('text-anchor', 'middle')
+ .text('Click for better performance.')
+ .attr({
+ x: btnWidth / 2,
+ y: (btnHeight / 2) + 5
+ });
+
+ g.append('rect')
+ .attr({
+ fill: 'none',
+ 'pointer-events': 'all',
+ width: btnWidth + hoverZone + 'px',
+ height: btnHeight + hoverZone + 'px',
+ x: -(hoverZone / 2),
+ y: -(hoverZone / 2)
+ });
g.attr('transform',
gTranslate(centeredOnWindow(winWidth, btnWidth),
centeredOnWindow(winHeight, btnHeight)));