Slider support to display and modify variables

I run a lot of big macros and one thing that I always struggle with is how I should be changing variables while my program is running. One method I use looks like this:

When I call the above action, it displays the existing values of variables and also lets me change them. but it's rather slow and clumsy. Here's a different way I would like to achieve the same goal: (please pardon my sloppy image editing)

This window could let me view and change variables in real time.

Notice the absence of an OK and CANCEL button on this window. That's because this window should instantly change the values of any variables listed in the window when I move the bars and so an OK and CANCEL button wouldn't actually do anything.

I'm not aware of any "slider" support in KM. Nor am I aware of any method to display and modify variables while the program is running. I'm not sure if this is idea is even possible because KM would need to essentially trigger when a specific variable changes in order to update its value in real time. So this may be difficult to implement, but I would use it a lot if it existed.

Without knowing the specifics, then I think this can be done with a custom HTML prompt.
@peternlewis has an example macro here: How to make use of new MIDI controller trigger?
But it relates more to some midi hardware. Maybe you can modify it to suit your needs.

Thatā€™s an insightful tip, so thank you, and I will consider brushing up on my HTML. For this to work I expect to have to use Javascript inside the HTML to provide the looping to read and write the KM variables from the slider. Iā€™m surprised to read in the KM docs that indeed Javascript can read and write KM variable values:

window.KeyboardMaestro.GetVariable( ā€˜KMVariableNameā€™ ) returns the value of a variable
window.KeyboardMaestro.SetVariable( ā€˜KMVariableNameā€™, ā€˜valueā€™ ) sets the value of a variable

So maybe this is actually possible! KM never fails to surprise me! If I can figure out how to do this I will post the solution here.

Still, it would be 10x better if KM supported this.

After studying Peterā€™s example I think I see how his approach is different than mine. I can see how his approach could update a form with variable data, but I donā€™t see how his approach could update variables if the form changes. Still, that might solve half my problem.

I've done something like this for setting variables used by ImageMagick. Here's the Custom HTML Form with sliders:

ss-517

When I move the slider, the value to the right changes simultaneously.

The code for the Compression slider is:

<td align="right">
	<label>Compression</label>
</td>
<td>
	<input type="range" name="CompressionInputName" id="CompressionInputID" value="85" data-kmignoreinit="1" min="1" max="100" step ="1" oninput="CompressionOutputID.value = CompressionInputID.value">
</td>
<td>
	<output name="CompressionOutputName" id="CompressionOutputID">85</output>
</td>

Setting the variables in the form doesn't itself do much in my case, so I do use an OK button to send the variables off to a script for processing.

Hope that helps a bit.

2 Likes

Thatā€™s very inspirational. I will work on understanding it, but it appears to be designed to set variables after pressing OK, not to read them (or write to them, as you indicate) dynamically. Iā€™m still wondering if I can combine the custom HTML form action with javascript to read and/or write dynamically.

And by the way, I love ImageMagick! I use it daily. (Although I use under 0.1% of it, as itā€™s way too much for me.) I often wish that some parts of that program could be incorporated into KM.

I'm having some good success, but it's not easy. Javascript is ugly and when I make a little typo in my Javascript the KM engine hangs up and I have to Force Quit the KM Engine (with up to 8GB of memory assigned to it). That doesn't make this a good learning experience. It looks like I've solved half the problem because I can get a slider to modify a KM variable immediately, as follows:

The second half of my requirement is to include a loop in the Javascript code that constantly fetches the value of the KM Variable "Range1" and modifies the slide bar to correlate to the value. But I keep hanging the KM Engine, probably because I don't know how to put a pause in the loop to allow the OS to display the new value. Hypothetically I would like the answer to look something like this: (but this causes KME to hang)

Either I'm missing a Javascript statement in this loop to give the OS a chance to display the data, or I'm using the wrong approach with an infinite loop. Any thoughts? I'm proud of myself for getting this far, but I need help.

Sleepy, I think you are descending into a rabbit hole here.

The slide I showed you is ā€œdynamicā€ in that, as you move the slider, the value to the right is updated. You could do the opposite or make either of them drive the other. My Xcode version of that form does the latter in fact but I only actually use the slider so for the Keyboard Maestro version, I didnā€™t bother.

My form only sets the value of the variable. But you can do anything you want with that value (including, simply displaying an alert() dynamically).

With that clarified, letā€™s go on the Custom HTML Form itself.

Youā€™re using a snippet of code that does not render as a complete HTML form. Thereā€™s a div and script, no head, no body.

When Iā€™m working on a form for Keyboard Maestro I use a simple text editor and preview the HTML until I get the page looking the way I want. BBEdit has an HTML preview mode thatā€™s very helpful in rendering changes to the CSS and HTML in real time.

When itā€™s time to work on the JavaScript, I load the page in my browser and enable the JavaScript console or inspector to debug the code, reloading as I make changes in the source file.

So, to sum up, you can set the Keyboard Maestro variable Range1 using the slider or a text box or either in a Custom HTML Form. But you have to have a complete HTML page. Debugging the Javascript is safer in a browser. After you get by those two steps, you can load your form in the Custom HTML Form action and give it a whirl in Keyboard Maestro.

Meanwhile, youā€™ve made sure JavaScript will never crash Keyboard Maestro. :grin:

I hadnā€™t considered writing code with an editor and testing it in a real browser first. Thanks for that idea. In that case I probably do need a head and body, which is what you were urging me to do. I guess I can do that.

The good thing is that I did get my code to update KM variables when I move the slider. Do you have any pointers for me to fix my other problem, which is that I want to read KM variables and update the slidebar with that data?

You always need a head and body in a Custom HTML Prompt. "Create a standard HTML page," the docs advise.

See the second suggestion in the solution here.

Here's a working example with full HTML: slider.html.zip (1005 Bytes)

That example is interesting but I donā€™t know how to apply it to my remaining problem. Iā€™m trying to get the slidebar to change when a KM variable changes. I am not trying to link two HTML objects to each other. I truly appreciate that you showed that to me but I see no relevance to my problem. The code I provided comes pretty close, but I donā€™t know how to fix it.

Okay I created a text file (with BODY and HTML attributes included) and opened it in Safari to test it.

But when I opened the source it shows that the Safari browser is incapable of testing it, here's why:

Apparently, (but correct me if I'm wrong,) running Javascript in a browser will not allow the Javascript to access the KM functions. So it's impossible to test and debug my Javascript code. It might be okay for testing plain HTML and non-KM-enabled Javascript, but it appears to be useless for testing anything that includes KM functions. Am I right?

All my HTML code consists of is a single element, a single slidecontainer. So there's nothing to test there. The only thing that needs to be tested is the Javascript, and running Javascript in Safari appears to be unable to access the KM functions. If that's true it's impossible to test anything that uses KM functions. So my questions remains open, which is:

"Either Iā€™m missing a Javascript statement in "while ( 1 ) { slider.value = window.KeyboardMaestro.GetVariable( 'Range1' ); } " or Iā€™m using the wrong approach with an infinite loop. Any thoughts?"

Syncing a Keyboard Maestro variable to an HTML page is explained in the Wiki documentation for the Custom HTML Prompt I linked to above. See the section title Using Keyboard Maestro Variables in the HTML Form.

And, yes, youā€™re right, once you start populating your form with Keyboard Maestro variables, you wonā€™t be able to test the JavaScript in your browser. What I do is use a dummy variable to represent the Keyboard Maestro variable until all the tā€™s are crossed and iā€™s dotted.

Yes, indeed, and I cited text from that page further back on this thread.

Maybe you are right that I can test and debug pure Javascript first. But thatā€™s what I was unable to succeed at so I came here for help. Obviously I need to take lessons in Javascript, but I just thought someone here might be able to tell me the tiny thing I was missing.

Thereā€™s actually a way to enable a JavaScript console in Keyboard Maestro. See this.

Sorry I misunderstood what youā€™re trying to do. Iā€™m not clear at all about how the variables are set, what their function is and how they are modified. It almost looks like you want some sort of dashboard to monitor and control a parallel process. Which is, I agree, not what I was talking about.

Oooh, how interesting. I didnā€™t know that. Actually, I donā€™t know much about Javascript, this was my first attempt to write anything in it. Perhaps someone will yet respond, or eventually I might figure it out. Your heart was always in the right place, thanks for trying.