GUI Topo -- Badges - Fixed glyph positioning. Added CSS for info/warn/error statuses.

Change-Id: I9e37863a3425df9a9ecd2d20f5526e4f63c6ad00

@@ -427,6 +427,39 @@ html[data-platform='iPad'] #topo-p-detail {
     fill: #f90;
     fill: #f90;
 }
 }
 
 
+/* Badges */
+/* (... works for both light and dark themes...) */
+#ov-topo svg .node .badge circle {
+    stroke: #aaa;
+}
+
+#ov-topo svg .node .badge.badgeInfo circle {
+    fill: #ccf;
+}
+
+#ov-topo svg .node .badge.badgeWarn circle {
+    fill: #da2;
+}
+
+#ov-topo svg .node .badge.badgeError circle {
+    fill: #e44;
+}
+
+#ov-topo svg .node .badge use {
+    fill: white;
+}
+
+#ov-topo svg .node .badge.badgeInfo use {
+    fill: #448;
+}
+
+#ov-topo svg .node .badge text {
+    fill: white;
+}
+
+#ov-topo svg .node .badge.badgeInfo text {
+    fill: #448;
+}
 
 
 /* Host Nodes */
 /* Host Nodes */
 
 

@@ -57,7 +57,8 @@
         },
         },
         badgeConfig = {
         badgeConfig = {
             radius: 12,
             radius: 12,
-            yoff: 5
+            yoff: 5,
+            gdelta: 10
         },
         },
         icfg;
         icfg;
 
 
@@ -207,7 +208,8 @@
             dim = icfg.device.dim,
             dim = icfg.device.dim,
             box, dx, dy, bsel,
             box, dx, dy, bsel,
             bdg = d.badge,
             bdg = d.badge,
-            bcr = badgeConfig.radius;
+            bcr = badgeConfig.radius,
+            bcgd = badgeConfig.gdelta;
 
 
         node.select('text')
         node.select('text')
             .text(label)
             .text(label)
@@ -235,6 +237,8 @@
 
 
         // handle badge, if defined
         // handle badge, if defined
         if (bdg) {
         if (bdg) {
+            node.select('g.badge').remove();
+
             bsel = node.append('g')
             bsel = node.append('g')
                 .classed('badge', true)
                 .classed('badge', true)
                 .classed(badgeStatus(bdg), true)
                 .classed(badgeStatus(bdg), true)
@@ -251,8 +255,9 @@
             } else if (bdg.gid) {
             } else if (bdg.gid) {
                 bsel.append('use')
                 bsel.append('use')
                     .attr({
                     .attr({
-                        width: bcr * 2,
-                        height: bcr * 2,
+                        width: bcgd * 2,
+                        height: bcgd * 2,
+                        transform: sus.translate(-bcgd, -bcgd),
                         'xlink:href': '#' + bdg.gid
                         'xlink:href': '#' + bdg.gid
                     });
                     });
 
 

@@ -5,7 +5,7 @@
       {
       {
         "id": "of:0000000000000001",
         "id": "of:0000000000000001",
         "badge": {
         "badge": {
-          "status": "e",
+          "status": "i",
           "gid": "xMark",
           "gid": "xMark",
           "msg": "x marks the spot"
           "msg": "x marks the spot"
         }
         }
@@ -14,7 +14,40 @@
         "id": "of:0000000000000002",
         "id": "of:0000000000000002",
         "badge": {
         "badge": {
           "status": "w",
           "status": "w",
-          "txt": "7"
+          "gid": "crown",
+          "msg": "it's good to be the King"
+        }
+      },
+      {
+        "id": "of:0000000000000003",
+        "badge": {
+          "status": "e",
+          "gid": "chain",
+          "msg": "the weakest link"
+        }
+      },
+      {
+        "id": "of:0000000000000004",
+        "badge": {
+          "status": "i",
+          "txt": "1",
+          "msg": "singular sensation"
+        }
+      },
+      {
+        "id": "of:0000000000000005",
+        "badge": {
+          "status": "w",
+          "txt": "42",
+          "msg": "life, the universe, and everything!"
+        }
+      },
+      {
+        "id": "of:0000000000000006",
+        "badge": {
+          "status": "e",
+          "txt": "99",
+          "msg": "cadbury's flake"
         }
         }
       }
       }
     ],
     ],
@@ -23,7 +56,7 @@
       {
       {
         "css": "primary",
         "css": "primary",
         "id": "of:0000000000000001/5-of:0000000000000002/7",
         "id": "of:0000000000000001/5-of:0000000000000002/7",
-        "label": "Antz!"
+        "label": "Foo!"
       }
       }
     ]
     ]
   }
   }

+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000000000000003",
+    "type": "switch",
+    "online": true,
+    "master": "ONOS",
+    "labels": [
+      "",
+      "switch-3",
+      "of:0000000000000003"
+    ],
+    "metaUi": {
+      "x": 600,
+      "y": 200
+    }
+  }
+}

+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000000000000004",
+    "type": "switch",
+    "online": true,
+    "master": "ONOS",
+    "labels": [
+      "",
+      "switch-4",
+      "of:0000000000000004"
+    ],
+    "metaUi": {
+      "x": 200,
+      "y": 400
+    }
+  }
+}

+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000000000000005",
+    "type": "switch",
+    "online": true,
+    "master": "ONOS",
+    "labels": [
+      "",
+      "switch-5",
+      "of:0000000000000005"
+    ],
+    "metaUi": {
+      "x": 400,
+      "y": 420
+    }
+  }
+}

+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000000000000006",
+    "type": "switch",
+    "online": true,
+    "master": "ONOS",
+    "labels": [
+      "",
+      "switch-6",
+      "of:0000000000000006"
+    ],
+    "metaUi": {
+      "x": 600,
+      "y": 400
+    }
+  }
+}

@@ -4,7 +4,7 @@
   ],
   ],
   "title": "Demo adding badges",
   "title": "Demo adding badges",
   "params": {
   "params": {
-    "lastAuto": 5
+    "lastAuto": 9
   },
   },
   "description": [
   "description": [
     "Demonstrate the device badging feature."
     "Demonstrate the device badging feature."