From 50b4843d76df192336b43f49817f81f34e4095b4 Mon Sep 17 00:00:00 2001 From: Tim Young Date: Thu, 25 Apr 2024 14:47:54 -0500 Subject: [PATCH] Get highlights working (mostly) --- Web/ui.js | 140 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 88 insertions(+), 52 deletions(-) diff --git a/Web/ui.js b/Web/ui.js index 3783810..187ebe1 100644 --- a/Web/ui.js +++ b/Web/ui.js @@ -11,6 +11,7 @@ var imageSize=40; var small_button_size = 20; var uiDeviceInfoLevel = 1; //What do we display when we look at the network var uiActions = [];//a list of things on the screen we can click on or process. +var ui_highlightRect = null; //The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu var uiMode=1; @@ -104,17 +105,31 @@ 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.3; //mostly transparent + MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay); + MainCanvas_ctx.globalAlpha = 1.0; //reset + MainCanvas_ctx.fillStyle = "black"; //reset + } + //Draw the puzzle-select button //Put the X there so we can click on it rect = makeRectangle(MainCanvas.width - small_button_size, 0, small_button_size, small_button_size); MainCanvas_ctx.drawImage(imageFromName("menu"),rect.sx,rect.sy,rect.deltax,rect.deltay); - //registerActionStruct("square", rect, null, textwindow_XClick); + registerActionStruct("square", rect, null, ui_PuzzleChoiceMenuLeftClick, null, generic_mouseoverHighlight); //Draw the info button - MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size); + rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size, small_button_size, small_button_size); + MainCanvas_ctx.drawImage(imageFromName("info"), rect.sx, rect.sy, rect.deltax, rect.deltay); + registerActionStruct("square", rect, null, ui_InfoLeftClick, null, generic_mouseoverHighlight); - //Draw the info button - MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size); + //Draw the eye button + rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size * 2, small_button_size, small_button_size); + MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay); + registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight); drawSelectMenu(); PrintAllNetworkLinks(); @@ -168,8 +183,7 @@ function CheckForActions(actionPoint, action) { if (uiActions.length >= 0) { var checkit = false; var inside = false; - for (var index = 0; index < uiActions.length; index++) - { + for (var index = 0; index < uiActions.length; index++) { if (action == "leftclick" && uiActions[index].funcLeftClick !== null) checkit = true; if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true; if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true; @@ -186,19 +200,24 @@ function CheckForActions(actionPoint, action) { } } } - } - } - } - - if (inside) { - console.log("Is inside"); - switch (action) { - case "leftclick": - if (checklocation.funcLeftClick != null) { - checklocation.funcLeftClick(actionPoint, checklocation.theObject); - console.log("Successfully did a UI action"); - return true; - } + } + } + if (inside) { + //console.log("Is inside"); + switch (action) { + case "leftclick": + if (checklocation.funcLeftClick != null) { + checklocation.funcLeftClick(actionPoint, checklocation); + //console.log("Successfully did a UI action"); + return true; + } + case "mouseover": + if (checklocation.funcMouseover != null) { + checklocation.funcMouseover(actionPoint, checklocation); + //console.log("Successfully did a UI action"); + return true; + } + } } } } @@ -225,40 +244,37 @@ function handleMouseUp(evt) if(!mouseDidMovement) { //If we are not dragging, it is a click var myevt = copyLocation(evt); - console.log("evt:" + JSON.stringify(myevt)); + //console.log("evt:" + JSON.stringify(myevt)); if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else. if(uiMode==1) TextWindow_handleMouseUp(evt); else if(uiMode==2) TextWindow_handleMouseUp(evt); - else if(uiMode==0 && evt.pageX >= MainCanvas.width - small_button_size) - { - console.log("clicked far enough x wise"); - //We may be clicking on one of the small buttons - if(evt.pageY < small_button_size) - { - //We clicked on the puzzle-select menu - console.log("PuzzleSelect pressed"); - uiMode=2; - PrintScreen(); - } else if(evt.pageY < small_button_size *2) - { - console.log("Selected info button"); - //It is the info button - uiMode=1; - PrintScreen(); - } else if (evt.pageY < small_button_size * 3) { - console.log("Selected 'eye' button"); - //It is the eye button - uiDeviceInfoLevel++; - if (uiDeviceInfoLevel > 3) uiDeviceInfoLevel = 0; - PrintScreen(); - } - } } } mouseDidMovement=false; //reset it after we raise the button } +function ui_PuzzleChoiceMenuLeftClick(evt) { + //We clicked on the puzzle-select menu + console.log("PuzzleSelect pressed in action"); + uiMode = 2; + PrintScreen(); +} + +function ui_eyeLeftClick(evt) { + console.log("Selected 'eye' button in action"); + //It is the eye button + uiDeviceInfoLevel++; + if (uiDeviceInfoLevel > 3) uiDeviceInfoLevel = 0; + PrintScreen(); +} + +function ui_InfoLeftClick(evt) { + console.log("Selected info button in action"); + //It is the info button + uiMode = 1; + PrintScreen(); +} function handleMouseMove(evt) { @@ -280,6 +296,15 @@ function handleMouseMove(evt) } else //Mouse is not down. Not dragging { + var needrefresh = false; + if (!CheckForActions(evt, "mouseover")) { + //We did not find anything + if (ui_highlightRect != null) { + needrefresh = true; + } + ui_highlightRect = null; //nothing to highlight + PrintScreen(); + } if(uiMode==2) { textMenu_HandleMouseMove(evt); @@ -338,11 +363,15 @@ function PrintNetworkDevice(ToPrint) if(ToPrint !== null) { var rect = deviceRectangle(ToPrint); + var actionrect = makeRectangle(rect.spoint.x, rect.spoint.y, rect.width, rect.height); + var dname = ToPrint.mytype; 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, null, null, generic_mouseoverHighlight); + //Now, we see if we need to print the name, or a list of IPs.. var xpoint = rect.center.x; var ystart = rect.epoint.y; //the bottom-most Y point @@ -360,7 +389,7 @@ function PrintNetworkDevice(ToPrint) break; case 2: case 3: - console.log("printing device " + ToPrint.hostname); + //console.log("printing device " + ToPrint.hostname); //Print both the name and the IP addresses if (uiDeviceInfoLevel == 2) { delta = printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart) + gap; @@ -369,11 +398,11 @@ function PrintNetworkDevice(ToPrint) //print the ip addresses for (var x = 0; x < ipaddresses.length; x++) { //Print the IP address if the type is correct. - console.log(JSON.stringify(ipaddresses[x])); + //console.log(JSON.stringify(ipaddresses[x])); switch (ipaddresses[x].nictype) { case "eth": case "management_interface": - console.log("Found a " + ipaddresses[x].nictype) + //console.log("Found a " + ipaddresses[x].nictype) let mystring = ipaddresses[x].cidrip; delta = printCenteredText(MainCanvas_ctx, mystring, xpoint, ystart); ystart += (delta / 2); @@ -485,7 +514,7 @@ function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) { function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) { var struct = { shapeText: shapeText, - shapePoints: shapePoints, + shapePoints: structuredClone(shapePoints), theObject: theObject, funcLeftClick: funcLeftClick, funcRightClick: funcRightClick, @@ -497,16 +526,23 @@ function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) { //Make an object with all the data var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover); - console.log("Pushing an action: " + shapeText); + //console.log("Pushing an action: " + shapeText); //Push it onto the uiActions list uiActions.push(what); + //console.log("ActionList: " + JSON.stringify(uiActions)); } function clearActionStructs() { uiActions = []; } -//This is what happens when we click on the x to close the window. -function xclicked() { - +//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 + if (actionrec.shapeText == "square") { + ui_highlightRect = structuredClone(actionrec.shapePoints); + //console.log("setting highlights to:" + JSON.stringify(ui_highlightRect)); + } + PrintScreen(); } \ No newline at end of file