Adding docs for code in the refrence.
#7902
Conversation
src/events/keyboard.js
Outdated
| * of the current keyboard layout (QWERTY, Dvorak, AZERTY, etc.) or the character | ||
| * that appears in a text field. | ||
| * | ||
| * The code property returns a plain string (e.g. 'ArrowRight'), you can |
There was a problem hiding this comment.
Hi @perminder-17 ,
just a small thing - (e.g. 'ArrowRight') to be (e.g., 'ArrowRight') a comma (,) after the abbreviation, for stating eaxmple and probably a full-stop after it (e.g. 'ArrowRight'), --> (e.g., 'ArrowRight'). You can....
There was a problem hiding this comment.
Thanks for catching this. Do you think the PR looks good to you now?
| * | ||
| * <div> | ||
| * <code> | ||
| * // Click on the canvas to begin detecting key presses. |
There was a problem hiding this comment.
Hi @perminder-17 ! Apologies for the delay on this. What do you think about linking to the code docs (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) at the end of the description - and also adding an example that's inspired by their interactive one? (Or by this one https://www.toptal.com/developers/keycode that we have linked before). Something that shows each of the values of key and code? Here's a sketch I made: https://editor.p5js.org/ksen0/sketches/oxgLK9HIV you're welcoem to use it as a starting point if you think it's a good idea. That sketch is actually completely backwards compatible except for the line with code so maybe it could also be added to the 1.x reference?
Lastly, while reviewing the transition guide I suggested an overview table https://github.com/processing/p5.js-compatibility/pull/27/files#r2156196242 - maybe the 2.x reference could use the info in just the second column, if you think it improves clarity?
| * | ||
| * Unlike <a href="#/p5/key">key</a>, the `code` property differentiates between | ||
| * physical keys that generate the same character—for example, `CtrlLeft` and | ||
| * `CtrlRight`—so each can be handled independently. |
There was a problem hiding this comment.
I think linking to the mozilla code docs at the end of this would be useful?
| * The code property returns a plain string (e.g., 'ArrowRight'). You can | ||
| * compare it directly with string literals: | ||
| * ```js | ||
| * if (code === 'ArrowRight') { |
There was a problem hiding this comment.
I think because keyIsDown is a backwards-compatible pattern with the system variables, we should only show that in the example code, what do you think?
And explain that it's the same as code === 'ArrowRight' and key === 'ArrowRight'
| * } | ||
| * ``` | ||
| * | ||
| * For extra clarity, you can instead use the predefined key-code constants |
There was a problem hiding this comment.
I think the way these are introduced and described in the previous docs (https://p5js.org/reference/p5/keyCode/) is really concise, maybe this can be used instead? And not make it sound like an optional/extra, but rather the recommended way to use keyboard events?
| * } | ||
| * | ||
| * function draw() { | ||
| * // Update x and y if an arrow key is pressed. |
There was a problem hiding this comment.
What do you think about using keyIsDown here as well? https://editor.p5js.org/ksen0/sketches/vrMANhunx Main benefit: backwards compatible snippet. Main drawback: makes this reference page less standalone / use another function. Up to you if you think it's a good idea!
Resolves #7881
Changes:
Added documentation and examples for
codefunction.PR Checklist
npm run lintpasses