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

Devices with problems properly have red background

Browse Source
This commit is contained in:
Tim Young 2024-05-15 17:06:48 -06:00
parent 77b034f845
commit 3e902cba95
3 changed files with 112 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Web/network.js
View File

@ -1,6 +1,10 @@
//This file contains the information about the puzzle (network)
//Each puzzle is stored in the allpuzzles variable. We need to select one and use it
//We define this here, even though it is used primarily in the UI. We define its values here
var ui_helplevel = 0;
var puzzle=networkFromName("Level0-Ping");
//var puzzle=networkFromName("Level0-NeedsLink");
//var puzzle=networkFromName("Level0_NetworkLoop");
@ -41,11 +45,21 @@ function networkFromIndex(what)
{
if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){
var newitem = structuredClone(allpuzzles[what].EduNetworkBuilder.Network);
if (typeof (newitem.nettest) == "object") {
console.log("It is an array:" + Array.isArray(newitem.nettest));
if (!Array.isArray(newitem.nettest)) {
var oneitem = newitem.nettest; //this is an object
newitem.nettest = [];
newitem.nettest.push(oneitem); //make it an one-item array.
}
//Set the help level to be whatever we need
if (newitem.startinghelplevel == "full") ui_helplevel = 3;
if (newitem.startinghelplevel == "hints") ui_helplevel = 2;
if (newitem.startinghelplevel == "basic") ui_helplevel = 1;
if (newitem.startinghelplevel == "none") ui_helplevel = 0;
console.log("Starting help level = " + ui_helplevel + " from " + newitem.startinghelplevel);
return newitem;
}
return null;
@ -53,13 +67,13 @@ function networkFromIndex(what)
function deviceHasProblem(Device) {
var hostname = Device.hostname;
console.log("Looking for tests on " + hostname + " and have: " + puzzle.nettest.length)
//console.log("Looking for tests on " + hostname + " and have: " + puzzle.nettest.length)
for (var index = 0; index < puzzle.nettest.length; index++) {
console.log("Found test: " + puzzle.nettest[index].shost)
//console.log("Found test: " + JSON.stringify(puzzle.nettest));
if (puzzle.nettest[index].shost == hostname) {
if (puzzle.nettest[index].solved == null) {
//It has not yet been solved.
console.log("Found problem on device: " + hostname)
//console.log("Found problem on device: " + hostname);
return true;
}
}

2
Web/selectmenu.js
View File

@ -17,7 +17,7 @@ var menuItemSize=50;
function InitializeSelectMenu() {
cachedSelectMenuCanvas = document.createElement('canvas');
cachedSelectMenuCanvas.width = menuItemSize;
console.log("length= " + selectMenuNames.length);
//console.log("length= " + selectMenuNames.length);
cachedSelectMenuCanvas.height = menuItemSize * selectMenuNames.length;
var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
var starty = 0;

142
Web/ui.js
View File

@ -45,7 +45,7 @@ const imageCollection = loadImages(
"img/VidImage.png", "img/WAP.png", "img/WBridge.png",
"img/WRepeater.png", "img/WRouter.png", "img/X.png",
"img/info.png", "img/menu.png", "img/eye.png",
"img/menu.png", "img/thumb.png",
"img/queryuser.png", "img/thumb.png",
],
InitializeGameMenu // this is called when all images have loaded.
);
@ -99,7 +99,7 @@ function PrintScreen(WhatPassedIn=-1)
//Clear out any old ActionStructs. They will get filled in as we print the screen.
clearActionStructs();
console.log("PrintingScreen for mode: " + what);
//console.log("PrintingScreen for mode: " + what);
var rect;
if(what == 0)
@ -109,29 +109,8 @@ 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;
//}
//else ui_HadHighlight = false;
//Check for device highlights
checkDevicesForIssues();
//print highlights. If we have mouseover highlights, note that.
if (printHighlights("mouseover") > 0) ui_HadHighlight = true;
@ -153,6 +132,23 @@ function PrintScreen(WhatPassedIn=-1)
MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight);
//Draw the help-level select button
rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size * 3, small_button_size, small_button_size);
//Put any coloring behind the query-user image
var tmp_queryhighlight = null;
if (ui_helplevel == 0) tmp_queryhighlight = returnHighlightShape("square", rect, "red", "none", 0.3);
if (ui_helplevel == 1) tmp_queryhighlight = returnHighlightShape("square", rect, "orange", "none", 0.3);
if (ui_helplevel == 2) tmp_queryhighlight = returnHighlightShape("square", rect, "yellow", "none", 0.3);
if (ui_helplevel == 3) tmp_queryhighlight = returnHighlightShape("square", rect, "green", "none", 0.3);
if (tmp_queryhighlight == null) { }
else drawshape(tmp_queryhighlight);
MainCanvas_ctx.drawImage(imageFromName("queryuser"), rect.sx, rect.sy, rect.deltax, rect.deltay);
registerActionStruct("square", rect, null, ui_queryuserLeftClick, null, generic_mouseoverHighlight);
//Draw simple lines to show boundaries
//Select menu separation
MainCanvas_ctx.lineWidth = 2;
@ -345,6 +341,19 @@ function ui_eyeLeftClick(evt) {
PrintScreen();
}
function ui_queryuserLeftClick(evt) {
console.log("Selected 'queryuser' button in action");
//It is the eye button
ui_helplevel++;
if (ui_helplevel > 3) ui_helplevel = 0;
if (ui_helplevel == 0) setStatus("There is a disturbance in the force. Guessing...");
if (ui_helplevel == 1) setStatus("Service check detected a problem.");
if (ui_helplevel == 2) setStatus("Someone submitted a trouble ticket.");
if (ui_helplevel == 3) setStatus("Interviewed users for detailed info.");
PrintScreen();
}
function ui_InfoLeftClick(evt) {
console.log("Selected info button in action");
//It is the info button
@ -460,12 +469,14 @@ function PrintNetworkDevice(ToPrint)
if(dname=="net_switch") dname="switch";
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);
registerActionStruct("square", actionrect, ToPrint, device_clickOn, null, generic_mouseoverHighlight);
if (deviceHasProblem(ToPrint)) {
registerHighlightShape("square", actionrect, "red", "problem", 0.2);
}
var thshape = returnHighlightShape("square", actionrect, "red", "problem", 0.2);
drawshape(thshape);
}
MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
registerActionStruct("square", actionrect, ToPrint, device_clickOn, null, generic_mouseoverHighlight);
//Now, we see if we need to print the name, or a list of IPs..
var xpoint = rect.center.x;
@ -509,11 +520,32 @@ function PrintNetworkDevice(ToPrint)
}
}
function PrintAllNetworkDevices()
function checkDevicesForIssues()
{
return; //Doing it a different way
if (puzzle == null) return; //If the puzzle has not been set, exit
removeHighlightsNamed("problem");
//console.log("Looking for problems in devices." + puzzle.device.length);
let index = 0;
while (index < puzzle.device.length) {
if (deviceHasProblem(puzzle.device[index])) {
console.log("Found a problem. Registering it...");
var actionrect = deviceRectangle(puzzle.device[index]);
//If the help level is bigger than 0 (guessing), show which devices have problems
if (ui_helplevel > 0) {
var answer = registerHighlightShape("square", actionrect, "red", "problem", 0.2);
console.log("registered it." + JSON.stringify(answer));
}
}
index++;
}
}
function PrintAllNetworkDevices()
{
if (puzzle == null) return; //If the puzzle has not been set, exit
let index = 0;
while (index < puzzle.device.length) {
@ -670,31 +702,37 @@ function setStatus(text) {
//go through all highlights and print all of them
function printHighlights(countof="mouseover") {
var count = 0;
//console.log("Printing highlights. " + ui_HighlightArray.length)
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
drawshape(highlight);
}
return countof; //the count of the item we were supposed to count
}
function drawshape(highlight) {
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
}
function countHighlightsNamed(countof = "mouseover") {
var count = 0;
for (var index = 0; index < ui_HighlightArray.length; index++) {
@ -704,8 +742,7 @@ function countHighlightsNamed(countof = "mouseover") {
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) {
function returnHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy = 0.4) {
//Create a highlight record with the needed info
var newhighlight = {
shapeText: shapeText,
@ -714,6 +751,13 @@ function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, o
shapeName: shapeName, //Used when we remove them later
opaciticy, opaciticy,
}
return newhighlight;
}
//There may be multiple things
function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy=0.4) {
//Create a highlight record with the needed info
var newhighlight = returnHighlightShape(shapeText, structuredClone(shapePoints), shapeColor, shapeName, opaciticy)
//console.log("registering a highlight: " + JSON.stringify(newhighlight));
//Add it to the list of highlights.
ui_HighlightArray.unshift(newhighlight);