Skip to main content
Email Password   helpLost your password?
Differences between the packages:
Full:
Contains the development release, as is. It includes layouts sources and setup utility.
Compact:
Has the same features as the full release, but all scripts are packed and obfuscated with Tricky Scripter.
Lite:
Has all scripts packed, as in the Compact package, and does not include setup utility and layouts sources.
TinyMCE, TinyMCE 3, Xinha:
Plug-in for the corresponding WISIWYG editors, built from the Compact package.

VirtualKeyboard screenshot

Introduction

Virtual Keyboard is a great tool when you can't install or use additional keyboard layouts bundled with your OS. For example, you're at the internet cafe where only En/US layout is available and you want to write some letters to your Russian, Korean, or Japanese friends. Yes, you can just transliterate your writing, but this will take much more time than you would ever expect, and makes reading boring.

If this is the case, open the VirtualKeyboard site and begin typing. It will make the text input as comfortable, as with the native keyboard layout.

You might want to integrate such a keyboard in your own application, like in your search engine, forum, webmail system, or something else. This is a wise decision - a tiny app will make life easier for you and your customers.

Virtual Keyboard features

Using the code

Including keyboard on the page

  1. Add the following line to the head:
    2. <SCRIPT src="vk_loader.js" type="text/javascript"></SCRIPT>
    vk_loader.js has two optional params:
    vk_skin
    points to the folder in the /css/ directory, which contains skin definitions
    vk_layout
    pass layout name to enable on the start, default is the first loaded one

    Example:

    <SCRIPT src="vk_loader.js?vk_layout=AM%20Armenian%20Eastern&vk_skin=soberTouch" 
        type="text/javascript"></SCRIPT>
  2. Add the following lines at the page with the text fields:
    3. VirtualKeyboard.toggle('target_input_field_id','keyboard_holder_id');

    I.e., I use it in the event handler to open the keyboard on button click

Yes, that's all. No need to write any custom code, or whatever else. The solution is really solid.

Using IME input

Let's type 'hello' - ni hao - in Chinese using the Chinese Pinyin layout. Assume, you've opened a page with keyboard and selected a pinyin layout from the keyboard dropdown list.

The same applies to other IMEs, they might have or have no toolbar, but they will work in mostly the same way.

Setup layouts

Most often, you have no need for all the layouts, and then you can make a smaller pack.

Local setup

  1. Launch the /setup/in/setup.html script in IE6 or IE7
  2. Select the desired layouts and press the 'Process selected' button
  3. Copy the layouts from /setup/out/layouts.js to /layouts/layouts.js

Server setup (PHP required)

  1. Launch the /setup/in/setup.php script
  2. Select the desired layouts, and select the 'Install' checkbox
  3. Check the 'install' checkbox to attempt to copy the layouts from /setup/out/layouts.js to /layouts/layouts.js
  4. Press the 'Process selected' button

That's it. If you don't see any error messages, then you've successfully created a new layouts bundle.

Developing new layouts

Beginning

Any new layout should be described in a .klc file, built using the Microsoft Keyboard Layout Creator tool. Using this, you'll assign letters and symbols to the keyboard keys, then save it to a .klc file in the /setup/in/ folder. Done, you've created a new layout for the VirtualKeyboard. If you aim to add some IME, please refer to the section below. If not, refer to the "Setup layouts" section above.

Adding IME

If you'd like developing the advanced keyboard layout, you have to write some input processing code and place it on the correct place(s) under the /setup folder.

Setup folder structure

/in
Place for the .klc source files
/in/addons
Contains files, named exactly as the target country in the locale code (e.g., for ko-KR, it is KR). It keeps language-wide data, i.e., hieroglyph alphabets.
/in/addons/callbacks
Contains files, named as the layout file name (e.g., chinese-cangjie.js) and contains layout-dependent JS code in the following format: 
{'activate' : function () {
   // optional method
   // called on the layout activation time
   // here you could set some initial state for the IME and layout
 }
,'charProcessor' : function (chr, buf) {
   // required method
   // called on the each keypress
   // used for input transformation, based on the current char and existing buffer
   // should return ['new string', selection length]
   return [buf+chr, 0]
 }
}
/out
Contains the compiled layouts.js file, ready to be used with the VirtualKeyboard.

License

Note: This software is protected by patent No.2009611147 issued on 20.02.2009 by Russian Federal Service for Intellectual Property Patents and Trademarks.

Free license

Keyboard is distributed under LGPL/BSD license with these additional restrictions:

  1. Published keyboard should contain the visible copyright information and active link to the Official page.
  2. Custom keyboard design should keep copyright visible and accessible.

Commercial license

If you'd like to remove copyrights information from the keyboard UI, it's a good idea to get the commercial license. Please contact me and we'll discuss this.

Services offered

If you have anything you want to see in the keyboard, we offer software/framework integrating services, development of custom layouts and keyboard modules, and so on. Feel free to contact me and I'll take a look at solving your tasks in the best way.

Credits

Sites, using VirtualKeyboard

Competitors

CodeProject already has a similar tool - http://www.codeproject.com/jscript/jvk.asp, but it lacks in the following aspects:

  1. Keyboard look could not be customized easily
  2. Keyboard layouts are hard to create
  3. Complicated installation

SmartLink has the VirtualKeyboard too, but it is not so good either:

  1. It is commercial
  2. It has keyboard layouts in images
  3. It does process deadkeys in a weird way
  4. It does not support normal text edit workflow (at least, in FF, it allows to append input chars only)

Gate2Home is nicer of ones, but it has limitations too:

  1. Not portable, you can not set it up on a local site
  2. Page is full of ads
  3. Keyboard reload take ages to complete (the whole page is reloaded)

History

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralChanging layout Pin
NautTboy		12:49 19 Jun '09  
GeneralRe: Changing layout Pin
WingedFox		6:04 29 Jun '09  
GeneralCan it be added to MS Windows keyboard layout Pin
NautTboy		16:37 14 May '09  
GeneralRe: Can it be added to MS Windows keyboard layout Pin
WingedFox		19:55 14 May '09  
GeneralRe: Can it be added to MS Windows keyboard layout Pin
NautTboy		16:18 15 May '09  
Generalembeded to phpfreechat Pin
NautTboy		13:03 7 Apr '09  
GeneralRe: embeded to phpfreechat Pin
WingedFox		1:38 8 Apr '09  
GeneralRe: embeded to phpfreechat Pin
NautTboy		8:01 11 Apr '09  
GeneralRe: embeded to phpfreechat Pin
WingedFox		20:14 12 Apr '09  
GeneralRe: embeded to phpfreechat Pin
NautTboy		9:22 13 Apr '09  
GeneralRe: embeded to phpfreechat Pin
WingedFox		23:25 13 Apr '09  
GeneralRe: embeded to phpfreechat Pin
NautTboy		10:37 14 Apr '09  
GeneralRe: embeded to phpfreechat Pin
WingedFox		0:06 16 Apr '09  
GeneralRe: embeded to phpfreechat Pin
NautTboy		15:58 16 Apr '09  
GeneralRe: embeded to phpfreechat Pin
WingedFox		22:58 19 Apr '09  
QuestionSGCaps not working for Hebrew Pin
eesheesh		2:34 20 Dec '08  
AnswerRe: SGCaps not working for Hebrew Pin
WingedFox		21:33 21 Dec '08  
GeneralRe: SGCaps not working for Hebrew Pin
eesheesh		11:07 22 Dec '08  
GeneralRe: SGCaps not working for Hebrew Pin
WingedFox		21:24 22 Dec '08  
AnswerRe: SGCaps not working for Hebrew Pin
WingedFox		4:59 10 Mar '09  
AnswerRe: SGCaps not working for Hebrew Pin
eesheesh		5:36 10 Mar '09  
GeneralRe: SGCaps not working for Hebrew Pin
WingedFox		8:59 10 Mar '09  
AnswerRe: SGCaps not working for Hebrew Pin
eesheesh		9:18 11 Mar '09  
GeneralRe: SGCaps not working for Hebrew Pin
WingedFox		11:51 12 Mar '09  
GeneralRe: SGCaps not working for Hebrew Pin
eesheesh		10:05 14 Mar '09  
Last Visit: 20:00 20 Nov '09     Last Update: 20:00 20 Nov '09 12345678 Next »


Last Updated 25 Mar 2009 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009