Get the name to display under the network devices

Web/ui.js

@@ -9,6 +9,7 @@ var mouseDownLocation;
 var mouseDidMovement=false;
 var imageSize=40;
 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,7 +271,7 @@ 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);
@@ -279,6 +280,25 @@ function PrintNetworkDevice(ToPrint)
 		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;
+		switch (uiDeviceInfoLevel) {
+			case 0:
+				//Do not print anything
+				break;
+			case 1:
+				//Print the name
+				printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart);
+				break;
+			case 2:
+				//Print both the name and the IP addresses
+				break;
+			case 3:
+				//print just the ip addresses
+				break;
+        }
     }
 }
 
@@ -293,6 +313,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
@@ -335,7 +377,8 @@ function deviceRectangle(theDevice)
 		spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
 		height : imageSize,
 		width : imageSize,
-	epoint : newPointFromPair(centerpoint.x+delta, centerpoint.y+delta)
+		epoint : newPointFromPair(centerpoint.x + delta, centerpoint.y + delta),
+		center: centerpoint,
 	}
     return rect;
 }