Per @ccstone's proposal, I share the macros below to demonstrate how to use action:Custom HTML Prompt [Keyboard Maestro Wiki] to Display Text Large, as some of us would like to have more control over the font of the text to be displayed large.
Requirement:
My example requires v10 of Keyboard Maestro, which supports make the window Transparent (v10.0+) and turn off the Window Title Bar (v10.0+).
Window Size and Position:
The Body Attributedata-kmwindow=<left, top, width, height> controls the size and position of the HTML Prompt. This field accepts KM Functions. Therefore, the function:SCREEN [Keyboard Maestro Wiki] is very useful here.
I will provide three macros below to make the HTML Prompt to show up at
the top-right corner (like a system notification),
the center of the screen (more visible), as well as
as a full screen size window (most visible and more text may be displayed).
The HTML Prompt window will show up on the Front Screen if you have multiple monitors.
Due to my limited knowledge of HTML/CSS/javascript (all self-taught), I have not found a good way to dynamically calculate the window size based on the text to be displayed. If this could be accomplished, it is not difficult to use javascript to update the window size of the HTML Prompt.
Javascript
The javascript takes the KM variable named Text to Display and display the text in the HTML Prompt.
I also added a javascript timer to close the HTML Prompt in 5 seconds. You may change the counter down time or remove the timer altogether.
You may also press Esc (via javascript EventListener) to close the window.
CSS
The CSS controls the style of the text.
The .external, .middle, and .internal classes are used to make the text shown at the center of the window.
The #bottom id shows the auto-close timer.
Inside the body style, the 0.6 of background: rgba(0, 0, 0, 0.6); controls the transparency degree.
The text to display is set to 50px, you may adjust according to your need (see the .internal style).
Very nice,,, thank you.
How would I get a KM variable into the 'HTML text'
ie. here..
<div id="bottom">
Window closes in <span id="counter">5</span>s.
</div>
I'd like to be able to pass a variable into the HTML for the duration that the window stays open....
Would the following do it? - guess I'll test in the meantime..
<div id="bottom">
Window closes in <span id="counter">GetVariable('DelayTime')</span>s.
</div>
As @macdevign_mac has pointed out, this is doable, and it is very simple.
I have changed one of the macros a little bit to accomplish what you asked for. Below are the most important lines (the border-radius is what you need. You may change the number and see how the rounded corner changes):
You may not be able to detect the black background (which is the same size at the subsequent gray one) of Martin's window against the very dark desktop background he has cropped (with square corners).
So far I have used a solution (HUD display) via the BetterTouchTool app in KM. In the following GIF a comparison to your KM macro:
BTT AppleScript over KM (⌥⌃⇧ + K)
KM macro (⌥⌃ + K)
I find this kind of notification better than a normal notification. Here is an example of how I use the Display in macros to know which keyboard key to press to continue the KM macro after a pause.
Hi @tiffle,
It was my bad. A dark window against a dark background is not a good idea at all. I should have change the background color at the first place to increase contrast. Thanks for taking time to point out potential issues. I'm sorry for wasting your time and I appreciate your (and others' as well) kindness.
How customizable is the HUD display?
I know BTT also supports HTML prompt. I tried that before, but since KM10 supports transparent background, I no longer use BTT's HTML prompt.
