Display Text in Centered Window [Macro: KM10]

[macdevign_mac]

Purpose:
This macro is a alternative to "Display Large Text " KM action. It accepts the following input

• text size
• window width (optional)
• delay in second (optional) (use for closing window after delay. Default is no auto-close)

It makes use of "Custom HTML Prompt" action using transparent window. User can set option to auto-close it with delay or just by clicking on it.

Macro

Original Version:
[EXP] Display Text.kmmacros (8.9 KB)

2nd Version [2022-1-25]: _____________________________
[EXP] Display Text.kmmacros (9.2 KB)

• Initially display in white text against black background, if window lost focus, dim text color
• Press any key to close if window is focus

3rd Version [2022-1-27] : ____________________________________
[KAF] Display Temporary Large Text.kmmacros|attachment (12.9 KB)

• Using subroutine

Calling the subroutine

Only the text need to be specified. The rest of the parameters can use the default value as set in the subroutine macro if they are not specified.

Macro:

[ccstone]

Hey There,

This macro is not working for me...

I get this:

Clicking on the window does not dismiss it – I have to force-quit the macro.

Keyboard Maestro 10.0.2
macOS 10.14.6

-Chris

[macdevign_mac]

Hi Chris,
can you get the updated macro again.
I changed the following:

• get km variable using KM.GetVariable instead of from document.kmvar (even though it works from my side, but I suspect it could be this)
• add try catch block in KMInit function in order to log error message to be shown in Web inspector console.

thank

[ccstone]

I had to turn on webkit debugging:

defaults write com.stairways.keyboardmaestro.engine WebKitDeveloperExtras -bool YES

[macdevign_mac]

Chris,

I see. I think you're running an older version of MacOS with wkwebview that does not support the recent Javascript standard? If so, it does not recognise the Optional chaining operator:

[Optional chaining (?.) - JavaScript | MDN]

Can you search and replace ?. with . instead in the code at your side to see if that works for you ?

For example:

KM?.GetVariable becomes KM.GetVariable

My webkit version is

thank

[ccstone]

@macdevign_mac

I think you're running an older version of MacOS

Yes. Mojave as I mentioned:

'5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36'

Your suggested patch fixed the problem – it's working now.

Thank you.

[macdevign_mac]

Chris,
Np.
I have updated the macro to use document.kmvar. One advantage of using document.kmvar in async custom prompt is that I don't have to add a pause action after the prompt action. Without the delay, there is possibility that the macro is completed before the prompt get the chance to read the local variable (happen especially if prompt is the last action of macro). Another possibility is use global variable which I try to avoid if can let do with local variable.

[Jim]

@macdevign_mac — I'm trying it out. Thus far, I like it.

Is there a possibility to add the ability to close/dismiss the window by typing the Esc key?

[macdevign_mac]

Jim,
you try the 2nd version that I upload. You can press any key (including ESC key) to close the window as long as it is in focus. Once window lost focus, clicking on the window will close it.

[Jim]

I just downloaded the 2nd one, and when I run it, I just get:

This is default message

I am not sure what I am missing, as I set it up like version 1.

[macdevign_mac]

Jim,
What is the value of Local_inputJson variable before calling the prompt ?

What is the error show in custom prompt inspector console as I could not replicate the problem at my side ?

I suspect Local_inputJson is not passed correctly hence it display the text.

[Jim]

The issue looks like it was useFirstInput set to false.

In version 1, that was set to true.

I didn't catch that it was set to false in version 2.

It seems to be working now. Thanks!

Back to testing/trying it out.

[troy]

How might one set KM variables to provide the textSize in pt, width in px and delayInSec?

[Jim]

@macdevign_mac — Thank you for this macro! You have no idea how happy I am that you created and shared this at this time! Kudos!

I am going to be moving about a dozen macros to use it to display various messages throughout my day.

A couple of desires:

1. Would it be easy to move all of the settings into the Custom Prompt with HTML part? This would make it easier to integrate into my existing macros.
2. Since my messages are designed to interrupt me (Stand up for 1 minute!, or Colemak-DHm Typing Practice Time! for example), I may be typing when it appears, and my typing may accidentally dismiss it. It is easy to change the Press any key to close the window to only the Esc key will close the window?
3. In my own attempts at designing one of these display messages, I have found that a message that blocks the entire screen is very helpful, as it fully catches and focuses my attention (example screenshot below).Can your code display the background over all (or most of) of the screen? My attempts at making your macro full sized have failed this far (second screenshot).

[tiffle]

Great macro @macdevign_mac - thanks!

It would be even better if it didn't always display on the main screen. To explain - I have a 2-screen setup and you macro always displays on the main screen. I want it to display on whichever screen contains the frontmost app window when it runs.

In your code I changed

data-kmwindow="SCREEN(Main,Left,35%),SCREEN(Main,Top,17%)"

to

data-kmwindow="SCREEN(Front,Left,35%),SCREEN(Front,Top,17%)"

but it didn't have the desired effect.

Any thoughts on how to achieve this?

BUMP: any thoughts at all in this question @macdevign_mac ?

[Jim]

FYI—I was able to figure out the Esc key part.

I changed:

document.addEventListener("keydown", (event) => {
    closeWindow();
});

To:

document.addEventListener("keydown", (event) => {
    if (event.keyCode == 27)
    closeWindow();
});

And I have been able to condense the macro.

But I still need help making the display fullscreen.

[macdevign_mac]

Jim,
use this custom version to fill whole screen and close on Escape key. Even though it center the text, you may need to twitch the CSS accordingly.
displaywindow.html.zip (3.4 KB)

tiffle,
For this, I have no idea as the front seem to be the correct parameter according to the wiki at
https://wiki.keyboardmaestro.com/function/SCREEN
Most likely you need to try rest of the index value for the SCREEN index parameter to figure what's work. Perhaps you can ask Peter on this ?

troy,
the variable "Local_inputJson" is used to specify those values as shown in example. The custom prompt retrieve those values from Local_inputJson variable using KM's GetVariable function..

[macdevign_mac]

Troy,
you can use the subroutine version that I upload as it is easier to use.

[Jim]

@macdevign_mac

use this custom version to fill whole screen and close on Escape key. Even though it center the text, you may need to twitch the CSS accordingly.

Great! Thank you!

There is a bit on the left edge where the background shows. Any ideas on how to adjust the window to cover that?

[macdevign_mac]

Jim,
you need to adjust value of Screen Top, Left, Width and height in the body tag.

<body data-kmwindowid="displayTextWindowApp" data-kmwindow="SCREEN(Main,Left,35%),SCREEN(Main,Top,17%)"

You need to play around with this because what work at my side could be different from yours.