KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库

太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的漂亮人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino。否则。出自本博客的文章拒绝转载或再转载,谢谢合作。

A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.

KeyboardJS

 

KeyboardJS is a easy to use keyboard wrapper. It features support for the following:

  • Advanced key combos - Support for advanced combos with ordered stages.
  • Key combo overlap prevention - Prevents against bindings with shorter combos firing when another binding with a longer combo, sharing the same keys, has already been executed.
  • Macro keys - Support for adding vurtual keys backed by a key combo instead of a physical key.
  • Keyboard locales - Support for multiple locales. Comes with US locale.

Examples

Key Binding

KeyboardJS.on('a', function() {
console.log('you pressed a!');
}); *** User presses 'a'
>>> 'you pressed a!'
*** User releases 'a'

Key Combo Binding

KeyboardJS.on('ctrl + m', function() {
console.log('ctrl m!');
}); //note the user can press the keys in any order
*** User presses 'ctrl' and 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'

Ordered Combo Binding

KeyboardJS.on('ctrl > m', function() {
console.log('ctrl m!');
}); *** User presses 'ctrl'
*** User presses 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm' //if the keys are pressed in the wrong order the binding will not be triggered
*** User presses 'm'
*** User presses 'ctrl' *** User releases 'm' and 'ctrl'

Overlap Prevention

KeyboardJS.on('ctrl > m', function() {
console.log('ctrl m!');
});
KeyboardJS.on('shift + ctrl > m', function() {
console.log('shift ctrl m!');
}); *** User presses 'ctrl'
*** User presses 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm' //note that shift ctrl m does not trigger the ctrl m binding
*** User presses 'shift' and 'ctrl'
*** User presses 'm'
>>> 'shift ctrl m!'
*** User releases 'shift', 'ctrl' and 'm'

Methods

KeyboardJS.on

Usage
KeyboardJS.on(string keyCombo[, function onDownCallback[, function onUpCallback]]) => object binding

Binds any key or key combo. See 'keyCombo' definition below for details. The onDownCallback is fired once the key or key combo becomes active. The onUpCallback is fired when the combo no longer active (a single key is released).

Both the onDownCallback and the onUpCallback are passed three arguments. The first is the key event, the second is the keys pressed, and the third is the key combo string.

Returned

Returns an object containing the following methods.

  • clear() - Removes the key or key combo binding.
  • on() - Allows you to bind to the keyup and keydown event of the given combo. An alternative to adding the onDownCallback and onUpCallback.

KeyboardJS.activeKeys

Usage
KeyboardJS.activeKeys() => array activeKeys

Returns an array of active keys by name.

KeyboardJS.clear

Usage
KeyboardJS.clear(string keyCombo)

Removes all bindings with the given key combo. See 'keyCombo' definition for more details.

Please note that if you are just trying to remove a single binding should use the clear method in the object returned by KeyboardJS.on instead of this. This function is for removing all binding that use a certain key.

KeyboardJS.clear.key

Usage
KeyboardJS.clear.key(string keyCombo)

Removes all bindings that use the given key.

KeyboardJS.locale

Usage
KeyboardJS.locale([string localeName]) => string localeName

Changes the locale keyboardJS uses to map key presses. Out of the box KeyboardJS only supports US keyboards, however it is possible to add additional locales via KeyboardJS.locale.register().

KeyboardJS.locale.register

Usage
KeyboardJS.locale.register(string localeName, object localeDefinition)

Adds new locale definitions to KeyboardJS.

KeyboardJS.macro

Usage
KeyboardJS.macro(string keyCombo, array keyNames)

Accepts a key combo and an array of key names to inject once the key combo is satisfied.

KeyboardJS.macro.remove

Usage
KeyboardJS.macro.remove(string keyCombo)

Accepts a key combo and clears any and all macros bound to that key combo.

KeyboardJS.key.name

Usage
KeyboardJS.key.name(number keyCode) => array keyNames

Accepts a key code and returns the key names defined by the current locale.

KeyboardJS.key.code

Usage
KeyboardJS.key.code(string keyName) => number keyCode

Accepts a key name and returns the key code defined by the current locale.

KeyboardJS.combo.parse

Usage
KeyboardJS.combo.parse(string keyCombo) => array keyComboArray

Parses a key combo string into a 3 dimensional array.

  • Level 1 - sub combos.
  • Level 2 - combo stages. A stage is a set of key name pairs that must be satisfied in the order they are defined.
  • Level 3 - each key name to the stage.

KeyboardJS.combo.stringify

Usage
KeyboardJS.combo.stringify(array keyComboArray) => string KeyCombo

Stringifys a parsed key combo.

Definitions

keyCombo

A string containing key names separated by whitespace, >+, and ,.

examples
  • 'a' - binds to the 'a' key. Pressing 'a' will match this keyCombo.
  • 'a, b' - binds to the 'a' and 'b' keys. Pressing either of these keys will match this keyCombo.
  • 'a + b' - binds to the 'a' and 'b' keys. Pressing both of these keys will match this keyCombo.
  • 'a + b, c + d' - binds to the 'a', 'b', 'c' and 'd' keys. Pressing either the 'a' key and the 'b' key, or the 'c' and the 'd' key will match this keyCombo.

localeDefinitions

An object that maps keyNames to their keycode and stores locale specific macros. Used for mapping keys on different locales.

example
{
"map": {
"65": ["a"],
"66": ["b"],
...
},
"macros": [
["shift + `", ["tilde", "~"]],
["shift + 1", ["exclamation", "!"]],
...
]
}

Language Support

KeyboardJS can support any locale, however out of the box it just comes with the US locale (for now..,). Adding a new locale is easy. Map your keyboard to an object and pass it to KeyboardJS.locale.register('myLocale', {/localeDefinition/}) then call KeyboardJS.locale('myLocale').

If you create a new locale please consider sending me a pull request or submit it to the issue tracker so I can add it to the library.

Credits

I made this to enable better access to key controls in my applications. I'd like to share it with fellow devs. Feel free to fork this project and make your own changes.

KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库的更多相关文章

  1. 现代前端库开发指南系列(二):使用 webpack 构建一个库

    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...

  2. Three.js开发指南---使用three.js里的各种光源(第三章)

    本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...

  3. js监听不到组合键

    我在js文件中写代码,监听 ctrl + enter 组合键,但是一直监听不到.只能监听到单个键. 后来我将监听的代码放到html页面中去,就能监听到了. 这个问题困扰我很久,记录下!

  4. -Three.js开发指南---用three.js创建你的第一个三维场景(第一章)

    本章主要做了下面的工作 1 生成一个简单的场景,该场景的物体只有平面和坐标轴 2 在第一个demo的基础上添加光源和方块物体,并生成阴影 3 在第二个demo的基础上,增加动画,使得方块进行旋转 4 ...

  5. Three.js开发指南---使用three.js的材质(第四章)

    材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基 ...

  6. 基于第三方开源库的OPC服务器开发指南(4)——后记:与另一个开源库opc workshop库相关的问题

    平心而论,我们从样例服务器的代码可以看出,利用LightOPC库开发OPC服务器还是比较啰嗦的,网上有人提出opc workshop库就简单很多,我千辛万苦终于找到一个05年版本的workshop库源 ...

  7. 基于第三方开源库的OPC服务器开发指南(3)——OPC客户端

    本篇将讲解如何编写一个OPC客户端程序测试我们在前文<基于第三方开源库的OPC服务器开发指南(2)——LightOPC的编译及部署>一篇建立的服务器.本指南的目的是熟悉OPC服务器的开发流 ...

  8. Node.js开发指南中的例子(mysql版)

    工作原因需要用到nodejs,于是找到了<node.js开发指南>这本书来看看,作者BYVoid 为清华大学计算机系的高材生,年纪竟比我还小一两岁,中华地广物博真是人才辈出,佩服. 言归正 ...

  9. 学习Nodejs:《Node.js开发指南》微博项目express2迁移至express4过程中填的坑

    <Node.js开发指南>项目地址https://github.com/BYVoid/microblog好不容易找到的基础版教程,但书中是基于express2的,而现在用的是express ...

随机推荐

  1. 软路由OpenWrt教程收集(插件开发教程,opkg安装软件教程)

    说明:现在几乎所有家庭级别的路由器都是基于OpenWrt进行衍生搭建的. https://openwrt.io/(极路由HiWifi创建的开源站点,极路由系统有这个衍生而来) http://www.o ...

  2. win7 下注册dll文件失败

    1.win7 下注册dll文件失败,提示模块“xx.dll”已加载,但找不到入口点DllRegisterServer 原因:该dll文件非可注册组件,没有包含DllRegisterServer函数,可 ...

  3. 给 DiscuzX3 缩略图添加水印

    Discuz X3 默认开启缩略图的时候水印只添加到原图上面,而缩略图上面无法进行水印图的添加,需要改下程序,方可给缩略图添加水印,需要修改2个地方: 1.打开 source\function\fun ...

  4. IntelliJ全家桶修改terminal字体的方法

    IntelliJ IDEA 设置Terminal 窗口字体大小 我在Setting中查看了所有和Terminal字样有关的设置,都没有找到设置字体大小的方法,原来Terminal也只需要设置Conso ...

  5. ISP模块之彩色图像增强--ACE算法 .

    ACE(Automatic Color Enhancement),自动色彩增强算法,是一种对于彩色图像增强十分行之有效的方法.它的改进算法以及快速实现在文章Automatic Color Enhanc ...

  6. golang sync.Cond 类

    众所周知,go语言在多线程方面的支持是十分完备的.在go语言sync包中提供了一个Cond类,这个类用于goroutine之间进行协作. 这个类并不复杂,只有三个函数,Broadcast() , Si ...

  7. CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程

    在前台配置完CKEditor和SWFUpload之后就可以满足基本的需求了 在这里,我配置的接收异步上传的图片的页面为upload.ashx 在这个ashx中对上传的图片处理的流程如下: contex ...

  8. 小计一次linux下渗透方法

    本文转自91ri 踩点 目标域名是XX.com 我们的目标是大站,所以主站一般都挺安全的,所以直接寻找二级目录,运气好时能找到一些开源的cms,运气更好点找到个dede啥的,那就…. 我们直接枚举他域 ...

  9. python 奇技淫巧

    列表内部的字典的value进行排序 li = [{a:1,b:2,c:3,d:4},{e:5,f:6,g:7,h:8}] li = [{"day":2},{"day&qu ...

  10. 应用程序之UIWebView的使用

    UIWebView简介 知识点总结 代码实现 一.UIWebView简介 1.是iOS内置的浏览器控件,可以浏览网页.打开文档等2.能够加载html/htm.pdf.docx.txt等格式的文件3.系 ...