timy/EduNetworkBuilder
timy/EduNetworkBuilder
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 119 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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