TIP: Custom HTML Prompt to Display Text Large

Great, thank you!

There's a little problem. 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?

1 Like

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

Hey @martin,

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

-Chris

1 Like

Live,
you can use the border-radius css property

3 Likes

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

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

5 Likes

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

image

That’s a screengrab taken from your post.

Something not quite right?

Hi @tiffle,

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

How about this (against a white background)?

image

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:

image

and that’s obviously OK.

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.

1 Like

Hi @martin, thank you for sharing your macro :+1:

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)

2022_03_20_Support_1

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

1 Like

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:

image

-Chris

1 Like

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

2 Likes

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.

1 Like

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.

1 Like

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.

2022-03-21_21-11-12

2022_03_21_Support_3

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.

4 Likes

@appleianer @martin Thanks agains for showing your amazing macros. :+1::+1:

1 Like

This is great!

If I want to make the prompt a twice as big and keep it centred, what do I change? I managed to increase the size in the Body Attribute, but it resulted in the prompt going off-centre. Would it be possible to have a variable that impacted all the sizes, so increasing its value would increase the size of the prompt overall, including text? I suppose there might be issues with proportionate values, right? I'm a code beginner, so apologies for my ignorance / lack of common sense.

Hey Neil, the body tag is indeed where you can adjust size and position. I'm sure there's a way to automatically adjust the window location according to it's size, but the only way I would know how to do that is via som KM actions which you could pass via a variable; I do not know how to do that using strictly HTML.

As you're probably aware, first two numbers are location, last two numbers are size. Adjust accordingly until you get the desired result.

If you're interested in passing KM variables to the HTML to set size and location let me know and I can help some more.

<body data-kmwindow="SCREEN(Main,Width)-400,50,350,150">
2 Likes

Right ok thanks. I guess I was perplexed by the fact that the window is centred on all displays regardless of resolution, so I thought there was some auto-alignment going on. Evidently the position has to be set manually. I'll have a play around now. :+1:t3: