diff --git a/Web/ui.js b/Web/ui.js index 73a3486..0e9e764 100644 --- a/Web/ui.js +++ b/Web/ui.js @@ -8,11 +8,12 @@ var mouseIsDown=false; var mouseDownLocation; var mouseDidMovement=false; var imageSize=40; -var small_button_size = 20; +var small_button_size = 25; 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; var ui_HadHighlight = false; +var ui_status_height = 25; //The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu var uiMode=1; @@ -110,12 +111,12 @@ function PrintScreen(WhatPassedIn=-1) 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.globalAlpha = 0.4; //mostly transparent if (ui_highlightRect.shapeText == "square") MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay); else if (ui_highlightRect.shapeText == "line") { var oldWidth = MainCanvas_ctx.lineWidth; - MainCanvas_ctx.lineWidth += 4; + MainCanvas_ctx.lineWidth += 6; MainCanvas_ctx.strokeStyle = "white"; MainCanvas_ctx.beginPath(); MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy); @@ -146,6 +147,30 @@ function PrintScreen(WhatPassedIn=-1) MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay); 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(); + + + MainCanvas_ctx.strokeStyle = "black"; + drawSelectMenu(); PrintAllNetworkLinks(); PrintAllNetworkDevices();