Create PNG Images of Keypresses Simply

Resources
#1

I recently read @TimLau 's post about a set of resources he produced for getting keypress overlays into a Shotcut project:

That got me thinking about an HTML/CSS/Javascript program I wrote a couple of years ago to do something similar. I have now titdied this up and made it into a web utility that users can access via any modern browser and tailor using a GUI to create PNG images of keypress combinations. These PNG images, which have transparent backgrounds can then be imported into Shotcut and overlaid onto tutorial-type video to show when these keypress combination are made. e.g.

Control_Alt_Shift_F6
Control_Alt_Shift_F61350Ă—60 2.73 KB

I normally do the following:

  • import the images to the playlist;
  • place a new video track above the one I want to overlay;
  • add an image from the playlist and use the Size, Position & Rotate filter to position it where I want it;
  • save the filter parameters as a preset;
  • add the other images and apply the filter with the preset.
  • (another option is to Copy-Paste the image clips as necessary)

The utility can be accessed from my Shotcut Resources webpage at: Resources for Shotcut

Keypresses
Keypresses1920Ă—1020 82.3 KB

2 Likes
#2

THAT is another awesome tool @Elusien ! So clever and useful!
I will use it for sure. Thanks a lot!

Photoshop_aZ2isWhhli

I’ve been playing with it for a while of course, and here’s my first report :innocent:

Two small problems I found (Using Chrome on Windows 10):

  • On first launch, or after refreshing the page, even if the png width is set to 1920 by default, it creates 1080 px wide files. To get a 1920 wide png, I needed to first edit the png width value (a couple of clicks on the spinbox) and set it back to 1920.

  • The key-margin and keys-padding default settings are 0.2, but pressing the spinbox arrows changes the values by increments of 1 instead of 0.1, resulting in huge increase of the padding or margin space.

And two suggestions:

  • An option to add (or not) a PLUS sign (without key-border) between the keys. With maybe the possibility of changing it’s size, weight and color?
  • If possible, adding an Alpha Channel setting to the color selectors? This is not crucial, but could be useful on some occasions.
#3

Thanks for trying this out and for the suggestions.

These are now fixed and the web utility has been updated.

Will do later this afternoon - I have to clean the pool first and spend some time on a woodworking project I’m doing.

1 Like
#4

Thank you!

By the way. While trying the updated version, I noticed this:

These combinaisons won’t work in the utility. They are Chrome shortcuts and they trigger the expected Chrome tasks instead of creating the key images.
Ctrl + N (New Chrome window)
Ctrl + T (New Chrome tab)
Ctrl + W (Close currently used Chrome window or tab)

I didn’t try all the Chrome shortcuts, so maybe there’s more of them that will not work properly in the utility.

#5

Looks like Susan also likes @Elusien resources:-
YouTube_Awesome_Easter_Egg

IMG_20220304_172426
IMG_20220304_172426720Ă—435 46.8 KB

#6

Who’s Susan?

#7

It looks as if it won’t be easy to fix the problem with browser shortcuts and still supply the app as a webpage. I can’t find a way of disabling all the browser shortcuts.

So I will try making a standalone NW.JS app instead of a webpage. You will have to download this and install it on your local machine. Hopefully I should have something for testing later today.

1 Like
#8

Really?

Simply search the CEO of YouTube.

#9

The good news is that converting it to an NW.JS app works. It can now handle the browser shortcuts, since it’s no longer running in a browser. I’ll work on the transparency request before packaging up the app.

I can easily create the Windows version, but I don’t have a Linux or MacOS system to test out the packaging for those systems. I’d be very grateful if anyone has such a system and would be willing to try out the pakage and let me know if it works.

I’ll post when the package(s) are ready and how to install them.

#10

Looking forward to test the Windows app.

#11

Wow, ANOTHER awesome genius idea from, frankly, a genius!! :grinning: Thank you so much, @elusien!
:+1: :+1:

#12

I have completed the conversion from webpage to NW,js app. I have been able to test the Windows (64-bit) version, but I don’t have a Linux or MacOS X system to test the 64-bit versions for those. If anyone has such a system I’d appreciate it if they’d test the app out and let me know if it works, or if there are problems.

The app does not need internet access to run. You can download it from my resources webpage here: Resources for Shotcut

#13

Hi @Elusien
I just tried the new app. It looks to be working perfectly so far except for one thing:

Suppose I want to generate Control + C
I start by pressing Control, but if I hesitate more than a fraction of a second to press C the app will generate multiple Control
keepresses_AFxhqbu3HC

#14

That’s strange. It doesn’t happen on my system and there is code in the app to ignore repeated keys:

    if (e.repeat || e.key.toLowerCase() === 'meta') { return; }

However I have found a bug reported against jQuery that may be causing this problem for you. Could you please edit the file “index.html” and replace line 359, which says:

$(document).on('keydown', 'textarea', function(e) {

by the following line instead:

textarea.addEventListener('keydown', function(e) {

Then check out if the error no longer occurs.

1 Like
#15

Yes it fixed the problem :+1:

Thank you again for your work!

#16

Thanks for checking it out. I’ll update the ZIP files on the website,

1 Like
#17

I’m sorry to report another small problem…

Control + Alt + some keys generate unwanted results:

Control + Alt + M = keepresses_IKxB9zCndi

Control + Alt + O = GHFBuwQSfU

Control + Alt + P = yfQyQrdUkR

#18

Again, they work on my system correctly. I’ll look into it today. Just out of interest, do you have any additional keyboards defined for your system? I have English and US.

I really appreciate you trying this out. It’s awkward when I can’t reproduce the problems on my system.

#19

You cracked the case Mr Holmes :+1:

I have French (Canada) and English (Canada) defined on my computer. It was set to French. Switching to English solved the problem.

While we’re here. Another suggestion maybe? :grimacing:

A way to save (and load) settings would be cool :slight_smile:

#20

I really don’t know why the French keyboard should produce these characters, but I will see if I can do something about it.

I had thought about saving and restoring settings. It shouldn’t be too difficult. I’ll put on my thinking cap and see what I can come up with.