Fancy Mac-Like HTML Prompts Library

May I suggest if we are going to have any futher discussion about organizing KM related data, then let's do it at:

Hey Dan, some of the prompt examples use that variable to set a base url. One of them doesn’t. Just an oversight on my part. Look at the others and if you can’t find how it’s used within the html head, let me know and I’ll paste up a snippet.

1 Like

I don't think that variable is used in any of the examples I have. Not sure if I modified them or not - I don't think so - I re-downloaded your library and inspected it and I don't see any actual references to that variable.

So I'd love to know how you used it. Thanks.

@iNik

What do I have to change to the keyboard maestro script if I want a @start(YYYY-MM-DD Weekday) format input, say @start(2016-06-27 Mon) or @start(2016-07-10 Sun)

Please enlighten on this.

Could you supply a little more information about what you’re trying to do? The macros in this library don’t have any date fields, as best as I can tell.

I've updated the three sample prompts in this file to use the appropriate attribute. The markup to include it is as follows:

<script> document.write('<base href="' + window.KeyboardMaestro.GetVariable('htmlAssetsFolder') + '">'); </script>

Fancy HTML Prompts.kmmacros (8.6 KB)

“document.write”. Of course. Sometimes I make things harder than they need to be. :slight_smile:

1 Like

Hi Dan

Thanks for the quick reply.

What I want to achieve is really simple. As shown in picture below. My
habit of tagging todo with @due is to not only add the date(YYYY-MM-DD) but
also the weekday(Mon, Tue, Wed, Thu… etc.) of that date, so I could
easily see which weekday a certain todo is due, this practice gives me more
information on the rearranging my todos yet to do at a later time.
[image: pasted2]
As shown above, the first two todos are tagged manually by my according to
my preferred tagging habit, while when tagging the 3rd todo, I used the
keyboard maestro based date picker macro which is great time and hassle
saver, but it does NOT add weekday of the date picked, so I still have to
insert the weekday(Tue in this case) myself which slows me down.

So I wondered if the js script part of the date picker macro could be
tweaked to add some code to automatically add both date and weekday of the
date picked into the @start or @due tag, so I do not have to do it each
time manually myself.

Hope this described my demand clearly. And look forward to your kind
assistance.

re previous post,it is posted via gmail but the embedded picture is lost somehow. So here I would like to repost with picture this time as follows.

What I want to achieve is really simple. As shown in picture below. My habit of tagging todo with @due is to not only add the date(YYYY-MM-DD) but also the weekday(Mon, Tue, Wed, Thu... etc.) of that date, so I could easily see which weekday a certain todo is due, this practice gives me more information on the rearranging my todos yet to do at a later time.

As shown above, the first two todos are tagged manually by my according to my preferred tagging habit, while when tagging the 3rd todo, I used the keyboard maestro based date picker macro which is great time and hassle saver, but it does NOT add weekday of the date picked, so I still have to insert the weekday(Tue in this case) myself which slows me down.

So I wondered if the js script part of the date picker macro could be tweaked to add some code to automatically add both date and weekday of the date picked into the @start or @due tag, so I do not have to do it each time manually myself.

Hope this described my demand clearly. And look forward to your kind assistance.

@Milo, short answer is that I have no idea. My JS skills are slightly above cut-and-paste. My advice would be to take the date as returned by JS and transform it within KM using its various date functions. Transforming the date in JS probably isn’t that hard, but getting the sort of visual layout you’re looking for is more difficult.

That’s probably beyond the scope of this forum. You’d need to use some JS to set the value.

One thing you can do that is Keyboard Maestro related, is to use KM in your JS code to format the date. You can call Keyboard Maestro’s “Process Tokens”, and combine it with “%ICUDateTimeFor%”.

See the following:

https://wiki.keyboardmaestro.com/action/Custom_HTML_Prompt, specifically “window.KeyboardMaestro.ProcessTokens()”.

https://wiki.keyboardmaestro.com/token/ICUDateTime, specifically the reference to “%ICUDateTimeFor% TIME(2015, 8, 23,12,0,0) %EEE, MMM d, yyyy%”

I realize that’s not a detailed answer, and the examples shown will require some trial and error to get them working for your situation, but at least it’s something.

Assuming you can get the date in yyyy-mm-dd format into a Keyboard Maestro variable, then you can add the day of the week to it like this:

Keyboard Maestro Actions.kmactions (0.9 KB)

A couple tiny suggestions for the autocomplete field to improve Nik’s original library (discovered as I developed my own adaptation of this dialog, km-citekeys):

  1. Add autofocus to the input field, like so: <input type="text" id="combo" name="demoComboResult" autofocus>.
  2. Add a Javascript listener to submit the form when enter is pressed. As the script currently stands, it will only send data back to Keyboard Maestro if the “Confirm” button is pressed. See citekeys_dialog.html for an example.
3 Likes

how does one get the results of an html prompt.
Say for the first Prompt from your example file.
the 'Basic HTML Prompt’
how do I get the result to a KM variable or such?
thanx

1 Like

When you call window.KeyboardMaestro.Submit( buttonName ) Keyboard Maestro will read the fields from the HTML into Keyboard Maestro variables.

The wiki documentation shows how to have a button do this.

1 Like

Need Text Area with Auto-Resize

Before I reinvent the wheel, just thought I’d check to see if anyone has designed a KM HTML Prompt that has a resizable Text Area that auto-resizes as the main Window is resized (by user or code).

TIA.

I've actually given up on making things look native and have switched over to the Milligram framework for custom HTML dialogs. It's small and I can just fit it right in the HTML prompt macro itself. Then I can just put in form elements and they look nice and become responsive.

Here's an example with a textarea:

Custom HTML Prompt that Saves Size and Position.kmmacros (26.0 KB) - Updated on December 4th with a Mac-like "skin"

5 Likes

Thanks for sharing.

Do I assume correctly that your example macro requires download of Milligram?
Before I do that, I'd love to see an example of how it looks. Could you possibly post some screenshots, or even better, a short video, that show how it works/looks?

BTW, the custom in this forum is to upload both the macro file and image. Many of us will not download a macro until we have seen its contents.

Thanks.

No, the framework is included in the action (it's only around 15k).

Per @JMichaelTX , here is a little gif of how this looks. Note that I updated the macro (linked above) so that it now has an optional "Mac" skin.

3 Likes