Get the name to display under the network devices
This commit is contained in:
parent
dc741e8c0b
commit
df520fcce6
51
Web/ui.js
51
Web/ui.js
@ -8,7 +8,8 @@ var mouseIsDown=false;
|
|||||||
var mouseDownLocation;
|
var mouseDownLocation;
|
||||||
var mouseDidMovement=false;
|
var mouseDidMovement=false;
|
||||||
var imageSize=40;
|
var imageSize=40;
|
||||||
var small_button_size=20;
|
var small_button_size = 20;
|
||||||
|
var uiDeviceInfoLevel = 1; //What do we display when we look at the network
|
||||||
|
|
||||||
//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;
|
||||||
@ -270,7 +271,7 @@ function PrintAllNetworkLinks()
|
|||||||
|
|
||||||
function PrintNetworkDevice(ToPrint)
|
function PrintNetworkDevice(ToPrint)
|
||||||
{
|
{
|
||||||
//We should have passed in a working link, make sure it exists
|
//We should have passed in a working device, make sure it exists
|
||||||
if(ToPrint !== null)
|
if(ToPrint !== null)
|
||||||
{
|
{
|
||||||
var rect = deviceRectangle(ToPrint);
|
var rect = deviceRectangle(ToPrint);
|
||||||
@ -278,7 +279,26 @@ function PrintNetworkDevice(ToPrint)
|
|||||||
if(dname=="net_switch") dname="switch";
|
if(dname=="net_switch") dname="switch";
|
||||||
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);
|
||||||
|
//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
|
||||||
|
var gap = 3;
|
||||||
|
switch (uiDeviceInfoLevel) {
|
||||||
|
case 0:
|
||||||
|
//Do not print anything
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
//Print the name
|
||||||
|
printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
//Print both the name and the IP addresses
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
//print just the ip addresses
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -293,6 +313,28 @@ function PrintAllNetworkDevices()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//print centered text. We use y as the top-most y position. But we center around the x position
|
||||||
|
function printCenteredText(canvas_context, text, centerx, 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, centerx - (xWidth / 2), 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
|
||||||
@ -335,7 +377,8 @@ function deviceRectangle(theDevice)
|
|||||||
spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
|
spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
|
||||||
height : imageSize,
|
height : imageSize,
|
||||||
width : imageSize,
|
width : imageSize,
|
||||||
epoint : newPointFromPair(centerpoint.x+delta, centerpoint.y+delta)
|
epoint : newPointFromPair(centerpoint.x + delta, centerpoint.y + delta),
|
||||||
|
center: centerpoint,
|
||||||
}
|
}
|
||||||
return rect;
|
return rect;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user