Create PNG Images of Keypresses Simply

Resources
21

My physical keyboard is French (Canadian). There are symbols on it that maybe you don’t have on English keyboards?
And they match with the results I get on your app when the system is set to the French (Canadian) keyboard.

3yL9bCYVho
3yL9bCYVho1244×812 209 KB

I should have thought of it. They’re just in my face. But in my defense, I very rarely look a the keyboard.

1 Like
22

Wow, those look like really useful keys!!! Where can I get them? Maybe if I copied them in white paint, or typex they might appear when I type too :rofl:

My typing skills are so bad I have to look at every key for about 2 seconds before I press it. And even then I make mistakes.

1 Like
23

I use them every day. :upside_down_face:

This is hard to believe, coming from a programmer :slight_smile:

1 Like
24

I have updated the website with the following text:

Please be aware that the keys displayed may not be exactly what you expect. For example: on my keyboard the asterisk “∗” is on the same key as the number “8” character - If I press Shift 8, what will appear in this utility will be Shift ∗, NOT ∗, nor Shift 8. This is because as soon as you press Shift, the system passes that to the utility and as soon as you press 8 the system passes whatever is produced when the number “8” key is pressed in conjuction with “Shift”, which is “∗”.

Some keyboards use the Alt and Control keys as well as the Shift key to modify what character is produced. e.g. Alt Control m typed on a Canadian French keyboard with “Canadian French” defined as the current keyboard in the operating system will be shown in this utility as Alt Control μ, not Alt Control m; on this keyboard to get the utility to produce Alt Control m you will have to define the keyboard as English in the operating system.

1 Like
25

Alt M (or P or O) is OK @Elusien

It’s Alt Control M that will show as Alt Controlμ

1 Like
26

Thanks for clarifying. I have corrected the post above and the website.

1 Like
27

The app now has 2 buttons “Save” (to save the parameters) and “Restore” (to restore them). When you start the app it will restore the parameters you last saved. If you haven’t saved any it will use the default parameters. “Save” will overwrite any parameters you previously saved.

The new ZIP files are available on the resources website.

28

Hi again @Elusien

The Save & Restore parameters button works well. Thanks!

But I’m afraid there is a new bug in the app.
The PNGs are not saved correctly. At least on my computer.

29

This is related to a change I made yesterday (it was working fine at 9pm but not at 10pm). I am trying to track it down and will let you know when it is fixed.

30

@MusicalBox OK, I found the bug. I am in the process of uplaoding the new ZIP files to the website, but it will take a little while. In the meantime please edit line 467 in “index.html”, which says:

let offset = css_vars['--keys-offset'];

to:

let offset = +css_vars['--keys-offset'].replace(/px/, '');
31

Fixed!
But I dropped my toast on the keyboard while doing the changes to the file.
You got a fix for peanut butter stuck between keyboard keys?

1 Like
32

If it were dropped on the carpet you could:

  1. Scrape off excess foreign material.
  2. Using an eye dropper, apply a small amount of acetone to the stains. (Caution: Do not use acetone on fabrics containing acetate or triacetate. It will melt the fibers!)
  3. Blot immediately.
  4. Using a clean white cloth, sponge the stain with the dry cleaning solvent.
  5. Blot until the solvent is absorbed.
  6. If the stain remains, mix one tablespoon of liquid dishwashing detergent and one tablespoon of white vinegar with two cups of warm water. Sponge the stain with this solution. Blot until the liquid is absorbed.
  7. Sponge with cold water and blot dry to remove the detergent/vinegar solution.

On upholstry:

  1. Sprinkle baking soda, cornstarch, or other absorbent on the stain. Let stand 10 to 15 minutes, and then vacuum.
  2. Using a clean white cloth, sponge the stain with the dry cleaning solvent.
  3. Blot until the solvent is absorbed.
  4. Repeat Steps 2 and 3 until the stain disappears.

For keyboards you could borrow a dog and let him lick it off - remove electrical power from the keyboard first. If you can’t get a dog, rats like peanut butter (and chocolate), much more than cheese.

1 Like
33

:rofl:

I was leaning toward putting the keyboard in the dishwasher, but I guess I can let a dog do most of the work first.
Thanks :grin:

1 Like
34

:rofl: !!

35

If you set the parameter “png-width” to 0 or negative, the PNG image will fit the “keyboard” (set of keys) exactly. There is a new tab in the app called “Parameter Descriptions”, where this is stated.

1 Like
36

Nice additions to the app :+1:

Everything seems to be working perfectly now.
Thanks again for this very useful tool.

37

No problem. I enjoy developing these tools. It keeps the little grey cells from decaying too quickly. I’ve updated the ZIP files on the website to have a more appropriate icon, the one you have is the icon for my golf competition creator.

If you don’t want to download the ZIP file you can still use the new icon by editing file “package.json” and editing the “icon” line to:

	"icon"       : "Icon-128x128.png"

and saving the following PNG with that name:

Icon-128x128

38

I will download the new ZIP file. Seems easier than editing and adding a new file in the app.

By the way. I’m curious. What is the use of the folder with all the language files?

39

Je testerai à mon retour dans quelques jours avec un OS plus récent.
Actuellement je n’ai que mon macbook sous OS 10.12.6 et l’application n’est pas compatible avec cette version.

I will test it when I get back in a few days with a newer OS.
Currently I only have my macbook under OS 10.12.6 and the application is not compatible with this version.

Capture d’écran 2022-03-08 à 17.28.06

40

It works fine on mine, I think your would work fine too.