From b978a3abb0d1646683b80b198189f0d54e9b8f7d Mon Sep 17 00:00:00 2001
From: Tim Young <tim.young@lightsys.org>
Date: Wed, 24 Apr 2024 16:52:27 -0500
Subject: [PATCH] Make the start of an action click system
---
Web/textwindow.js | 31 ++++++----
Web/ui.js | 141 ++++++++++++++++++++++++++++++++++++++--------
2 files changed, 138 insertions(+), 34 deletions(-)
diff --git a/Web/textwindow.js b/Web/textwindow.js
index 82112eb..7d93407 100644
--- a/Web/textwindow.js
+++ b/Web/textwindow.js
@@ -31,13 +31,17 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
}
//If we get here, it is already created. Get the context
var cTMCctx = cachedTextMenuCanvas.getContext('2d');
-
+ var rect;
+
//Fill in the background
cTMCctx.fillStyle = tmWindowBackground;
cTMCctx.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height);
//Put the X there so we can click on it
- cTMCctx.drawImage(imageFromName("x"),cachedTextMenuCanvas.width - tmScrollBarWidth,0,tmScrollBarWidth,tmMenuBarHight);
+ rect = makeRectangle(cachedTextMenuCanvas.width - tmScrollBarWidth, 0, tmScrollBarWidth, tmMenuBarHight, tmOutsideXMargin, tmOutsideYMargin);
+ cTMCctx.drawImage(imageFromName("x"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+ registerActionStruct("square", rect, null, textwindow_XClick);
+
//Put the DownArrow there so we can click on it
cTMCctx.drawImage(imageFromName("ArrowUp"),cachedTextMenuCanvas.width - tmScrollBarWidth,tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight);
@@ -165,15 +169,7 @@ function TextWindow_handleMouseUp(evt)
//We clicked the X
- //Dispose of the text window
- uiMode=0;
-
- //dispose of temp canvas; will recreate later if needed
- cachedTextMenuCanvas = null;
- cachedTextMenuTextCanvas = null;
-
- //Redraw the screen
- PrintScreen();
+ textwindow_XClick();
}
}
else
@@ -195,6 +191,19 @@ function TextWindow_handleMouseUp(evt)
mouseDidMovement=false; //reset it after we raise the button
}
+function textwindow_XClick(point, object) {
+ //When the x is clicked, we do not care about the position or object. There is no object
+ //Dispose of the text window
+ uiMode = 0;
+
+ //dispose of temp canvas; will recreate later if needed
+ cachedTextMenuCanvas = null;
+ cachedTextMenuTextCanvas = null;
+
+ //Redraw the screen
+ PrintScreen();
+}
+
function PrintPuzzleSelectMenu(level=0)
{
var levellist=networkNamesMatchingText("Level"+level);
diff --git a/Web/ui.js b/Web/ui.js
index 2a04757..3783810 100644
--- a/Web/ui.js
+++ b/Web/ui.js
@@ -10,6 +10,7 @@ var mouseDidMovement=false;
var imageSize=40;
var small_button_size = 20;
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.
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
var uiMode=1;
@@ -90,40 +91,45 @@ function PrintScreen(WhatPassedIn=-1)
var what=uiMode;
if(WhatPassedIn >=0) what=WhatPassedIn;
+ //Clear out any old ActionStructs. They will get filled in as we print the screen.
+ clearActionStructs();
+
console.log("PrintingScreen for mode: " + what);
+ var rect;
if(what == 0)
{
- //The network drawing mode. Print the network
- //Clear the old screen
- MainCanvas_ctx.fillStyle = maincanvasBackground;
- MainCanvas_ctx.fillRect(0,0, MainCanvas.width, MainCanvas.height);
-
- //Draw the puzzle-select button
+ //The network drawing mode. Print the network
+ //Clear the old screen
+ MainCanvas_ctx.fillStyle = maincanvasBackground;
+ MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
+
+ //Draw the puzzle-select button
//Put the X there so we can click on it
- MainCanvas_ctx.drawImage(imageFromName("menu"),MainCanvas.width - small_button_size,0,small_button_size,small_button_size);
+ rect = makeRectangle(MainCanvas.width - small_button_size, 0, small_button_size, small_button_size);
+ MainCanvas_ctx.drawImage(imageFromName("menu"),rect.sx,rect.sy,rect.deltax,rect.deltay);
+ //registerActionStruct("square", rect, null, textwindow_XClick);
- //Draw the info button
- MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
+ //Draw the info button
+ MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
- //Draw the info button
- MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size);
+ //Draw the info button
+ MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size);
- drawSelectMenu();
- PrintAllNetworkLinks();
- PrintAllNetworkDevices();
- }
- else if(what == 1) //PuzzleDescription/Info
- {
+ drawSelectMenu();
+ PrintAllNetworkLinks();
+ PrintAllNetworkDevices();
+ }
+ else if(what == 1) //PuzzleDescription/Info
+ {
//Display the text about the puzzle
textMenuPrint(puzzle.en_message);
- }
- else if(what == 2) //PuzzleSelect
- {
+ }
+ else if(what == 2) //PuzzleSelect
+ {
//TextMenuSelection
PrintPuzzleSelectMenu(0);
- }
-
+ }
}
function handleTouchStart(evt)
@@ -158,6 +164,47 @@ function handleMouseDown(evt)
if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation);
}
+function CheckForActions(actionPoint, action) {
+ if (uiActions.length >= 0) {
+ var checkit = false;
+ var inside = false;
+ for (var index = 0; index < uiActions.length; index++)
+ {
+ if (action == "leftclick" && uiActions[index].funcLeftClick !== null) checkit = true;
+ if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true;
+ if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
+ checklocation = uiActions[index];
+ if (checkit) {
+ //See if the click is inside the shape
+ if (checklocation.shapeText == "square") {
+ if (actionPoint.pageX - checklocation.shapePoints.offsetx >= checklocation.shapePoints.sx) {
+ if (actionPoint.pageX - checklocation.shapePoints.offsetx <= checklocation.shapePoints.dx) {
+ if (actionPoint.pageY - checklocation.shapePoints.offsety >= checklocation.shapePoints.sy) {
+ if (actionPoint.pageY - checklocation.shapePoints.offsety <= checklocation.shapePoints.dy) {
+ inside = true;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ if (inside) {
+ console.log("Is inside");
+ switch (action) {
+ case "leftclick":
+ if (checklocation.funcLeftClick != null) {
+ checklocation.funcLeftClick(actionPoint, checklocation.theObject);
+ console.log("Successfully did a UI action");
+ return true;
+ }
+ }
+ }
+ }
+ return false;
+}
+
function handleMouseUp(evt)
{
//evt.preventDefault();
@@ -177,6 +224,9 @@ function handleMouseUp(evt)
}
if(!mouseDidMovement)
{ //If we are not dragging, it is a click
+ var myevt = copyLocation(evt);
+ console.log("evt:" + JSON.stringify(myevt));
+ if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else.
if(uiMode==1) TextWindow_handleMouseUp(evt);
else if(uiMode==2) TextWindow_handleMouseUp(evt);
else if(uiMode==0 && evt.pageX >= MainCanvas.width - small_button_size)
@@ -299,7 +349,7 @@ function PrintNetworkDevice(ToPrint)
var gap = 3;
var delta;
var ipaddresses = ipsFromDevice(ToPrint);
- console.log("addresses: " + JSON.stringify(ipaddresses));
+ //console.log("addresses: " + JSON.stringify(ipaddresses));
switch (uiDeviceInfoLevel) {
case 0:
//Do not print anything
@@ -415,3 +465,48 @@ function deviceRectangle(theDevice)
}
return rect;
}
+
+function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
+ //The offset is for when we are drawing on a cached surface. It adds x or y to the point we are looking at
+ var struct = {
+ sx: x1,
+ sy: y1,
+ dx: x1 + deltax,
+ dy: y1 + deltay,
+ deltay: deltay,
+ deltax: deltax,
+ offsetx: offsetx,
+ offsety: offsety,
+ }
+ return struct;
+}
+
+//Make a structure to hold all our data
+function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
+ var struct = {
+ shapeText: shapeText,
+ shapePoints: shapePoints,
+ theObject: theObject,
+ funcLeftClick: funcLeftClick,
+ funcRightClick: funcRightClick,
+ funcMouseover: funcMouseover,
+ }
+ return struct;
+}
+
+function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
+ //Make an object with all the data
+ var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
+ console.log("Pushing an action: " + shapeText);
+ //Push it onto the uiActions list
+ uiActions.push(what);
+}
+
+function clearActionStructs() {
+ uiActions = [];
+}
+
+//This is what happens when we click on the x to close the window.
+function xclicked() {
+
+}
\ No newline at end of file