GUI -- Starting migration of topology view to the updated framework. WIP.

web/gui/src/main/webapp/index2.html

@@ -70,6 +70,7 @@
     <script type="text/javascript">
         var ONOS = $.onos({
             comment: "configuration options",
+            startVid: 'topo',
             trace: false
         });
     </script>
@@ -77,12 +78,15 @@
     <!-- Framework module files included here -->
     <script src="mast2.js"></script>
 
-    <!-- Contributed (application) views injected here -->
+    <!-- Sample views; can be dispensed with eventually -->
-    <!-- TODO: replace with template marker and inject refs server-side -->
     <script src="sample2.js"></script>
     <script src="sampleAlt2.js"></script>
     <script src="sampleRadio.js"></script>
 
+    <!-- Contributed (application) views injected here -->
+    <!-- TODO: replace with template marker and inject refs server-side -->
+    <script src="topo2.js"></script>
+
     <!-- finally, build the UI-->
     <script type="text/javascript">
         $(ONOS.buildUi);

web/gui/src/main/webapp/onos2.js

@@ -25,7 +25,7 @@
     var tsI = new Date().getTime(),         // initialize time stamp
         tsB,                                // build time stamp
         mastHeight = 36,                    // see mast2.css
-        defaultHash = 'sample';
+        defaultVid = 'sample';
 
 
     // attach our main function to the jQuery object
@@ -35,7 +35,8 @@
             navApi;
 
         var defaultOptions = {
-            trace: false
+            trace: false,
+            startVid: defaultVid
         };
 
         // compute runtime settings
@@ -91,7 +92,7 @@
             traceFn('hash', hash);
 
             if (!hash) {
-                hash = defaultHash;
+                hash = settings.startVid;
                 redo = true;
             }
 
@@ -336,10 +337,6 @@
         }
 
         var viewInstanceMethods = {
-            toString: function () {
-                return '[View: id="' + this.vid + '"]';
-            },
-
             token: function () {
                 return {
                     // attributes
@@ -350,6 +347,7 @@
                     // functions
                     width: this.width,
                     height: this.height,
+                    uid: this.uid,
                     setRadio: this.setRadio
                 }
             },
@@ -433,6 +431,10 @@
 
             setRadio: function (btnSet, cb) {
                 setRadioButtons(this.vid, btnSet, cb);
+            },
+
+            uid: function (id) {
+                return uid(this, id);
             }
 
             // TODO: consider schedule, clearTimer, etc.

web/gui/src/main/webapp/topo2.css

@@ -20,3 +20,7 @@
  @author Simon Hunt
  */
 
+svg #topo-bg {
+    opacity: 0.5;
+}
+