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:
parent
ee0a3f9255
commit
7b57cbe97a
151
Web/ui.js
151
Web/ui.js
@ -14,7 +14,8 @@ var uiActions = [];//a list of things on the screen we can click on or process.
|
||||
var ui_highlightRect = null;
|
||||
var ui_HadHighlight = false;
|
||||
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
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user