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:
parent
6119432875
commit
a19cb99b9d
39
Web/ui.js
39
Web/ui.js
@ -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();
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user