Using keyboard to click buttons within the scene

I found this useful post on how to use keyboard input to jump between scenes which is really useful.

But Is it also possible to use keyboard input to click an existing button within a scene which may have actions (like run js) already defined in the Actions tab?

Thanks for your help!

The only way to do this without coding your own elaborate selection and action scheme would be to add a Tab Index to elements via the Accessibility section in the Identity Inspector.

This allows keyboard navigation via tab and shift-tab, and if you hit space or return (in Safari at least) it will run mouse down actions.

You could probably also use javascript keyboard navigation to make use of arrow keys and the focus() function to make your own basic navigation to move between elements with tab-index properties.

Would something like this work? Instead of the input box I could use it on a button?

Maybe this is what you're looking for?

https://photics.com/free-template-tuesday-31-tumult-hype-navigating/

It has keyboard controls and button-like elements.

Yeah, the template uses custom JavaScript. So, this solution requires coding.

...and yeah, the template lacks accessibility improvements for navigation.

Thanks for sharing this useful template but I was thinking more along these lines:

If I have a button that has several action assigned to it, can I write some js that monitors keyboard input and if a certain key is pressed then this button is pressed.

1 Like

Hi Greg!

Maybe the following might be close to what You are looking for...
keypressDemo_JHSv1.hype.zip (17.5 KB)


Overview

In this Demo we have a three variations of triggering the same effect. We can trigger the effect (rotation) by clicking directly on the button "Rotate Me", which runs the function "rotateRight" or we can use the left & right arrow keys to rotate this button. These keys trigger one function: "keypressDetect". In the "keypressDetect" function itself there is a call to run the "rotateRight" function, as well as doing a counter-clockwise rotation directly in the "keypressDetect" function.

These variations are intended to show different possibilities that might suit your needs.


Details

Below (Fig.1) is a screen shot of Hype's editor window "stage" for reference.

Fig.1
keyPressScreen

If You click the button "Rotate Me" it rotates clockwise to the right in 90° increments. The function "rotateRight" handles the mouse clicks for this operation.

document.getElementById('goNext').style.transform += "rotateZ(90deg)";


If You press the "right arrow key" the function "keypressDetect" runs and rotates the button "Rotate Me" clockwise to the right in 90° increments. Additionally, it runs the timeline "Button Hilite" that generates the same effect as if the button itself was clicked. This hiliting is optional as I wasn't clear from your description if this was an effect You wanted or not - so it is included.

Please see Fig.2 below for the references to the "keypressDetect" script

Both the button click event and the right arrow key press ("keypressDetect") run the same function "rotate Right".

In the "keypressDetect" function, line 14, there is a function call to run "rotateRight":

hypeDocument.functions().rotateRight(hypeDocument, element, event);



Clicking on the "left arrow key" rotates the button 90° counter-clockwise and is also run by the "keypressDetect" function (no button click equivalent) - but it does the rotation directly in the code (line 19) - no calls to other functions.

Again, these variations are to illustrate different ways to accomplish the goal.

Listing of key codes here for reference. Note: A table can be shown triggered by a button in the upper right of the page.

Fig.2

3 Likes

Looks like @JimScott is on the right track.

But I think maybe... hypeDocument.triggerCustomBehaviorNamed('customBehaviorName') ...might be useful too. That way, the button can use the custom behavior and JavaScript can be used to trigger the same custom behavior on key press.

2 Likes

Yeah that would be probably the best option to use custom behaviours :slight_smile:

That’s great! Thanks for sharing.

I can understand most of this code apart from one line:

e = e || window.event;

What does this do?
Thanks!

1 Like

Hi Greg!
Check out the first answer in this stackOverflow thread :nerd_face:

1 Like