HTML Prompt Location Save question

RogerW · February 19, 2022, 9:24pm

This must be the day for HTML Prompt questions.

I would like to save the position of the HTML prompt and when I open the prompt next time it will open in the saved position.

I think I need to save the position some how and retrieve it when I open the prompt next time?

Roger

DanThomas · February 19, 2022, 10:15pm

Because of a bug in the new WebKit, there's a little trick you need to do. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Custom HTML Prompt Window Position Bug</title>
</head>

  <script type="text/javascript">

  function _debugLog(msg) {
    var ele = document.getElementById("debugText");
    ele.style.display = "inline";
    ele.textContent += msg + "\n";
  }

  function KMWindow() {
    _debugLog(`window.screenX: ${window.screenX}`);
    _debugLog(`window.screenY: ${window.screenY}`);
    _debugLog(`window.screen.availWidth: ${window.screen.availWidth}`);
    _debugLog(`window.screen.availHeight: ${window.screen.availHeight}`);
    _debugLog(`window.screen.availTop: ${window.screen.availTop}`);
    _debugLog(`window.screen.availLeft: ${window.screen.availLeft}`);

	// You can include the window width and height
	var savedPosition = window.KeyboardMaestro.GetVariable("TestSaveWindowPosition");
	if (!savedPosition)
		savedPosition = "800, 200";
    return `${savedPosition}, 400, 400`;
  }

  function saveWindowPosition() {
	// "parseint" isn't really needed here, but since I use it for the Y
	// position, I thought I'd be consistent.'
	var x = parseInt(window.KeyboardMaestro.Calculate("WINDOW(Left)"));

	// Note that we add 126 to this value, to take into account the height
	// of the title bar.
	var y = parseInt(window.KeyboardMaestro.Calculate("WINDOW(Top)")) + 16;
	window.KeyboardMaestro.SetVariable("TestSaveWindowPosition", `${x}, ${y}`);
  }

  function submitWindow(result) {
	saveWindowPosition();
    window.KeyboardMaestro.Submit(result);
  }

  function cancelWindow(result) {
	saveWindowPosition();
    window.KeyboardMaestro.Cancel(result);
  }
</script>

<body>
	<div id="title">
		Custom HTML Prompt Save Position Example
	</div>
  <form id="myform" action="#" method="post">
    <div class="center submit">
      <button name="Cancel" type="button" onclick="cancelWindow('Cancel')">Cancel</button>
      <button name="OK" type="button" onclick="submitWindow('OK')">OK</button>
    </div>
  </form>

  <textarea id="debugText" rows="10" style="width: 100%; display: none"></textarea>
</body>
</html>

I'm heading out for awhile, so if you have questions, I won't be able to respond right away.

RogerW · February 21, 2022, 2:07pm

Dan

Your solution was spot on as before. But I have some questions.

What is the WebKit bug? Is it something apple supplies or the implation into KM?

Also I am having one problem in getting the code to work in my html. Since this is the first time I have ever tried this I am sure it is some stupid mistake on my part.

Thanks for your help
Roger

function getPosition() {
	var savedPosition = window.KeyboardMaestro.GetVariable("grwPosition");
	return savedPosition + "420, 400";
  }

</script>

	<body data-KMWindow=20,40,420,400> <<<this works
	<body data-KMWindow=getPosition> <<<this will not work

DanThomas · February 21, 2022, 2:38pm

As I understand it, this is a Webkit bug. It's not related to KM.

Also I am having one problem in getting the code to work in my html.

Don't put the position in the "data-kmwindow" attribute. That only works for hard-coded values. Instead, return it from a function called "KMWindow()", as my example shows.

Since this is the first time I have ever tried this I am sure it is some stupid mistake on my part.

The fact you're even trying this makes you ahead of the curve. There's a lot to be learned, depending on what you're trying to do, so don't feel stupid. It took me a long time to figure all this stuff out.

RogerW · February 21, 2022, 4:38pm

I still have 2 problems

My OK button will not save the position work but the cancel works?
I still can not get the form to display at the last position.

Here is my complete code.
I appreciate any help
Roger

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Validate input/Selection Prompt</title>
	<style type="text/css">

body {
	background-color: #DBE8F9;
	font: 11px "San Francisco", serif;
	color: #5A698B;
	width: 420px;
	margin: 0;
}

form {
	font: 11px "Arial", serif;
}

#title {
	width: 100%;
	color: #000000;
	padding-top: 5px;
	padding-bottom: 15px;
	<! -- text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
}

form {
	width: 100%;
}

.col1 {
	text-align: right;
	width: 105px;
	padding-top: 5px;
	height: 31px;
	margin: 0;
	float: left;
}

.message {
	height: 75px;
}

.selection {
	height: 75px;
}

.col2 {
	width: 310px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
}

div.row {
	clear: both;
	width: 100%;
}

.submit {
	height: 29px;
	width: 100%;
	padding-top: 5px;
	clear: both;
} 

.input {
	width: 240px;
	background-color: #fff;
	color: #5A698B;
	margin: 4px 0 5px 8px;
	border: 1px solid #8595B2;
}

.center {
	text-align: center;
}

	</style> 

</head>

 <script type="text/javascript">

  function _debugLog(msg) {
    var ele = document.getElementById("debugText");
    ele.style.display = "inline";
    ele.textContent += msg + "\n";
  }

  function KMWindow() {
    _debugLog(`window.screenX: ${window.screenX}`);
    _debugLog(`window.screenY: ${window.screenY}`);
    _debugLog(`window.screen.availWidth: ${window.screen.availWidth}`);
    _debugLog(`window.screen.availHeight: ${window.screen.availHeight}`);
    _debugLog(`window.screen.availTop: ${window.screen.availTop}`);
    _debugLog(`window.screen.availLeft: ${window.screen.availLeft}`);

	// You can include the window width and height
	var savedPosition = window.KeyboardMaestro.GetVariable("grwPosition");
	if (!savedPosition)
		savedPosition = "800, 200";
    return `${savedPosition}, 400, 400`;
  }

  function saveWindowPosition() {
	// "parseint" isn't really needed here, but since I use it for the Y
	// position, I thought I'd be consistent.'
	var x = parseInt(window.KeyboardMaestro.Calculate("WINDOW(Left)"));

	// Note that we add 126 to this value, to take into account the height
	// of the title bar.
	var y = parseInt(window.KeyboardMaestro.Calculate("WINDOW(Top)")) + 16;
	window.KeyboardMaestro.SetVariable("grwPosition", `${x}, ${y}`);
  }

 function submitWindow(result) {
	saveWindowPosition();
      window.KeyboardMaestro.Submit(result);
  }

  function cancelWindow(result) {
	saveWindowPosition();
    window.KeyboardMaestro.Cancel(result);
  }
</script>


<body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),420,400">

	<div id="title">

		<h2><p>Validate the OCR input!</p><p>Then select the Web Search URL desired!</p><p>Then click OK!</p></h2>
	</div>
<form action="#" method="post">
	<div class="row">
		<label class="col1">Given Name:</label> <span class="col2">
		<input name="Given_Name" class="input" type="text" id="name" />
		</span> 
	</div>
	<div class="row">
		<label class="col1">Middle Name:</label> <span class="col2">
		<input name="Middle_Name" class="input" type="text" id="name" />
		</span> 
	</div>
	<div class="row">
		<label class="col1">Sur Name:</label> <span class="col2">
		<input name="Sur_Name" class="input" type="text" id="name" />
		</span> 
	</div>
	<div class="row">
		<label class="col1">Year Of Birth:</label> <span class="col2">
		<input name="Year_Of_Birth" class="input" type="text" id="name" />
		</span> 
	</div>
	 <div class="row">
		<label class="col1">Year Of Death:</label> <span class="col2">
		<input name="Year_Of_Death" class="input" type="text" id="name" />
		</span> 
	</div>
 	<div class="row">
		<label class="col1">FSFTID:</label> <span class="col2">
		<input name="FSPID" class="input" type="text" id="name" />
		</span> 
	</div>

	<div class="row">
		<label class="col1">Saved Position:</label> <span class="col2">
		<input name="grwPosition" class="input" type="text" id="name" />
		</span> 
	</div>

	<div class="center submit">
		<button name="Cancel" type="button" onclick="cancelWindow('Cancel')">Cancel</button>
		<button name="OK" type="button" autofocus onclick="submitWindow('OK')">OK</button>
	</div>


</form>
</body>
</html>

DanThomas · February 21, 2022, 5:04pm

Try putting some console.log statements in various spots. You can view the console by:

In the Safari browser, go to Preferences->Advanced and "check" the "Show Develop menu in menu bar", or whatever it's called in your version of Safari.
When your Prompt is running, right-click in it somewhere, and chose "Inspect Element".
If you look around enough, you should find a place to see the console.

RogerW · February 22, 2022, 2:03pm

Dan

Thanks for the help. I knew which 2 lines of code was the problem but could not figure out why. So I took another route.

I was trying to add your saving position into another macro by (JMichaelTX JMichaelTX) that I found on Keyboard Maestro. So I changed and added the look of the other macro to your sample and it works like I wanted. I still plan to look at both and try to figure out what is the difference.

Thanks
Roger

HTML Prompt Location Save question

Options