Keyboard Input for Framer
If you have any feedback, give me a shout on twitter – @struanfraser.
This small module makes it a little nicer to use keyboard functionality in Framer. I created this as I prototype for YouView TV using a FLIRC for infrared input, which translates directly to keyboard input.
First of all, you have to make sure
Keyboard.coffee is in your modules folder, then you have to type –
keyboard = require "Keyboard"
– at the top of your project.
Triggering a function with a key
I often use this to prototype recordings on our set top box. Say you want to trigger a recording with the R key.
Create a function like follows –
record = () -> print "it's recorded!"
Then to use the R key to activate the function, we need only write –
keyboard.onKey( keyboard.r, record )
Stopping a key from calling a function
Perhaps you no longer want the key you've previously mapped to call the same function. You can remove the key listener with the following function –
keyboard.offKey( keyboard.r )
As key input is constant, it will often call functions far too quickly. One solution to this is using throttling. Throttling ensures that a function is only called once every x seconds.
If we want to throttle our key input, we just add it as another paramater in the function in seconds. As follows –
keyboard.onKey( keyboard.r, record, 0.3 )
Now if we hold the R button, it will only call the
record() function every 0.3 seconds. If you're struggling with animations, it will often help to set your throttle to the length of your longest animation.
Passing a parameter to a function
Because using brackets (i.e.
record()) will cause a function to immediately execute we cannot pass parameters without employing a small trick. To pass a function with parameters in coffescript we need only do the following –
keyboard.onKey( keyboard.r, (-> record( parameterOne, parameterTwo )), 0.3 )
As the arrow is declaring a new function, it is returning the entire function rather than executing it. We could also write this as
(-> return record( parameterOne, parameterTwo )) but, as CoffeeScript returns the last declared object by default, we can omit the
You can use any of the following keys after you've assigned a prefix. In our example, we used
keyboard. as a prefix. If you want to use backspace it would be
backspace tab enter shift ctrl alt caps escape pageUp pageDown left up right down delete zero one two three four five six seven eight nine a b c d e f g h i j k l m n o p q r s t u v w x y z numZero numOne numTwo numThree numFour numFive numSix numSeven numEight numNine fOne fTwo fThree fFour fFive fSix fSeven fEight fNine fTen semiColon equalSign comma dash period forwardSlash openBracket backSlash closeBracket singleQuote
If you'd like to know more or you have any particular feature requests, get in touch – @struanfraser.