홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Steven Burrows
bbe3dda1 1 parent d576f64f

Removed blank lines 

Removed Weight from the Node Models
Removed console.log
Added new device and region icons

Change-Id: I3203bd5a3acf371088af0a71fc40b182c95e0b7b
Inline Side-by-side
Showing 5 changed files with 119 additions and 138 deletions
......@@ -102,7 +102,7 @@
}
function incDevLabIndex() {
setDevLabIndex(device3ndex+1);
setDevLabIndex(deviceLabelIndex+1);
switch(deviceLabelIndex) {
case 0: return 'Hide device labels';
case 1: return 'Show friendly device labels';
......
......@@ -22,16 +22,13 @@
(function () {
'use strict';
var Collection, Model, is, sus, ts;
var Collection, Model;
var remappedDeviceTypes = {
switch: 'm_switch',
virtual: 'cord'
};
// configuration
var devIconDim = 36,
halfDevIcon = devIconDim / 2;
function createDeviceCollection(data, region) {
var DeviceCollection = Collection.extend({
......@@ -57,78 +54,23 @@
return deviceCollection;
}
function mapDeviceTypeToGlyph(type) {
return remappedDeviceTypes[type] || type || 'unknown';
}
// note: these are the device icon colors without affinity (no master)
var dColTheme = {
light: {
online: '#444444',
offline: '#cccccc'
},
dark: {
// TODO: theme
online: '#444444',
offline: '#cccccc'
}
};
function deviceGlyphColor(d) {
var o = this.node.online,
id = this.node.master, // TODO: This should be from node.master
otag = o ? 'online' : 'offline';
return o ? sus.cat7().getColor(id, 0, ts.theme()) :
dColTheme[ts.theme()][otag];
}
function setDeviceColor() {
this.el.select('use')
.style('fill', this.deviceGlyphColor());
}
angular.module('ovTopo2')
.factory('Topo2DeviceService',
['Topo2Collection', 'Topo2NodeModel', 'IconService',
'SvgUtilService', 'ThemeService',
function (_c_, _nm_, _is_, _sus_, _ts_, classnames) {
['Topo2Collection', 'Topo2NodeModel',
function (_c_, _nm_) {
is = _is_;
sus = _sus_;
ts = _ts_;
Collection = _c_;
Model = _nm_.extend({
initialize: function () {
this.set('weight', 0);
this.constructor.__super__.initialize.apply(this, arguments);
this.super = this.constructor.__super__;
this.super.initialize.apply(this, arguments);
},
nodeType: 'device',
deviceGlyphColor: deviceGlyphColor,
mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
setDeviceColor: setDeviceColor,
onEnter: function (el) {
var node = d3.select(el),
glyphId = mapDeviceTypeToGlyph(this.get('type')),
label = this.trimLabel(this.label()),
glyph, labelWidth;
this.el = node;
// Label
var labelElements = this.addLabelElements(label);
labelWidth = label ? this.computeLabelWidth(node) : 0;
labelElements.rect.attr(this.iconBox(devIconDim, labelWidth));
// Icon
glyph = is.addDeviceIcon(node, glyphId, devIconDim);
glyph.attr(this.iconBox(devIconDim, 0));
node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
this.render();
icon: function () {
var type = this.get('type');
return remappedDeviceTypes[type] || type || 'unknown';
},
onExit: function () {
var node = this.el;
......@@ -142,9 +84,6 @@
.style('stroke-fill', '#555')
.style('fill', '#888')
.style('opacity', 0.5);
},
render: function () {
this.setDeviceColor();
}
});
......
......@@ -14,10 +14,11 @@
* limitations under the License.
*/
/*
ONOS GUI -- Topology Force Module.
Visualization of the topology in an SVG layer, using a D3 Force Layout.
*/
/*
ONOS GUI -- Topology Map Dialog
Display of the dialog window to select a background map for the current topology view
NOTE: This will be deprecated in the future
*/
(function () {
'use strict';
......
......@@ -22,16 +22,37 @@
(function () {
'use strict';
var randomService, ps;
var randomService, ps, sus, is, ts;
var fn;
// Internal state;
var nearDist = 15;
var devIconDim = 36,
labelPad = 10,
halfDevIcon = devIconDim / 2,
nodeLabelIndex = 1;
labelPad = 5,
textPad = 5,
halfDevIcon = devIconDim / 2;
// note: these are the device icon colors without affinity (no master)
var dColTheme = {
light: {
online: '#444444',
offline: '#cccccc'
},
dark: {
// TODO: theme
online: '#444444',
offline: '#cccccc'
}
};
function devGlyphColor(d) {
var o = this.get('online'),
id = this.get('master'),
otag = o ? 'online' : 'offline';
return o ? sus.cat7().getColor(id, 0, ts.theme()) :
dColTheme[ts.theme()][otag];
}
function positionNode(node, forUpdate) {
......@@ -108,20 +129,30 @@
angular.module('ovTopo2')
.factory('Topo2NodeModel',
['Topo2Model', 'FnService', 'RandomService', 'Topo2PrefsService',
function (Model, _fn_, _RandomService_, _ps_) {
'SvgUtilService', 'IconService', 'ThemeService',
function (Model, _fn_, _RandomService_, _ps_, _sus_, _is_, _ts_) {
randomService = _RandomService_;
ts = _ts_;
fn = _fn_;
ps = _ps_;
sus = _sus_;
is = _is_;
return Model.extend({
initialize: function () {
this.node = this.createNode();
},
onEnter: function () {}, // To be overridden by sub-class
onExit: function () {}, // To be overridden by sub-class
setUpEvents: function () {
var _this = this;
angular.forEach(this.events, function (handler, key) {
_this.el.on(key, _this[handler].bind(_this));
});
},
icon: function () {
return 'unknown';
},
label: function () {
var props = this.get('props'),
id = this.get('id'),
friendlyName = props ? props.name : id,
......@@ -141,17 +172,39 @@
},
addLabelElements: function (label) {
var rect = this.el.append('rect');
var glythRect = this.el.append('rect')
.attr('y', -halfDevIcon)
.attr('x', -halfDevIcon)
.attr('width', devIconDim)
.attr('height', devIconDim)
.style('fill', devGlyphColor.bind(this));
var text = this.el.append('text').text(label)
.attr('text-anchor', 'left')
.attr('y', '0.3em')
.attr('x', halfDevIcon + labelPad);
.attr('x', halfDevIcon + labelPad + textPad);
return {
rect: rect,
glythRect: glythRect,
text: text
};
},
iconBox: function(dim, labelWidth) {
labelBox: function (dim, labelWidth) {
var _textPad = (textPad * 2) - labelPad;
if (labelWidth === 0) {
_textPad = 0;
}
return {
x: -dim / 2 - labelPad,
y: -dim / 2 - labelPad,
width: dim + labelWidth + (labelPad * 2) + _textPad,
height: dim + (labelPad * 2)
};
},
iconBox: function (dim, labelWidth) {
return {
x: -dim / 2,
y: -dim / 2,
......@@ -181,10 +234,9 @@
node.select('rect')
.transition()
.attr(this.iconBox(devIconDim, labelWidth));
.attr(this.labelBox(devIconDim, labelWidth));
},
createNode: function () {
var node = angular.extend({}, this.attributes);
// Augment as needed...
......@@ -192,6 +244,32 @@
node.svgClass = this.svgClassName();
positionNode(node);
return node;
},
onEnter: function (el) {
this.el = d3.select(el);
this.render();
},
render: function () {
var node = this.el,
glyphId = this.icon(this.get('type')),
label = this.trimLabel(this.label()),
glyph, labelWidth;
// Label
var labelElements = this.addLabelElements(label);
labelWidth = label ? this.computeLabelWidth(node) : 0;
labelElements.rect.attr(this.labelBox(devIconDim, labelWidth));
// Icon
glyph = is.addDeviceIcon(node, glyphId, devIconDim);
glyph.attr(this.iconBox(devIconDim, 0));
glyph.style('fill', 'white');
node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
if (this.events) {
this.setUpEvents();
}
}
});
}]
......
......@@ -22,17 +22,13 @@
(function () {
'use strict';
var wss, is, sus;
var wss;
var Collection, Model;
var remappedDeviceTypes = {
virtual: 'cord'
};
// configuration
var devIconDim = 36,
halfDevIcon = devIconDim / 2;
function createSubRegionCollection(data, region) {
var SubRegionCollection = Collection.extend({
......@@ -42,39 +38,30 @@
return new SubRegionCollection(data);
}
function mapDeviceTypeToGlyph(type) {
return remappedDeviceTypes[type] || type || 'switch';
}
function iconBox(dim, labelWidth) {
return {
x: -dim / 2,
y: -dim / 2,
width: dim + labelWidth,
height: dim
};
}
angular.module('ovTopo2')
.factory('Topo2SubRegionService',
['WebSocketService', 'Topo2Collection', 'Topo2NodeModel',
'IconService', 'SvgUtilService', 'ThemeService', 'Topo2ViewService',
'ThemeService', 'Topo2ViewService',
function (_wss_, _c_, _NodeModel_, _is_, _sus_, _ts_, _t2vs_) {
function (_wss_, _c_, _NodeModel_, _ts_, _t2vs_) {
wss = _wss_;
is = _is_;
sus = _sus_;
Collection = _c_;
Model = _NodeModel_.extend({
initialize: function () {
this.set('weight', 0);
this.constructor.__super__.initialize.apply(this, arguments);
this.super = this.constructor.__super__;
this.super.initialize.apply(this, arguments);
},
events: {
'dblclick': 'navigateToRegion'
},
nodeType: 'sub-region',
mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
onClick: function () {
icon: function () {
var type = this.get('type');
return remappedDeviceTypes[type] || type || 'm_cloud';
},
navigateToRegion: function () {
if (d3.event.defaultPrevented) return;
......@@ -82,31 +69,7 @@
dir: 'down',
rid: this.get('id')
});
},
onEnter: function (el) {
var node = d3.select(el),
glyphId = mapDeviceTypeToGlyph(this.get('type')),
label = this.trimLabel(this.label()),
glyph, labelWidth;
this.el = node;
this.el.on('click', this.onClick.bind(this));
// Label
var labelElements = this.addLabelElements(label);
labelWidth = label ? this.computeLabelWidth(node) : 0;
labelElements.rect.attr(iconBox(devIconDim, labelWidth));
// Icon
glyph = is.addDeviceIcon(node, glyphId, devIconDim);
glyph.attr(iconBox(devIconDim, 0));
node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
this.render();
},
onExit: function () {},
render: function () {}
}
});
return {
......