Integrating Variables into a Custom Html Progress Bar

Questions & Suggestions
,
1

Hello,

first of all, Keyboard Maestro is an amazing application and getting the hang of it cost me numerous free weekends. But I'm not mad about it. Learning and getting new skills is worth it.
Also, this forum is an endless source of knowledge and it has a great community.

Now, here is my problem:

I'm trying to create custom overlays for Pro Tools, because I'm working in the dubbing industry.
The first one I'm trying to achieve is a progress bar, that displays the length of a specific selection in Pro Tools. It is calculated by the difference between the start and end point of the selection, which is saved to a global variable.

When I'm setting the transition time as a fixed number like 3 seconds, the progress bar is displayed with a duration of (approximately) 3 seconds. So far, so good.
When I'm trying to use a local variable, the custom window shows just a solid bar.

Can you help me to fix this problem, please?

With best regards,

Henning

Custom HTML Progress Bar.kmmacros (4.7 KB)

This is the code, that involves a local variable and does not work (yet):

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
body {
background: rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
width: 1900px;
height: 50px;
border: 2px solid white;
overflow: hidden;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: white;
}
</style>
<script>

window.onload = function() {
var progress = document.querySelector(".progress");
progress.style.width = "100%";
var transitionTime = window.KeyboardMaestro.GetVariable("LocalTransitionTime");
progress.style.transition = "width " + transitionTime + "s linear";

progress.addEventListener("transitionend", function() {
window.close();
});
};
window.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
window.close();
}
});
</script>
</head>
<body data-kmwindow="SCREEN(1,Left),SCREEN(1,Top),SCREEN(1,Width),SCREEN(1,Height)">
<div class="container">
<div class="progress"></div>
</div>
</html>
2

In your macro you have a variable called Local_TransitionTime which you access in the Custom HTML Prompt thus:

var transitionTime = window.KeyboardMaestro.GetVariable("Local_TransitionTime");

In the KM wiki for the Custom HTML Prompt it says about variables:

":warning: Be aware that you cannot use a Keyboard Maestro Variable which itself contains an “_ ” , because Keyboard Maestro will replace the “_ ” in the HTML name attribute with a space before it tries to sync with the Keyboard Maestro Variable ."

The solution therefore will probably be to use the variable name without the underscore like this:

image

3

Thanks for your response, tiffle.
I've read about this in the wiki, but still must have ignored it. Shame on me.

Unfortunately, the progress bar is still not functioning correctly after I changed the variable according to your suggestion. Removing all underscores from the "set variable to text"-action and the custom html prompt leads to the same result.

4

You need to keep the underscore in the HTML prompt.

5

Keeping the underscore in the HTML prompt leads to the same result. The prompt is still not functioning as intended.
I also tried a global variable instead of a local one, with no success.
The variable doesn't seem to be the problem.

6

Just for fun (and possibly for good reason), try pasting your code into Bing Chat and asking it to complete the code exactly as you want it, including style preferences. You may be happily surprised. Or not. Either way, it takes a couple of minutes and is fascinating to try.

1 Like
7

@Henning_Frenzel - I just noticed you’re updating your original post in response to the replies you’re getting.

That’s not such a good thing to do because it means all the subsequent posts no longer make sense and as a result, anyone who comes across this discussion in the future will find it hard to understand.

8

@tiffle
I see. Thanks for the tip and well spotted.
This is the first time I've asked for help on a forum, and I'm not accustomed to how to use it properly, yet.
I'll try my best to keep this conversation as transparent as possible.

1 Like
9

Great idea, @noisneil.
Asking Bing Chat to reiterate the code did the trick. The problem was a faulty line order.
I used the AI in the past but didn't get great results, because putting in the right prompts can be an art in itself.
I wish I could have spotted the mistake by myself, but getting the code to work is all that counts.

This is the working code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
body {
background: rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
width: 1900px;
height: 50px;
border: 2px solid white;
overflow: hidden;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: white;
}
</style>
<script>

window.onload = function() {
var progress = document.querySelector(".progress");
var transitionTime = window.KeyboardMaestro.GetVariable("Local_TransitionTime");
progress.style.width = "100%";
progress.style.transition = "width " + transitionTime + "s linear";

progress.addEventListener("transitionend", function() {
window.close();
});
};
window.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
window.close();
}
});
</script>
</head>
<body data-kmwindow="SCREEN(1,Left),SCREEN(1,Top),SCREEN(1,Width),SCREEN(1,Height)">
<div class="container">
<div class="progress"></div>
</div>
</html>
1 Like