홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
19cb098a 1 parent 936c49d1

Another step forward with the UI. 

- Added (placeholder) logo to mast head.
- Minor tweaks.
Inline Side-by-side
Showing 9 changed files with 17 additions and 16 deletions
...@@ -15,19 +15,18 @@ ...@@ -15,19 +15,18 @@
15 <link rel="stylesheet" href="onos.css"> 15 <link rel="stylesheet" href="onos.css">
16 16
17 <script src="geometry.js"></script> 17 <script src="geometry.js"></script>
18 - <script src="onosui.js"></script> 18 + <script src="onos.js"></script>
19 19
20 </head> 20 </head>
21 <body> 21 <body>
22 <div id="frame"> 22 <div id="frame">
23 <div id="mast"> 23 <div id="mast">
24 - <span class="title"> 24 + <img id="logo" src="img/onos-logo.png" width="60" height="38">
25 - ONOS Web UI 25 + <span class="title">Open Network Operating System</span>
26 - </span>
27 <span class="right"> 26 <span class="right">
28 - <span class="radio">[one]</span> 27 + <span class="radio">[All Layers]</span>
29 - <span class="radio">[two]</span> 28 + <span class="radio">[Packet Only]</span>
30 - <span class="radio">[three]</span> 29 + <span class="radio">[Optical Only]</span>
31 </span> 30 </span>
32 </div> 31 </div>
33 <div id="view"></div> 32 <div id="view"></div>
......
...@@ -11,18 +11,17 @@ ...@@ -11,18 +11,17 @@
11 11
12 var config = { 12 var config = {
13 options: { 13 options: {
14 - layering: false, 14 + layering: true,
15 collisionPrevention: true 15 collisionPrevention: true
16 }, 16 },
17 jsonUrl: 'network.json', 17 jsonUrl: 'network.json',
18 iconUrl: { 18 iconUrl: {
19 - logo: 'img/onos-logo.tiff',
20 device: 'img/device.png', 19 device: 'img/device.png',
21 host: 'img/host.png', 20 host: 'img/host.png',
22 pkt: 'img/pkt.png', 21 pkt: 'img/pkt.png',
23 opt: 'img/opt.png' 22 opt: 'img/opt.png'
24 }, 23 },
25 - mastHeight: 32, 24 + mastHeight: 36,
26 force: { 25 force: {
27 note: 'node.class or link.class is used to differentiate', 26 note: 'node.class or link.class is used to differentiate',
28 linkDistance: { 27 linkDistance: {
...@@ -47,7 +46,7 @@ ...@@ -47,7 +46,7 @@
47 } 46 }
48 }, 47 },
49 labels: { 48 labels: {
50 - imgPad: 22, 49 + imgPad: 16,
51 padLR: 8, 50 padLR: 8,
52 padTB: 6, 51 padTB: 6,
53 marginLR: 3, 52 marginLR: 3,
...@@ -57,7 +56,7 @@ ...@@ -57,7 +56,7 @@
57 w: 32, 56 w: 32,
58 h: 32, 57 h: 32,
59 xoff: -12, 58 xoff: -12,
60 - yoff: -10 59 + yoff: -8
61 }, 60 },
62 constraints: { 61 constraints: {
63 ypos: { 62 ypos: {
...@@ -376,6 +375,7 @@ ...@@ -376,6 +375,7 @@
376 rect = node.select('rect'), 375 rect = node.select('rect'),
377 icon = iconUrl(d), 376 icon = iconUrl(d),
378 text = node.append('text') 377 text = node.append('text')
378 + // TODO: add label cycle behavior
379 .text(d.id) 379 .text(d.id)
380 .attr('dy', '1.1em'); 380 .attr('dy', '1.1em');
381 381
......
...@@ -13,13 +13,15 @@ body, html { ...@@ -13,13 +13,15 @@ body, html {
13 */ 13 */
14 14
15 span.title { 15 span.title {
16 - color: darkblue; 16 + color: #37b;
17 - font-size: 16pt; 17 + font-size: 14pt;
18 font-style: italic; 18 font-style: italic;
19 + vertical-align: 10px;
19 } 20 }
20 21
21 span.radio { 22 span.radio {
22 color: darkslateblue; 23 color: darkslateblue;
24 + font-size: 10pt;
23 } 25 }
24 26
25 span.right { 27 span.right {
...@@ -127,8 +129,8 @@ svg .legend .category text { ...@@ -127,8 +129,8 @@ svg .legend .category text {
127 } 129 }
128 130
129 #mast { 131 #mast {
130 - height: 32px; 132 + height: 36px;
131 - padding: 6px; 133 + padding: 4px;
132 background-color: #ccc; 134 background-color: #ccc;
133 vertical-align: baseline; 135 vertical-align: baseline;
134 } 136 }
......