Changing the highlight system to something that works for more cases.

We will highlight devices with problems and other things.

Web/index.html

@@ -25,7 +25,7 @@
 </form>
 -->
 
-<canvas id='MainCanvas' width='700  ' height='400' style="border:1px solid #000000;">
+<canvas id='MainCanvas' width='700  ' height='400' style="border:1px solid #000000;"></canvas>
 
 <script src="allpuzzles.js"></script>
 <script src="selectmenu.js"></script>

Web/ui.js

@@ -15,6 +15,7 @@ var ui_highlightRect = null;
 var ui_HadHighlight = false;
 var ui_status_height = 25;
 var ui_StatusText = "";
+var ui_HighlightArray = [];
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -108,28 +109,32 @@ function PrintScreen(WhatPassedIn=-1)
 		MainCanvas_ctx.fillStyle = maincanvasBackground;
 		MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
 
-		//Do any highlight we need to
-		if (ui_highlightRect !== null) {
-			//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
-			MainCanvas_ctx.fillStyle = "white";
-			MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent
-			if (ui_highlightRect.shapeText == "square")
-				MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
-			else if (ui_highlightRect.shapeText == "line") {
-				var oldWidth = MainCanvas_ctx.lineWidth;
-				MainCanvas_ctx.lineWidth += 6;
-				MainCanvas_ctx.strokeStyle = "white";
-				MainCanvas_ctx.beginPath();
-				MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
-				MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
-				MainCanvas_ctx.stroke();
-				MainCanvas_ctx.lineWidth = oldWidth;
-				MainCanvas_ctx.strokeStyle = "black";
-			}
-			MainCanvas_ctx.globalAlpha = 1.0; //reset
-			MainCanvas_ctx.fillStyle = "black"; //reset
-			ui_HadHighlight = true;
-		}
+		////Do any highlight we need to
+		//if (ui_highlightRect !== null) {
+		//	//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
+		//	MainCanvas_ctx.fillStyle = "white";
+		//	MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent
+		//	if (ui_highlightRect.shapeText == "square")
+		//		MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
+		//	else if (ui_highlightRect.shapeText == "line") {
+		//		var oldWidth = MainCanvas_ctx.lineWidth;
+		//		MainCanvas_ctx.lineWidth += 6;
+		//		MainCanvas_ctx.strokeStyle = "white";
+		//		MainCanvas_ctx.beginPath();
+		//		MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
+		//		MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
+		//		MainCanvas_ctx.stroke();
+		//		MainCanvas_ctx.lineWidth = oldWidth;
+		//		MainCanvas_ctx.strokeStyle = "black";
+		//	}
+		//	MainCanvas_ctx.globalAlpha = 1.0; //reset
+		//	MainCanvas_ctx.fillStyle = "black"; //reset
+		//	ui_HadHighlight = true;
+		//}
+		//else ui_HadHighlight = false;
+
+		//print highlights.  If we have mouseover highlights, note that.
+		if (printHighlights("mouseover") > 0) ui_HadHighlight = true;
 		else ui_HadHighlight = false;
 
 		//Draw the puzzle-select button
@@ -368,17 +373,17 @@ function handleMouseMove(evt)
 	else //Mouse is not down.  Not dragging
 	{
 		var needrefresh = false;
-		var oldRect = structuredClone(ui_highlightRect);
+		var oldRect = structuredClone(findHighlightsNamed("mouseover"));
+		removeHighlightsNamed("mouseover");
 		if (!CheckForActions(evt, "mouseover")) {
 			//We did not find anything
-			if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldRect)) {
+			if (JSON.stringify(findHighlightsNamed("mouseover")) === JSON.stringify(oldRect)) {
 
 			}
 			else {
 				//console.log("Rects are not equal:" + JSON.stringify(ui_highlightRect) + " - " + JSON.stringify(oldRect) )
 				needrefresh = true;
 			}
-			ui_highlightRect = null; //nothing to highlight
 			if (ui_HadHighlight) { needrefresh = true; }
 			if (needrefresh) {
 				PrintScreen();
@@ -655,22 +660,104 @@ function setStatus(text) {
 	ui_StatusText = text; //set the text.
 }
 
+
+//go through all highlights and print all of them
+function printHighlights(countof="mouseover") {
+	var count = 0;
+	for (var index = 0; index < ui_HighlightArray.length; index++) {
+		var highlight = ui_HighlightArray[index];
+		//console.log("trying to highlight something: " + JSON.stringify(highlight));
+		if (highlight.shapeName == countof) count++;
+		MainCanvas_ctx.fillStyle = highlight.shapeColor;
+		MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
+		if (highlight.shapeText == "square")
+			MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
+		else if (highlight.shapeText == "line") {
+			var oldWidth = MainCanvas_ctx.lineWidth;
+			MainCanvas_ctx.lineWidth += 6;
+			MainCanvas_ctx.strokeStyle = highlight.shapeColor;
+			MainCanvas_ctx.beginPath();
+			MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+			MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+			MainCanvas_ctx.stroke();
+			MainCanvas_ctx.lineWidth = oldWidth;
+			MainCanvas_ctx.strokeStyle = "black";
+		}
+		MainCanvas_ctx.globalAlpha = 1.0; //reset
+		MainCanvas_ctx.fillStyle = "black"; //reset		
+	}
+	return countof; //the count of the item we were supposed to count
+}
+
+function countHighlightsNamed(countof = "mouseover") {
+	var count = 0;
+	for (var index = 0; index < ui_HighlightArray.length; index++) {
+		if (ui_HighlightArray[index].shapeName == countof)
+			count++;
+	}
+	return countof; //the count of the item we were supposed to count
+}
+
+//There may be multiple things 
+function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy=0.4) {
+	//Create a highlight record with the needed info
+	var newhighlight = {
+		shapeText: shapeText,
+		shapePoints: structuredClone(shapePoints),
+		shapeColor: shapeColor,
+		shapeName: shapeName, //Used when we remove them later
+		opaciticy, opaciticy,
+	}
+	//console.log("registering a highlight: " + JSON.stringify(newhighlight));
+	//Add it to the list of highlights.
+	ui_HighlightArray.unshift(newhighlight);
+	return newhighlight;
+}
+
+function removeHighlightsNamed(shapeName) {
+	//console.log("Trying to remove " + shapeName + "  in array of " + ui_HighlightArray.length);
+	for (var index = ui_HighlightArray.length; index > 0; index--) {
+		if (ui_HighlightArray[index] == null) { }
+		else {
+			//console.log("Comparing " + shapeName + " in " + JSON.stringify(ui_HighlightArray[index]));
+			if (ui_HighlightArray[index].shapeName == shapeName) {
+				//console.log("removing " + shapeName + " at index:" + index + "  " + ui_HighlightArray.length);
+				ui_HighlightArray.splice(index, 1);  //remove it if found
+			}
+		}
+	}
+}
+
+function findHighlightsNamed(shapeName) {
+	for (var index = ui_HighlightArray.length; index < 0; index--) {
+		if (ui_HighlightArray[index].shapeName == shapeName)
+			return ui_HighlightArray[index];
+	}
+	return null; //null if not there
+}
+
 //This takes generic information for us to highlight the background
 function generic_mouseoverHighlight(point, actionrec) {
 	//console.log("Found highlight " + JSON.stringify(actionrec));
 	//The point is the place where the mouse is, but the actionrec.shapePoints is the rectangle (or shape) we want to highlight
-	var oldrec = structuredClone(ui_highlightRect);
+	//var oldrec = structuredClone(ui_highlightRect);
+	var oldrec = findHighlightsNamed("mouseover");
+	var newrec = null;
+	//console.log("setting highlights to:" + JSON.stringify(actionrec));
+	removeHighlightsNamed("mouseover");
 	if (actionrec.shapeText == "square") {
-		ui_highlightRect = structuredClone(actionrec.shapePoints);
-		ui_highlightRect.shapeText = "square";
+		//ui_highlightRect = structuredClone(actionrec.shapePoints);
+		//ui_highlightRect.shapeText = "square";
+		newrec = registerHighlightShape("square", actionrec.shapePoints, "white", "mouseover"); //opacity is default
 		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
 	}
 	if (actionrec.shapeText == "line") {
-		ui_highlightRect = structuredClone(actionrec.shapePoints);
-		ui_highlightRect.shapeText = "line";
+		//ui_highlightRect = structuredClone(actionrec.shapePoints);
+		//ui_highlightRect.shapeText = "line";
+		newrec = registerHighlightShape("line", actionrec.shapePoints, "white", "mouseover"); //opacity is default
 		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
 	}
-	if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldrec)) {
+	if (JSON.stringify(newrec) === JSON.stringify(oldrec)) {
 		//they are the same.  Nothing to do
 	}
 	else