홍길동 / 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 @@
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>
......
......@@ -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)));
......