TIP: Custom HTML Prompt to Display Text Large

[martin]

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 Attribute data-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
    1. the top-right corner (like a system notification),
    2. the center of the screen (more visible), as well as
    3. 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).
• There are much more we could adjust.

Macro Files to Download:

Here are the macros:

1. Display Text Large with HTML Prompt - Top-Right Corner.kmmacros (6.9 KB)
2. Display Text Large with HTML Prompt - Center Window.kmmacros (7.0 KB)
3. Display Text Large with HTML Prompt - Full Screen.kmmacros (6.9 KB)

Macro screenshot example:

[ccstone]

Hey @martin,

Super! Thank you.

-Chris

[troy]

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>

nah, that doesn't do it.... =)
cheers

[martin]

Hi @troy,

Glad you like it.
To set a custom auto-close timer, you may add an action:

Assuming, you want the window to auto-close in 10 seconds.

In the javascript, in the KMInit function, add the below javascript command:

document.querySelector('#counter').innerText = window.KeyboardMaestro.GetVariable('TimerDuration');

Here is a revised macro:

Display Text Large with HTML Prompt - Center Window - Custom Timer.kmmacros (7.3 KB)

Click to see screenshot

[live]

Great, thank you!

There's a little problem. How do rectangles become rounded corners?

[ccstone]

@live

How do rectangles become rounded corners?

Please be more specific.

Do you mean you want to round the corners of the display window in Martin's macro?

[live]

Thank you for replying.
I want to turn four right angles into rounded corners.

[ccstone]

Hey @martin,

De you have any idea if @live's request can be accomplished?

-Chris

[macdevign_mac]

Live,
you can use the border-radius css property

CSS Rounded Corners

[martin]

Hi @live,

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):

This is an updated macro:

Display Text Large with HTML Prompt - Center Window - Rounded Corners.kmmacros (7.3 KB)

🖼 Click to see screenshot

This is how the rounded corners look like:

[tiffle]

Hey @martin - this is how your rounded corners look here…

That’s a screengrab taken from your post.

Something not quite right?

[martin]

Hi @tiffle,

I'm not sure what you are referring to, the desktop background?

How about this (against a white background)?

[tiffle]

@martin

I'm not sure what you are referring to

As I said, I’m showing a screen grab taken of your post on this forum. It appears as shown - with square corners.

Here’s a screen grab of your response to my post:

and that’s obviously OK.

But why does your first one appear wrong?

[mrpasini]

@tiffle

But why does your first one appear wrong?

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).

Both show rounded corners.

[appleianer]

@martin

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

Hi @martin, thank you for sharing your macro

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:

1. BTT AppleScript over KM (⌥⌃⇧ + K)
2. 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.

Video

[ccstone]

@tiffle

As I said, I’m showing a screen grab taken of your post on this forum. It appears as shown - with square corners.

Hey Taj,

At first glance I thought the same thing, but then I looked closer...

Here's the same image Martin posted with the colors inverted:

-Chris

[tiffle]

Thanks Chris (and @mrpasini) for seeing what I couldn’t.

[martin]

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.

[martin]

Hi @appleianer,

Thanks agains for showing your amazing workflows.

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.

[appleianer]

@martin

How customizable is the HUD display?

Hi @martin, You can customize the BTT HUD display as follows:

1. You can put text or Emoji/SF-Symbols here. These are shown slightly larger
2. Text or emoji/SF symbols are displayed slightly smaller
3. The display duration can be set here
4. With the digits 1 - 4 the fade out (top, bottom, right and left) can be adjusted
5. Here you can change the color of the background.

Here are the KM macros for Apple and Java script

BTT HUD Macros <63DB 220321T212451>.kmmacros (4,1 KB)

Unfortunately, you cannot increase the size of the HUD display. Thus, the text input is limited.