Properly showing device names and IPs.

Web/network.js

@@ -86,3 +86,65 @@ function deviceFromID(what)
     }
     return null; //No match.  return a null value
 }
+
+//return a list of all the ip addresses a device has
+function ipsFromDevice(what) {
+	var ipaddresses = [];
+	for (var i = 0; i < what.nic.length; i++) {
+		ipaddresses = ipaddresses.concat(ipsFromNic(what.nic[i]));
+	}
+	//console.log("Adding to nics " + ipaddresses.length);
+	return ipaddresses;
+}
+
+function ipsFromInterface(what, nictype) {
+	var ipaddresses = [];
+	if (typeof (what.myip) === "array") {
+		for (var x = 0; x < what.myip.length; x++) {
+			var one = {
+				nic: what.nicname,
+				ip: what.myip[x].ip,
+				mask: what.myip[x].mask,
+				cidrip: what.myip[x].ip + "/" + NetmaskToCIDR(what.myip[x].mask),
+				nictype: nictype,
+			};
+			ipaddresses.push(one);
+		}
+	}
+	else if (typeof (what.myip) === "object") {
+		var one = {
+			nic: what.nicname,
+			ip: what.myip.ip,
+			mask: what.myip.mask,
+			cidrip: what.myip.ip + "/" + NetmaskToCIDR(what.myip.mask),
+			nictype: nictype,
+		};
+		ipaddresses.push(one);
+		//console.log("found an ip object: " + JSON.stringify(one) + "  " + nictype);
+    }
+	return ipaddresses;
+}
+
+function ipsFromNic(what) {
+	var ipaddresses = [];
+	//console.log("Looking at a nic: " + JSON.stringify(what));
+	if (typeof (what.interface) === "array") {
+		for (var i = 0; i < what.interface.length; i++) {
+			//console.log("Trying to add a nic." + what.interface[i].nicname);
+			ipaddresses=ipaddresses.concat(ipsFromInterface(what.interface[i],what.nictype[0]));
+		}
+	}
+	else if (typeof (what.interface) === "object")
+		ipaddresses=ipaddresses.concat(ipsFromInterface(what.interface, what.nictype[0]));
+
+	return ipaddresses;
+}
+
+function NetmaskToCIDR(mask) {
+	var cidr = 0;
+	var maskNodes = mask.match(/(\d+)/g);
+	for (var i in maskNodes) {
+		cidr += (((maskNodes[i] >>> 0).toString(2)).match(/1/g) || []).length;
+	}
+	return cidr;
+}

Web/ui.js

@@ -8,7 +8,8 @@ var mouseIsDown=false;
 var mouseDownLocation;
 var mouseDidMovement=false;
 var imageSize=40;
-var small_button_size=20;
+var small_button_size = 20;
+var uiDeviceInfoLevel = 1; //What do we display when we look at the network
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -270,15 +271,54 @@ function PrintAllNetworkLinks()
 
 function PrintNetworkDevice(ToPrint)
 {
-    //We should have passed in a working link, make sure it exists
+    //We should have passed in a working device, make sure it exists
     if(ToPrint !== null)
     {
-	var rect = deviceRectangle(ToPrint);
-	var dname = ToPrint.mytype;
-	if(dname=="net_switch") dname="switch";	
-	if(dname=="net_hub") dname="hub";	
-	//console.log("printing device " + dname);
-	MainCanvas_ctx.drawImage(imageFromName(dname),rect.spoint.x,rect.spoint.y,rect.width,rect.height);
+		var rect = deviceRectangle(ToPrint);
+		var dname = ToPrint.mytype;
+		if(dname=="net_switch") dname="switch";	
+		if(dname=="net_hub") dname="hub";	
+		//console.log("printing device " + dname);
+		MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
+		//Now, we see if we need to print the name, or a list of IPs..
+		var xpoint = rect.center.x;
+		var ystart = rect.epoint.y; //the bottom-most Y point
+		var gap = 3;
+		var delta;
+		var ipaddresses = ipsFromDevice(ToPrint);
+		console.log("addresses: " + JSON.stringify(ipaddresses));
+		switch (uiDeviceInfoLevel) {
+			case 0:
+				//Do not print anything
+				break;
+			case 1:
+				//Print the name
+				printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart);
+				break;
+			case 2:
+			case 3:
+				console.log("printing device " + ToPrint.hostname);
+				//Print both the name and the IP addresses
+				if (uiDeviceInfoLevel == 2) {
+					delta = printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart) + gap;
+					ystart += delta / 2;
+				}
+				//print the ip addresses
+				for (var x = 0; x < ipaddresses.length; x++) {
+					//Print the IP address if the type is correct.
+					console.log(JSON.stringify(ipaddresses[x]));
+					switch (ipaddresses[x].nictype) {
+						case "eth":
+						case "management_interface":
+							console.log("Found a " + ipaddresses[x].nictype)
+							let mystring = ipaddresses[x].cidrip;
+							delta = printCenteredText(MainCanvas_ctx, mystring, xpoint, ystart);
+							ystart += (delta / 2);
+							break;
+                    }
+                }
+				break;
+        }
     }
 }
 
@@ -293,6 +333,28 @@ function PrintAllNetworkDevices()
     }
 }
 
+//print centered text.  We use y as the top-most y position.  But we center around the x position
+function printCenteredText(canvas_context, text, centerx, top_y, font = "15px serif", textcolor="black") {
+	var metrics = canvas_context.measureText(text);
+	var yHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + tmTextYGap;
+	var xWidth = metrics.width;
+
+	var oldfill = canvas_context.fillStyle;
+	var oldstroke = canvas_context.strokeStyle;
+
+	canvas_context.font = font;
+	canvas_context.fillStyle = textcolor;
+	canvas_context.strokeStyle = textcolor;
+
+	canvas_context.fillText(text, centerx - (xWidth / 2), top_y + (yHeight / 3));
+
+	//reset stuff when done
+	canvas_context.fillStyle = oldfill;
+	canvas_context.strokeStyle = oldstroke;
+
+	return yHeight; //report back how much space we used.  Just in case they want it.
+}
+
 function convertXYPointToActual(point)
 {
     //We have an x and y coordinate which needs to be converted to the canvas size
@@ -332,10 +394,11 @@ function deviceRectangle(theDevice)
     var delta = imageSize / 2;
 
     var rect = { 
-	spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
-	height : imageSize,
-	width : imageSize,
-	epoint : newPointFromPair(centerpoint.x+delta, centerpoint.y+delta)
+		spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
+		height : imageSize,
+		width : imageSize,
+		epoint : newPointFromPair(centerpoint.x + delta, centerpoint.y + delta),
+		center: centerpoint,
 	}
     return rect;
 }