홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
b2c4cc82 1 parent bf7eca58

GUI -- Created sprite layout for Menlo Office Floor Plan. 

- Still need to fix layout.json as the sample. This is WIP!

Change-Id: I060cf1bd69d7b0b0b1cd692ec4f10532756cb01f
Inline Side-by-side
Showing 5 changed files with 146 additions and 86 deletions
...@@ -546,11 +546,11 @@ ...@@ -546,11 +546,11 @@
546 /* Sprite Layer */ 546 /* Sprite Layer */
547 547
548 #ov-topo svg #topo-sprites use { 548 #ov-topo svg #topo-sprites use {
549 - stroke-width: 1.0; 549 + stroke-width: 2;
550 } 550 }
551 #ov-topo svg #topo-sprites text { 551 #ov-topo svg #topo-sprites text {
552 text-anchor: middle; 552 text-anchor: middle;
553 - font-size: 10pt; 553 + font-size: 20pt;
554 font-style: italic; 554 font-style: italic;
555 } 555 }
556 556
...@@ -585,7 +585,7 @@ ...@@ -585,7 +585,7 @@
585 } 585 }
586 586
587 .light #ov-topo svg #topo-sprites .gray1 use { 587 .light #ov-topo svg #topo-sprites .gray1 use {
588 - stroke: #bbb; 588 + stroke: #ccc;
589 fill: none; 589 fill: none;
590 } 590 }
591 .dark #ov-topo svg #topo-sprites .gray1 use { 591 .dark #ov-topo svg #topo-sprites .gray1 use {
...@@ -593,7 +593,7 @@ ...@@ -593,7 +593,7 @@
593 fill: none; 593 fill: none;
594 } 594 }
595 .light #ov-topo svg #topo-sprites .gray1 text { 595 .light #ov-topo svg #topo-sprites .gray1 text {
596 - fill: #ccc; 596 + fill: #ddd;
597 } 597 }
598 .dark #ov-topo svg #topo-sprites .gray1 text { 598 .dark #ov-topo svg #topo-sprites .gray1 text {
599 fill: #444; 599 fill: #444;
......
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
25 // injected refs 25 // injected refs
26 var $log, $http, fs, gs, sus, wss; 26 var $log, $http, fs, gs, sus, wss;
27 27
28 - var tssid = 'TopoSpriteService: '; 28 + // constants
29 + var tssid = 'TopoSpriteService: ',
30 + fontsize = 20; // default font size 20pt.
29 31
30 // internal state 32 // internal state
31 var spriteLayer, defsElement; 33 var spriteLayer, defsElement;
...@@ -51,47 +53,61 @@ ...@@ -51,47 +53,61 @@
51 } 53 }
52 } 54 }
53 55
54 - function labAttr(def) {
55 - var dim = def.dim || [1000,1000],
56 - w = dim[0],
57 - h = dim[1],
58 - dy = def.labelyoff || 1;
59 56
60 - return { x: w / 2, y: h * dy }; 57 + function doSprite(spr, def, pstrk) {
61 - }
62 -
63 - function doSprite(spr, def) {
64 var c = spr.class || 'gray1', 58 var c = spr.class || 'gray1',
65 p = spr.pos || [0,0], 59 p = spr.pos || [0,0],
66 lab = spr.label, 60 lab = spr.label,
67 - dim = def.dim || [1000,1000], 61 + dim = def.dim || [40,40],
68 w = dim[0], 62 w = dim[0],
69 h = dim[1], 63 h = dim[1],
70 - use = def.glyph || 'spr_' + def.path, 64 + dy = def.labelyoff || 1,
65 + sc = def.scale,
66 + xfm = sus.translate(p),
67 + useId = def.glyph || 'spr_' + def.path,
68 + g, attr, use, style;
69 +
70 + if (sc) {
71 + xfm += sus.scale(sc, sc);
72 + }
73 +
71 g = spriteLayer.append('g') 74 g = spriteLayer.append('g')
72 .classed(c, true) 75 .classed(c, true)
73 - .attr('transform', sus.translate(p)); 76 + .attr('transform', xfm);
74 77
75 - g.append('use').attr({ 78 + attr = {
76 width: w, 79 width: w,
77 height: h, 80 height: h,
78 - 'xlink:href': '#' + use 81 + 'xlink:href': '#' + useId
82 + };
83 +
84 + use = g.append('use').attr(attr);
85 +
86 + if (pstrk) {
87 + style = {};
88 + angular.forEach(pstrk, function (value, key) {
89 + style['stroke-' + key] = value;
79 }); 90 });
91 + use.style(style);
92 + }
80 93
81 if (lab) { 94 if (lab) {
82 g.append('text') 95 g.append('text')
83 .text(lab) 96 .text(lab)
84 - .attr(labAttr(def)); 97 + .attr({ x: w / 2, y: h * dy });
85 } 98 }
86 } 99 }
87 100
88 function doLabel(label) { 101 function doLabel(label) {
89 var c = label.class || 'gray1', 102 var c = label.class || 'gray1',
90 - p = label.pos || [0,0]; 103 + p = label.pos || [0,0],
91 - spriteLayer.append('text') 104 + sz = label.size || 1.0,
92 - .text(label.text) 105 + g = spriteLayer.append('g')
106 + .classed(c, true)
93 .attr('transform', sus.translate(p)) 107 .attr('transform', sus.translate(p))
94 - .classed(c, true); 108 + .append('text')
109 + .text(label.text)
110 + .style('font-size', (fontsize * sz)+'pt');
95 } 111 }
96 112
97 113
...@@ -111,8 +127,8 @@ ...@@ -111,8 +127,8 @@
111 // data for the requested sprite definition. 127 // data for the requested sprite definition.
112 function inData(payload) { 128 function inData(payload) {
113 var data = payload.data, 129 var data = payload.data,
114 - name, desc, sprites, labels, 130 + name, desc, sprites, labels, alpha,
115 - paths = {}, 131 + pathstrokes = {},
116 defs = {}; 132 defs = {};
117 133
118 if (!data) { 134 if (!data) {
...@@ -124,7 +140,12 @@ ...@@ -124,7 +140,12 @@
124 140
125 $log.debug("Loading sprites...[" + name + "]", desc); 141 $log.debug("Loading sprites...[" + name + "]", desc);
126 142
143 + if (data.paths) {
127 registerPathsAsGlyphs(data.paths); 144 registerPathsAsGlyphs(data.paths);
145 + data.paths.forEach(function (p) {
146 + pathstrokes[p.tag] = p.stroke;
147 + });
148 + }
128 149
129 if (data.defn) { 150 if (data.defn) {
130 data.defn.forEach(function (d) { 151 data.defn.forEach(function (d) {
...@@ -136,11 +157,17 @@ ...@@ -136,11 +157,17 @@
136 if (data.load) { 157 if (data.load) {
137 sprites = data.load.sprites; 158 sprites = data.load.sprites;
138 labels = data.load.labels; 159 labels = data.load.labels;
160 + alpha = data.load.alpha;
161 + if (alpha) {
162 + spriteLayer.style('opacity', alpha);
163 + }
139 } 164 }
140 165
141 if (sprites) { 166 if (sprites) {
142 sprites.forEach(function (spr) { 167 sprites.forEach(function (spr) {
143 - doSprite(spr, defs[spr.id]); 168 + var def = defs[spr.id],
169 + pstrk = def.path && pathstrokes[def.path];
170 + doSprite(spr, def, pstrk);
144 }); 171 });
145 } 172 }
146 173
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 "defn_desc": "Sample Layout Sprite Data", 3 "defn_desc": "Sample Layout Sprite Data",
4 4
5 "_comment": [ 5 "_comment": [
6 - "Sample sprite layout file, demonstrating user-defined outlines", 6 + "Sample sprite layout file, demonstrating user-defined paths",
7 "(1) Register on the server with ...", 7 "(1) Register on the server with ...",
8 " onos-upload-sprites localhost layout.json", 8 " onos-upload-sprites localhost layout.json",
9 "(2) Load into topology view with ...", 9 "(2) Load into topology view with ...",
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
54 "defines the Y-offset of the label as a percentage from the top of the", 54 "defines the Y-offset of the label as a percentage from the top of the",
55 "sprite; for example, 0.4 = 40%. The label is centered horizontally.", 55 "sprite; for example, 0.4 = 40%. The label is centered horizontally.",
56 "", 56 "",
57 - "Note that dimension (dim) defaults to [1000,1000] so that, by default,", 57 + "Note that dimension (dim) defaults to [40,40] which is the",
58 - "there is a 1:1 scale mapping of custom paths to the topology view." 58 + "approximate size of a device icon."
59 ], 59 ],
60 "defn": [ 60 "defn": [
61 { 61 {
...@@ -69,17 +69,17 @@ ...@@ -69,17 +69,17 @@
69 { 69 {
70 "id": "small_tri", 70 "id": "small_tri",
71 "path": "triangle", 71 "path": "triangle",
72 - "dim":[80,80] 72 + "scale":4
73 }, 73 },
74 { 74 {
75 "id": "big_tri", 75 "id": "big_tri",
76 "path": "triangle", 76 "path": "triangle",
77 - "dim":[160,160] 77 + "scale":12
78 }, 78 },
79 { 79 {
80 "id": "subnet", 80 "id": "subnet",
81 "glyph": "cloud", 81 "glyph": "cloud",
82 - "dim":[120,120], 82 + "scale":8,
83 "labelyoff": 0.4 83 "labelyoff": 0.4
84 }, 84 },
85 { 85 {
...@@ -103,20 +103,22 @@ ...@@ -103,20 +103,22 @@
103 ], 103 ],
104 "load": { 104 "load": {
105 "sprites": [ 105 "sprites": [
106 - { "id": "border" },
107 - { "id": "multi", "class": "gray1" },
108 { "id": "subnet", "pos":[-40,20], "label":"apples", "class": "blue1" }, 106 { "id": "subnet", "pos":[-40,20], "label":"apples", "class": "blue1" },
109 { "id": "subnet", "pos":[400,40], "label":"bananas", "class": "blue1" }, 107 { "id": "subnet", "pos":[400,40], "label":"bananas", "class": "blue1" },
110 { "id": "subnet", "pos":[840,60], "label":"cherries", "class": "blue1" }, 108 { "id": "subnet", "pos":[840,60], "label":"cherries", "class": "blue1" },
111 - { "id": "subnet2", "pos":[300,400], "class": "gray1" }, 109 + { "id": "subnet2", "pos":[300,400], "class": "gray1" }
110 + ],
111 + "labels": [
112 + { "pos":[500,850], "text":"Sample Layout", "class":"blue1", "size":1.6 },
113 + { "pos":[500,900], "text":"Illustrating Sprites", "class":"gray1" }
114 + ]
115 + },
116 + "junk":[
117 + { "id": "border" },
118 + { "id": "multi", "class": "gray1" },
112 { "id": "small_tri", "pos":[10, 20] }, 119 { "id": "small_tri", "pos":[10, 20] },
113 { "id": "small_tri", "pos":[110, 20] }, 120 { "id": "small_tri", "pos":[110, 20] },
114 { "id": "small_tri", "pos":[210, 20] }, 121 { "id": "small_tri", "pos":[210, 20] },
115 { "id": "small_tri", "pos":[310, 20] } 122 { "id": "small_tri", "pos":[310, 20] }
116 - ],
117 - "labels": [
118 - { "pos":[500,940], "text":"Sample Layout", "class":"blue1" },
119 - { "pos":[500,1000], "text":"Illustrating Sprites", "class":"gray1" }
120 ] 123 ]
121 - }
122 } 124 }
......
1 +{
2 + "defn_name": "menlo",
3 + "defn_desc": "Office Floor Plan of ONLab at Menlo Park",
4 +
5 + "paths": [
6 + {
7 + "tag": "outerwalls",
8 + "stroke": {
9 + "width": 4
10 + },
11 + "viewbox": "0 0 925 550",
12 + "d": [
13 + "M36,342V516",
14 + "M36,516H892",
15 + "M36,24H892",
16 + "M36,24V250",
17 + "M892,516V274",
18 + "M892,188V24"
19 + ]
20 + },
21 + {
22 + "tag": "innerwalls",
23 + "stroke": {
24 + "width": 2
25 + },
26 + "viewbox": "0 0 925 550",
27 + "d": [
28 + "M892,188H730V158",
29 + "M640,24V254H676H676V368",
30 + "M892,312H742",
31 + "M742,342V516",
32 + "M638,368H546V272",
33 + "M544,282H674",
34 + "M546,232V66H494V26",
35 + "M494,130V60",
36 + "M454,130H340",
37 + "M400,24V130",
38 + "M640,178H546",
39 + "M638,188H672V158",
40 + "M700,410H602",
41 + "M518,410H444",
42 + "M400,410H276",
43 + "M238,408V516",
44 + "M352,410V516",
45 + "M444,410V516",
46 + "M562,410V516",
47 + "M650,410V516",
48 + "M88,178H300V24",
49 + "M88,60H186V178",
50 + "M88,140H108V60"
51 + ]
52 + }
53 + ],
54 +
55 + "defn": [
56 + { "id": "owalls", "path": "outerwalls", "dim":[1400,1400] },
57 + { "id": "iwalls", "path": "innerwalls", "dim":[1400,1400] }
58 + ],
59 +
60 + "load": {
61 + "alpha": 0.9,
62 + "sprites": [
63 + { "id": "owalls", "pos":[-200,-200] },
64 + { "id": "iwalls", "pos":[-200,-200] }
65 + ],
66 + "labels": [
67 + { "pos":[160,220], "text":"Kitchen", "class":"gold1" },
68 + { "pos":[480,220], "text":"Guru", "class":"gold1" },
69 + { "pos":[980,220], "text":"Admin", "class":"gold1" },
70 + { "pos":[700,400], "text":"Servers", "class":"gold1" },
71 + { "pos":[720,580], "text":"Sm.Conf.", "class":"gold1" },
72 + { "pos":[1040,700], "text":"Lg.Conf.", "class":"gold1" },
73 + { "pos":[500,80], "text":"ONLab at Menlo Park", "class":"blue1", "size":1.4 }
74 + ]
75 + }
76 +}
1 -{
2 - "defn_name": "sample",
3 - "defn_desc": "Sample Cloud Sprite Data",
4 -
5 - "_comment": [
6 - "configuration file for loading canned and/or custom sprites (and labels)",
7 - "into the topology view. These appear above the map layer, but below",
8 - "the nodes/links layer."
9 - ],
10 -
11 - "_comment_custom": "'custom' contains custom path data",
12 - "custom": [
13 -
14 - ],
15 -
16 - "_comment_defn": "'defn' array contains sprite definitions",
17 - "defn": [
18 - {
19 - "id": "subnet",
20 - "class": "sprite1",
21 - "use": "cloud",
22 - "width": 120,
23 - "height": 120,
24 - "scale": 3.0,
25 - "textyoff": 0.4
26 - },
27 - {
28 - "id": "subnet2",
29 - "class": "sprite2",
30 - "use": "cloud",
31 - "width": 200,
32 - "height": 200,
33 - "scale": 3.0,
34 - "textyoff": 0.4
35 - }
36 - ],
37 -
38 - "_comment_load": "'load' array contains list of sprites to load",
39 - "load": [
40 - { "id": "subnet", "x": -40, "y":20, "label":"apples" },
41 - { "id": "subnet", "x":400, "y":40, "label":"bananas" },
42 - { "id": "subnet", "x":840, "y":60, "label":"cherries" },
43 - { "id": "subnet2", "x":300, "y":400 }
44 - ]
45 -}