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

Getting it so we can click on devices. Mainly figuring stuff out. 

Committing now because I am about to drive off and I want to have the
code-base up to date before I travel.
This commit is contained in:
Tim Young 2024-04-30 17:38:31 -05:00
parent 6119432875
commit a19cb99b9d
1 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
Web/ui.js
View File

@ -14,6 +14,7 @@ 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="";
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
var uiMode=1;
@ -168,6 +169,8 @@ function PrintScreen(WhatPassedIn=-1)
MainCanvas_ctx.lineTo(MainCanvas.width, MainCanvas.height - ui_status_height); //Bottom
MainCanvas_ctx.stroke();
var statustext = puzzle.name + ": " + ui_StatusText;
printLeftJustifiedText(MainCanvas_ctx, statustext, menuItemSize + 5, (MainCanvas.height - ui_status_height) + 7);
MainCanvas_ctx.strokeStyle = "black";
@ -453,7 +456,7 @@ function PrintNetworkDevice(ToPrint)
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);
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;
@ -530,6 +533,28 @@ function printCenteredText(canvas_context, text, centerx, top_y, font = "15px se
return yHeight; //report back how much space we used. Just in case they want it.
}
//print text. We use y as the top-most y position.
function printLeftJustifiedText(canvas_context, text, LeftX, top_y, font = "15px serif", textcolor = "black") {
var metrics = canvas_context.measureText(text);
var yHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + tmTextYGap;
var xWidth = metrics.width;
var oldfill = canvas_context.fillStyle;
var oldstroke = canvas_context.strokeStyle;
canvas_context.font = font;
canvas_context.fillStyle = textcolor;
canvas_context.strokeStyle = textcolor;
canvas_context.fillText(text, LeftX, top_y + (yHeight / 3));
//reset stuff when done
canvas_context.fillStyle = oldfill;
canvas_context.strokeStyle = oldstroke;
return yHeight; //report back how much space we used. Just in case they want it.
}
function convertXYPointToActual(point)
{
//We have an x and y coordinate which needs to be converted to the canvas size
@ -626,6 +651,10 @@ function clearActionStructs() {
uiActions = [];
}
function setStatus(text) {
ui_StatusText = text; //set the text.
}
//This takes generic information for us to highlight the background
function generic_mouseoverHighlight(point, actionrec) {
//console.log("Found highlight " + JSON.stringify(actionrec));
@ -646,4 +675,12 @@ function generic_mouseoverHighlight(point, actionrec) {
}
else
PrintScreen(); //two different areas. Need to print the screen
}
function device_clickOn(point, actionrec) {
if (actionrec.theObject !== null && actionrec.theObject.name !== null) {
setStatus(actionrec.theObject.hostname);
//We probably do not want to do printecreen here, but we are doing it here now...
PrintScreen();
}
}