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+)
andturn off the Window Title Bar (v10.0+)
.
Window Size and Position:
- The Body Attribute
data-kmwindow=<left, top, width, height>
controls the size and position of the HTML Prompt. This field acceptsKM 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.
- I will provide three macros below to make the HTML Prompt to show up at
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, the0.6
ofbackground: rgba(0, 0, 0, 0.6);
controls thetransparency
degree. - The text to display is set to
50px
, you may adjust according to your need (see the.internal
style). - There are much more we could adjust.
Macro Files to Download:
Here are the macros:
- Display Text Large with HTML Prompt - Top-Right Corner.kmmacros (6.9 KB)
- Display Text Large with HTML Prompt - Center Window.kmmacros (7.0 KB)
- Display Text Large with HTML Prompt - Full Screen.kmmacros (6.9 KB)
Macro screenshot example: