Compare commits
No commits in common. "a19cb99b9d7c4da6befd6c7024f441323ae6396a" and "84685e3bd48ea7b3f5ed198722ebfcee1ece154b" have entirely different histories.
a19cb99b9d
...
84685e3bd4
70
Web/ui.js
70
Web/ui.js
@ -8,13 +8,11 @@ var mouseIsDown=false;
|
|||||||
var mouseDownLocation;
|
var mouseDownLocation;
|
||||||
var mouseDidMovement=false;
|
var mouseDidMovement=false;
|
||||||
var imageSize=40;
|
var imageSize=40;
|
||||||
var small_button_size = 25;
|
var small_button_size = 20;
|
||||||
var uiDeviceInfoLevel = 1; //What do we display when we look at the network
|
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 uiActions = [];//a list of things on the screen we can click on or process.
|
||||||
var ui_highlightRect = null;
|
var ui_highlightRect = null;
|
||||||
var ui_HadHighlight = false;
|
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
|
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
|
||||||
var uiMode=1;
|
var uiMode=1;
|
||||||
@ -112,12 +110,12 @@ function PrintScreen(WhatPassedIn=-1)
|
|||||||
if (ui_highlightRect !== null) {
|
if (ui_highlightRect !== null) {
|
||||||
//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
|
//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
|
||||||
MainCanvas_ctx.fillStyle = "white";
|
MainCanvas_ctx.fillStyle = "white";
|
||||||
MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent
|
MainCanvas_ctx.globalAlpha = 0.3; //mostly transparent
|
||||||
if (ui_highlightRect.shapeText == "square")
|
if (ui_highlightRect.shapeText == "square")
|
||||||
MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
|
MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
|
||||||
else if (ui_highlightRect.shapeText == "line") {
|
else if (ui_highlightRect.shapeText == "line") {
|
||||||
var oldWidth = MainCanvas_ctx.lineWidth;
|
var oldWidth = MainCanvas_ctx.lineWidth;
|
||||||
MainCanvas_ctx.lineWidth += 6;
|
MainCanvas_ctx.lineWidth += 4;
|
||||||
MainCanvas_ctx.strokeStyle = "white";
|
MainCanvas_ctx.strokeStyle = "white";
|
||||||
MainCanvas_ctx.beginPath();
|
MainCanvas_ctx.beginPath();
|
||||||
MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
|
MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
|
||||||
@ -148,32 +146,6 @@ function PrintScreen(WhatPassedIn=-1)
|
|||||||
MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
|
MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
|
||||||
registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight);
|
registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight);
|
||||||
|
|
||||||
//Draw simple lines to show boundaries
|
|
||||||
//Select menu separation
|
|
||||||
MainCanvas_ctx.lineWidth = 2;
|
|
||||||
MainCanvas_ctx.strokeStyle = "white";
|
|
||||||
MainCanvas_ctx.beginPath();
|
|
||||||
MainCanvas_ctx.moveTo(menuItemSize, 0); //top side
|
|
||||||
MainCanvas_ctx.lineTo(menuItemSize, MainCanvas.height); //Bottom
|
|
||||||
MainCanvas_ctx.stroke();
|
|
||||||
|
|
||||||
//Right-side menu separator
|
|
||||||
MainCanvas_ctx.beginPath();
|
|
||||||
MainCanvas_ctx.moveTo(MainCanvas.width - small_button_size, 0); //top side
|
|
||||||
MainCanvas_ctx.lineTo(MainCanvas.width - small_button_size, MainCanvas.height - ui_status_height); //Bottom
|
|
||||||
MainCanvas_ctx.stroke();
|
|
||||||
|
|
||||||
//Status Bar separator
|
|
||||||
MainCanvas_ctx.beginPath();
|
|
||||||
MainCanvas_ctx.moveTo(menuItemSize, MainCanvas.height - ui_status_height); //top side
|
|
||||||
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";
|
|
||||||
|
|
||||||
drawSelectMenu();
|
drawSelectMenu();
|
||||||
PrintAllNetworkLinks();
|
PrintAllNetworkLinks();
|
||||||
PrintAllNetworkDevices();
|
PrintAllNetworkDevices();
|
||||||
@ -456,7 +428,7 @@ function PrintNetworkDevice(ToPrint)
|
|||||||
if(dname=="net_hub") dname="hub";
|
if(dname=="net_hub") dname="hub";
|
||||||
//console.log("printing device " + dname);
|
//console.log("printing device " + dname);
|
||||||
MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
|
MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
|
||||||
registerActionStruct("square", actionrect, ToPrint, device_clickOn, null, generic_mouseoverHighlight);
|
registerActionStruct("square", actionrect, ToPrint, null, null, generic_mouseoverHighlight);
|
||||||
|
|
||||||
//Now, we see if we need to print the name, or a list of IPs..
|
//Now, we see if we need to print the name, or a list of IPs..
|
||||||
var xpoint = rect.center.x;
|
var xpoint = rect.center.x;
|
||||||
@ -533,28 +505,6 @@ 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.
|
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)
|
function convertXYPointToActual(point)
|
||||||
{
|
{
|
||||||
//We have an x and y coordinate which needs to be converted to the canvas size
|
//We have an x and y coordinate which needs to be converted to the canvas size
|
||||||
@ -651,10 +601,6 @@ function clearActionStructs() {
|
|||||||
uiActions = [];
|
uiActions = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
function setStatus(text) {
|
|
||||||
ui_StatusText = text; //set the text.
|
|
||||||
}
|
|
||||||
|
|
||||||
//This takes generic information for us to highlight the background
|
//This takes generic information for us to highlight the background
|
||||||
function generic_mouseoverHighlight(point, actionrec) {
|
function generic_mouseoverHighlight(point, actionrec) {
|
||||||
//console.log("Found highlight " + JSON.stringify(actionrec));
|
//console.log("Found highlight " + JSON.stringify(actionrec));
|
||||||
@ -675,12 +621,4 @@ function generic_mouseoverHighlight(point, actionrec) {
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
PrintScreen(); //two different areas. Need to print the screen
|
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