mirror of
https://github.com/opennetworkinglab/onos.git
synced 2025-10-22 12:51:09 +02:00
GUI -- Updated Equalize Master glyph. SVG practice progress - better algorithm for changing button position. Various other small edits.
Change-Id: I4d04a31b3cf5b329b2227c6ccf494de0b5603455
This commit is contained in:
Bri Prebilic Cole
parent
4a0ba56a4d
commit
5a206bbc99
@ -42,6 +42,7 @@
|
||||
.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);*/
|
||||
}
|
||||
svg text {
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
btnHeight = 50,
|
||||
hoverZone = 60,
|
||||
sectorDivisions = 3,
|
||||
pageMargin = 20;
|
||||
pageMargin = 10;
|
||||
|
||||
// svg elements
|
||||
var svg, g;
|
||||
@ -37,48 +37,16 @@
|
||||
// other variables
|
||||
var winWidth, winHeight,
|
||||
sectorWidth, sectorHeight,
|
||||
currSector = 4,
|
||||
currSector = 4, // always starts in the middle
|
||||
mouse;
|
||||
|
||||
// ====================================================
|
||||
|
||||
// helper functions
|
||||
function centeredOnWindow(axis, dim) {
|
||||
return (axis / 2) - (dim / 2);
|
||||
}
|
||||
|
||||
// ====================================================
|
||||
|
||||
function center(elem) {
|
||||
$log.debug(winWidth / 2);
|
||||
$log.debug(winHeight / 2);
|
||||
$log.debug((winWidth / 2) - ((elem.node().getBBox().width) / 2));
|
||||
$log.debug((winHeight / 2) - ((elem.node().getBBox().height) / 2));
|
||||
return {
|
||||
x: (winWidth / 2) - ((elem.node().getBBox().width) / 2),
|
||||
y: (winHeight / 2) - ((elem.node().getBBox().height) / 2)
|
||||
}
|
||||
}
|
||||
|
||||
function showSectors() {
|
||||
svg.append('line')
|
||||
.attr({
|
||||
x1: winWidth / 2,
|
||||
x2: winWidth / 2,
|
||||
y1: 0,
|
||||
y2: winHeight,
|
||||
stroke: 'purple',
|
||||
'stroke-width': '3px'
|
||||
});
|
||||
svg.append('line')
|
||||
.attr({
|
||||
x1: 0,
|
||||
x2: winWidth,
|
||||
y1: winHeight / 2,
|
||||
y2: winHeight / 2,
|
||||
stroke: 'purple',
|
||||
'stroke-width': '3px'
|
||||
});
|
||||
for (var i = 1; i < 5; i++) {
|
||||
var j;
|
||||
if (i < 3) {
|
||||
@ -122,37 +90,34 @@
|
||||
}
|
||||
|
||||
function selectSector() {
|
||||
var sector, row, col;
|
||||
var sector, row, col,
|
||||
currSectorCol = currSector % sectorDivisions;
|
||||
|
||||
do {
|
||||
sector = Math.floor((Math.random() * 9));
|
||||
} while (sector === currSector);
|
||||
$log.debug('sector after loop: ' + sector);
|
||||
$log.debug('currSector after loop: ' + currSector);
|
||||
col = sector % sectorDivisions;
|
||||
} while (col === currSectorCol);
|
||||
currSector = sector;
|
||||
$log.debug('currSector after assignment: ' + currSector);
|
||||
row = Math.floor(sector / sectorDivisions);
|
||||
col = sector % sectorDivisions;
|
||||
|
||||
$log.debug('row: ' + row);
|
||||
$log.debug('col: ' + col);
|
||||
|
||||
// active area is the coordinates of the sector, plus or minus a margin
|
||||
return {
|
||||
xmin: sectorWidth * col,
|
||||
xmax: (sectorWidth * col) + sectorWidth,
|
||||
ymin: sectorHeight * row,
|
||||
ymax: (sectorHeight * row) + sectorHeight
|
||||
xmin: (sectorWidth * col) + pageMargin,
|
||||
xmax: ((sectorWidth * col) + sectorWidth) - pageMargin,
|
||||
ymin: (sectorHeight * row) + pageMargin,
|
||||
ymax: ((sectorHeight * row) + sectorHeight) - pageMargin
|
||||
}
|
||||
}
|
||||
|
||||
function selectXY(sectorCoords) {
|
||||
var x, y, x1, y1;
|
||||
|
||||
do {
|
||||
x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin;
|
||||
y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin;
|
||||
x1 = x + btnWidth;
|
||||
y1 = y + btnHeight;
|
||||
} while (x1 >= winWidth - pageMargin || y1 >= winHeight - pageMargin);
|
||||
} while (x1 > sectorCoords.xmax || y1 > sectorCoords.ymax);
|
||||
|
||||
return {
|
||||
x: x,
|
||||
@ -167,9 +132,8 @@
|
||||
function moveButton() {
|
||||
var sec = selectSector(),
|
||||
pos = selectXY(sec);
|
||||
$log.debug(pos.x, pos.y);
|
||||
g.transition()
|
||||
.duration(400)
|
||||
.duration(300)
|
||||
.ease('cubic-out')
|
||||
.each('start', removeMouseListener)
|
||||
.attr('transform', gTranslate(pos.x, pos.y))
|
||||
@ -186,13 +150,9 @@
|
||||
fs = _fs_;
|
||||
return {
|
||||
restrict: 'E',
|
||||
link: function (scope, elem, attrs) {
|
||||
link: function (scope, elem) {
|
||||
winWidth = fs.windowSize().width;
|
||||
winHeight = fs.windowSize().height;
|
||||
// getting rid of pageMargin to see if the math is easier
|
||||
// could put the padding somewhere else as in where it's ok to move the button
|
||||
//sectorWidth = (winWidth / sectorDivisions) - pageMargin;
|
||||
//sectorHeight = (winHeight / sectorDivisions) - pageMargin;
|
||||
sectorWidth = winWidth / sectorDivisions;
|
||||
sectorHeight = winHeight / sectorDivisions;
|
||||
|
||||
@ -203,7 +163,7 @@
|
||||
height: winHeight + 'px'
|
||||
});
|
||||
|
||||
showSectors();
|
||||
//showSectors();
|
||||
g = svg.append('g');
|
||||
|
||||
var button = g.append('rect')
|
||||
@ -228,12 +188,10 @@
|
||||
height: btnHeight + hoverZone + 'px',
|
||||
x: -(hoverZone / 2),
|
||||
y: -(hoverZone / 2)
|
||||
}),
|
||||
centeredG = center(g);
|
||||
});
|
||||
g.attr('transform',
|
||||
gTranslate(centeredG.x, centeredG.y));
|
||||
//gTranslate(centeredOnWindow(winWidth, btnWidth),
|
||||
// centeredOnWindow(winHeight, btnHeight)));
|
||||
gTranslate(centeredOnWindow(winWidth, btnWidth),
|
||||
centeredOnWindow(winHeight, btnHeight)));
|
||||
|
||||
addMouseListener();
|
||||
}
|
||||
|
||||
@ -267,13 +267,16 @@
|
||||
"61.4,90.2,61.4,93.7z M93.8,61.8c-3.5,0-6.4-2.9-6.4-6.4c0-3.5," +
|
||||
"2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4C100.1,58.9,97.3,61.8,93.8,61.8z",
|
||||
|
||||
eqMaster: "M94.6,80.1c0,5.7-4.6,10.3-10.3,10.3S74,85.8,74,80.1" +
|
||||
"c0-3.8,2-7,5-8.8L64.4,37.5H45.8L31.1,71.3c2.9,1.8,4.9,5.1,4.9," +
|
||||
"8.8c0,5.7-4.6,10.3-10.3,10.3s-10.3-4.6-10.3-10.3S20,69.8,25.7," +
|
||||
"69.8c0.7,0,1.5,0.1,2.2,0.2L42,37.5H26.7c-0.6,0-1-0.4-1-0.8V20.4" +
|
||||
"c0-0.5,0.5-0.8,1-0.8h56.6c0.6,0,1,0.4,1,0.8v16.2c0,0.5-0.5,0.8" +
|
||||
"-1,0.8H68.2L82.3,70c0.6-0.1,1.3-0.2,2-0.2C90,69.8,94.6,74.4," +
|
||||
"94.6,80.1z"
|
||||
eqMaster: "M100.1,46.9l-10.8-25h0.2c0.5,0,0.8-0.5,0.8-1.1v-3.2" +
|
||||
"c0-0.6-0.4-1.1-0.8-1.1H59.2v-5.1c0-0.5-0.8-1-1.7-1h-5.1c-0.9,0" +
|
||||
"-1.7,0.4-1.7,1v5.1l-30.2,0c-0.5,0-0.8,0.5-0.8,1.1v3.2c0,0.6," +
|
||||
"0.4,1.1,0.8,1.1h0.1l-10.8,25C9,47.3,8.4,48,8.4,48.8v1.6l0,0h0" +
|
||||
"v6.4c0,1.3,1.4,2.3,3.2,2.3h21.7c1.8,0,3.2-1,3.2-2.3v-8c0-0.9" +
|
||||
"-0.7-1.6-1.7-2L22.9,21.9h27.9v59.6l-29,15.9c0,1.2,1.8,2.2,4.1," +
|
||||
"2.2h58.3c2.3,0,4.1-1,4.1-2.2l-29-15.9V21.9h27.8L75.2,46.8c-1," +
|
||||
"0.4-1.7,1.1-1.7,2v8c0,1.3,1.4,2.3,3.2,2.3h21.7c1.8,0,3.2-1,3.2" +
|
||||
"-2.3v-8C101.6,48,101,47.3,100.1,46.9z M22,23.7l10.8,22.8H12.1" +
|
||||
"L22,23.7z M97.9,46.5H77.2L88,23.7L97.9,46.5z"
|
||||
},
|
||||
|
||||
badgeViewBox = '0 0 10 10',
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
toolbar.addToggle('demo-toggle', 'chain', false, togFn, 'another tooltip');
|
||||
toolbar.addSeparator();
|
||||
toolbar.addRadioSet('demo-radio', rset);
|
||||
toolbar.show();
|
||||
toolbar.hide();
|
||||
|
||||
checkFn();
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ describe('factory: fw/svg/glyph.js', function() {
|
||||
intentTraffic: 'M14.7,71.5h',
|
||||
allTraffic: 'M15.7,64.5h-7v',
|
||||
flows: 'M93.8,46.1c',
|
||||
eqMaster: 'M94.6,80.1c0,5.7',
|
||||
eqMaster: 'M100.1,46.9l',
|
||||
|
||||
// badges
|
||||
uiAttached: 'M2,2.5a.5,.5',
|
||||
|
||||
@ -55,12 +55,24 @@ describe('factory: fw/widget/tooltip.js', function () {
|
||||
});
|
||||
|
||||
// testing mouse events is tough
|
||||
|
||||
// showTooltip needs a d3 event, which currently has no test backend
|
||||
// .each is a workaround, which provides this, d, and i
|
||||
xit('should show a tooltip', function () {
|
||||
var btn = d3.select('body').append('div').attr('id', 'foo');
|
||||
// each is used to trigger a "mouse" event, providing this, d, and i
|
||||
btn.each(function () {
|
||||
tts.showTooltip(this, 'yay a tooltip');
|
||||
});
|
||||
// tests here
|
||||
});
|
||||
|
||||
// can't cancel a tooltip until we show one
|
||||
// because currElemId isn't set otherwise
|
||||
xit('should cancel an existing tooltip', function () {
|
||||
var btn = d3.select('body').append('div').attr('id', 'foo');
|
||||
btn.each(function () {
|
||||
tts.cancelTooltip(this);
|
||||
});
|
||||
expect(d3Elem.text()).toBe('');
|
||||
expect(d3Elem.style('display')).toBe('none');
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user