GUI -- Created sprite layout for Menlo Office Floor Plan.
- Still need to fix layout.json as the sample. This is WIP! Change-Id: I060cf1bd69d7b0b0b1cd692ec4f10532756cb01f
Showing
5 changed files
with
153 additions
and
93 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 | - | ||
60 | - return { x: w / 2, y: h * dy }; | ||
61 | - } | ||
62 | 56 | ||
63 | - function doSprite(spr, def) { | 57 | + function doSprite(spr, def, pstrk) { |
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, |
71 | - g = spriteLayer.append('g') | 65 | + sc = def.scale, |
72 | - .classed(c, true) | 66 | + xfm = sus.translate(p), |
73 | - .attr('transform', 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 | + | ||
74 | + g = spriteLayer.append('g') | ||
75 | + .classed(c, true) | ||
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 |
79 | - }); | 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; | ||
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') |
93 | - .attr('transform', sus.translate(p)) | 106 | + .classed(c, true) |
94 | - .classed(c, true); | 107 | + .attr('transform', sus.translate(p)) |
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 | ||
127 | - registerPathsAsGlyphs(data.paths); | 143 | + if (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" } |
112 | - { "id": "small_tri", "pos":[10, 20] }, | ||
113 | - { "id": "small_tri", "pos":[110, 20] }, | ||
114 | - { "id": "small_tri", "pos":[210, 20] }, | ||
115 | - { "id": "small_tri", "pos":[310, 20] } | ||
116 | ], | 110 | ], |
117 | "labels": [ | 111 | "labels": [ |
118 | - { "pos":[500,940], "text":"Sample Layout", "class":"blue1" }, | 112 | + { "pos":[500,850], "text":"Sample Layout", "class":"blue1", "size":1.6 }, |
119 | - { "pos":[500,1000], "text":"Illustrating Sprites", "class":"gray1" } | 113 | + { "pos":[500,900], "text":"Illustrating Sprites", "class":"gray1" } |
120 | ] | 114 | ] |
121 | - } | 115 | + }, |
116 | + "junk":[ | ||
117 | + { "id": "border" }, | ||
118 | + { "id": "multi", "class": "gray1" }, | ||
119 | + { "id": "small_tri", "pos":[10, 20] }, | ||
120 | + { "id": "small_tri", "pos":[110, 20] }, | ||
121 | + { "id": "small_tri", "pos":[210, 20] }, | ||
122 | + { "id": "small_tri", "pos":[310, 20] } | ||
123 | + ] | ||
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 | -} |
-
Please register or login to post a comment