Hi Folks,
It's been a while.
Does anyone know what (inline) JavaScript I can call to exit the floating HTML prompt? (I mean within a script tag, not an onclick.)
EDIT: Problem solved; finished macros attached (and explanation at the bottom of the thread).
Thanks and hope everyone's been well.
Display Progress Bar.kmmacros (4.2 KB)
Close Progress Bar.kmmacros (1.6 KB)
Hey Bill,
I'm not very conversant with the HTML prompt, but a quick search of the forum reveals this:
On Cancel in a Custom HTML Prompt Form, Exit the Macro
Which may be helpful.
-Chris
Hi Chris, good to hear from you, and thank you. Yes, exactly—using javascript attached to a button will work, but not inline.
So this works:
<button name="Cancel" type="button" class = "button-8" onclick="window.KeyboardMaestro.Submit('Cancel')">Cancel</button>
But this doesn't:
<script>window.KeyboardMaestro.Submit('Cancel');</script>
(Scratching my head…)
?? @DanThomas or @mrpasini or @peternlewis ...
In the header I often use something like this:
<script>
function KMInit(){window.addEventListener("keydown",function(e){e.preventDefault();switch(e.code){case 'KeyI':window.KeyboardMaestro.Submit('File');break;case 'KeyF':window.KeyboardMaestro.Submit('Folder');break;case 'Enter':case 'KeyR':window.KeyboardMaestro.Submit('Run');break;case 'KeyD':window.KeyboardMaestro.Submit('Delete');break;case 'KeyE':window.KeyboardMaestro.Submit('Restore');break;case 'KeyH':window.KeyboardMaestro.Submit('Help');break;case 'KeyC':window.KeyboardMaestro.Submit('Cancel');break}})} </script>
where here the 'C' key is used to C)ancel.
More typically, just the Escape key (in that same script):
case'Enter':case'Escape':window.close();
``Use this for the script tag:
<script type="text/javascript">
In other words (there might be typos or something here - let me know if it doesn't work right):
<script type="text/javascript">
function cancelClicked() {
window.KeyboardMaestro.Cancel("cancel");
}
</script>
...
<button name="Cancel" type="button" class = "button-8"
onclick="cancelClicked()">Cancel</button>
Or some version of the above.
Thanks, @DanThomas and @mrpasini. I must be doing something obviously wrong. My goal is to have a full-screen image with a progress bar, along with a CANCEL button. And that all works—but when the progress bar is finished, nothing happens, because KM is waiting for input—I just don't know how to exit! Below is my code, and thank you kindly (and @ccstone) for your feedback.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
<dict>
<key>ActionUID</key>
<integer>9679793</integer>
<key>Floating</key>
<false/>
<key>HasTitle</key>
<false/>
<key>MacroActionType</key>
<string>CustomPrompt</string>
<key>Text</key>
<string><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>About GCS</title>
<style type="text/css">
#myProgress { width: 60.5%; background-color: #303035; }
#myBar { width: 1%; height: 30px; background-color: #7D7E8A;}
.center { position: absolute; left: 50%; top: 37%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.buttonpos { position: absolute; left: 50%; top: 42%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.buttonstyle {font-size: 18px; height: 32px; width: 64 px;}
.button-8 {
background-color: #dfe1f4;
border-radius: 3px;
border: 1px solid #7d7e89;
box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
box-sizing: border-box;
color: #202024;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,"Oxygen",sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.15385;
margin: 0;
outline: none;
padding: 8px .8em;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
white-space: nowrap;
}
.button-8:hover,
.button-8:focus {
background-color: #d4d6e8;
}
.button-8:focus {
box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}
.button-8:active {
background-color: #737380;
box-shadow: none;
}
</style>
</head>
<body data-kmwindow="2056, 1329" style="background-image: url(file:/Users/twevans/Desktop/progress_window_background.png); width: 2056px; height: 1329">
<div id="myProgress" class="center">
<div id="myBar"></div>
</div>
<div class = "buttonpos">
<button name="Cancel" type="button" class = "button-8" onclick="window.KeyboardMaestro.Submit('Cancel')">Cancel</button>
</div>
<script type="text/javascript">
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
move();
</script>
</body>
</html> </string>
<key>TimeOutAbortsMacro</key>
<true/>
<key>UseText</key>
<true/>
</dict>
</array>
</plist>
If you want an HTML Prompt window to close automatically after some process finishes, you can close it with an action that refers to the Window ID. My macro app Mirror Mirror uses the technique. This is from that, where I have defined the HTML window as "Progress Bar Window" previously:
Thanks everyone - @mrpasini, your code illuminated the way. I'll post the answer here for future folks searching on this topic.
This macro displays a full screen image with a progress bar, including a "cancel" button:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
<dict>
<key>ActionUID</key>
<integer>9679793</integer>
<key>Asynchronously</key>
<true/>
<key>Floating</key>
<false/>
<key>HasTitle</key>
<false/>
<key>MacroActionType</key>
<string>CustomPrompt</string>
<key>Text</key>
<string><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>About GCS</title>
<style type="text/css">
#myProgress { width: 60.5%; background-color: #303035; }
#myBar { width: 1%; height: 30px; background-color: #7D7E8A;}
body { background-image: url(file:/Users/twevans/Desktop/progress_window_background.png); }
.center { position: absolute; left: 50%; top: 37%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.buttonpos { position: absolute; left: 50%; top: 42%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.buttonstyle {
background-color: #dfe1f4;
border-radius: 3px;
border: 1px solid #7d7e89;
box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
box-sizing: border-box;
color: #202024;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,"Oxygen",sans-serif;
font-size: 13px;
font-weight: 400;
height: 32px;
line-height: 1.15385;
margin: 0;
outline: none;
padding: 8px .8em;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: 64 px;
white-space: nowrap;
}
.buttonstyle:hover,
.buttonstyle:focus {
background-color: #d4d6e8;
}
.buttonstyle:focus {
box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}
.buttonstyle:active {
background-color: #737380;
box-shadow: none;
}
</style>
</head>
<body data-kmwindowid="ProgressWindow" data-kmwindow="2056, 1329" style="width: 100%; height: 100%">
<div id="myProgress" class="center">
<div id="myBar"></div>
</div>
<div class = "buttonpos">
<button name="Cancel" type="button" class = "buttonstyle" onclick="window.KeyboardMaestro.Submit('Cancel')">Cancel</button>
</div>
<script type="text/javascript">
var i = 0;
function displayProgressBar() {
var done = false;
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
window.KeyboardMaestro.Trigger("A8B875D3-4BC5-4FA1-A6C3-F667C92253B8");
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
displayProgressBar();
</script>
</body>
</html></string>
<key>TimeOutAbortsMacro</key>
<true/>
<key>UseText</key>
<true/>
</dict>
</array>
</plist>
And this is the Macro it calls to close itself when the progress bar completes:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
<dict>
<key>ActionName</key>
<string>Close "Working" dialog</string>
<key>ActionUID</key>
<integer>9680451</integer>
<key>DisplayKind</key>
<string>None</string>
<key>MacroActionType</key>
<string>ExecuteJavaScriptForCustomPrompt</string>
<key>NotifyOnFailure</key>
<false/>
<key>Path</key>
<string></string>
<key>StopOnFailure</key>
<false/>
<key>Text</key>
<string>window.close();</string>
<key>TimeOutAbortsMacro</key>
<false/>
<key>TimeOutPeriod</key>
<real>0.5</real>
<key>UseText</key>
<true/>
<key>WindowID</key>
<string>ProgressWindow</string>
</dict>
</array>
</plist>
Now, you need to customize it to your case:
window.KeyboardMaestro.Trigger("A8B875D3-4BC5-4FA1-A6C3-F667C92253B8");
Customise the CSS (e.g., the path to your background image);
Set the dimensions of your screen here; there's certainly a way to automate this, but I don't know what that is:
<body data-kmwindowid="ProgressWindow" data-kmwindow="2056, 1329" style="width: 100%; height: 100%">
And that's it!