A jQuery plugin providing multilingual onscreen keyboard for terminals and kiosks.
npm install mok-projectsh
`
Current Version
`sh
`
_If no local languages file is found, the keyboard will pull languages from the CDN._
The goal of this project is to materialize a well-styled, onscreen keyboard capable of supporting numerous languages fed from .klc files generated by Microsoft Keyboard Layout Creator. This has proven to be the most-reliable source of unicode data along with dead keys and ligature support but I am willing to make revisions if a better source is found. Typical use cases for this application include terminals, kiosks, and other touch-point devices. I hope to provide the community with a valuable resource that only grows better with time and your support!
Super Basic Demo
Current work is underway to develop a variant of the keyboard which is not only condensed in layout but also allows for the keyboard to be appended near the selected input element to facilitate direct entry into the selected field instead of using a modal and dedicated entry field. _(28 June 2017)_
Usage
To initiate an instance of the keyboard within your application you may include the following script:
`sh
`
#### Serving Languages
The keyboard will first search for the given language file in ./languages/ and if not found, will pull from the CDN.
Installation / Running
This project is built with Gulp which sits atop NodeJS.
Install Node.js
Update npm to the latest version and install dependencies.
`sh
$ npm install npm@latest -g
$ npm install
$ npm install gulp-cli -g
`
To enter develop mode and launch a server:
`sh
$ gulp develop
`
To issue a new build:
`sh
$ gulp build
`
Source maps may also be generated by appending the flag:
`sh
$ gulp develop --sourcemaps
`
#### Prerequisites / Dependencies
This project was built and tested on jQuery 3.2 and is fed .klc files from Microsoft Keyboard Layout Creator V1.4.
#### Options
| Option | Default Value | Information |
|--------|---------------|-------------|
| acceptColor | '#2ECC71' | Defines background color of accept button. May pass hex string or specific color i.e. 'blue'. |
| acceptTextColor | '#FFFFFF' | Defines text color of accept button. May pass hex string or specific color i.e. 'white'. |
| allowEnterAccept | true | Accept keyboard input with hardware keyboard [Enter] key. |
| allowEscapeCancel | true | Cancel keyboard input with hardware keyboard [Escape] key. |
| blackoutColor | '25, 25, 25, 0.9' | Defines color and opacity of blackout background. Passed as RGBA string. |
| cancelColor | '#E74C3C' | Defines background color of cancel button. May pass hex string or specific color i.e. 'blue'. |
| cancelTextColor | '#FFFFFF' | Defines text color of cancel button. May pass hex string or specific color i.e. 'white'. |
| inputFieldRegex | { number: /^(-)?(((\d+)|(\d+\.(\d+)?)|(\.(\d+)?))(eE?(\d+)?)?)?$/ } | Define regular expressions for the accepted patterns of input field types. These patterns serve to further restrict browser-specific prepopulated patterns. For example, you may NOT generate a regex to allow letters in an input[type="number"]. Ensure these are whole pattern matches handled by the prepension and appension of ^ and $. The object keys must match identically to the input type. |
| inputType | 'text, textarea, number, password, search, tel, url, contenteditable' | May pass individual input types or comma-separated values. |
| isPermanentUppercase | false | When set true, the caps lock button will remain enabled permanently. |
| keyCharacterRegex | { number: /[0-9]|[eE]|\.|\+|\-/, tel: /[0-9]|\.|\+|\-|\#|\(|\)/ } | Define regular expressions for input field types. These pertain to the individual key pressed, not the whole accepted pattern. The object keys must match identically to the input type. |
| keyColor | '#E0E0E0' | Defines background color of keys. May pass hex string or specific color i.e. 'blue'. |
| keyTextColor | '#555555' | Defines text color used on keys. May pass hex string or specific color i.e. 'blue'. |
| keyboardPosition | 'bottom' | Locate the keyboard at page 'top', 'middle', or 'bottom' with a default edge padding of 20px. |
| language | none | Given as a string with comma-separated values i.e. 'us, spanish, arabic, russian'. These names correspond to the system file name. If you would like to display a custom language name on the language toggle key, you may enter the language such as 'arabic:العَرَبِيَّة'. Note, you must enable showSelectedLanguage: true. |
| languageKeyTextColor | #3498db | Defines text color of language button. May pass hex string or specific color i.e. 'white'. |
| showSelectedLanguage | false | This option labels the language button with the currently-selected language. The name is derived from the actual language file name by default. If you would like to display a custom language name you may map the language such as 'arabic:العَرَبِيَّة'. |
| specifiedFieldsOnly | false | If this option is set to true, the keyboard will only be triggered for those fields which carry: data-trigger-keyboard="true" as an HTML attribute. |
#### Callbacks
| Name | Information |
|------|-------------|
| altKey | Define action of [Alt] key |
| ctrlKey | Define action of [Ctrl] key |
| enterKey | Define action of [Enter] key |
| languageKey | Define action of [Language] key |
| spareKey | Define action of [Spare] key |
| tabKey | Define action of [Tab] key |
_You may change the user-displayed names of any keys in keyboard.js without affecting functionality._
Supported Keyboards
* Albanian
* Arabic
* Azeri-Cyrillic
* Azeri-Latin
* Bashkir
* Belarusian
* Belgian
* Bengali
* Bosnian
* Bulgarian
* Croatian
* Czech-Programmer
* Czech
* Danish
* Dutch
* Estonian
* Faeroese
* Finnish-Sami
* Finnish
* French
* Gaelic
* Georgian
* German
* Greek
* Greenlandic
* Gujarati
* Hausa
* Hebrew
* Hindi
* Hungarian
* Icelandic
* Igbo
* Irish
* Italian
* Japanese-Latin
* Kannada
* Kazakh
* Khmer
* Korean-Latin
* Kyrgyz
* Languages
* Lao
* Latvian
* Lithuanian
* Macedonian
* Malayalam
* Maltese
* Maori
* Marathi
* Mongolian
* Nepali
* Norwegian
* Oriya
* Pashto
* Persian
* Polish
* Portguese-Brazil
* Portguese
* Punjabi
* Romanian
* Russian
* Serbian
* Sesotho-Sa-Leboa
* Setswana
* Sinhala
* Slovak
* Slovenian
* Sorbian
* Spanish
* Swedish
* Swiss-French
* Swiss-German
* Syriac
* Tajik
* Tamil
* Tatar
* Telugu
* Thai-Kedmanee
* Thai-Pattachote
* Tibetan
* Turkish-F
* Turkish-Q
* Turkmen
* Uk
* Ukranian
* Urdu
* US-Dvorak
* US
* Uyghur
* Uzbek
* Vietnamese
* Wolof
* Yakut
* Yoruba
Customization
If you find that a key position is not where you prefer or you'd like to add additional functionality, you may simply modify the .klc file of your choosing or replicate it as your own version. Depending on the language selected, there may be three different tables you can modify. These include LAYOUT which contains standard keys, DEADKEYS which contains combinations such as `a + = à``, and LIGATURE which contains specific character combinations such as `a + e = æ`. Standard keys may be modified, starting in column 4. Modifying anything prior to this will cause issues with the way information is parsed from the file. To eliminate a specific character, replace the unicode value with `-1`. Keys with `@` indicate a dead key combination is possible. You may append this symbol to the end of a unicode value and add an entry in the DEADKEY table. Columns containing `%%` indicate that key ligature occurs i.e. several unicode values are combined to form that key. These may also be revised by modifying / adding entries in the LIGATURE table.
For example, you might have the following line:
| SC | VC | Cap | 0 | 1 | 2 | 6 | |
|----|----|-----|---|---|---|---|-|
| 04 | 3 | 0 | 3 | 0023 | -1 | 00a3 | // DIGIT THREE, NUMBER SIGN, , POUND SIGN |
You decide for some reason you'd like to replace the NUMBER SIGN with EXCLAMATION MARK so you might modify the table as such:
| SC | VC | Cap | 0 | 1 | 2 | 6 | |
|----|----|-----|---|---|---|---|-|
| 04 | 3 | 0 | 3 | 0021 | -1 | 00a3 | // DIGIT THREE, EXCLAMATION MARK, , POUND SIGN |
It should be noted that anything after `//`` is for your own reference and is not used in code.