GUI -- Added shadow of ONOS logo to death mask.
Change-Id: I8abfdb88c536eec1e8ec47ae127c809058df4588
Showing
3 changed files
with
91 additions
and
4 deletions
web/gui/src/main/webapp/glyphs.js
0 → 100644
1 | +/* | ||
2 | + * Copyright 2014 Open Networking Laboratory | ||
3 | + * | ||
4 | + * Licensed under the Apache License, Version 2.0 (the "License"); | ||
5 | + * you may not use this file except in compliance with the License. | ||
6 | + * You may obtain a copy of the License at | ||
7 | + * | ||
8 | + * http://www.apache.org/licenses/LICENSE-2.0 | ||
9 | + * | ||
10 | + * Unless required by applicable law or agreed to in writing, software | ||
11 | + * distributed under the License is distributed on an "AS IS" BASIS, | ||
12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
13 | + * See the License for the specific language governing permissions and | ||
14 | + * limitations under the License. | ||
15 | + */ | ||
16 | + | ||
17 | +/* | ||
18 | + SVG Glyphs. | ||
19 | + | ||
20 | + @author Simon Hunt | ||
21 | + */ | ||
22 | + | ||
23 | + | ||
24 | +(function (onos) { | ||
25 | + 'use strict'; | ||
26 | + | ||
27 | + var birdData = "M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1" + | ||
28 | + "c-18.1,6.2-33.9,9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1" + | ||
29 | + "c-0.5,0.6-0.7,1.3-1.3,1.9c1.4-0.4,2.4-1.7,3.4-2.2" + | ||
30 | + "c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6,3.7-2.3,5.9-3.9" + | ||
31 | + "c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1,1-1.9,1.9-2.9,2.9" + | ||
32 | + "c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5-1.9" + | ||
33 | + "c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18" + | ||
34 | + "c18.3-5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8" + | ||
35 | + "c1.1,0.1,2.1,0.3,3.2,0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9" + | ||
36 | + "c-1.9-4.5-2.3-4.1-5.9-6c-2.3-1.3-3.3-3.8-6.2-4.9" + | ||
37 | + "c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4,6.4-22" + | ||
38 | + "c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7" + | ||
39 | + "c-2-11.2-8.4-21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0" + | ||
40 | + "c9.6,17.1,7.2,38.3,3.1,54.2C429.9,285.5,426.7,293.2,427.7,300.4z"; | ||
41 | + | ||
42 | + | ||
43 | + function defBird(defs) { | ||
44 | + defs.append('symbol') | ||
45 | + .attr({ | ||
46 | + id: 'bird', | ||
47 | + viewBox: '352 224 113 112' | ||
48 | + }) | ||
49 | + .append('path').attr('d', birdData); | ||
50 | + } | ||
51 | + | ||
52 | + // === register the functions as a library | ||
53 | + onos.ui.addLib('glyphs', { | ||
54 | + defBird: defBird | ||
55 | + }); | ||
56 | + | ||
57 | +}(ONOS)); |
... | @@ -85,6 +85,7 @@ | ... | @@ -85,6 +85,7 @@ |
85 | 85 | ||
86 | <!-- Library module files included here --> | 86 | <!-- Library module files included here --> |
87 | <script src="d3Utils.js"></script> | 87 | <script src="d3Utils.js"></script> |
88 | + <script src="glyphs.js"></script> | ||
88 | 89 | ||
89 | <!-- Framework module files included here --> | 90 | <!-- Framework module files included here --> |
90 | <script src="mast2.js"></script> | 91 | <script src="mast2.js"></script> | ... | ... |
... | @@ -25,6 +25,7 @@ | ... | @@ -25,6 +25,7 @@ |
25 | 25 | ||
26 | // shorter names for library APIs | 26 | // shorter names for library APIs |
27 | var d3u = onos.lib.d3util, | 27 | var d3u = onos.lib.d3util, |
28 | + gly = onos.lib.glyphs, | ||
28 | trace; | 29 | trace; |
29 | 30 | ||
30 | // configuration data | 31 | // configuration data |
... | @@ -36,6 +37,7 @@ | ... | @@ -36,6 +37,7 @@ |
36 | showNodeXY: true, | 37 | showNodeXY: true, |
37 | showKeyHandler: false | 38 | showKeyHandler: false |
38 | }, | 39 | }, |
40 | + birdDim: 400, | ||
39 | options: { | 41 | options: { |
40 | layering: true, | 42 | layering: true, |
41 | collisionPrevention: true, | 43 | collisionPrevention: true, |
... | @@ -216,10 +218,7 @@ | ... | @@ -216,10 +218,7 @@ |
216 | 218 | ||
217 | function testMe(view) { | 219 | function testMe(view) { |
218 | //view.alert('test'); | 220 | //view.alert('test'); |
219 | - detailPane.show(); | 221 | + noWebSock(true); |
220 | - setTimeout(detailPane.hide, 2000); | ||
221 | - oiBox.show(); | ||
222 | - setTimeout(oiBox.hide, 2000); | ||
223 | } | 222 | } |
224 | 223 | ||
225 | function abortIfLive() { | 224 | function abortIfLive() { |
... | @@ -1663,6 +1662,9 @@ | ... | @@ -1663,6 +1662,9 @@ |
1663 | svg = view.$div.append('svg').attr('viewBox', viewBox); | 1662 | svg = view.$div.append('svg').attr('viewBox', viewBox); |
1664 | setSize(svg, view); | 1663 | setSize(svg, view); |
1665 | 1664 | ||
1665 | + var defs = svg.append('defs'); | ||
1666 | + gly.defBird(defs); | ||
1667 | + | ||
1666 | zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer'); | 1668 | zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer'); |
1667 | setupZoomPan(); | 1669 | setupZoomPan(); |
1668 | 1670 | ||
... | @@ -1740,6 +1742,23 @@ | ... | @@ -1740,6 +1742,23 @@ |
1740 | para(mask, 'Oops!'); | 1742 | para(mask, 'Oops!'); |
1741 | para(mask, 'Web-socket connection to server closed...'); | 1743 | para(mask, 'Web-socket connection to server closed...'); |
1742 | para(mask, 'Try refreshing the page.'); | 1744 | para(mask, 'Try refreshing the page.'); |
1745 | + | ||
1746 | + mask.append('svg') | ||
1747 | + .attr({ | ||
1748 | + id: 'mask-bird', | ||
1749 | + width: w, | ||
1750 | + height: h | ||
1751 | + }) | ||
1752 | + .append('g') | ||
1753 | + .attr('transform', birdTranslate(w, h)) | ||
1754 | + .style('opacity', 0.3) | ||
1755 | + .append('use') | ||
1756 | + .attr({ | ||
1757 | + 'xlink:href': '#bird', | ||
1758 | + width: config.birdDim, | ||
1759 | + height: config.birdDim, | ||
1760 | + fill: '#111' | ||
1761 | + }) | ||
1743 | } | 1762 | } |
1744 | 1763 | ||
1745 | function para(sel, text) { | 1764 | function para(sel, text) { |
... | @@ -1862,9 +1881,19 @@ | ... | @@ -1862,9 +1881,19 @@ |
1862 | } | 1881 | } |
1863 | 1882 | ||
1864 | function resize(view, ctx, flags) { | 1883 | function resize(view, ctx, flags) { |
1884 | + var w = view.width(), | ||
1885 | + h = view.height(); | ||
1886 | + | ||
1865 | setSize(svg, view); | 1887 | setSize(svg, view); |
1888 | + | ||
1889 | + d3.select('#mask-bird').attr({ width: w, height: h}) | ||
1890 | + .select('g').attr('transform', birdTranslate(w, h)); | ||
1866 | } | 1891 | } |
1867 | 1892 | ||
1893 | + function birdTranslate(w, h) { | ||
1894 | + var bdim = config.birdDim; | ||
1895 | + return 'translate('+((w-bdim)*.4)+','+((h-bdim)*.1)+')'; | ||
1896 | + } | ||
1868 | 1897 | ||
1869 | // ============================== | 1898 | // ============================== |
1870 | // View registration | 1899 | // View registration | ... | ... |
-
Please register or login to post a comment