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

We will highlight devices with problems and other things.
This commit is contained in:
Tim Young 2024-05-10 11:00:42 -06:00
parent ee0a3f9255
commit 7b57cbe97a

149
Web/ui.js
View File

@ -15,6 +15,7 @@ var ui_highlightRect = null;
var ui_HadHighlight = false; var ui_HadHighlight = false;
var ui_status_height = 25; var ui_status_height = 25;
var ui_StatusText = ""; var ui_StatusText = "";
var ui_HighlightArray = [];
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu //The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
var uiMode=1; var uiMode=1;
@ -108,28 +109,32 @@ function PrintScreen(WhatPassedIn=-1)
MainCanvas_ctx.fillStyle = maincanvasBackground; MainCanvas_ctx.fillStyle = maincanvasBackground;
MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height); MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
//Do any highlight we need to ////Do any highlight we need to
if (ui_highlightRect !== null) { //if (ui_highlightRect !== null) {
//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect)); // //console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
MainCanvas_ctx.fillStyle = "white"; // MainCanvas_ctx.fillStyle = "white";
MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent // MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent
if (ui_highlightRect.shapeText == "square") // if (ui_highlightRect.shapeText == "square")
MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay); // MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
else if (ui_highlightRect.shapeText == "line") { // else if (ui_highlightRect.shapeText == "line") {
var oldWidth = MainCanvas_ctx.lineWidth; // var oldWidth = MainCanvas_ctx.lineWidth;
MainCanvas_ctx.lineWidth += 6; // MainCanvas_ctx.lineWidth += 6;
MainCanvas_ctx.strokeStyle = "white"; // MainCanvas_ctx.strokeStyle = "white";
MainCanvas_ctx.beginPath(); // MainCanvas_ctx.beginPath();
MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy); // MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy); // MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
MainCanvas_ctx.stroke(); // MainCanvas_ctx.stroke();
MainCanvas_ctx.lineWidth = oldWidth; // MainCanvas_ctx.lineWidth = oldWidth;
MainCanvas_ctx.strokeStyle = "black"; // MainCanvas_ctx.strokeStyle = "black";
} // }
MainCanvas_ctx.globalAlpha = 1.0; //reset // MainCanvas_ctx.globalAlpha = 1.0; //reset
MainCanvas_ctx.fillStyle = "black"; //reset // MainCanvas_ctx.fillStyle = "black"; //reset
ui_HadHighlight = true; // 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; else ui_HadHighlight = false;
//Draw the puzzle-select button //Draw the puzzle-select button
@ -368,17 +373,17 @@ function handleMouseMove(evt)
else //Mouse is not down. Not dragging else //Mouse is not down. Not dragging
{ {
var needrefresh = false; var needrefresh = false;
var oldRect = structuredClone(ui_highlightRect); var oldRect = structuredClone(findHighlightsNamed("mouseover"));
removeHighlightsNamed("mouseover");
if (!CheckForActions(evt, "mouseover")) { if (!CheckForActions(evt, "mouseover")) {
//We did not find anything //We did not find anything
if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldRect)) { if (JSON.stringify(findHighlightsNamed("mouseover")) === JSON.stringify(oldRect)) {
} }
else { else {
//console.log("Rects are not equal:" + JSON.stringify(ui_highlightRect) + " - " + JSON.stringify(oldRect) ) //console.log("Rects are not equal:" + JSON.stringify(ui_highlightRect) + " - " + JSON.stringify(oldRect) )
needrefresh = true; needrefresh = true;
} }
ui_highlightRect = null; //nothing to highlight
if (ui_HadHighlight) { needrefresh = true; } if (ui_HadHighlight) { needrefresh = true; }
if (needrefresh) { if (needrefresh) {
PrintScreen(); PrintScreen();
@ -655,22 +660,104 @@ function setStatus(text) {
ui_StatusText = text; //set the 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 //This takes generic information for us to highlight the background
function generic_mouseoverHighlight(point, actionrec) { function generic_mouseoverHighlight(point, actionrec) {
//console.log("Found highlight " + JSON.stringify(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 //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") { if (actionrec.shapeText == "square") {
ui_highlightRect = structuredClone(actionrec.shapePoints); //ui_highlightRect = structuredClone(actionrec.shapePoints);
ui_highlightRect.shapeText = "square"; //ui_highlightRect.shapeText = "square";
newrec = registerHighlightShape("square", actionrec.shapePoints, "white", "mouseover"); //opacity is default
//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect)); //console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
} }
if (actionrec.shapeText == "line") { if (actionrec.shapeText == "line") {
ui_highlightRect = structuredClone(actionrec.shapePoints); //ui_highlightRect = structuredClone(actionrec.shapePoints);
ui_highlightRect.shapeText = "line"; //ui_highlightRect.shapeText = "line";
newrec = registerHighlightShape("line", actionrec.shapePoints, "white", "mouseover"); //opacity is default
//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect)); //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 //they are the same. Nothing to do
} }
else else